diff --git a/src/lib/components/recal/Left.svelte b/src/lib/components/recal/Left.svelte
index 6a41482b..a9734fb0 100644
--- a/src/lib/components/recal/Left.svelte
+++ b/src/lib/components/recal/Left.svelte
@@ -5,7 +5,7 @@
     import Events from "./left/Events.svelte";
 </script>
 
-<div class="w-full flex flex-col max-h-full overflow-y-hidden">
+<div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />
     </div>
@@ -44,7 +44,7 @@
     }
 
     section > div {
-        height: fit-content;
+        /* height: fit-content; */
         max-height: 100%;
         @apply overflow-y-hidden flex flex-col;
     }
diff --git a/src/routes/(landing)/(info)/contact/+page.svelte b/src/routes/(landing)/(info)/contact/+page.svelte
index 504d1269..4ae80ece 100644
--- a/src/routes/(landing)/(info)/contact/+page.svelte
+++ b/src/routes/(landing)/(info)/contact/+page.svelte
@@ -2,7 +2,7 @@
     <title>TigerJunction | Contact</title>
 </svelte:head>
 
-<div class="h-fit w-full px-4 pb-8 pt-4 max-w-7xl text-center">
+<div class="h-fit w-full px-4 pb-8 pt-4 max-w-7xl mt-16 text-center">
     <h1 class="text-3xl mb-2 font-bold">Contact Us</h1>
 
     <p class="mb-2">
diff --git a/src/routes/(landing)/(info)/privacy/+page.svelte b/src/routes/(landing)/(info)/privacy/+page.svelte
index a8706337..d0ea963b 100644
--- a/src/routes/(landing)/(info)/privacy/+page.svelte
+++ b/src/routes/(landing)/(info)/privacy/+page.svelte
@@ -2,7 +2,7 @@
     <title>TigerJunction | Privacy Policy</title>
 </svelte:head>
 
-<div class="text-left h-fit w-full px-4 pb-8 pt-4 max-w-7xl">
+<div class="text-left h-fit w-full px-4 pb-8 mt-16 pt-4 max-w-7xl">
     <h1 class="text-3xl mb-2 font-bold">Privacy Policy</h1>
 
     <p>
diff --git a/src/routes/(landing)/(info)/tos/+page.svelte b/src/routes/(landing)/(info)/tos/+page.svelte
index a15d9ba2..edca970d 100644
--- a/src/routes/(landing)/(info)/tos/+page.svelte
+++ b/src/routes/(landing)/(info)/tos/+page.svelte
@@ -2,7 +2,7 @@
     <title>TigerJunction | Terms of Service</title>
 </svelte:head>
 
-<div class="text-left h-fit w-full px-4 pb-8 pt-4 max-w-7xl">
+<div class="text-left h-fit w-full px-4 pb-8 pt-4 mt-16 max-w-7xl">
     <h1 class="text-3xl mb-2 font-bold">Terms of Service</h1>
 
     <p>
diff --git a/src/routes/(landing)/+page.svelte b/src/routes/(landing)/+page.svelte
index b1277f35..e7a00ea2 100644
--- a/src/routes/(landing)/+page.svelte
+++ b/src/routes/(landing)/+page.svelte
@@ -1,9 +1,36 @@
 <script lang="ts">
-    import { EMAIL_LIST_FORM_LINK } from "$lib/constants";
     import { handleLogin } from "$lib/scripts/supabase.js";
     import LandingFooter from "./LandingFooter.svelte";
     import LandingHeader from "./LandingHeader.svelte";
 
+    let currentFeature = "conflict";
+    const FEATURE_MAP: Record<string, Record<string, string>> = {
+        conflict: {
+            title: "Conflict Avoidance",
+            description:
+                "Avoid scheduling conflicts by filtering courses based on your existing schedule."
+        },
+        search: {
+            title: "Advanced Search",
+            description:
+                "Filter by distribution requirement, level, days, and more to find the perfect courses for your schedule."
+        },
+        themes: {
+            title: "Beautiful Themes",
+            description:
+                "Customize your experience with a variety of themes, including a 1-click dark mode."
+        },
+        ratings: {
+            title: "Integrated Ratings",
+            description: "View course ratings directly within the app."
+        },
+        events: {
+            title: "Custom Events",
+            description:
+                "Add custom events to your schedule, such as office hours, club meetings, and more. Integrates with conflict avoideance to ensure you never schedule over your activities."
+        }
+    };
+
     export let data;
 </script>
 
@@ -22,57 +49,49 @@
     <meta property="og:url" content="https://junction.tigerapps.org/" />
 </svelte:head>
 
-<div class="bg-white min-h-screen w-screen flex" id="main">
-    <div class="overlay flex-1 pt-2 flex flex-col items-center">
+<section class="bg-white w-screen flex" id="main">
+    <div class="overlay flex-1 pt-4 flex flex-col items-center">
         <LandingHeader supabase={data.supabase} />
 
-        <div class="max-w-7xl w-full px-4 sm:px-6 lg:px-8 mt-16">
-            <div class="lg:text-center">
-                <p
-                    class="mt-2 text-lg leading-8 font-bold
-                lg:text-2xl
-                tracking-tight text-zinc-900 sm:text-xl">
-                    TigerJunction
-                </p>
+        <div class="max-w-7xl w-full px-4 sm:px-6 lg:px-8 mt-24">
+            <div class="text-center">
                 <h1
-                    class="py-2 max-w-2xl text-4xl sm:text-6xl
-                font-extrabold uppercase
-                lg:mx-auto">
+                    class="py-2 max-w-4xl text-4xl sm:text-6xl
+                font-extrabold uppercase mx-auto">
                     <span class="text-pink-500"> Next </span>
                     <span class="text-indigo-500"> Generation </span>
                     <span class="text-blue-500"> Course </span>
                     <span class="text-purple-500"> Planning </span>
                 </h1>
                 <p
-                    class="mt-2 max-w-2xl text-lg sm:text-xl
-                lg:text-2xl
-                 text-zinc-500 lg:mx-auto">
+                    class="mt-2 max-w-2xl text-lg sm:text-xl lg:text-2xl
+                 text-zinc-600 mx-auto">
                     Princeton's premier academic planning platform. Explore
                     courses, plan your schedule, and succeed.
                 </p>
             </div>
 
             <div
-                class="flex gap-4 mt-6 lg:justify-center items-center
+                class="flex gap-4 mt-6 justify-center items-center
             text-sm sm:text-base">
+                <!-- <div class="flex justify-start lg:justify-center">
+                    <a
+                        href={EMAIL_LIST_FORM_LINK}
+                        target="_blank"
+                        class="blankbutton">
+                        Join Email List
+                    </a>
+                </div> -->
                 <div class="flex justify-start lg:justify-center">
                     <button
                         on:click={() => handleLogin(data.supabase)}
                         class="bg-indigo-600 hover:bg-indigo-500 text-white
-                    text-center py-2 px-4 rounded font-bold
+                    text-center py-2 px-12 rounded-lg font-bold
                      duration-100
                     ">
                         Get Started
                     </button>
                 </div>
-                <div class="flex justify-start lg:justify-center">
-                    <a
-                        href={EMAIL_LIST_FORM_LINK}
-                        target="_blank"
-                        class="blankbutton">
-                        Join Email List
-                    </a>
-                </div>
                 <!-- <div class="flex justify-start lg:justify-center">
                     <a href="about" class="blankbutton">
                         Learn More
@@ -81,64 +100,240 @@
             </div>
         </div>
 
-        <div class="flex-1"></div>
         <div
-            id="poweredby"
-            class="glassy max-w-lg
-        w-[90%] mx-auto">
-            <div class="text-zinc-500 text-center">Powered By</div>
+            class="max-w-4xl w-11/12 mt-12 rounded-xl overflow-hidden
+            shadow-2xl glassy">
+            <img
+                src="/recalplusscreenshot.png"
+                alt="Screenshot of the app"
+                class="w-full h-full
+                object-cover object-center rounded-xl
+                " />
+        </div>
+        <div class="flex-1"></div>
+
+        <!-- <LandingFooter /> -->
+    </div>
+</section>
+
+<section id="about" class="bg-indigo-50 py-32">
+    <div class="max-w-7xl p-4 mx-auto h-full">
+        <h2 class="text-4xl font-semibold text-zinc-800 text-center mb-8">
+            How it Works
+        </h2>
+        <div>
+            <div class="flex flex-col md:flex-row gap-4">
+                <div id="explore" class="flex-1 rounded-3xl">
+                    <div class="p-6 space-y-2 bg-white/70 rounded-3xl h-full">
+                        <h4>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="w-8 h-8">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                            </svg>
+                        </h4>
+                        <h3 class="text-2xl font-semibold text-zinc-800">
+                            Explore
+                        </h3>
+                        <p class="text-zinc-800 text-lg">
+                            Browse through the lightning-fast course search to
+                            find the perfect courses for your schedule. Use
+                            built-in ratings to make informed decisions, and
+                            powerful filters to narrow down your search.
+                        </p>
+                    </div>
+                </div>
+                <div id="plan" class="flex-1 rounded-3xl">
+                    <div class="p-6 space-y-2 bg-white/70 rounded-3xl h-full">
+                        <h4>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="w-8 h-8">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
+                            </svg>
+                        </h4>
+                        <h3 class="text-2xl font-semibold text-zinc-800">
+                            Plan
+                        </h3>
+                        <p class="text-zinc-800 text-lg">
+                            Add courses to your schedule to visualize your
+                            semester. Use the conflict avoidance feature to
+                            ensure you never double-book yourself.
+                        </p>
+                    </div>
+                </div>
+                <div id="export" class="flex-1 rounded-3xl">
+                    <div class="p-6 space-y-2 bg-white/70 rounded-3xl h-full">
+                        <h4>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="w-8 h-8">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+                            </svg>
+                        </h4>
+                        <h3 class="text-2xl font-semibold text-zinc-800">
+                            Export
+                        </h3>
+                        <p class="text-zinc-800 text-lg">
+                            Export your schedule to your favorite calendar app.
+                            Any changes you make will be periodically synced.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="features" class="bg-blue-200">
+    <div class="w-full h-full p-4 py-12 bg-white/40">
+        <div class="max-w-7xl p-4 mx-auto h-full">
+            <div class="text-center">
+                <h2 class="text-4xl font-semibold text-zinc-800">
+                    Features Students Love
+                </h2>
+                <p class="text-zinc-800 text-lg mt-2">
+                    Developed in collaboration with the student body,
+                    TigerJunction contains the features that students wanted to
+                    see.
+                </p>
+            </div>
+
             <div
-                class="w-full flex items-center
-            justify-center gap-4 mt-2">
-                <a href="https://svelte.dev/" target="_blank">
-                    <img src="/home/svelte.png" alt="Svelte" class="logo" />
-                </a>
-                <a href="https://www.typescriptlang.org/" target="_blank">
-                    <img src="/home/ts.png" alt="Typescript" class="logo" />
-                </a>
-                <a href="https://supabase.com/" target="_blank">
-                    <img src="/home/supabase.png" alt="Supabase" class="logo" />
-                </a>
-                <a href="https://redis.io/" target="_blank">
-                    <img src="/home/redis.svg" alt="Redis" class="logo" />
-                </a>
-                <a href="https://www.anthropic.com/" target="_blank">
-                    <img
-                        src="/home/anthropic.jpeg"
-                        alt="Anthropic"
-                        class="logo" />
-                </a>
-                <a href="https://tailwindcss.com/" target="_blank">
-                    <img
-                        src="/home/tailwind.png"
-                        alt="TailwindCSS"
-                        class="logo" />
-                </a>
-                <a href="https://sst.dev/" target="_blank">
-                    <img src="/home/sst.svg" alt="SST" class="logo" />
-                </a>
-                <a
-                    href="https://aws.amazon.com/what-is-cloud-computing"
-                    target="_blank">
-                    <img
-                        src="/home/aws.png"
-                        alt="Powered by AWS Cloud Computing"
-                        class="logo" />
-                </a>
-                <a href="https://www.cloudflare.com/" target="_blank">
-                    <img
-                        src="/home/cloudflare.png"
-                        alt="Cloudflare"
-                        class="logo" />
-                </a>
+                id="feature-grid"
+                class="flex md:flex-row flex-col-reverse w-full gap-4 md:gap-8 mt-12">
+                <div
+                    class="rounded-3xl bg-white p-4 flex flex-col
+                    justify-between md:w-80 w-full h-72">
+                    <button
+                        on:click={() => (currentFeature = "conflict")}
+                        class="feature-select
+                        {currentFeature === 'conflict'
+                            ? 'bg-gradient-to-br from-emerald-100 to-emerald-200'
+                            : 'hover:bg-zinc-100'}
+                        ">
+                        Conflict Avoidance
+                    </button>
+                    <button
+                        on:click={() => (currentFeature = "search")}
+                        class="feature-select
+                        {currentFeature === 'search'
+                            ? 'bg-gradient-to-br from-fuchsia-100 to-fuchsia-200'
+                            : 'hover:bg-zinc-100'}
+                    ">
+                        Advanced Search
+                    </button>
+                    <button
+                        on:click={() => (currentFeature = "themes")}
+                        class="feature-select
+                        {currentFeature === 'themes'
+                            ? 'bg-gradient-to-br from-violet-100 to-violet-200'
+                            : 'hover:bg-zinc-100'}
+                    ">
+                        Beautiful Themes
+                    </button>
+                    <button
+                        on:click={() => (currentFeature = "ratings")}
+                        class="feature-select
+                        {currentFeature === 'ratings'
+                            ? 'bg-gradient-to-br from-sky-100 to-sky-200'
+                            : 'hover:bg-zinc-100'}
+                    ">
+                        Integrated Ratings
+                    </button>
+                    <button
+                        on:click={() => (currentFeature = "events")}
+                        class="feature-select
+                            {currentFeature === 'events'
+                            ? 'bg-gradient-to-br from-teal-100 to-teal-200'
+                            : 'hover:bg-zinc-100'}
+                        ">
+                        Custom Events
+                    </button>
+                </div>
+                <div class="rounded-3xl p-4 bg-white flex-1 flex gap-4 h-72">
+                    <div class="w-1/3">
+                        <h3 class="text-2xl font-semibold text-zinc-800">
+                            {FEATURE_MAP[currentFeature].title}
+                        </h3>
+                        <p class="text-zinc-800 mt-1">
+                            {FEATURE_MAP[currentFeature].description}
+                        </p>
+                    </div>
+                    <div class="flex-1">
+                        <img
+                            src={`/feature/${currentFeature}.png`}
+                            alt="Feature screenshot"
+                            class="w-full h-full object-contain object-center rounded-lg" />
+                    </div>
+                </div>
             </div>
         </div>
+    </div>
+</section>
 
-        <LandingFooter />
+<section id="contact" class="bg-indigo-50 py-12 px-4">
+    <div id="cool-grad" class="rounded-3xl max-w-7xl mx-auto px-8 py-12">
+        <div class="mx-auto flex flex-col items-center gap-4">
+            <h2 class="text-3xl font-semibold text-zinc-800 text-center">
+                Join thousands of students in seamless academic planning.
+            </h2>
+            <button
+                on:click={() => handleLogin(data.supabase)}
+                class="bg-indigo-600 hover:bg-indigo-500 text-white
+                text-center py-2 px-8 font-bold
+                duration-100 rounded-lg
+                ">
+                Get Started
+            </button>
+        </div>
     </div>
-</div>
+</section>
+
+<LandingFooter />
 
 <style lang="postcss">
+    #features {
+        background-image: url("/bg/feat.jpg");
+        background-size: cover;
+        background-position: center;
+    }
+
+    .feature-select {
+        @apply w-full p-2 rounded-xl border border-zinc-200 text-zinc-800;
+    }
+
+    #cool-grad {
+        /* Blue to pink to purple  */
+        background-image: linear-gradient(
+            125deg,
+            #aba3ff65 5%,
+            rgba(255, 148, 237, 0.395) 50%,
+            rgba(197, 89, 255, 0.308) 950%
+        );
+    }
+
     #main {
         background-image: radial-gradient(
                 18% 28% at 24% 50%,
@@ -146,17 +341,21 @@
                 #ff6b6b00 100%
             ),
             radial-gradient(18% 28% at 18% 71%, #ffffff9c 6%, #ff6b6b00 100%),
-            radial-gradient(70% 53% at 36% 76%, #4ecdc4ff 0%, #ff6b6b00 100%),
+            radial-gradient(
+                70% 53% at 36% 76%,
+                rgb(36, 45, 227) 0%,
+                #ff6b6b00 100%
+            ),
             radial-gradient(42% 53% at 15% 94%, #ffffffff 7%, #ff6b6b00 100%),
             radial-gradient(42% 53% at 34% 72%, #ffffffff 7%, #ff6b6b00 100%),
-            radial-gradient(18% 28% at 35% 87%, #c44effcc 7%, #ff6b6b00 100%),
+            radial-gradient(18% 28% at 35% 87%, #f245c1cc 7%, #ff6b6b00 100%),
             radial-gradient(31% 43% at 7% 98%, #ffffffff 24%, #ff6b6b00 100%),
-            radial-gradient(21% 37% at 72% 23%, #ffd93daa 24%, #ff6b6b00 100%),
+            radial-gradient(21% 37% at 72% 23%, #ff31eeaa 24%, #ff6b6b00 100%),
             radial-gradient(35% 56% at 91% 74%, #c44effcc 9%, #ff6b6b00 100%),
             radial-gradient(74% 86% at 67% 38%, #4ecdc4ff 24%, #ff6b6b00 100%),
             linear-gradient(125deg, #ff6b6bcc 1%, #ffffffff 100%);
         background-size: 200% 200%;
-        animation: gradient 8s ease infinite;
+        animation: gradient 20s ease infinite;
     }
 
     @keyframes gradient {
@@ -172,27 +371,28 @@
     }
 
     .overlay {
-        background-color: rgba(255, 255, 255, 0.2);
+        @apply bg-gradient-to-b from-white/40 to-indigo-50 from-40%;
     }
 
     .glassy {
         background-color: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
-        border-radius: 10px;
-        padding: 20px;
-        margin: 20px;
         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
+        @apply p-2 sm:p-6 rounded-3xl;
+    }
+
+    #explore {
+        background-image: url("/bg/explore.jpg");
+        background-size: cover;
     }
 
-    .logo {
-        @apply w-7 h-7 inline-block object-contain;
+    #plan {
+        background-image: url("/bg/plan.jpg");
+        background-size: cover;
     }
 
-    .blankbutton {
-        @apply inline-block px-4 py-2 border 
-                    text-center
-                    rounded text-black border-black hover:text-zinc-600
-                    hover:border-zinc-600
-                     duration-100;
+    #export {
+        background-image: url("/bg/export.jpg");
+        background-size: cover;
     }
 </style>
diff --git a/src/routes/(landing)/LandingFooter.svelte b/src/routes/(landing)/LandingFooter.svelte
index 4fa67692..a02f04df 100644
--- a/src/routes/(landing)/LandingFooter.svelte
+++ b/src/routes/(landing)/LandingFooter.svelte
@@ -2,7 +2,7 @@
     <div
         class="text-center text-zinc-500 text-sm
     flex items-center justify-center gap-4">
-        <div>© 2024 TigerJunction</div>
+        <div>© 2024 TigerApps</div>
         <a
             href="https://github.com/TigerAppsOrg/tiger-junction"
             target="_blank">
diff --git a/src/routes/(landing)/LandingHeader.svelte b/src/routes/(landing)/LandingHeader.svelte
index f46daf21..27b91778 100644
--- a/src/routes/(landing)/LandingHeader.svelte
+++ b/src/routes/(landing)/LandingHeader.svelte
@@ -1,50 +1,107 @@
 <script lang="ts">
     import { handleLogin } from "$lib/scripts/supabase";
     import type { SupabaseClient } from "@supabase/supabase-js";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
 
     export let supabase: SupabaseClient;
 </script>
 
-<div class="max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
-    <nav class="flex items-center justify-between flex-wrap">
-        <a href="/" class="flex items-center flex-shrink-0 text-black mr-6">
+<div
+    class="max-w-7xl mx-4 px-4 py-2 w-11/12 bg-white rounded-2xl
+    fixed shadow-md z-50">
+    <nav class="grid grid-cols-3">
+        <a
+            href="/"
+            on:click|preventDefault={() => {
+                if ($page.url.pathname === "/") {
+                    document.getElementById("main")?.scrollIntoView({
+                        behavior: "smooth"
+                    });
+                } else {
+                    goto("/");
+                }
+            }}
+            class="flex items-center flex-shrink-0 gap-1 text-black mr-6">
             <img
                 src="/tjlogonew.png"
                 alt="Tiger Junction logo"
-                class="w-12 h-12" />
+                class="w-10 h-10" />
             <span class="font-semibold text-xl tracking-tight"
                 >TigerJunction</span>
         </a>
-        <div class="flex-grow flex items-center w-auto">
-            <div class="text-sm flex-grow">
-                <!-- <a href="/about" class="link">
-                About
-            </a>
-            <a href="/developer" class="link">
-                API
-            </a>
-            <a href="/blog" class="link">
-                Blog
-            </a>
-            <a href="/contact" class="link">
-                Contact
-            </a> -->
-            </div>
-            <div>
-                <button
-                    on:click={() => handleLogin(supabase)}
-                    class="inline-block text-sm px-4 py-2 leading-none border rounded
-             text-black border-black hover:text-zinc-600
-            hover:border-zinc-600">
-                    Login
-                </button>
-            </div>
+        <div
+            class="items-center justify-center lg:gap-8 gap-4 flex invisible sm:visible">
+            {#if $page.url.pathname === "/"}
+                <a
+                    href="/#about"
+                    on:click|preventDefault={() => {
+                        document.getElementById("about")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    About
+                </a>
+                <a
+                    href="/#features"
+                    on:click|preventDefault={() => {
+                        document.getElementById("features")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    Features
+                </a>
+                <!-- <a
+                    href="/#contact"
+                    on:click|preventDefault={() => {
+                        document.getElementById("contact")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    Contact
+                </a> -->
+            {/if}
+        </div>
+        <div class="flex items-center justify-end">
+            <button
+                on:click={() => handleLogin(supabase)}
+                class="bg-indigo-600 hover:bg-indigo-500 text-white
+                    text-center px-4 py-2 rounded-lg font-bold
+                     duration-100">
+                Log In
+            </button>
         </div>
     </nav>
 </div>
 
 <style lang="postcss">
-    /* .link {
-        @apply inline-block mt-0 text-black hover:text-zinc-600 mr-4;
-    } */
+    nav {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .nav-link {
+        position: relative;
+        text-decoration: none;
+    }
+
+    .nav-link::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        transform: scaleX(0);
+        transform-origin: bottom right;
+        transition: transform 0.3s ease-out;
+        @apply bg-indigo-600;
+    }
+
+    .nav-link:hover::after {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+    }
 </style>
diff --git a/static/bg/explore.jpg b/static/bg/explore.jpg
new file mode 100644
index 00000000..ba79d512
Binary files /dev/null and b/static/bg/explore.jpg differ
diff --git a/static/bg/export.jpg b/static/bg/export.jpg
new file mode 100644
index 00000000..c7d3e587
Binary files /dev/null and b/static/bg/export.jpg differ
diff --git a/static/bg/feat.jpg b/static/bg/feat.jpg
new file mode 100644
index 00000000..eec007e0
Binary files /dev/null and b/static/bg/feat.jpg differ
diff --git a/static/bg/plan.jpg b/static/bg/plan.jpg
new file mode 100644
index 00000000..8e5745fe
Binary files /dev/null and b/static/bg/plan.jpg differ
diff --git a/static/feature/conflict.png b/static/feature/conflict.png
new file mode 100644
index 00000000..e0f5a98c
Binary files /dev/null and b/static/feature/conflict.png differ
diff --git a/static/feature/events.png b/static/feature/events.png
new file mode 100644
index 00000000..81655cfc
Binary files /dev/null and b/static/feature/events.png differ
diff --git a/static/feature/ratings.png b/static/feature/ratings.png
new file mode 100644
index 00000000..62705960
Binary files /dev/null and b/static/feature/ratings.png differ
diff --git a/static/feature/search.png b/static/feature/search.png
new file mode 100644
index 00000000..2a424040
Binary files /dev/null and b/static/feature/search.png differ
diff --git a/static/feature/themes.png b/static/feature/themes.png
new file mode 100644
index 00000000..c6e5fa3c
Binary files /dev/null and b/static/feature/themes.png differ
diff --git a/static/recalplusscreenshot.png b/static/recalplusscreenshot.png
index ecafc475..61ea244c 100644
Binary files a/static/recalplusscreenshot.png and b/static/recalplusscreenshot.png differ