diff --git a/apps/web/app/(landing)/Navbar.tsx b/apps/web/app/(landing)/Navbar.tsx
index 7d0e3225..6103af38 100644
--- a/apps/web/app/(landing)/Navbar.tsx
+++ b/apps/web/app/(landing)/Navbar.tsx
@@ -1,3 +1,4 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons";
 import Logo from "../../public/logo.svg";
 import { Github } from "@repo/ui/src/components/icons";
 import Image from "next/image";
@@ -24,10 +25,10 @@ function Navbar() {
         </div>
         <Link
           href="https://git.new/memory"
-          className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white"
+          className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white group"
         >
-          <Github className="h-4 w-4" />
-          Open source
+          Login
+          <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 duration-100 ease-in-out" />
         </Link>
       </div>
     </nav>
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index 36f0ce8d..e3201912 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -6,6 +6,7 @@ import { Toaster } from "@repo/ui/src/shadcn/toaster";
 import Features from "./Features";
 import Footer from "./footer";
 import { auth } from "../helpers/server/auth";
+import { redirect } from "next/navigation";
 
 export const runtime = "edge";
 
@@ -14,8 +15,12 @@ export default async function Home() {
 
   console.log(user);
 
+  if (user) {
+    // await redirect("/home")
+  }
+
   return (
-    <main className="dark flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
+    <main className="flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
       <Navbar />
 
       {/* Background gradients */}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 8eee6cbd..b1902464 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,50 +1,48 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+/* :root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+} */
 
-  --callout-rgb: 20, 20, 20;
-  --callout-border-rgb: 108, 108, 108;
-  --card-rgb: 100, 100, 100;
-  --card-border-rgb: 200, 200, 200;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground: rgba(179, 188, 197, 1);
+    --foreground-menu: rgba(106, 115, 125, 1);
+    --background: rgba(23, 27, 31, 1);
+    --secondary: rgba(31, 36, 40, 1);
+    --primary: rgba(54, 157, 253, 1);
+    --border: rgba(51, 57, 67, 1);
+  }
+}
 
-  --glow-conic: conic-gradient(
-    from 180deg at 50% 50%,
-    #2a8af6 0deg,
-    #a853ba 180deg,
-    #e92a67 360deg
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-size: 14px;
+}
+
+@layer base {
+  .all-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+.gradient-background {
+  background: linear-gradient(
+    150deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0)
   );
 }
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
diff --git a/apps/web/app/home/header.tsx b/apps/web/app/home/header.tsx
new file mode 100644
index 00000000..0f84cbe2
--- /dev/null
+++ b/apps/web/app/home/header.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import Logo from "../../public/logo.svg";
+import { AddIcon, ChatIcon } from "@repo/ui/src/icons";
+
+function Header() {
+  return (
+    <div>
+      <div className="flex items-center justify-between relative z-10">
+        <Link href="/">
+          <Image
+            src={Logo}
+            alt="SuperMemory logo"
+            className="hover:brightness-125 duration-200"
+          />
+        </Link>
+
+        <div className="absolute flex justify-center w-full -z-10">
+          <button className="bg-secondary all-center h-11 rounded-full p-2 min-w-14">
+            <Image src={AddIcon} alt="Add icon" />
+          </button>
+        </div>
+
+        <button className="flex shrink-0 duration-200 items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-secondary">
+          <Image src={ChatIcon} alt="Chat icon" />
+          Start new chat
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/apps/web/app/home/menu.tsx b/apps/web/app/home/menu.tsx
new file mode 100644
index 00000000..1ab22543
--- /dev/null
+++ b/apps/web/app/home/menu.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { MemoriesIcon, ExploreIcon, HistoryIcon } from "@repo/ui/src/icons";
+
+function Menu() {
+  const menuItems = [
+    {
+      icon: MemoriesIcon,
+      text: "Memories",
+      url: "/",
+    },
+    {
+      icon: ExploreIcon,
+      text: "Explore",
+      url: "/explore",
+    },
+    {
+      icon: HistoryIcon,
+      text: "History",
+      url: "/history",
+    },
+  ];
+
+  return (
+    <div className="absolute h-full p-4 flex items-center top-0 left-0">
+      <div className="">
+        <div className="hover:rounded-2x group inline-flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
+          {menuItems.map((item) => (
+            <div
+              key={item.url}
+              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90"
+            >
+              <Image
+                src={item.icon}
+                alt={`${item.text} icon`}
+                className="hover:brightness-125 duration-200"
+              />
+              <p className="opacity-0 duration-200 group-hover:opacity-100">
+                {item.text}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Menu;
diff --git a/apps/web/app/home/page.tsx b/apps/web/app/home/page.tsx
new file mode 100644
index 00000000..83416bee
--- /dev/null
+++ b/apps/web/app/home/page.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Menu from "./menu";
+import Header from "./header";
+import QueryInput from "./queryinput";
+
+function Page() {
+  return (
+    <main className="h-screen flex flex-col p-4 relative">
+      <Menu />
+
+      <Header />
+
+      <div className="max-w-3xl flex mx-auto w-full flex-col">
+        {/* all content goes here */}
+        <div className=""></div>
+
+        <div className="w-full h-96">
+          <QueryInput />
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default Page;
diff --git a/apps/web/app/home/queryinput.tsx b/apps/web/app/home/queryinput.tsx
new file mode 100644
index 00000000..41b2934f
--- /dev/null
+++ b/apps/web/app/home/queryinput.tsx
@@ -0,0 +1,43 @@
+import { ArrowRightIcon, MemoriesIcon, SelectIcon } from "@repo/ui/src/icons";
+import Image from "next/image";
+import React from "react";
+import Divider from "@repo/ui/src/shadcn/divider";
+
+function QueryInput() {
+  return (
+    <div className="bg-secondary h- [68px] rounded-[24px] w-full mt-40">
+      {/* input and action button */}
+      <div className="flex gap-4 p-3">
+        <textarea
+          name="query-input"
+          cols={30}
+          rows={7}
+          className="bg-transparent pt-2.5 text-base text-[#989EA4] focus:text-foreground duration-200 tracking-[3%] outline-none resize-none w-full p-1"
+          placeholder="Ask your second brain..."
+        ></textarea>
+
+        <button className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90">
+          <Image src={ArrowRightIcon} alt="Right arrow icon" />
+        </button>
+      </div>
+
+      <Divider />
+
+      {/* suggestions */}
+      <div className="flex items-center gap-6 p-2">
+        <button className="bg-[#2B3237] h-9 p-2 px-3 flex items-center gap-2 rounded-full">
+          <Image src={MemoriesIcon} alt="Memories icon" className="w-5" />
+          <span className="pr-3">Filters</span>
+          <Image src={SelectIcon} alt="Select icon" className="w-4" />
+        </button>
+        <div className="flex gap-6 brightness-75">
+          <p>Nvidia</p>
+          <p>Open-source</p>
+          <p>Artificial Intelligence</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default QueryInput;
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 035b5827..491162f1 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -61,9 +61,9 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      <head>
+      {/* <head>
         <ThemeScript />
-      </head>
+      </head> */}
       {/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
       <body className={`${inter.className} dark`}>{children}</body>
     </html>
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
index b70bf6b8..760c51f5 100644
--- a/packages/tailwind-config/tailwind.config.ts
+++ b/packages/tailwind-config/tailwind.config.ts
@@ -20,19 +20,14 @@ const config = {
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
+        foreground: "var(--foreground)",
+        "foreground-menu": "var(--foreground-menu)",
+        background: "var(--background)",
+        secondary: "var(--secondary)",
+        primary: "var(--primary)",
+        border: "var(--border)",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",