diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1a70e9f..ac6eda1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,103 @@
-import GeneratedImage from "@/components/GeneratedImage";
+import CardGrid from "@/components/CardGrid";
+import ContentNav from "@/components/ContentNav/ContentNav";
+import ErrorBanner from "@/components/ErrorBanner";
+import Switchback from "@/components/Switchback";
 
 export default function Home() {
   return (
-    <main className="container">
-      <div className="hero">
-        <h1>
-          Create your own <span>watercolor masterpiece</span>
-        </h1>
-      </div>
-
-      <GeneratedImage />
+    <main className="container wide">
+      <ContentNav
+        prevText="Jan 24, 2023"
+        current="January 25, 2023"
+        nextText="Jan 26, 2023"
+      />
+      <CardGrid
+        heading={
+          <h1>
+            10 Most <br />
+            <span>Popular</span> Models
+          </h1>
+        }
+        cards={[
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "stabilityai",
+            modelName: "japanese-stablelm-instruct-alpha-7b",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+        ]}
+      />
+      <Switchback
+        leftContent={
+          <h2 className="heading">
+            <span>45,515</span> text gen
+            <br /> models existed
+          </h2>
+        }
+        rightContent={
+          <p>
+            We like to say that in AI, a week is a month and a month is a year,
+            and the "latest and greatest model" changes just as quickly. We
+            tracked the most popular text-gen models starting in January 2023 to
+            highlight the rapid rate of change in the AI industry. Click through
+            time to see how quickly the state-of-the-art changes.
+          </p>
+        }
+      />
     </main>
   );
 }
diff --git a/src/components/CardGrid/CardGrid.mdx b/src/components/CardGrid/CardGrid.mdx
new file mode 100644
index 0000000..9780cfc
--- /dev/null
+++ b/src/components/CardGrid/CardGrid.mdx
@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as CardGridStories from './CardGrid.stories';
+
+<Meta of={CardGridStories} />
+
+# Card Grid
+
+<Canvas of={CardGridStories.Default} />
+
+### Props Table
+
+<ArgTypes />
\ No newline at end of file
diff --git a/src/components/CardGrid/CardGrid.stories.tsx b/src/components/CardGrid/CardGrid.stories.tsx
new file mode 100644
index 0000000..655c83e
--- /dev/null
+++ b/src/components/CardGrid/CardGrid.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CardGrid from ".";
+
+const meta: Meta<typeof CardGrid> = {
+  title: "Components/Card Grid",
+  component: CardGrid,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardGrid>;
+
+export const Default: Story = {
+  args: {
+    heading: (
+      <h1>
+        10 Most <span>Popular</span>Models
+      </h1>
+    ),
+    cards: [
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+    ],
+  },
+};
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
new file mode 100644
index 0000000..b2aaa89
--- /dev/null
+++ b/src/components/CardGrid/CardGrid.tsx
@@ -0,0 +1,25 @@
+import Image from "next/image";
+import { FC, ReactElement } from "react";
+import ModelCard, { ModelCardProps } from "../Cards/ModelCard/ModelCard";
+
+interface CardGridProps {
+  /** Heading above grid */
+  heading?: ReactElement;
+  /** Array of cards to display */
+  cards: ModelCardProps[];
+}
+
+const CardGrid: FC<CardGridProps> = ({ heading, cards }) => {
+  return (
+    <div className="card-grid">
+      {heading && <div className="heading">{heading}</div>}
+      <div className="cards">
+        {cards?.map((card) => (
+          <ModelCard key={card?.modelAuthor + card?.modelName} {...card} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CardGrid;
diff --git a/src/components/CardGrid/index.ts b/src/components/CardGrid/index.ts
new file mode 100644
index 0000000..8b57ad2
--- /dev/null
+++ b/src/components/CardGrid/index.ts
@@ -0,0 +1,2 @@
+import CardGrid from "./CardGrid";
+export default CardGrid;
diff --git a/src/components/Cards/ModelCard/ModelCard.tsx b/src/components/Cards/ModelCard/ModelCard.tsx
index 01fd19d..3666a78 100644
--- a/src/components/Cards/ModelCard/ModelCard.tsx
+++ b/src/components/Cards/ModelCard/ModelCard.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-interface ModelCardProps {
+export interface ModelCardProps {
   /** Image url for model icon */
   icon: string;
   /** Model modelAuthor */
diff --git a/src/components/ContentNav/ContentNav.mdx b/src/components/ContentNav/ContentNav.mdx
new file mode 100644
index 0000000..3ad41c1
--- /dev/null
+++ b/src/components/ContentNav/ContentNav.mdx
@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as ContentNavStories from './ContentNav.stories';
+
+<Meta of={ContentNavStories} />
+
+# Content Nav
+
+<Canvas of={ContentNavStories.Default} />
+
+### Props Table
+
+<ArgTypes />
\ No newline at end of file
diff --git a/src/components/ContentNav/ContentNav.stories.tsx b/src/components/ContentNav/ContentNav.stories.tsx
new file mode 100644
index 0000000..74614d8
--- /dev/null
+++ b/src/components/ContentNav/ContentNav.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ContentNav from ".";
+
+const meta: Meta<typeof ContentNav> = {
+  title: "Components/Content Nav",
+  component: ContentNav,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContentNav>;
+
+export const Default: Story = {
+  args: {
+    prevText: "Jan 24, 2023",
+    current: "January 25, 2023",
+    nextText: "Jan 26, 2023",
+  },
+};
diff --git a/src/components/ContentNav/ContentNav.tsx b/src/components/ContentNav/ContentNav.tsx
new file mode 100644
index 0000000..cbee5e1
--- /dev/null
+++ b/src/components/ContentNav/ContentNav.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import { FC } from "react";
+
+interface ContentNavProps {
+  /** Text for previous button */
+  prevText?: string;
+  /** Text for next button */
+  nextText?: string;
+  /** Text for current content */
+  current?: string;
+}
+
+const ContentNav: FC<ContentNavProps> = ({
+  prevText = "Previous",
+  nextText = "Next",
+  current,
+}) => {
+  const Chevron = (
+    <Image src="/icons/chevron.svg" width="12" height="12" alt="" />
+  );
+  return (
+    <div className="content-nav">
+      <button>
+        {Chevron}
+        {prevText}
+      </button>
+      {current && <div className="current middle">{current}</div>}
+      <button>
+        {nextText}
+        {Chevron}
+      </button>
+      {current && <div className="current bottom">{current}</div>}
+    </div>
+  );
+};
+
+export default ContentNav;
diff --git a/src/components/ContentNav/index.ts b/src/components/ContentNav/index.ts
new file mode 100644
index 0000000..dbb71a5
--- /dev/null
+++ b/src/components/ContentNav/index.ts
@@ -0,0 +1,2 @@
+import ContentNav from "./ContentNav";
+export default ContentNav;
diff --git a/src/components/ErrorBanner/ErrorBanner.tsx b/src/components/ErrorBanner/ErrorBanner.tsx
index f51c905..27b3a86 100644
--- a/src/components/ErrorBanner/ErrorBanner.tsx
+++ b/src/components/ErrorBanner/ErrorBanner.tsx
@@ -1,27 +1,27 @@
 import { FC } from "react";
 
 interface ErrorBannerProps {
-    bannerText: string
+  bannerText: string;
 }
 
 const ErrorBanner: FC<ErrorBannerProps> = ({ bannerText }) => {
-    return (
-        <div role="alert" id="error-banner">
-            <div className="content">
-                <p>{bannerText}</p>
-                <button className="absolute top-0 bottom-0 right-0 px-4 py-3 bg-none hover:bg-none shadow-transparent">
-                    <svg
-                        className="fill-current h-6 w-6"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20">
-                        <title>Close</title>
-                        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-
-    )
+  return (
+    <div role="alert" id="error-banner">
+      <div className="content">
+        <p>{bannerText}</p>
+        <button className="button">
+          <svg
+            className="fill-current h-6 w-6"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <title>Close</title>
+            <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default ErrorBanner;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5109f63..ad9ec28 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,21 +1,39 @@
 import Image from "next/image";
+import Select from "../Select";
 
 const Header = () => {
   return (
-    <header className="container">
+    <header className="container dropdown">
       <div>
         <div className="left">
-          <a href="/">🥣 Smartflakes</a>
+          <a href="/">⏳ LLM Time Capsule</a>
+          <div className="by-octo">
+            <a
+              href="https://octo.ai/?utm_source=llmtimecapsule"
+              target="_blank"
+            >
+              <span>by</span>
+              <Image
+                src="/icons/octo.svg"
+                alt="OctoAI Icon"
+                width="22"
+                height="24"
+              />
+            </a>
+          </div>
         </div>
         <div className="right">
-          <a href="https://octo.ai/?utm_source=smartflakes" target="_blank">
-            <span>powered by</span>
-            <Image src="/icons/octo.svg" alt="OctoAI Icon" width='22' height='24' />
-          </a>
+          <Select
+            label="Year"
+            listItems={[
+              { value: "2024", label: "2024" },
+              { value: "2023", label: "2023" },
+            ]}
+          />
         </div>
       </div>
     </header>
-  )
+  );
 };
 
 export default Header;
diff --git a/src/components/Prompt/Prompt.tsx b/src/components/Prompt/Prompt.tsx
index 65bdd17..4477276 100644
--- a/src/components/Prompt/Prompt.tsx
+++ b/src/components/Prompt/Prompt.tsx
@@ -40,7 +40,9 @@ const Prompt: FC<PromptProps> = ({
           onChange={(e) => setInputValue(e.target.value)}
         />
       </label>
-      <button id="generate-btn">{btnText}</button>
+      <button id="generate-btn" className="button">
+        {btnText}
+      </button>
     </form>
   );
 };
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 46359b7..42fc056 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import {
   Button,
@@ -25,6 +27,7 @@ interface SelectProps {
 const Select: FC<SelectProps> = ({ label, listItems }) => (
   <ReactAriaSelect className="select" defaultSelectedKey={"2024"}>
     {label && <Label>{label}</Label>}
+    
     <Button>
       <SelectValue />
       <span aria-hidden="true" className="icon">
@@ -34,7 +37,9 @@ const Select: FC<SelectProps> = ({ label, listItems }) => (
     <Popover className="select-list">
       <ListBox>
         {listItems?.map((item) => (
-          <ListBoxItem id={item?.value}>{item?.label}</ListBoxItem>
+          <ListBoxItem key={item.value} id={item?.value}>
+            {item?.label}
+          </ListBoxItem>
         ))}
       </ListBox>
     </Popover>
diff --git a/src/components/Switchback/Switchback.mdx b/src/components/Switchback/Switchback.mdx
new file mode 100644
index 0000000..30e6906
--- /dev/null
+++ b/src/components/Switchback/Switchback.mdx
@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as SwitchbackStories from './Switchback.stories';
+
+<Meta of={SwitchbackStories} />
+
+# Switchback
+
+<Canvas of={SwitchbackStories.Default} />
+
+### Props Table
+
+<ArgTypes />
\ No newline at end of file
diff --git a/src/components/Switchback/Switchback.stories.tsx b/src/components/Switchback/Switchback.stories.tsx
new file mode 100644
index 0000000..40159ca
--- /dev/null
+++ b/src/components/Switchback/Switchback.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Switchback from ".";
+
+const meta: Meta<typeof Switchback> = {
+  title: "Components/Switchback",
+  component: Switchback,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switchback>;
+
+export const Default: Story = {
+  args: {
+    leftContent: (
+      <h2 className="heading">
+        <span>1000</span> text gen models existed
+      </h2>
+    ),
+    rightContent: (
+      <p>
+        At OctoAI, we are always thinking about how we can stay ahead of the
+        curve. We like to say that in AI, a week is a month and a month is a
+        year, and the "latest and greatest model" changes just as quickly. We
+        decided to track the most popular text-gen models from 2023 to today, to
+        highlight the rapid rate of change in the AI industry. Results were
+        collected from HuggingFace's "trending" list of text-gen models. From
+        early research models to fine-tuned LLMs running in production apps
+        today, we invite you to click through time to see how quickly the
+        state-of-the-art changes.
+      </p>
+    ),
+  },
+};
diff --git a/src/components/Switchback/Switchback.tsx b/src/components/Switchback/Switchback.tsx
new file mode 100644
index 0000000..6286925
--- /dev/null
+++ b/src/components/Switchback/Switchback.tsx
@@ -0,0 +1,18 @@
+import { FC, ReactElement } from "react";
+
+interface SwitchbackProps {
+  /** Content for switback left side (top on mobile) */
+  leftContent: ReactElement;
+  /** Content for switback right side (bottom on mobile) */
+  rightContent: ReactElement;
+}
+const Switchback: FC<SwitchbackProps> = ({ leftContent, rightContent }) => {
+  return (
+    <div className="switchback">
+      <div>{leftContent}</div>
+      <div>{rightContent}</div>
+    </div>
+  );
+};
+
+export default Switchback;
diff --git a/src/components/Switchback/index.ts b/src/components/Switchback/index.ts
new file mode 100644
index 0000000..590560d
--- /dev/null
+++ b/src/components/Switchback/index.ts
@@ -0,0 +1,2 @@
+import Switchback from "./Switchback";
+export default Switchback;
diff --git a/src/styles/components/card-grid.css b/src/styles/components/card-grid.css
new file mode 100644
index 0000000..0ca594c
--- /dev/null
+++ b/src/styles/components/card-grid.css
@@ -0,0 +1,24 @@
+.card-grid {
+  .heading {
+    @apply text-lg text-center mb-8 sm:text-[2.75rem] sm:mb-11 transition-font-size;
+
+    br {
+      @apply xs:hidden;
+    }
+  }
+  .cards {
+    @apply flex flex-col gap-4 sm:grid sm:grid-cols-2 sm:gap-6;
+    .model-card {
+      @apply sm:px-3 sm:py-2 xl:px-6 xl:py-4;
+      .icon {
+        @apply sm:mt-[5px] sm:items-start xl:mt-0 xl:items-center;
+      }
+      p {
+        @apply sm:flex-wrap xl:flex-nowrap;
+      }
+      a {
+        @apply sm:pt-[19px] xl:pt-[14px];
+      }
+    }
+  }
+}
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 42e4ac4..1c8fb45 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -1,30 +1,31 @@
 .card {
-  @apply justify-between max-w-[700px] bg-gray-50 border border-gray-300 rounded px-6 py-4 dark:bg-gray-900 dark:border-gray-600;
-  &,
-  .info {
-    @apply flex items-center;
-  }
-  .info {
-    @apply gap-3;
-  }
+  @apply justify-between max-w-[700px] bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 sm:px-6 sm:py-4 dark:bg-black-500 dark:border-gray-700;
+
   &.model-card {
     .icon {
-      @apply h-7 w-7 rounded-full border border-gray-300 p-[3px] dark:border-gray-600;
+      @apply h-7 w-7 rounded-full border border-gray-300 p-[3px] dark:border-gray-700  mt-[5px] sm:mt-0 sm:items-center;
+    }
+    &,
+    .info {
+      @apply flex items-start;
+    }
+    .info {
+      @apply gap-4;
     }
     p {
-      @apply flex;
+      @apply flex flex-wrap sm:flex-nowrap;
     }
     p > span {
       &:first-child {
         @apply text-gray-600 font-medium dark:text-gray-300 mr-1;
       }
       &:last-child {
-        @apply text-black-600 font-semibold dark:text-gray-100 ml-1;
+        @apply text-black-600 font-semibold dark:text-gray-100 sm:ml-1 w-full;
       }
     }
   }
   a {
-    @apply m-[-14px] p-[14px];
+    @apply m-[-14px] p-[14px] pt-[19px] flex-shrink-0 sm:pt-[14px];
     img {
       @apply transition-filter dark:invert-100 brightness-0 contrast-[25%];
     }
diff --git a/src/styles/components/content-nav.css b/src/styles/components/content-nav.css
new file mode 100644
index 0000000..5d438f5
--- /dev/null
+++ b/src/styles/components/content-nav.css
@@ -0,0 +1,24 @@
+.content-nav {
+  @apply flex gap-y-2 justify-between border-b border-b-gray-200 pb-4 flex-wrap mt-5 sm:flex-nowrap dark:border-b-gray-700;
+  button {
+    @apply flex items-center gap-2 text-gray-500 hover:underline focus-visible:underline px-0 w-2/4 sm:w-auto dark:text-gray-300;
+    &:first-of-type img {
+      @apply rotate-90;
+    }
+    &:last-of-type {
+      @apply justify-end;
+      img {
+        @apply -rotate-90;
+      }
+    }
+  }
+  .current {
+    @apply text-2xs text-center sm:text-xs;
+    &.middle {
+      @apply hidden sm:block;
+    }
+    &.bottom {
+      @apply m-auto mt-1 w-full  sm:hidden;
+    }
+  }
+}
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
index eda56e4..91aac04 100644
--- a/src/styles/components/header.css
+++ b/src/styles/components/header.css
@@ -4,10 +4,22 @@ header {
     @apply sm:py-4 max-w-none;
   }
   & > div {
-    @apply mx-auto flex max-w-[75rem] items-center justify-between;
+    @apply mx-auto flex flex-col sm:flex-row max-w-[75rem] items-center justify-between;
   }
-  .left > a {
-    @apply text-xs transition-font-size hover:no-underline focus-visible:no-underline sm:text-lg;
+  .left {
+    @apply flex gap-3 transition-spacing;
+    & > a {
+      @apply text-xs transition-font-size hover:no-underline focus-visible:no-underline sm:text-lg;
+    }
+    & > .by-octo {
+      @apply flex justify-center items-center;
+      a {
+        @apply flex gap-2 hover:no-underline focus-visible:no-underline text-gray-600;
+        img {
+          @apply w-4;
+        }
+      }
+    }
   }
   .right {
     & > a {
@@ -20,4 +32,32 @@ header {
       }
     }
   }
+  &.dropdown {
+    .left {
+      @apply gap-2 md:gap-3;
+    }
+    & > div {
+      @apply pb-1 flex-row;
+    }
+    a {
+      @apply text-[1.125rem] xs:text-2xs sm:text-xs md:text-lg;
+    }
+    .by-octo {
+      @apply hidden xs:flex;
+      a {
+        @apply gap-[6px] md:gap-2 dark:text-gray-400;
+      }
+      img {
+        @apply max-h-6 dark:brightness-84 dark:contrast-84 dark:hue-rotate-145 dark:invert-77 dark:saturate-194 dark:sepia-4 dark:filter;
+      }
+      span {
+        @apply text-body-sm md:text-body transition-font-size;
+      }
+    }
+    .select {
+      .react-aria-Label {
+        @apply hidden text-body-sm xs:block;
+      }
+    }
+  }
 }
diff --git a/src/styles/components/hero.css b/src/styles/components/hero.css
index f5bbbda..57fe1f2 100644
--- a/src/styles/components/hero.css
+++ b/src/styles/components/hero.css
@@ -3,7 +3,7 @@
   h1 {
     @apply text-sm transition-font-size sm:text-xl lg:text-2xl;
     span {
-      @apply bg-gradient-orange bg-clip-text font-extrabold !text-transparent dark:bg-gradient-teal;
+      @apply font-extrabold;
     }
   }
 }
diff --git a/src/styles/components/interactive.css b/src/styles/components/interactive.css
index 45b3584..8542015 100644
--- a/src/styles/components/interactive.css
+++ b/src/styles/components/interactive.css
@@ -35,13 +35,5 @@
       @apply gap-6;
     }
   }
-  #error-banner {
-    @apply container fixed bottom-0 left-0 w-full max-w-none z-50;
-    & > .content {
-      @apply relative mx-auto w-full max-w-[50rem] rounded border bg-orange px-4 py-3 pr-12;
-      button {
-        @apply flex transition-colors hover:fill-gray-700;
-      }
-    }
-  }
+
 }
diff --git a/src/styles/components/select.css b/src/styles/components/select.css
index 270e3a1..ac81f69 100644
--- a/src/styles/components/select.css
+++ b/src/styles/components/select.css
@@ -1,15 +1,17 @@
 .select {
   @apply flex items-center gap-3;
   .react-aria-Label {
-    @apply font-normal text-gray-500 dark:text-gray-50;
+    @apply font-normal text-gray-600 dark:text-gray-50;
   }
   & > button {
-    @apply flex w-[100px] items-center justify-between gap-3 rounded border border-gray-300 bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:text-white dark:shadow-dark;
+    @apply flex w-[100px] items-center justify-between gap-3 rounded border border-gray-300  bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:text-white dark:shadow-dark px-2 py-1;
     &[data-hovered],
     &[data-focused] {
-      @apply border-gray-500 bg-gray-50 bg-none outline-none dark:border-gray-300 dark:bg-opacity-5;
+      @apply border-gray-500 bg-gray-50  dark:border-gray-300 dark:bg-opacity-5 outline-0;
+    }
+    &[data-focus-visible] {
+      @apply outline-2;
     }
-
     .icon img {
       @apply w-3;
     }
@@ -17,21 +19,17 @@
 }
 
 .select-list {
-  @apply w-[var(--trigger-width)] rounded border border-gray-300 bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:shadow-dark;
-  &[data-hovered],
-  &[data-focused] {
-    @apply outline-none;
-  }
+  @apply w-[var(--trigger-width)] rounded border border-gray-300 bg-gray-50 shadow-light dark:border-gray-600 dark:bg-[#1e2021] dark:shadow-dark;
+
   .react-aria-ListBoxItem {
     @apply relative px-4 py-9px;
 
     &[data-hovered],
     &[data-focused] {
-      @apply outline-none;
+      @apply cursor-pointer bg-gray-200 dark:bg-[#373738] outline-0;
     }
-    &[data-hovered],
     &[data-focus-visible] {
-      @apply cursor-pointer bg-gray-200 dark:bg-opacity-10;
+      @apply outline-2;
     }
     &[data-selected] {
       @apply after:absolute after:right-3 after:top-[calc(50%-8px)] after:block after:h-4 after:w-4 after:bg-[url('/icons/check.svg')] after:bg-no-repeat;
diff --git a/src/styles/components/switchback.css b/src/styles/components/switchback.css
new file mode 100644
index 0000000..236679a
--- /dev/null
+++ b/src/styles/components/switchback.css
@@ -0,0 +1,15 @@
+.switchback {
+  @apply flex flex-col gap-3 mt-8 m-auto max-w-lg md:flex-row md:gap-6 md:max-w-screen-lg md:px-6;
+  & > div {
+    @apply w-full;
+  }
+  .heading {
+    @apply text-lg md:text-[40px] lg:text-xl transition-font-size;
+    br {
+      @apply min-[550px]:hidden md:block;
+    }
+  }
+  p {
+    @apply text-gray-700 dark:text-gray-200;
+  }
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index bff69ca..88e4c4c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -67,9 +67,12 @@ main.container {
       @apply pb-8;
     }
   }
+  &.wide {
+    @apply max-w-[1328px] px-8 xl:px-16;
+  }
 }
 
-button {
+.button {
   @apply mt-2 block w-auto rounded bg-gradient-orange from-orange to-orange px-4  py-9px shadow-light hover:bg-gradient-to-r focus-visible:bg-gradient-to-r dark:bg-gradient-teal dark:from-blue-500 dark:to-blue-500 dark:text-black-900 dark:shadow-dark dark:hover:bg-gradient-to-r sm:mt-0;
 }
 
@@ -92,3 +95,19 @@ input {
 .disclaimer {
   @apply italic;
 }
+
+#error-banner {
+  @apply container fixed bottom-0 left-0 w-full max-w-none z-50;
+  & > .content {
+    @apply relative mx-auto w-full max-w-[50rem] rounded border bg-orange px-4 py-3 pr-12;
+    button {
+      @apply flex transition-colors hover:fill-gray-700 absolute top-0 bottom-0 right-0 px-4 py-3 bg-none hover:bg-none shadow-transparent mt-0;
+    }
+  }
+}
+
+.heading {
+  span {
+    @apply bg-gradient-orange bg-clip-text !text-transparent dark:bg-gradient-teal;
+  }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
index 0417e8b..62650e7 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -7,3 +7,6 @@
 @import "./components/interactive.css";
 @import "./components/loading.css";
 @import "./components/select.css";
+@import "./components/content-nav.css";
+@import "./components/card-grid.css";
+@import "./components/switchback.css";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5d01ac1..55eb6a4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -63,6 +63,9 @@ const theme: Config = {
       spacing: {
         "9px": "0.5625rem",
       },
+      screens: {
+        xs: "500px",
+      },
       transitionProperty: {
         "font-size": "font-size",
         spacing: "margin, padding, gap",