diff --git a/docs/src/components/Homepage/hero.js b/docs/src/components/Homepage/hero.js
index b85f1964e..634d031b0 100644
--- a/docs/src/components/Homepage/hero.js
+++ b/docs/src/components/Homepage/hero.js
@@ -47,9 +47,13 @@ export default function HomepageHero() {
                 Run your own AI
               </h1>
               <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
-                lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
-                fugiat aliqua.
+                Jan lets you run AI on your own hardware. 1-click to install the
+                latest open-source models. Monitor and manage software-hardware
+                performance.
+                <br></br>
+                Jan is
+                <strong> free and open core</strong> with a Sustainable Use
+                License.
               </p>
               <div className="mt-10 flex items-center justify-center gap-x-6">
                 {/* TODO: handle mobile model download app instead */}
@@ -66,9 +70,9 @@ export default function HomepageHero() {
             <img
               src={
                 colorMode === "dark"
-                  ? require("@site/static/img/desktop-screenshot-dark.png")
-                      .default
-                  : require("@site/static/img/desktop-screenshot.png").default
+                  ? // TODO replace with darkmode image
+                    require("@site/static/img/desktop-llm-chat.png").default
+                  : require("@site/static/img/desktop-llm-chat.png").default
               }
               alt="App screenshot"
               width={2432}
diff --git a/docs/src/components/Homepage/sectionOne.js b/docs/src/components/Homepage/sectionOne.js
index 122eeb373..ca78903fa 100644
--- a/docs/src/components/Homepage/sectionOne.js
+++ b/docs/src/components/Homepage/sectionOne.js
@@ -8,6 +8,7 @@ import {
   RocketLaunchIcon,
   ServerIcon,
 } from "@heroicons/react/20/solid";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const features = [
   {
@@ -31,6 +32,7 @@ const features = [
 ];
 
 export default function HomepageSectionOne() {
+  const { colorMode } = useColorMode();
   return (
     <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -64,7 +66,14 @@ export default function HomepageSectionOne() {
           </div>
           <div className="flex items-start justify-end lg:order-first">
             <img
-              src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+              src={
+                colorMode === "dark"
+                  ? // TODO replace with darkmode image
+                    require("@site/static/img/desktop-explore-models-dark.png")
+                      .default
+                  : require("@site/static/img/desktop-explore-models.png")
+                      .default
+              }
               alt="Product screenshot"
               className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
               width={2432}
diff --git a/docs/src/components/Homepage/sectionThree.js b/docs/src/components/Homepage/sectionThree.js
index 35e759335..adf1ff31f 100644
--- a/docs/src/components/Homepage/sectionThree.js
+++ b/docs/src/components/Homepage/sectionThree.js
@@ -1,79 +1,172 @@
 import React from "react";
+import { useState } from "react";
+import { RadioGroup } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/20/solid";
 
-const people = [
+const frequencies = [
+  { value: "monthly", label: "Monthly", priceSuffix: "/1Mn tokens" },
+  { value: "annually", label: "Annually", priceSuffix: "/year" },
+];
+const tiers = [
   {
-    name: "Lindsay Walton",
-    title: "Front-end Developer",
-    email: "lindsay.walton@example.com",
-    role: "Member",
+    name: "Pay per API call",
+    id: "tier-freelancer",
+    href: "#",
+    price: { monthly: "$75", annually: "$144" },
+    description: "The essentials to provide your best work for clients.",
+    features: [
+      "5 products",
+      "Up to 1,000 subscribers",
+      "Basic analytics",
+      "48-hour support response time",
+    ],
+    mostPopular: false,
+  },
+  {
+    name: "Run it yourself",
+    id: "tier-startup",
+    href: "#",
+    price: { monthly: "$0", annually: "$288" },
+    description: "A plan that scales with your rapidly growing business.",
+    features: [
+      "25 products",
+      "Up to 10,000 subscribers",
+      "Advanced analytics",
+      "24-hour support response time",
+      "Marketing automations",
+    ],
+    mostPopular: true,
+  },
+  {
+    name: "Rent Cloud GPUs",
+    id: "tier-enterprise",
+    href: "#",
+    price: { monthly: "$40", annually: "$576" },
+    description: "Dedicated support and infrastructure for your company.",
+    features: [
+      "Unlimited products",
+      "Unlimited subscribers",
+      "Advanced analytics",
+      "1-hour, dedicated support response time",
+      "Marketing automations",
+      "Custom reporting tools",
+    ],
+    mostPopular: false,
   },
-  // More people...
 ];
 
-export default function HomepageSectionThree() {
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Example() {
+  const [frequency, setFrequency] = useState(frequencies[0]);
+
   return (
-    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
+    <div className="bg-white py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl lg:text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-            Run AI on any OS
+        <div className="mx-auto max-w-4xl text-center">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600">
+            AI on your own hardware means
           </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
             Unlimited Use
           </p>
-          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-            No uncontrolled cloud spending. No hidden fees. No limits.
-          </p>
         </div>
-        {/* Cost comparitor */}
-        <div className="px-4 sm:px-6 lg:px-8">
-          <div className="sm:flex sm:items-center">
-            <div className="mt-8 flow-root">
-              <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-                  <table className="min-w-full divide-y divide-gray-300">
-                    <thead>
-                      <tr>
-                        <th
-                          scope="col"
-                          className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
-                        >
-                          Name
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                        >
-                          Title
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                        >
-                          Email
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200">
-                      {people.map((person) => (
-                        <tr key={person.email}>
-                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
-                            {person.name}
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {person.title}
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {person.email}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
+          No uncontrolled cloud spending. No hidden fees. No limits.
+        </p>
+        {/* <div className="mt-16 flex justify-center">
+          <RadioGroup
+            value={frequency}
+            onChange={setFrequency}
+            className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200"
+          >
+            <RadioGroup.Label className="sr-only">
+              Payment frequency
+            </RadioGroup.Label>
+            {frequencies.map((option) => (
+              <RadioGroup.Option
+                key={option.value}
+                value={option}
+                className={({ checked }) =>
+                  classNames(
+                    checked ? "bg-indigo-600 text-white" : "text-gray-500",
+                    "cursor-pointer rounded-full px-2.5 py-1"
+                  )
+                }
+              >
+                <span>{option.label}</span>
+              </RadioGroup.Option>
+            ))}
+          </RadioGroup>
+        </div> */}
+        <div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {tiers.map((tier) => (
+            <div
+              key={tier.id}
+              className={classNames(
+                tier.mostPopular
+                  ? "ring-2 ring-indigo-600"
+                  : "ring-1 ring-gray-200",
+                "rounded-3xl p-8 xl:p-10"
+              )}
+            >
+              <div className="flex items-center justify-between gap-x-4">
+                <h3
+                  id={tier.id}
+                  className={classNames(
+                    tier.mostPopular ? "text-indigo-600" : "text-gray-900",
+                    "text-lg font-semibold leading-8"
+                  )}
+                >
+                  {tier.name}
+                </h3>
+                {tier.mostPopular ? (
+                  <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
+                    Fully private
+                  </p>
+                ) : null}
               </div>
+              <p className="mt-4 text-sm leading-6 text-gray-600">
+                {tier.description}
+              </p>
+              <p className="mt-6 flex items-baseline gap-x-1">
+                <span className="text-4xl font-bold tracking-tight text-gray-900">
+                  {tier.price[frequency.value]}
+                </span>
+                <span className="text-sm font-semibold leading-6 text-gray-600">
+                  {frequency.priceSuffix}
+                </span>
+              </p>
+              {/* <a
+                href={tier.href}
+                aria-describedby={tier.id}
+                className={classNames(
+                  tier.mostPopular
+                    ? "bg-indigo-600 text-white shadow-sm hover:bg-indigo-500"
+                    : "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
+                  "mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                )}
+              >
+                Buy plan
+              </a> */}
+              <ul
+                role="list"
+                className="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10"
+              >
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex gap-x-3">
+                    <CheckIcon
+                      className="h-6 w-5 flex-none text-indigo-600"
+                      aria-hidden="true"
+                    />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
             </div>
-          </div>
+          ))}
         </div>
       </div>
     </div>
diff --git a/docs/src/components/Homepage/sectionTwo.js b/docs/src/components/Homepage/sectionTwo.js
index c3e432929..8cd354892 100644
--- a/docs/src/components/Homepage/sectionTwo.js
+++ b/docs/src/components/Homepage/sectionTwo.js
@@ -8,6 +8,7 @@ import {
   RocketLaunchIcon,
   ServerIcon,
 } from "@heroicons/react/20/solid";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const features = [
   {
@@ -30,6 +31,7 @@ const features = [
 ];
 
 export default function sectionTwo() {
+  const { colorMode } = useColorMode();
   return (
     <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -64,7 +66,12 @@ export default function sectionTwo() {
             </div>
           </div>
           <img
-            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            src={
+              colorMode === "dark"
+                ? // TODO replace with darkmode image
+                  require("@site/static/img/desktop-model-settings.png").default
+                : require("@site/static/img/desktop-model-settings.png").default
+            }
             alt="Product screenshot"
             className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
             width={2432}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 9b84e0ef9..b3f2cdbe2 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -8,7 +8,9 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/* You can override the default Infima variables here. 
+   Full list of Infima variables: https://github.com/facebook/docusaurus/issues/3955#issuecomment-1521944593
+*/
 :root {
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;
@@ -30,5 +32,6 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --ifm-navbar-background-color: rgba(15, 23, 42);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index faf67b1a4..2c058280c 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -24,8 +24,8 @@ export default function Home() {
         <HomepageHero />
         <HomepageSectionOne />
         <HomepageSectionTwo />
-        <HomepageSectionThree />
-        <HomepageDownloads />
+        {/* <HomepageSectionThree />
+        <HomepageDownloads /> */}
       </main>
     </Layout>
   );
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 9f71a5da7..6fdd6da59 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -3,7 +3,7 @@
  * and scoped locally.
  */
 
-.heroBanner {
+/* .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
@@ -20,4 +20,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
+} */
diff --git a/docs/static/img/desktop-screenshot-dark.png b/docs/static/img/desktop-explore-models-dark.png
similarity index 100%
rename from docs/static/img/desktop-screenshot-dark.png
rename to docs/static/img/desktop-explore-models-dark.png
diff --git a/docs/static/img/desktop-screenshot.png b/docs/static/img/desktop-explore-models.png
similarity index 100%
rename from docs/static/img/desktop-screenshot.png
rename to docs/static/img/desktop-explore-models.png
diff --git a/docs/static/img/desktop-llm-chat.png b/docs/static/img/desktop-llm-chat.png
new file mode 100644
index 000000000..b235dfc0a
Binary files /dev/null and b/docs/static/img/desktop-llm-chat.png differ
diff --git a/docs/static/img/desktop-model-settings.png b/docs/static/img/desktop-model-settings.png
new file mode 100644
index 000000000..d22014991
Binary files /dev/null and b/docs/static/img/desktop-model-settings.png differ