diff --git a/site/components/ButtonLink.tsx b/site/components/ButtonLink.tsx
index 24f4ba94..3022095a 100644
--- a/site/components/ButtonLink.tsx
+++ b/site/components/ButtonLink.tsx
@@ -18,7 +18,7 @@ export default function ButtonLink({
   return (
     <Link
       href={href}
-      className={`inline-block h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
+      className={`inline-block px-4 py-2 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
     >
       {children}
     </Link>
diff --git a/site/components/Community.tsx b/site/components/Community.tsx
index 21e1aee0..0c0abd47 100644
--- a/site/components/Community.tsx
+++ b/site/components/Community.tsx
@@ -60,10 +60,13 @@ export default function Community() {
 
   return (
     <Container>
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
+      <h2
+        className="text-3xl font-bold text-primary dark:text-primary-dark"
+        id="community"
+      >
         Community
       </h2>
-      <p className="text-lg mt-8 ">
+      <p className="text-lg mt-2">
         We are growing. Get in touch or become a contributor!
       </p>
       <div className="flex justify-center mt-12">
diff --git a/site/components/Features.tsx b/site/components/Features.tsx
index 79e1bacc..835336e5 100644
--- a/site/components/Features.tsx
+++ b/site/components/Features.tsx
@@ -40,17 +40,17 @@ const features: { title: string; description: string; icon: string }[] = [
 export default function Features() {
   return (
     <Container>
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark">
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark" id="how-portaljs-works">
         How PortalJS works?
       </h2>
-      <p className="text-lg mt-8">
+      <p className="text-lg mt-2">
         PortalJS is built in JavaScript and React on top of the popular Next.js
         framework, assuming a "decoupled" approach where the frontend is a
         separate service from the backend and interacts with backend(s) via an
         API. It can be used with any backend and has out of the box support for
         CKAN.
       </p>
-      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 ">
         {features.map((feature, i) => (
           <div
             key={`feature-${i}`}
diff --git a/site/components/GalleryItem.tsx b/site/components/GalleryItem.tsx
deleted file mode 100644
index 12ffe210..00000000
--- a/site/components/GalleryItem.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-const IconBeaker = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
-    />
-  </svg>
-);
-
-const IconDocs = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
-    />
-  </svg>
-);
-
-const IconCode = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
-    />
-  </svg>
-);
-
-const ActionButton = ({ title, Icon, href, className = '' }) => (
-  <a
-    title={title}
-    target="_blank"
-    href={href}
-    className={`rounded-full p-2 hover:bg-secondary transition-all duration-250 ${className}`}
-  >
-    <Icon />
-  </a>
-);
-
-export default function GalleryItem({ item }) {
-  return (
-    <a
-      className="rounded overflow-hidden group relative border-1 shadow-lg"
-      target="_blank"
-      href={item.href}
-    >
-      <div
-        className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
-        style={{ backgroundImage: `url(${item.image})` }}
-      >
-        <div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
-      </div>
-      <div>
-        <div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
-          <div className="text-center text-primary-dark">
-            <span className="text-xl font-semibold">{item.title}</span>
-            <p className="text-base font-medium">{item.description}</p>
-            <div className="flex justify-center mt-2">
-              <ActionButton Icon={IconBeaker} title="Demo" href={item.href} />
-              {item.docsUrl && (
-                <ActionButton
-                  Icon={IconDocs}
-                  title="Documentation"
-                  href={item.docsUrl}
-                  className="mx-5"
-                />
-              )}
-              {item.sourceUrl && (
-                <ActionButton
-                  Icon={IconCode}
-                  title="Source code"
-                  href={item.sourceUrl}
-                />
-              )}
-
-              {/* Maybe: Blog post */}
-            </div>
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}
diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx
index 2721ebee..d00f7c22 100644
--- a/site/components/Hero.tsx
+++ b/site/components/Hero.tsx
@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import { Fragment, useRef } from 'react';
+import { useRef } from 'react';
 import ButtonLink from './ButtonLink';
 import NewsletterForm from './NewsletterForm';
+import Image from 'next/image';
+import DatahubExampleImg from "@/public/images/showcases/datahub.png"
 
 const codeLanguage = 'javascript';
 const code = `export default {
@@ -39,10 +39,8 @@ export function Hero() {
     >
       <div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
         {/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
-        {/* <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"> */}
-        <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-4xl lg:grid-cols-1 lg:px-8 xl:gap-x-16 xl:px-12">
-          {/* <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left"> */}
-          <div className="relative mb-10 lg:mb-0 md:text-center lg:text-center">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
+          <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left">
             <div role="heading">
               <h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
                 The JavaScript framework for data portals
@@ -56,7 +54,15 @@ export function Hero() {
               Get started
             </ButtonLink>
 
-            <div className="md:max-w-md mx-auto">
+            <ButtonLink
+              style="secondary"
+              className="mt-8 ml-3"
+              href="https://github.com/datopian/portaljs"
+            >
+              View on GitHub
+            </ButtonLink>
+
+            <div className="md:max-w-md mx-auto lg:mx-0 ">
               <NewsletterForm />
             </div>
             <p className="my-10 text-l tracking-wide">
@@ -75,84 +81,13 @@ export function Hero() {
               </a>
             </p>
           </div>
-          {/* <div className="relative">
+          <div className="relative">
             <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
               <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0" />
               <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0" />
-              <div className="pl-4 pt-4">
-                <TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
-                <div className="mt-4 flex space-x-2 text-xs">
-                  {tabs.map((tab) => (
-                    <div
-                      key={tab.name}
-                      className={clsx(
-                        'flex h-6 rounded-full',
-                        tab.isActive
-                          ? 'bg-gradient-to-r from-sky-400/30 via-sky-400 to-sky-400/30 p-px font-medium text-sky-300'
-                          : 'text-slate-500'
-                      )}
-                    >
-                      <div
-                        className={clsx(
-                          'flex items-center rounded-full px-2.5',
-                          tab.isActive && 'bg-slate-800'
-                        )}
-                      >
-                        {tab.name}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-6 flex items-start px-1 text-sm">
-                  <div
-                    aria-hidden="true"
-                    className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600"
-                  >
-                    {Array.from({
-                      length: code.split('\n').length,
-                    }).map((_, index) => (
-                      <Fragment key={index}>
-                        {(index + 1).toString().padStart(2, '0')}
-                        <br />
-                      </Fragment>
-                    ))}
-                  </div>
-                  <Highlight
-                    {...defaultProps}
-                    code={code}
-                    language={codeLanguage}
-                    theme={undefined}
-                  >
-                    {({
-                      className,
-                      style,
-                      tokens,
-                      getLineProps,
-                      getTokenProps,
-                    }) => (
-                      <pre
-                        className={clsx(className, 'flex overflow-x-auto pb-6')}
-                        style={style}
-                      >
-                        <code className="px-4">
-                          {tokens.map((line, lineIndex) => (
-                            <div key={lineIndex} {...getLineProps({ line })}>
-                              {line.map((token, tokenIndex) => (
-                                <span
-                                  key={tokenIndex}
-                                  {...getTokenProps({ token })}
-                                />
-                              ))}
-                            </div>
-                          ))}
-                        </code>
-                      </pre>
-                    )}
-                  </Highlight>
-                </div>
-              </div>
+                <Image src={DatahubExampleImg} alt="opendata.datahub.io" />
             </div>
-          </div> */}
+          </div>
         </div>
       </div>
     </div>
diff --git a/site/components/Layout.tsx b/site/components/Layout.tsx
index 002c59f9..4c15e75a 100644
--- a/site/components/Layout.tsx
+++ b/site/components/Layout.tsx
@@ -5,7 +5,8 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
 import Nav from './Nav';
-import { SiteToc } from '@/components/SiteToc';
+import { Hero } from './Hero';
+import { Navigation } from './Navigation';
 
 function useTableOfContents(tableOfContents) {
   const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
@@ -54,14 +55,15 @@ export default function Layout({
   children,
   title,
   tableOfContents = [],
-  urlPath,
-  sidebarTree = []
+  isHomePage = false,
+  sidebarTree = [],
 }: {
   children;
   title?: string;
   tableOfContents?;
   urlPath?: string;
   sidebarTree?: [];
+  isHomePage?: boolean;
 }) {
   // const { toc } = children.props;
   const { theme, setTheme } = useTheme();
@@ -83,7 +85,72 @@ export default function Layout({
       {title && <NextSeo title={title} />}
       <Nav />
       <div className="mx-auto p-6 bg-background dark:bg-background-dark">
-        {children}
+        {isHomePage && <Hero />}
+
+        <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
+          {!!sidebarTree.length && (
+            <div className="hidden lg:relative lg:block lg:flex-none">
+              <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
+              <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+              <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
+              <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden py-16 pl-0.5">
+                <Navigation
+                  navigation={sidebarTree}
+                  className="w-64 pr-8 xl:w-72 xl:pr-16"
+                />
+              </div>
+            </div>
+          )}
+          <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 ">
+            {children}
+          </div>
+          {/** TABLE OF CONTENTS */}
+          <div className="hidden xl:sticky xl:right-0 xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:mb-16">
+            {tableOfContents.length > 0 && siteConfig.tableOfContents && (
+              <nav aria-labelledby="on-this-page-title" className="w-56">
+                <h2 className="font-display text-sm font-medium text-primary dark:text-primary-dark">
+                  On this page
+                </h2>
+                <ol className="mt-4 space-y-4 text-sm">
+                  {tableOfContents.map((section) => (
+                    <li key={section.id}>
+                      <h3>
+                        <Link
+                          href={`#${section.id}`}
+                          className={
+                            isActive(section)
+                              ? 'text-secondary font-semibold'
+                              : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
+                          }
+                        >
+                          {section.title}
+                        </Link>
+                      </h3>
+                      {section.children && section.children.length > 0 && (
+                        <ol className="mt-4 space-y-4 pl-5 text-slate-500 dark:text-slate-400">
+                          {section.children.map((subSection) => (
+                            <li key={subSection.id}>
+                              <Link
+                                href={`#${subSection.id}`}
+                                className={
+                                  isActive(subSection)
+                                    ? 'text-secondary font-semibold'
+                                    : 'hover:text-slate-600 dark:hover:text-slate-300'
+                                }
+                              >
+                                {subSection.title}
+                              </Link>
+                            </li>
+                          ))}
+                        </ol>
+                      )}
+                    </li>
+                  ))}
+                </ol>
+              </nav>
+            )}
+          </div>
+        </div>
       </div>
       <footer className="flex items-center justify-center w-full h-24 border-t dark:border-slate-900 bg-background dark:bg-background-dark">
         <a
@@ -104,58 +171,6 @@ export default function Layout({
           />
         </a>
       </footer>
-      {/** TABLE OF CONTENTS */}
-      {tableOfContents.length > 0 && siteConfig.tableOfContents && (
-        <div className="hidden xl:fixed xl:right-0 xl:top-[4.5rem] xl:block xl:w-1/5 xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6 xl:mb-16">
-          <nav aria-labelledby="on-this-page-title" className="w-56">
-            <h2 className="font-display text-md font-medium text-primary dark:text-primary-dark">
-              On this page
-            </h2>
-            <ol className="mt-4 space-y-3 text-sm">
-              {tableOfContents.map((section) => (
-                <li key={section.id}>
-                  <h3>
-                    <Link
-                      href={`#${section.id}`}
-                      className={
-                        isActive(section)
-                          ? 'text-secondary'
-                          : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
-                      }
-                    >
-                      {section.title}
-                    </Link>
-                  </h3>
-                  {section.children && section.children.length > 0 && (
-                    <ol className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400">
-                      {section.children.map((subSection) => (
-                        <li key={subSection.id}>
-                          <Link
-                            href={`#${subSection.id}`}
-                            className={
-                              isActive(subSection)
-                                ? 'text-secondary'
-                                : 'hover:text-slate-600 dark:hover:text-slate-300'
-                            }
-                          >
-                            {subSection.title}
-                          </Link>
-                        </li>
-                      ))}
-                    </ol>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </nav>
-        </div>
-      )}
-      {/* LHS NAVIGATION */}
-      {/* {showSidebar && ( */}
-        <div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
-          <SiteToc currentPath={urlPath} nav={sidebarTree} />
-        </div>
-      {/* )} */}
     </>
   );
 }
diff --git a/site/components/Nav.tsx b/site/components/Nav.tsx
index 18ee469a..296f6fda 100644
--- a/site/components/Nav.tsx
+++ b/site/components/Nav.tsx
@@ -5,6 +5,7 @@ import { siteConfig } from '../config/siteConfig';
 import MobileNavigation from './MobileNavigation';
 import NavItem from './NavItem';
 import ThemeSelector from './ThemeSelector';
+import GitHubButton from 'react-next-github-btn';
 // import { SearchContext, SearchField } from "./search/index.jsx";
 
 // const Search = SearchContext(siteConfig.search?.provider);
@@ -110,16 +111,6 @@ export default function Nav() {
           </Search>
         )} */}
         <ThemeSelector />
-        {siteConfig.github && (
-          <Link
-            href={siteConfig.github}
-            target="_blank"
-            className="group"
-            aria-label="GitHub"
-          >
-            <GitHubIcon className="h-6 w-6 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
-          </Link>
-        )}
         {siteConfig.discord && (
           <Link
             href={siteConfig.discord}
@@ -130,6 +121,21 @@ export default function Nav() {
             <DiscordIcon className="h-8 w-8 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
           </Link>
         )}
+        {siteConfig.github && (
+          <div className="mt-1">
+            <
+              // @ts-ignore
+              GitHubButton
+              href={siteConfig.github}
+              data-color-scheme="no-preference: light; light: light; dark: dark;"
+              data-size="large"
+              data-show-count="true"
+              aria-label="Star PortalJS on GitHub"
+            >
+              Stars
+            </GitHubButton>
+          </div>
+        )}
       </div>
     </header>
   );
diff --git a/site/components/NavItem.tsx b/site/components/NavItem.tsx
index 1fc597e2..97ab98ab 100644
--- a/site/components/NavItem.tsx
+++ b/site/components/NavItem.tsx
@@ -1,8 +1,8 @@
-import { Menu, Transition } from "@headlessui/react";
-import Link from "next/link";
-import { Fragment, useRef, useState } from "react";
+import { Menu, Transition } from '@headlessui/react';
+import Link from 'next/link';
+import { Fragment, useRef, useState } from 'react';
 
-import BaseLink from "./BaseLink";
+import BaseLink from './BaseLink';
 
 export default function NavItem({ item }) {
   const dropdownRef = useRef(null);
@@ -21,14 +21,14 @@ export default function NavItem({ item }) {
 
   return (
     <Menu as="div" className="relative">
-      <Menu.Button
-        onClick={() => setshowDropdown(!showDropdown)}
-        onMouseEnter={openDropdown}
-        onMouseLeave={closeDropdown}
-      >
-        {Object.prototype.hasOwnProperty.call(item, "href") ? (
+      <Menu.Item>
+        {Object.prototype.hasOwnProperty.call(item, 'href') ? (
           <Link
             href={item.href}
+            onMouseEnter={openDropdown}
+            onMouseLeave={closeDropdown}
+            target={item.target || '_self'}
+            onClick={() => setshowDropdown(!showDropdown)}
             className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
           >
             {item.name}
@@ -38,9 +38,9 @@ export default function NavItem({ item }) {
             {item.name}
           </div>
         )}
-      </Menu.Button>
+      </Menu.Item>
 
-      {Object.prototype.hasOwnProperty.call(item, "subItems") && (
+      {Object.prototype.hasOwnProperty.call(item, 'subItems') && (
         <Transition
           as={Fragment}
           show={showDropdown}
@@ -58,11 +58,10 @@ export default function NavItem({ item }) {
             onMouseLeave={closeDropdown}
           >
             {item.subItems.map((subItem) => (
-              <Menu.Item
-                key={subItem.name}
-                >
+              <Menu.Item key={subItem.name}>
                 <BaseLink
                   href={subItem.href}
+                  target={item.target || '_self'}
                   className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
                   onClick={() => setshowDropdown(false)}
                 >
diff --git a/site/components/Navigation.jsx b/site/components/Navigation.jsx
new file mode 100644
index 00000000..7f5000df
--- /dev/null
+++ b/site/components/Navigation.jsx
@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import clsx from 'clsx';
+
+export function Navigation({ navigation, className }) {
+  let router = useRouter();
+
+  const currentPath = router.asPath.split(/[#?]/)[0];
+
+  return (
+    <nav className={clsx('text-base lg:text-sm', className)}>
+      <ul role="list" className="space-y-9">
+        {navigation.map((section) => (
+          <li key={section.title}>
+            <h2 className="font-display font-medium text-primary dark:text-primary-dark">
+              {section.title}
+            </h2>
+            <ul
+              role="list"
+              className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
+            >
+              {section.links.map((link) => {
+                const linkPath = link.href.split(/[#?]/)[0];
+                return (
+                  <li key={link.href} className="relative">
+                    <Link
+                      href={link.href}
+                      className={clsx(
+                        'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
+                        linkPath === currentPath
+                          ? 'font-semibold text-secondary before:bg-secondary'
+                          : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
+                      )}
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/site/components/NewsletterForm.tsx b/site/components/NewsletterForm.tsx
index f372ae6f..b6bbbf05 100644
--- a/site/components/NewsletterForm.tsx
+++ b/site/components/NewsletterForm.tsx
@@ -33,7 +33,7 @@ export default function NewsletterForm() {
                   type="email"
                   required
                   placeholder="Your email"
-                  className="input entry__field !w-full px-2 py-3 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
+                  className="input entry__field !w-full px-2 py-2 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
                 />
 
                 <label className="entry__error entry__error--primary px-2 text-red-400 text-sm"></label>
@@ -43,7 +43,7 @@ export default function NewsletterForm() {
             <input type="hidden" name="form-name" value="get-updates" />
             <button
               type="submit"
-              className="sib-form-block__button sib-form-block__button-with-loader h-12 flex-none mt-3 px-6 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
+              className="sib-form-block__button sib-form-block__button-with-loader flex-none mt-3 px-4 py-2 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
             >
               <svg
                 className="icon clickable__icon progress-indicator__icon sib-hide-loader-icon hidden"
diff --git a/site/components/Gallery.tsx b/site/components/Showcases.tsx
similarity index 55%
rename from site/components/Gallery.tsx
rename to site/components/Showcases.tsx
index 908fd556..c924b1cb 100644
--- a/site/components/Gallery.tsx
+++ b/site/components/Showcases.tsx
@@ -1,5 +1,5 @@
 import Container from './Container';
-import GalleryItem from './GalleryItem';
+import ShowcasesItem from './ShowcasesItem';
 
 const items = [
   {
@@ -27,39 +27,21 @@ const items = [
     image: '/images/showcases/datahub.png',
     description: 'Demo Data Portal by DataHub',
   },
-  {
-    title: 'Example: Simple Data Catalog',
-    href: 'https://example.portaljs.org/',
-    image: '/images/showcases/example-simple-catalog.png',
-    description: 'Simple data catalog',
-    sourceUrl:
-      'https://github.com/datopian/portaljs/tree/main/examples/simple-example',
-    docsUrl: '/docs/example-data-catalog',
-  },
-  {
-    title: 'Example: Portal with CKAN',
-    href: 'https://ckan-example.portaljs.org/',
-    image: '/images/showcases/example-ckan.png',
-    description: 'Simple portal with data coming from CKAN',
-    sourceUrl:
-      'https://github.com/datopian/portaljs/tree/main/examples/ckan-example',
-    docsUrl: '/docs/example-ckan',
-  },
 ];
 
-export default function Gallery() {
+export default function Showcases() {
   return (
     <Container>
       <h2
         className="text-3xl font-bold text-primary dark:text-primary-dark"
-        id="gallery"
+        id="showcases"
       >
-        Gallery
+        Showcases
       </h2>
-      <p className="text-lg mt-8">Discover what's being powered by PortalJS</p>
-      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <p className="text-lg mt-2">Discover what's being powered by PortalJS</p>
+      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2">
         {items.map((item) => {
-          return <GalleryItem item={item} />;
+          return <ShowcasesItem item={item} />;
         })}
       </div>
     </Container>
diff --git a/site/components/ShowcasesItem.tsx b/site/components/ShowcasesItem.tsx
new file mode 100644
index 00000000..ad1d0ba7
--- /dev/null
+++ b/site/components/ShowcasesItem.tsx
@@ -0,0 +1,24 @@
+export default function ShowcasesItem({ item }) {
+  return (
+    <a
+      className="rounded overflow-hidden group relative border-1 shadow-lg"
+      target="_blank"
+      href={item.href}
+    >
+      <div
+        className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
+        style={{ backgroundImage: `url(${item.image})` }}
+      >
+        <div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
+      </div>
+      <div>
+        <div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
+          <div className="text-center text-primary-dark">
+            <span className="text-xl font-semibold">{item.title}</span>
+            <p className="text-base font-medium">{item.description}</p>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}
diff --git a/site/components/SiteToc.tsx b/site/components/SiteToc.tsx
deleted file mode 100644
index 908f5c6d..00000000
--- a/site/components/SiteToc.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import Link from 'next/link.js';
-import clsx from 'clsx';
-import { Disclosure, Transition } from '@headlessui/react';
-
-export interface NavItem {
-  name: string;
-  href: string;
-}
-
-export interface NavGroup {
-  name: string;
-  path: string;
-  level: number;
-  children: Array<NavItem | NavGroup>;
-}
-
-interface Props {
-  currentPath: string;
-  nav: Array<NavItem | NavGroup>;
-}
-
-function isNavGroup(item: NavItem | NavGroup): item is NavGroup {
-  return (item as NavGroup).children !== undefined;
-}
-
-function navItemBeforeNavGroup(a, b) {
-  if (isNavGroup(a) === isNavGroup(b)) {
-    return 0;
-  }
-  if (isNavGroup(a) && !isNavGroup(b)) {
-    return 1;
-  }
-  return -1;
-}
-
-function sortNavGroupChildren(items: Array<NavItem | NavGroup>) {
-  return items.sort(
-    (a, b) => navItemBeforeNavGroup(a, b) || a.name.localeCompare(b.name)
-  );
-}
-
-export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
-  return (
-    <nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
-      {/* {sortNavGroupChildren(nav).map((n) => ( */}
-      {nav.map((n) => (
-        <NavComponent item={n} currentPath={currentPath} />
-      ))}
-    </nav>
-  );
-};
-
-const NavComponent: React.FC<{
-  item: NavItem | NavGroup;
-  currentPath: string;
-}> = ({ item, currentPath }) => {
-  function isActiveItem(item: NavItem) {
-    return item.href === "/" + currentPath;
-  }
-
-  return !isNavGroup(item) ? (
-    <Link
-      key={item.name}
-      href={item.href}
-      className={clsx(
-        isActiveItem(item)
-          ? 'text-secondary'
-          : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
-        'block'
-      )}
-    >
-      {item.name}
-    </Link>
-  ) : (
-    <Disclosure as="div" key={item.name} className="flex flex-col space-y-3" defaultOpen={true}>
-      {({ open }) => (
-        <div>
-          <Disclosure.Button className="group w-full flex items-center text-left text-md font-medium text-slate-900 dark:text-white">
-            <svg
-              className={clsx(
-                open ? 'text-slate-400 rotate-90' : 'text-slate-300',
-                'h-3 w-3 mr-2 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-slate-400'
-              )}
-              viewBox="0 0 20 20"
-              aria-hidden="true"
-            >
-              <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
-            </svg>
-            {item.name}
-          </Disclosure.Button>
-          <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
-          >
-            <Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
-              {/* {sortNavGroupChildren(item.children).map((subItem) => ( */}
-              {item.children.map((subItem) => (
-                <NavComponent item={subItem} currentPath={currentPath} />
-              ))}
-            </Disclosure.Panel>
-          </Transition>
-        </div>
-      )}
-    </Disclosure>
-  );
-};
diff --git a/site/content/assets/sidebar.json b/site/content/assets/sidebar.json
new file mode 100644
index 00000000..443a904c
--- /dev/null
+++ b/site/content/assets/sidebar.json
@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Getting started",
+    "links": [
+      { "title": "Introduction", "href": "/#how-portaljs-works" },
+      { "title": "Setup", "href": "/docs" },
+      { "title": "Creating new datasets", "href": "/docs/creating-new-datasets" },
+      { "title": "Searching datasets", "href": "/docs/searching-datasets" },
+      { "title": "Showing metadata", "href": "/docs/showing-metadata" },
+      { "title": "Deploying your PortalJS app", "href": "/docs/deploying-your-portaljs-app" }
+
+    ]
+  }
+]
diff --git a/site/content/config.js b/site/content/config.js
index c61959ac..73b04962 100644
--- a/site/content/config.js
+++ b/site/content/config.js
@@ -19,8 +19,8 @@ const config = {
     { name: "Docs", href: "/docs" },
     // { name: "Components", href: "/docs/components" },
     { name: "Blog", href: "/blog" },
-    { name: "Gallery", href: "/#gallery" },
-    // { name: "Data Literate", href: "/data-literate" },
+    { name: "Showcases", href: "/#showcases" },
+    { name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },
   ],
diff --git a/site/content/docs/sidebar.json b/site/content/docs/sidebar.json
deleted file mode 100644
index 1a1561ec..00000000
--- a/site/content/docs/sidebar.json
+++ /dev/null
@@ -1,44 +0,0 @@
-[
-  {
-    "name": "Getting started",
-    "children": [
-      {
-        "name": "Setup",
-        "href": "/docs"
-      },
-      {
-        "name": "Creating new datasets",
-        "href": "/docs/creating-new-datasets"
-      },
-      {
-        "name": "Searching datasets",
-        "href": "/docs/searching-datasets"
-      },
-      {
-        "name": "Showing metadata",
-        "href": "/docs/showing-metadata"
-      },
-      {
-        "name": "Deploying your PortalJS app",
-        "href": "/docs/deploying-your-portaljs-app"
-      }
-    ]
-  },
-  {
-    "name": "Components",
-    "href": "/docs/components"
-  },
-  {
-    "name": "Examples",
-    "children": [
-      {
-        "name": "Data Catalog w/ CKAN datasets",
-        "href": "/docs/examples/example-ckan"
-      },
-      {
-        "name": "Data Catalog w/ GitHub datasets",
-        "href": "/docs/examples/example-data-catalog"
-      }
-    ]
-  }
-]
diff --git a/site/pages/[...slug].tsx b/site/pages/[...slug].tsx
index 1b7e3b3e..c6dc079a 100644
--- a/site/pages/[...slug].tsx
+++ b/site/pages/[...slug].tsx
@@ -65,7 +65,7 @@ export const getStaticProps: GetStaticProps = async ({
   // Temporary, docs pages should present the LHS sidebar
   if (dbFile.url_path.startsWith('docs')) {
     frontMatter.showSidebar = true;
-    frontMatter.sidebarTreeFile = 'content/docs/sidebar.json';
+    frontMatter.sidebarTreeFile = 'content/assets/sidebar.json';
   }
 
   const source = fs.readFileSync(filePath, { encoding: 'utf-8' });
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
index 19e4740d..97f22995 100644
--- a/site/pages/index.tsx
+++ b/site/pages/index.tsx
@@ -1,21 +1,46 @@
+import fs from 'fs';
+
 import Community from '@/components/Community';
 import Features from '@/components/Features';
-import Gallery from '@/components/Gallery';
-import { Hero } from '@/components/Hero';
-import { UnstyledLayout } from '@flowershow/core';
+import Showcases from '@/components/Showcases';
 import Layout from '../components/Layout';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { collectHeadings } from '@flowershow/core';
+
+export default function Home({ sidebarTree }) {
+  const router = useRouter();
+
+  const [tableOfContents, setTableOfContents] = useState([]);
+
+  useEffect(() => {
+    const headingNodes = document.querySelectorAll(
+      'h2,h3'
+    ) as NodeListOf<HTMLHeadingElement>;
+    const toc = collectHeadings(headingNodes);
+    setTableOfContents(toc ?? []);
+  }, [router.asPath]); // update table of contents on route change with next/link
 
-export default function Home() {
   return (
     <>
-      <Layout>
-        <UnstyledLayout>
-          <Hero />
-          <Features />
-          <Gallery />
-          <Community />
-        </UnstyledLayout>
+      <Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
+        <Features />
+        <Showcases />
+        <Community />
       </Layout>
     </>
   );
 }
+
+export function getStaticProps() {
+  const tree = fs.readFileSync('content/assets/sidebar.json', {
+    encoding: 'utf-8',
+  });
+  const sidebarTree = JSON.parse(tree);
+
+  return {
+    props: {
+      sidebarTree,
+    },
+  };
+}