diff --git a/public/tremortrackertext.png b/public/tremortrackertext.png
new file mode 100644
index 0000000..bd5fa29
Binary files /dev/null and b/public/tremortrackertext.png differ
diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx
new file mode 100644
index 0000000..b39afa4
--- /dev/null
+++ b/src/app/earthquakes/page.tsx
@@ -0,0 +1,11 @@
+import Navbar from "@/components/navbar";
+
+
+export default function Earthquakes() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Earthquakes</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/login.tsx b/src/app/login.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..51bbe92
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function User() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>User</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
new file mode 100644
index 0000000..5688ef4
--- /dev/null
+++ b/src/app/observatories/page.tsx
@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Observatories() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Observatories</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 69361fe..a4cbdd2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,10 +11,11 @@ return (
             </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>
+                <p className="mx-auto text-7xl text-white font-bold font-[roboto]">
+                    <Image height={300} width={750} alt="Title Image" src="/tremortrackertext.png"></Image>
+                </p>
             </div>
         </div>
-
     </main>
 )
 
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
new file mode 100644
index 0000000..fd4f8cb
--- /dev/null
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Shop() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Shop</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/warehouse/page.tsx b/src/app/warehouse/page.tsx
new file mode 100644
index 0000000..9b3272d
--- /dev/null
+++ b/src/app/warehouse/page.tsx
@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Warehouse() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Warehouse</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index e123257..e1b052d 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { useState, useEffect, useRef} from "react";
+import { useState, useEffect, useRef } from "react";
 
 export default function Navbar() {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -17,16 +17,16 @@ export default function Navbar() {
                 setIsDropdownOpen(false);
             }
         };
-    
+
         const handleEscapeKey = (event: KeyboardEvent) => {
             if (event.key === "Escape") {
                 setIsDropdownOpen(false);
             }
         };
-    
+
         document.addEventListener("mousedown", handleClickOutside);
         document.addEventListener("keydown", handleEscapeKey);
-    
+
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
             document.removeEventListener("keydown", handleEscapeKey);
@@ -42,10 +42,26 @@ export default function Navbar() {
                 {/* <p className="m-auto text-sm">Logo</p> */}
             </div>
             <div className="flex">
-                <button className="px-6">Earthquakes</button>
-                <button className="px-6">Observatories</button>
-                <button className="px-6">Warehouse</button>
-                <button className="px-6">Shop</button>
+                <button className="px-6">
+                    <Link href="/earthquakes">
+                        Earthquakes
+                    </Link>
+                </button>
+                <button className="px-6">
+                    <Link href="/observatories">
+                        Observatories
+                    </Link>
+                </button>
+                <button className="px-6">
+                    <Link href="/warehouse">
+                        Warehouse
+                    </Link>    
+                </button>
+                <button className="px-6">
+                    <Link href="/shop">
+                        Shop
+                    </Link>
+                </button>
 
                 <div className="my-auto relative">
                     <button