diff --git a/app/src-tauri/src/main.rs b/app/src-tauri/src/main.rs
index 8086c5c..60894e8 100644
--- a/app/src-tauri/src/main.rs
+++ b/app/src-tauri/src/main.rs
@@ -13,7 +13,6 @@ use creator_core::{
             get_values_at_frame_range_from_animated_float_vec3,
         },
         timeline::calculate_timeline_at_curr_frame,
-        *,
     },
     fonts::fonts::{get_system_families, get_system_font, get_system_fonts},
 };
diff --git a/web/src/components/Button.astro b/web/src/components/Button.astro
index 33f55b7..eadd72d 100644
--- a/web/src/components/Button.astro
+++ b/web/src/components/Button.astro
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
-const button = cva(
+export const button = cva(
     cn(
         "inline-flex items-center justify-center rounded-md text-sm font-medium",
         "transition-colors focus-visible:outline-none",
@@ -15,6 +15,7 @@ const button = cva(
         variants: {
             variant: {
                 default: "bg-main text-neutral hocus:bg-main/80",
+                primary: "bg-primary/50 text-main hocus:bg-primary/80",
                 destructive:
                     "bg-error text-destructive-foreground hocus:bg-destructive/90",
                 outline:
diff --git a/web/src/components/Layout/Header.astro b/web/src/components/Layout/Header.astro
new file mode 100644
index 0000000..d14341d
--- /dev/null
+++ b/web/src/components/Layout/Header.astro
@@ -0,0 +1,18 @@
+---
+import Button, { button } from "../Button.astro";
+import TempbladeLogo from "components/Logo/tempblade.astro";
+---
+
+<header class="fixed top-0 w-full h-16 z-50">
+    <div
+        class="flex flex-row justify-between h-full w-full max-w-section m-auto p-main"
+    >
+        <div class="w-16 h-8 flex">
+            <TempbladeLogo />
+        </div>
+        <a
+            class={button({ variant: "primary", size: "default" })}
+            href="https://github.com/tempblade/creator/releases">Download</a
+        >
+    </div>
+</header>
diff --git a/web/src/components/Logo/tempblade.astro b/web/src/components/Logo/tempblade.astro
new file mode 100644
index 0000000..edf4f91
--- /dev/null
+++ b/web/src/components/Logo/tempblade.astro
@@ -0,0 +1,43 @@
+<svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 372 306"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.5;"
+>
+    <g>
+        <g id="Tb">
+            <path
+                id="T"
+                d="M250.532,6.303L250.532,56.321L157.88,56.321L157.88,233.339L100.536,233.339L100.536,56.321L6.186,56.321L6.186,6.303L250.532,6.303Z"
+                style="fill:url(#_Linear2);fill-rule:nonzero;"></path>
+            <path
+                id="b"
+                class="stroke-main"
+                d="M133.511,6.303L133.511,41.339L172.011,41.339L172.171,248.131L204.414,248.131L204.414,280.374L317.268,280.374L317.268,248.131L349.511,248.131L349.511,151.4L317.268,151.4L317.268,119.156L235.046,119.156L235.046,151.4"
+                style="fill:none;stroke-width:30.45px;"></path>
+        </g>
+    </g>
+    <defs>
+        <linearGradient
+            id="_Linear2"
+            x1="0"
+            y1="0"
+            x2="1"
+            y2="0"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(244.346,0,0,227.036,6.18639,119.821)"
+            ><stop
+                offset="0"
+                class="text-main"
+                style="stop-color:currentColor;stop-opacity:1"></stop>
+            <stop
+                offset="1"
+                class="text-main/50"
+                style="stop-color:currentColor;stop-opacity:1"></stop>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/web/src/layouts/RootLayout.astro b/web/src/layouts/RootLayout.astro
index 723fa92..c77d017 100644
--- a/web/src/layouts/RootLayout.astro
+++ b/web/src/layouts/RootLayout.astro
@@ -1,5 +1,6 @@
 ---
 import Footer from "@/components/Layout/Footer.astro";
+import Header from "@/components/Layout/Header.astro";
 import "@/styles/global.css";
 
 export interface Props {
@@ -24,6 +25,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<Header />
 		<slot />
 		<Footer />
 	</body>
diff --git a/web/src/sections/Features.astro b/web/src/sections/Features.astro
index c0fb8f1..5b3f7a5 100644
--- a/web/src/sections/Features.astro
+++ b/web/src/sections/Features.astro
@@ -69,6 +69,4 @@ const features: Array<Feature> = [
             );
         });
     }
-
-    console.log(cardsContainer);
 </script>
diff --git a/web/src/sections/Introduction.astro b/web/src/sections/Introduction.astro
index 655bcd5..7ba6132 100644
--- a/web/src/sections/Introduction.astro
+++ b/web/src/sections/Introduction.astro
@@ -2,7 +2,7 @@
 import Heading from "@/components/Heading.astro";
 ---
 
-<div class="flex flex-col gap-4">
+<div id="introduction-content-container" class="flex flex-col gap-4">
     <Heading>
         The Next Generation Motion Design Tool - Free & Open Source
     </Heading>
@@ -28,3 +28,26 @@ import Heading from "@/components/Heading.astro";
         patreon!
     </p>
 </div>
+
+<script>
+    import { ease } from "@unom/style";
+    import { animate, inView, stagger } from "motion";
+
+    const contentContainer = document.getElementById(
+        "introduction-content-container"
+    );
+
+    const children = document.querySelectorAll(
+        "#introduction-content-container *"
+    );
+
+    if (contentContainer) {
+        inView(contentContainer, () => {
+            animate(
+                children,
+                { y: [20, 0], opacity: [0, 1] },
+                { ...ease.quint(0.8).out, delay: stagger(0.1) }
+            );
+        });
+    }
+</script>
diff --git a/web/src/sections/Landing.astro b/web/src/sections/Landing.astro
index 9ae141d..e375f05 100644
--- a/web/src/sections/Landing.astro
+++ b/web/src/sections/Landing.astro
@@ -1,5 +1,5 @@
 ---
-import Button from "@/components/Button.astro";
+import TempbladeLogo from "@/components/Logo/tempblade.astro";
 ---
 
 <div class="h-[80vh] relative w-full overflow-x-hidden">
@@ -8,29 +8,47 @@ import Button from "@/components/Button.astro";
         class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
         id="landing-bg-container"
     >
-        <canvas width="1920" height="1080" class="w-[800px]" id="landing-bg"
+        <canvas width="1920" height="1080" class="w-[900px]" id="landing-bg"
         ></canvas>
     </aside>
     <div
         class="z-10 relative w-full h-full flex items-center flex-col justify-center"
     >
-        <div class="flex flex-col justify-center items-center gap-2">
-            <h1 class="text-5xl dark:text-neutral text-center font-black">
-                tempblade Creator
+        <div
+            id="landing-content-container"
+            class="flex flex-col justify-center items-center gap-2 p-main dark:text-neutral"
+        >
+            <!--     <div data-animate class="w-12 h-12">
+                <TempbladeLogo />
+            </div> -->
+            <h1
+                data-animate
+                class="text-6xl lg:text-8xl text-center font-black text-current"
+            >
+                Creator
             </h1>
-            <h2 class="text-center dark:text-neutral text-xl font-normal">
-                Rust Based Open Source Motion Design Editor & Toolkit
+            <h2 class="text-center text-xl font-normal max-w-xs">
+                <span class="inline-block" data-animate>
+                    Rust Based Open Source</span
+                ><br />
+                <span class="inline-block" data-animate>
+                    Motion Design Editor & Toolkit</span
+                >
             </h2>
         </div>
     </div>
 </div>
 
 <script>
-    import { animate, inView } from "motion";
+    import { animate, inView, stagger } from "motion";
     import { ease } from "@unom/style";
 
     const landingBgContainer = document.getElementById("landing-bg");
 
+    const children = document.querySelectorAll(
+        "#landing-content-container [data-animate]"
+    );
+
     if (landingBgContainer) {
         inView(landingBgContainer, () => {
             animate(
@@ -41,6 +59,17 @@ import Button from "@/components/Button.astro";
                 },
                 { ...ease.quint(2).out }
             );
+            animate(
+                children,
+                { y: [50, 0], opacity: [0, 1] },
+                {
+                    opacity: {
+                        easing: "linear",
+                    },
+                    ...ease.quint(0.8).out,
+                    delay: stagger(0.1),
+                }
+            );
         });
     }
 </script>
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 767ed0f..b43d158 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -1,3 +1,5 @@
+const plugin = require("tailwindcss/plugin");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
@@ -55,5 +57,9 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addVariant }) {
+      addVariant("hocus", ["&:hover", "&:focus"]);
+    }),
+  ],
 };