diff --git a/package.json b/package.json
index 786853c..697e3d5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
+    "scroll-lock": "^2.1.5",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2",
     "vite-plugin-wasm-pack": "^0.1.12",
@@ -30,18 +31,18 @@
   "devDependencies": {
     "@babel/core": "^7.22.17",
     "@tauri-apps/cli": "^1.4.0",
-    "eslint-plugin-react": "^7.33.2",
-    "lodash": "^4.17.21",
-    "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.3.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
diff --git a/src/App.tsx b/src/App.tsx
index 0870fb5..db445b2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,41 @@
-import {HashRouter, Route, Routes} from "react-router-dom";
-import Code from "./components/Code.jsx";
-import Home from "./components/Home.jsx";
-import Downloads from "./components/Downloads.jsx";
-import "../dist/output.css";
+import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
+import Header from './components/Header';
+import Code from './components/Code';
+import Contributors from "./components/Contributors";
+import About from "./components/About";
+import Hero from "./components/Hero";
+import Footer from "./components/Footer";
 
 const HOME_PATH = "/";
-const CODE_PATH = "/code/";
-const DOWNLOAD_PATH = "/downloads/";
+const CODE_PATH = "/code";
+const DOWNLOAD_PATH = "/downloads";
 
-function App() {
+const App = () => {
     return (
-        <HashRouter future={{ v7_startTransition: true }}>
+        <BrowserRouter>
             <Routes>
-                <Route path={HOME_PATH} element={<Home />} />
+                <Route 
+                    path={HOME_PATH} 
+                    element={
+                        <div className="pt-[4.75rem] lg:pt-[5.25rem] overflow-hidden">
+                            <Header />
+                            <Hero />
+                            <section id="about">
+                                <About />
+                            </section>
+
+                            <section id="contributions">
+                                <Contributors />
+                            </section>
+                            <Footer />
+                        </div>
+                    } 
+                />
                 <Route path={CODE_PATH} element={<Code />} />
-                <Route path={DOWNLOAD_PATH} element={<Downloads />} />
             </Routes>
-        </HashRouter>
+        </BrowserRouter>
     );
-}
+};
 
 export default App;
 
diff --git a/src/assets/editor.png b/src/assets/editor.png
new file mode 100644
index 0000000..0768ad3
Binary files /dev/null and b/src/assets/editor.png differ
diff --git a/src/assets/rust.png b/src/assets/rust.png
new file mode 100644
index 0000000..d1e9f80
Binary files /dev/null and b/src/assets/rust.png differ
diff --git a/src/assets/white.svg b/src/assets/white.svg
new file mode 100644
index 0000000..fea67e2
--- /dev/null
+++ b/src/assets/white.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-210 0 420 420">
+  <path d="m 0 0 l 0 0 l -180 110 l 0 200 l 180 110 l 180 -110 l 0 -200 l -180 -110 m 0 50 l 130 80 l 0 160 l -130 80 l -130 -80 l 0 -160 l 130 -80 m 0 35 l -110 70 l 0 110 l 110 70 l 65 -35 l -25 -38 l -40 18 l -60 -40 l 170 0 l 0 -85 l -110 -70 m 0 64 l 60 40 l -120 0 l 60 -40" fill="#ffffff"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/About.jsx b/src/components/About.jsx
new file mode 100644
index 0000000..304761a
--- /dev/null
+++ b/src/components/About.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import editor from "../assets/editor.png";
+import rust from "../assets/rust.png";
+
+const About = () => {
+  return (
+    <div className="relative bg-black flex justify-center items-center"
+      style={{
+        background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+        position: 'relative'
+    }}>
+
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-4">
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+          ABOUT
+        </h1>
+
+        <div className="flex flex-col lg:flex-row lg:items-center">
+          <p>
+            EZASM is a small-instruction-set assembly-like programming language interpreter written in Rust. We will ship an IDE-like GUI interface for programming, running code, and inspecting the current 
+            state of the environment. This simple interpreted language would be able to demonstrate the concepts of a lower level assembly language while still being simple to write. The instructions 
+            would be intuitive and simple compared to MIPS (e.g., no system calls or immediate limits) and act upon registers akin to other assembly languages.
+          </p>
+
+          <img src={rust} alt="rust" className="lg:w-6/12 w-full"/>
+
+        </div>
+        
+      </div>
+    </div>
+  );
+}
+
+export default About;
diff --git a/src/components/Contributors.jsx b/src/components/Contributors.jsx
new file mode 100644
index 0000000..416ca8b
--- /dev/null
+++ b/src/components/Contributors.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Contributors = () => {
+  return (
+    <div className="relative bg-black flex justify-center items-center"
+     style={{
+      background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+      position: 'relative'
+    
+    }}>
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-4">
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+          Contributions
+        </h1>
+
+        <p className="mb-4 text-lg">
+          You can view the list of contributors who have helped build this project. If you would like to contribute yourself, feel free to check out our GitHub repository for more information.
+        </p>
+
+        <a
+          href="https://github.com/ezasm-org/rezasm"
+          target="_blank"
+          className="text-blue-500 underline"
+        >
+          https://github.com/ezasm-org/rezasm
+        </a>
+
+      </div>
+    </div>
+  );
+}
+
+export default Contributors
\ No newline at end of file
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..c1bfa27
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="w-full flex justify-center items-center bg-black py-4">
+      <p className="caption text-n-4 lg:block text-white">
+        © {new Date().getFullYear()}. All rights reserved.
+      </p>
+    </div>
+  );
+};
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..1357257
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { useLocation } from "react-router-dom";
+import { disablePageScroll, enablePageScroll } from "scroll-lock";
+import { navigation } from "../constants";
+import ezasm from "../assets/white.svg";
+import { useState } from "react";
+
+const Header = () => {
+    const pathname = useLocation();
+
+    const [openNavigation, setOpenNavigation] = useState(false);
+
+    const toggleNavigation = () => {
+        if (openNavigation) {
+            setOpenNavigation(false);
+            enablePageScroll();
+        } else {
+            setOpenNavigation(true);
+            disablePageScroll();
+        }
+    }
+
+    const handleClick = () => {
+        if (!openNavigation) {
+            return;
+        }
+        enablePageScroll();
+        setOpenNavigation(false);
+    }
+
+    return (
+        <div 
+            style={{ boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)' }}
+            className={`fixed top-0 left-0 w-full z-50 border-b lg:bg-n-8/90 lg:backdrop-blur-sm bg-black
+            ${openNavigation ? "bg-n-8" : "bg-n-8/90 backdrop-blur-sm"}`} 
+        >
+            <div className="flex items-center px-6 lg:px-12 xl:px-20 max-lg:py-4">
+                <a className="flex items-center w-[12rem] xl:mr-8 ml-10 lg:ml-16" href="#hero">
+                    <img src={ezasm} width={70} height={40} alt="ezasm" />
+                    <span className="ml-4 text-2xl lg:text-4xl font-bold text-white">
+                        EZASM
+                    </span>
+                </a>
+
+                <nav
+                    className={`${openNavigation ? "flex" : "hidden"} 
+                    fixed top-[5rem] left-0 right-0 bottom-0 bg-black lg:static 
+                    lg:flex lg:bg-transparent w-full justify-end`}
+                >
+                    <div className="relative z-2 flex flex-col items-center justify-center w-full lg:w-auto lg:flex-row lg:ml-auto">
+                        {navigation.map((item) => (
+                            <a 
+                                key={item.id}
+                                href={item.url}
+                                onClick={handleClick}
+                                className={`block relative font-code text-4xl uppercase text-n-1 transition-colors hover:text-color-1
+                                ${item.onlyMobile ? "lg:hidden" : ""}
+                                px-6 py-6 md:py-8 lg:-mr-0.25 lg:text-base lg:font-semibold
+                                ${item.url === pathname.hash ? "z-2 lg:text-n-1" : "lg:text-n-1/50"}
+                                lg:leading-5 lg:hover:text-n-1 xl:px-12`}
+                            >
+                                {item.title}
+                            </a>
+                        ))}
+                    </div>
+                </nav>
+
+                <button  
+                    className="ml-auto lg:hidden p-3 overflow:hidden"
+                    onClick={toggleNavigation}
+                >
+                    {openNavigation ? (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                            width="30px"
+                            height="30px"
+                        >
+                            <path d="M18.3 5.71a1 1 0 0 0-1.42 0L12 10.59 7.12 5.71a1 1 0 1 0-1.42 1.42L10.59 12 5.7 16.88a1 1 0 1 0 1.42 1.42L12 13.41l4.88 4.88a1 1 0 0 0 1.42-1.42L13.41 12l4.88-4.88a1 1 0 0 0 0-1.42z"/>
+                        </svg>
+                    ) : (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                            width="30px"
+                            height="30px"
+                        >
+                            <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>
+                        </svg>
+                    )}
+                </button>
+                
+            </div>
+            
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
new file mode 100644
index 0000000..3c58c24
--- /dev/null
+++ b/src/components/Hero.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {useNavigate} from "react-router-dom";
+import {CODE_PATH} from "../App.tsx";
+import editor from "../assets/editor.png";
+
+const Hero = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="relative bg-black min-h-screen flex justify-center items-center"
+        style={{
+            background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+            position: 'relative'
+    }}>
+
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-10">
+        <h2 className="text-xl font-semibold mb-2">
+          EZASM
+        </h2>
+
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+           Assembly-like programming language for education
+        </h1>
+
+        <p className="text-lg text-gray-400 mb-8 max-w-3xl">
+          The programming language that makes learning assembly a more enjoyable experience.
+        </p>
+
+        <button 
+          onClick={() => navigate(CODE_PATH)} 
+          className="bg-white text-black rounded-full px-6 py-3 font-semibold shadow-md border-black"
+          style={{ boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)' }}>
+          Try our Code Playground!
+        </button>
+
+
+        <div className="w-full max-w-[49rem] mt-8">
+          <img src={editor} alt="Editor" className="rounded-lg w-full" />
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Hero;
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
deleted file mode 100644
index 6d7a0de..0000000
--- a/src/components/Home.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import {useNavigate} from "react-router-dom";
-import {CODE_PATH} from "../App.tsx";
-
-function Home() {
-
-    const navigate = useNavigate();
-
-    return (
-        <div>
-            <p>Home</p>
-            <button onClick={() => navigate(CODE_PATH)}>Take me to the code</button>
-        </div>
-    );
-}
-
-export default Home;
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 0000000..4eda6d2
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,13 @@
+export const navigation = [
+    {
+      id: "0",
+      title: "About",
+      url: "#about",
+    },
+    {
+      id: "1",
+      title: "Contributions",
+      url: "#contributions",
+    },
+    
+];
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 127e62f..060b0ed 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "../dist/output.css";
 import App from "./App.tsx";
+import './styles.css'
+import { BrowserRouter as Router } from 'react-router-dom'
+import '../dist/output.css'; 
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
-        <App />
+            <App />
     </React.StrictMode>,
 );
diff --git a/src/styles.css b/src/styles.css
index 084d478..086406f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -10,7 +10,7 @@
   font-weight: 400;
 
   color: #0f0f0f;
-  background-color: #f6f6f6;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -19,6 +19,10 @@
   -webkit-text-size-adjust: 100%;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 .fill {
   width: 100%;
 }
@@ -43,12 +47,12 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: white;
   text-decoration: inherit;
 }
 
 a:hover {
-  color: #535bf2;
+  color: white;
 }
 
 .codearea {
@@ -65,7 +69,7 @@ textarea {
   font-size: 1em;
   font-weight: 400;
   color: #0f0f0f;
-  background-color: #ffffff;
+  background-color: white;
   resize: none;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d13c5f..03b6e60 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,11 @@ export default {
     content: ["./src/components/*.jsx", 
         "./src/App.tsx"],
     theme: {
-        extend: {},
+        extend: {
+            colors: {
+                'gpt-dark': '#27282c',
+              },
+        },
     },
     plugins: [],
-};
+};
\ No newline at end of file