diff --git a/bun.lock b/bun.lock
index 83542e56d..60e4dd794 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "inline",
+      "dependencies": {
+        "zustand": "^5.0.9",
+      },
       "devDependencies": {
         "oxlint": "^0.16.0",
       },
@@ -1975,6 +1978,8 @@
 
     "zod": ["zod@3.25.23", "", {}, "sha512-Od2bdMosahjSrSgJtakrwjMDb1zM1A3VIHCPGveZt/3/wlrTWBya2lmEh2OYe4OIu8mPTmmr0gnLHIWQXdtWBg=="],
 
+    "zustand": ["zustand@5.0.9", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg=="],
+
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@anthropic-ai/sdk/@types/node": ["@types/node@18.19.76", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-yvR7Q9LdPz2vGpmpJX5LolrgRdWvB67MJKDPSgIIzpFbaf9a1j/f5DnLp5VDyHGMR0QZHlTr1afsD87QCXFHKw=="],
diff --git a/desktop/bun.lock b/desktop/bun.lock
index 945c2f02a..cb72b8724 100644
--- a/desktop/bun.lock
+++ b/desktop/bun.lock
@@ -4,7 +4,7 @@
     "": {
       "name": "@inline-chat/desktop",
       "dependencies": {
-        "electron": "^38.2.2",
+        "electron": "^39.2.6",
       },
     },
   },
@@ -49,7 +49,7 @@
 
     "detect-node": ["detect-node@2.1.0", "", {}, "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="],
 
-    "electron": ["electron@38.2.2", "", { "dependencies": { "@electron/get": "^2.0.0", "@types/node": "^22.7.7", "extract-zip": "^2.0.1" }, "bin": { "electron": "cli.js" } }, "sha512-OXSaVNXDlonXDjMRsFNQo1j5tzTKwKXh5/m46IjAFccBcZJZMISI+EjSI07oexIuhvKM8AZLuFuihVn4YjWWrA=="],
+    "electron": ["electron@39.2.6", "", { "dependencies": { "@electron/get": "^2.0.0", "@types/node": "^22.7.7", "extract-zip": "^2.0.1" }, "bin": { "electron": "cli.js" } }, "sha512-dHBgTodWBZd+tL1Dt0PSh/CFLHeDkFCTKCTXu1dgPhlE9Z3k2zzlBQ9B2oW55CFsKanBDHiUomHJNw0XaSdQpA=="],
 
     "end-of-stream": ["end-of-stream@1.4.5", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg=="],
 
diff --git a/desktop/package.json b/desktop/package.json
index 63796038f..d1dcea158 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -7,7 +7,7 @@
     "dev": "bun scripts/dev.ts"
   },
   "dependencies": {
-    "electron": "^38.2.2"
+    "electron": "^39.2.6"
   },
   "devDependencies": {}
 }
diff --git a/desktop/src/index.ts b/desktop/src/index.ts
index 32f5475a5..70a5888da 100644
--- a/desktop/src/index.ts
+++ b/desktop/src/index.ts
@@ -6,8 +6,8 @@ app.whenReady().then(() => {
     height: 600,
     transparent: true,
     trafficLightPosition: {
-      x: 18,
-      y: 18,
+      x: 14,
+      y: 14,
     },
 
     frame: true,
@@ -17,5 +17,5 @@ app.whenReady().then(() => {
     titleBarStyle: "hidden",
     vibrancy: "popover",
   });
-  mainWindow.loadURL("http://localhost:8001");
+  mainWindow.loadURL("http://localhost:8001/app");
 });
diff --git a/package.json b/package.json
index 755fe6b1b..455855bcf 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,8 @@
   },
   "devDependencies": {
     "oxlint": "^0.16.0"
+  },
+  "dependencies": {
+    "zustand": "^5.0.9"
   }
 }
diff --git a/server/package.json b/server/package.json
index 6659e0f52..854754e7d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -10,7 +10,6 @@
     "test": "bun test",
     "typecheck": "tsc --build",
     "db:migrate": "bun scripts/migrate.ts",
-    "eval:setup": "bun scripts/setup-willdo-eval-env.ts",
     "db:dangerously-reset-db": "bun scripts/reset-db.ts",
     "db:generate": "drizzle-kit generate --schema src/db/schema/index.ts --out drizzle --dialect postgresql --name",
     "db:push": "drizzle-kit push --schema src/db/schema/index.ts --dialect postgresql",
diff --git a/web/public/fonts/DaysOne-Regular.ttf b/web/public/fonts/DaysOne-Regular.ttf
new file mode 100644
index 000000000..2b5c966d3
Binary files /dev/null and b/web/public/fonts/DaysOne-Regular.ttf differ
diff --git a/web/public/fonts/DaysOne-Regular.woff2 b/web/public/fonts/DaysOne-Regular.woff2
new file mode 100644
index 000000000..f8af574b4
Binary files /dev/null and b/web/public/fonts/DaysOne-Regular.woff2 differ
diff --git a/web/src/components/largeButton/LargeButton.tsx b/web/src/components/largeButton/LargeButton.tsx
new file mode 100644
index 000000000..430de4f5f
--- /dev/null
+++ b/web/src/components/largeButton/LargeButton.tsx
@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex"
+import { colors } from "~/theme/tokens.stylex"
+import { FileRouteTypes } from "~/routeTree.gen"
+import { Link } from "@tanstack/react-router"
+
+type LargeButtonProps =
+  | ({ to: React.ComponentProps<typeof Link>["to"] } & Omit<React.ComponentProps<typeof Link>, "to">) // link variant
+  | React.ButtonHTMLAttributes<HTMLButtonElement> // button variant
+
+export const LargeButton = (props: LargeButtonProps) => {
+  if ("to" in props) {
+    return <Link {...props} {...stylex.props(styles.largeButton)} />
+  }
+
+  return <button {...stylex.props(styles.largeButton)} {...props} />
+}
+
+const styles = stylex.create({
+  largeButton: {
+    backgroundColor: colors.accent,
+    color: colors.primaryText,
+    height: 40,
+    lineHeight: "40px",
+    borderRadius: 14,
+    paddingLeft: 32,
+    paddingRight: 32,
+    fontSize: 18,
+    fontWeight: 500,
+    cursor: "pointer",
+
+    ":hover": {
+      backgroundColor: colors.accent,
+      opacity: 0.9,
+    },
+    ":active": {
+      backgroundColor: colors.accent,
+      opacity: 1,
+    },
+  },
+})
diff --git a/web/src/components/largeTextField/LargeTextField.tsx b/web/src/components/largeTextField/LargeTextField.tsx
new file mode 100644
index 000000000..8e788cd8e
--- /dev/null
+++ b/web/src/components/largeTextField/LargeTextField.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as stylex from "@stylexjs/stylex"
+import { colors } from "~/theme/tokens.stylex"
+
+type LargeTextFieldProps = React.InputHTMLAttributes<HTMLInputElement>
+
+export const LargeTextField = React.forwardRef<HTMLInputElement, LargeTextFieldProps>(
+  ({ type = "text", ...props }, ref) => {
+    return <input ref={ref} type={type} {...stylex.props(styles.input)} {...props} />
+  },
+)
+
+LargeTextField.displayName = "LargeTextField"
+
+const styles = stylex.create({
+  input: {
+    width: "100%",
+    maxWidth: 420,
+    height: 44,
+    borderRadius: 12,
+    border: `1px solid ${colors.lineColor}`,
+    paddingLeft: 14,
+    paddingRight: 14,
+    fontSize: 16,
+    color: colors.primaryText,
+    backgroundColor: colors.primaryBg,
+    transitionProperty: "border-color, box-shadow, transform",
+    transitionDuration: "120ms",
+
+    ":focus-visible": {
+      outline: "none",
+      borderColor: colors.accent,
+      boxShadow: `0 0 0 3px rgba(0, 0, 0, 0.06)`,
+      transform: "translateY(-1px)",
+    },
+  },
+})
diff --git a/web/src/components/primitives/primitives.tsx b/web/src/components/primitives/primitives.tsx
new file mode 100644
index 000000000..8ad62dbac
--- /dev/null
+++ b/web/src/components/primitives/primitives.tsx
@@ -0,0 +1,3 @@
+export const Spacer = ({ h, w }: { h?: number; w?: number }) => {
+  return <div style={{ height: h ? `${h}px` : undefined, width: w ? `${w}px` : undefined }} />
+}
diff --git a/web/src/landing/index.tsx b/web/src/landing/index.tsx
index ae0a9c932..7981917e9 100644
--- a/web/src/landing/index.tsx
+++ b/web/src/landing/index.tsx
@@ -5,7 +5,7 @@ import * as stylex from "@stylexjs/stylex"
 import { useEffect, useRef, useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
 
-import "./styles/style.css"
+//import "./styles/style.css"
 
 const addTransitionEffect = () => {
   const style = document.createElement("style")
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index 92a33cdc9..82bdde68c 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-import stylesheet from "../styles/app.css?url"
+import stylesheet from "../styles/tailwind.css?url"
 import stylesheet2 from "../styles/stylex.css?url"
 import { type ReactNode } from "react"
 import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router"
diff --git a/web/src/routes/app/index.tsx b/web/src/routes/app/index.tsx
new file mode 100644
index 000000000..5201dad78
--- /dev/null
+++ b/web/src/routes/app/index.tsx
@@ -0,0 +1,29 @@
+import { createFileRoute, Link, Navigate } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { Fonts } from "~/theme/fonts"
+import { colors } from "~/theme/tokens.stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+import { useState } from "react"
+import { useAuthStore, useIsLoggedIn } from "~/store/auth"
+
+export const Route = createFileRoute("/app/")({
+  component: App,
+
+  head: () => ({
+    meta: [
+      {
+        title: "Inline",
+      },
+    ],
+  }),
+})
+
+function App() {
+  const isLoggedIn = useIsLoggedIn()
+
+  if (!isLoggedIn) {
+    return <Navigate to="/app/login/welcome" />
+  }
+
+  return <></>
+}
diff --git a/web/src/routes/app/login/email.tsx b/web/src/routes/app/login/email.tsx
new file mode 100644
index 000000000..b03b9a91f
--- /dev/null
+++ b/web/src/routes/app/login/email.tsx
@@ -0,0 +1,63 @@
+import { createFileRoute } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+import { LargeTextField } from "~/components/largeTextField/LargeTextField"
+
+export const Route = createFileRoute("/app/login/email")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.subheading)}>Continue via Email</div>
+
+      <LargeTextField placeholder="Enter your email" />
+
+      <LargeButton to="/app/login/code">Continue</LargeButton>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  logo: {
+    margin: "0 auto",
+    textAlign: "center",
+    width: 120,
+    filter: "invert(1)",
+  },
+
+  subheading: {
+    fontSize: 24,
+    maxWidth: 500,
+    margin: "0 auto",
+
+    opacity: 0.8,
+    textAlign: "center",
+    fontWeight: 500,
+
+    marginTop: 38,
+    marginBottom: 38,
+  },
+})
diff --git a/web/src/routes/app/login/index.tsx b/web/src/routes/app/login/index.tsx
new file mode 100644
index 000000000..f1c14db11
--- /dev/null
+++ b/web/src/routes/app/login/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute, Link, Navigate, Outlet, useNavigate, useRouter } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/app/login/")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <Navigate to="/app/login/welcome" />
+}
diff --git a/web/src/routes/app/login/route.tsx b/web/src/routes/app/login/route.tsx
new file mode 100644
index 000000000..cd689d45d
--- /dev/null
+++ b/web/src/routes/app/login/route.tsx
@@ -0,0 +1,40 @@
+import { createFileRoute, Link, Outlet, useNavigate, useRouter } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { useIsLoggedIn } from "~/store/auth"
+
+export const Route = createFileRoute("/app/login")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.content)}>
+        <Outlet />
+      </div>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+})
diff --git a/web/src/routes/app/login/welcome.tsx b/web/src/routes/app/login/welcome.tsx
new file mode 100644
index 000000000..93c6f6bc3
--- /dev/null
+++ b/web/src/routes/app/login/welcome.tsx
@@ -0,0 +1,66 @@
+import { createFileRoute } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+
+export const Route = createFileRoute("/app/login/welcome")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.logo)}>
+        <img src="/logotype-white.svg" alt="Inline" width="100%" />
+      </div>
+
+      <div {...stylex.props(styles.subheading)}>
+        Welcome to Inline — the next-gen work chat app designed for high-performance teams.
+      </div>
+
+      <LargeButton to="/app/login/email">Continue</LargeButton>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  logo: {
+    margin: "0 auto",
+    textAlign: "center",
+    width: 120,
+    filter: "invert(1)",
+  },
+
+  subheading: {
+    fontSize: 24,
+    maxWidth: 500,
+    margin: "0 auto",
+
+    opacity: 0.8,
+    textAlign: "center",
+    fontWeight: 500,
+
+    marginTop: 38,
+    marginBottom: 38,
+  },
+})
diff --git a/web/src/routes/app/route.tsx b/web/src/routes/app/route.tsx
new file mode 100644
index 000000000..3cb3fa9f4
--- /dev/null
+++ b/web/src/routes/app/route.tsx
@@ -0,0 +1,29 @@
+// Layout route for the app
+import { createFileRoute, Outlet } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { darkTheme } from "~/theme/themes"
+
+import styleCssUrl from "../../styles/app.css?url"
+
+export const Route = createFileRoute("/app")({
+  component: RouteComponent,
+
+  head: () => ({
+    links: [{ rel: "stylesheet", href: styleCssUrl }],
+  }),
+})
+
+function RouteComponent() {
+  return (
+    <div {...stylex.props(darkTheme, styles.container)}>
+      <Outlet />
+    </div>
+  )
+}
+
+const styles = stylex.create({
+  container: {
+    height: "100%",
+    width: "100%",
+  },
+})
diff --git a/web/src/routes/docs.tsx b/web/src/routes/docs.tsx
index dd2c41702..b38aaf302 100644
--- a/web/src/routes/docs.tsx
+++ b/web/src/routes/docs.tsx
@@ -5,7 +5,7 @@ import { PageContainer, PageLongFormContent, PageHeader } from "../landing/compo
 import { PageFooter } from "../landing/components/PageFooter"
 import { PageMarkdown } from "~/landing/components/PageMarkdown"
 
-import "../landing/styles/style.css"
+import styleCssUrl from "../landing/styles/style.css?url"
 import "../landing/styles/page-content.css"
 import { createFileRoute } from "@tanstack/react-router"
 
@@ -13,6 +13,10 @@ import { createFileRoute } from "@tanstack/react-router"
 
 export const Route = createFileRoute("/docs")({
   component: Docs,
+
+  head: () => ({
+    links: [{ rel: "stylesheet", href: styleCssUrl }],
+  }),
 })
 
 function Docs() {
diff --git a/web/src/routes/home.tsx b/web/src/routes/home.tsx
deleted file mode 100644
index bf3c5ab7e..000000000
--- a/web/src/routes/home.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { Landing } from "../landing"
-
-function Home() {
-  return <Landing />
-}
-
-export const Route = createFileRoute("/home")({
-  component: Home,
-
-  head: () => ({
-    links: [
-      { rel: "preload", href: "/content-bg.jpg", as: "image" },
-      {
-        rel: "preload",
-        href: "/content-bg@2x.jpg",
-        as: "image",
-        media: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)",
-      },
-    ],
-
-    meta: [
-      {
-        title: "Inline - Work chat 2.0",
-        // title: "Inline Chat - A new way to chat at work built for collective thinking",
-      },
-      {
-        name: "description",
-        content: "We're building a native, fast, powerful chat app for high-performance teams.",
-      },
-      { name: "twitter:card", content: "summary_large_image" },
-      {
-        name: "twitter:title",
-        content: "Inline - Work chat 2.0",
-      },
-      {
-        name: "twitter:description",
-        content:
-          "Inline is a fast, lightweight, scalable, and powerful work chat app designed to spark new ideas, enable maximum sharing, while allowing longest possible focus time.",
-      },
-      {
-        name: "twitter:image",
-        content: "https://inline.chat/twitter-og.jpg",
-      },
-      { name: "og:image", content: "https://inline.chat/twitter-og.jpg" },
-    ],
-  }),
-})
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index b7aa61a1e..d2e8e0c03 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { Landing } from "../landing"
+import styleCssUrl from "../landing/styles/style.css?url"
 
 function Home() {
   return <Landing />
@@ -17,6 +18,8 @@ export const Route = createFileRoute("/")({
         as: "image",
         media: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)",
       },
+
+      { rel: "stylesheet", href: styleCssUrl },
     ],
 
     meta: [
diff --git a/web/src/routes/privacy.tsx b/web/src/routes/privacy.tsx
index f4978ff50..911b156db 100644
--- a/web/src/routes/privacy.tsx
+++ b/web/src/routes/privacy.tsx
@@ -5,7 +5,7 @@ import { PageContainer, PageLongFormContent, PageHeader } from "../landing/compo
 import { PageFooter } from "../landing/components/PageFooter"
 import { PageMarkdown } from "~/landing/components/PageMarkdown"
 
-import "../landing/styles/style.css"
+import styleCssUrl from "../landing/styles/style.css?url"
 import "../landing/styles/page-content.css"
 
 export const Route = createFileRoute("/privacy")({
@@ -19,6 +19,8 @@ export const Route = createFileRoute("/privacy")({
         content: "We're committed to protect Inline users' privacy and data while providing a great user experience.",
       },
     ],
+
+    links: [{ rel: "stylesheet", href: styleCssUrl }],
   }),
 })
 
diff --git a/web/src/store/auth.tsx b/web/src/store/auth.tsx
new file mode 100644
index 000000000..6e9f9317a
--- /dev/null
+++ b/web/src/store/auth.tsx
@@ -0,0 +1,42 @@
+import { create, ExtractState } from "zustand"
+import { persist, createJSONStorage } from "zustand/middleware"
+
+type AuthState = {
+  token: null | string
+  currentUserId: null | number
+
+  saveAuthentication: (token: string, userId: number) => void
+  clearAuthentication: () => void
+}
+
+export const useAuthStore = create(
+  persist<AuthState>(
+    (set) => ({
+      token: null as null | string,
+      currentUserId: null as null | number,
+
+      // Actions
+      saveAuthentication: (token: string, userId: number) => set(() => ({ token, userId })),
+      clearAuthentication: () => set(() => ({ token: null, currentUserId: null })),
+    }),
+    {
+      name: "auth-store",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+)
+
+export const useIsLoggedIn = () => {
+  const token = useAuthStore((state: AuthState) => state.token)
+  const currentUserId = useAuthStore((state: AuthState) => state.currentUserId)
+
+  return token != null && currentUserId != null
+}
+
+export const useToken = () => {
+  return useAuthStore((state: AuthState) => state.token)
+}
+
+export const useCurrentUserId = () => {
+  return useAuthStore((state: AuthState) => state.currentUserId)
+}
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index f1d8c73cd..a1b97eaa5 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -1 +1,36 @@
-@import "tailwindcss";
+@font-face {
+  font-family: "Days One";
+  src: url("/fonts/DaysOne-Regular.woff2") format("woff2"), url("/fonts/DaysOne-Regular.ttf") format("ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+div,
+span,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label,
+img,
+button,
+a {
+  user-select: none;
+  cursor: default;
+  -webkit-user-drag: none;
+}
+
+button,
+a {
+  cursor: default;
+}
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
new file mode 100644
index 000000000..f1d8c73cd
--- /dev/null
+++ b/web/src/styles/tailwind.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/web/src/theme/fonts.tsx b/web/src/theme/fonts.tsx
new file mode 100644
index 000000000..637bfd952
--- /dev/null
+++ b/web/src/theme/fonts.tsx
@@ -0,0 +1,3 @@
+export const Fonts = {
+  DaysOne: "Days One",
+}
diff --git a/web/src/theme/themes.tsx b/web/src/theme/themes.tsx
new file mode 100644
index 000000000..16775e0e3
--- /dev/null
+++ b/web/src/theme/themes.tsx
@@ -0,0 +1,20 @@
+import * as stylex from "@stylexjs/stylex"
+import { colors } from "./tokens.stylex"
+
+// A constant can be used to avoid repeating the media query
+const DARK = "@media (prefers-color-scheme: dark)"
+
+// Dracula theme
+export const darkTheme = stylex.createTheme(colors, {
+  accent: { default: "#222", [DARK]: "white" },
+  lineColor: { default: "gray", [DARK]: "white" },
+
+  primaryBg: { default: "black", [DARK]: "white" },
+  secondaryBg: { default: "gray", [DARK]: "white" },
+  tertiaryBg: { default: "darkgray", [DARK]: "white" },
+  quaternaryBg: { default: "darkergray", [DARK]: "white" },
+  quinaryBg: { default: "darkestgray", [DARK]: "white" },
+
+  primaryText: { default: "white", [DARK]: "black" },
+  secondaryText: { default: "gray", [DARK]: "white" },
+})
diff --git a/web/src/theme/tokens.stylex.tsx b/web/src/theme/tokens.stylex.tsx
new file mode 100644
index 000000000..fa9f2120c
--- /dev/null
+++ b/web/src/theme/tokens.stylex.tsx
@@ -0,0 +1,18 @@
+import * as stylex from "@stylexjs/stylex"
+
+export const colors = stylex.defineVars({
+  // General Colors
+  accent: "black",
+  lineColor: "gray",
+
+  // Background Colors
+  primaryBg: "white",
+  secondaryBg: "gray",
+  tertiaryBg: "darkgray",
+  quaternaryBg: "darkergray",
+  quinaryBg: "darkestgray",
+
+  // Text Colors
+  primaryText: "black",
+  secondaryText: "#333",
+})