diff --git a/public/image.png b/public/image.png
new file mode 100644
index 0000000..d9dcfbc
Binary files /dev/null and b/public/image.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 97462a7..5ee2c09 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,23 @@
 import Image from "next/image";
-import Tabbar from "@/tabbar";
+import Navbar from "@/components/tabbar";
 
 export default function Home() {
 return (
-    <div>
-        <Tabbar></Tabbar>
-        <p className="Page content"></p>
-    </div>
+    <main className="min-h-screen bg-white text-black">
+        <Navbar></Navbar>
+        <div className="w-full h-[70vh] relative overflow-hidden">
+            <div className="">
+                <Image height={2000} width={2000} alt="Background Image" src="/image.png"></Image>
+            </div>
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80"></div>
+            <div className="flex inset-0 w-full absolute mt-24 float">
+                <p className="mx-auto text-7xl text-white font-bold font-[roboto]">Tremor Tracker</p>
+            </div>
+        </div>
+
+    </main>
 )
+
 //   return (
 //     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 //       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
diff --git a/src/components/tabbar.tsx b/src/components/tabbar.tsx
new file mode 100644
index 0000000..4e5502a
--- /dev/null
+++ b/src/components/tabbar.tsx
@@ -0,0 +1,18 @@
+export default function Navbar(){
+    return (
+        <div className="w-full flex h-14 border-b border-neutral-300 text-black">
+            <div className="my-2 w-20 flex border border-neutral-300 rounded-xl ml-2 mr-6">
+                <p className="m-auto text-sm">Logo</p>
+            </div>
+            <div className="flex">
+                <button className="px-6">Earthquake</button>
+                <button className="px-6">Warehouse</button>
+                <button className="px-6">Shop</button>
+            </div>
+            <div className="flex-grow"></div>
+            <div className="my-2 mr-2 w-10 flex border rounded-full">
+                <p className="m-auto text-sm">User</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/tabbar.tsx b/src/tabbar.tsx
deleted file mode 100644
index c7df555..0000000
--- a/src/tabbar.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function Tabbar(){
-    return (
-        <div className="w-full h-20">
-            <a className="">Earthquake</a>
-            <a>Wherehouse</a>
-            <a>Shop</a>
-        </div>
-    )
-}
\ No newline at end of file