diff --git a/public/image.png b/public/image.png
deleted file mode 100644
index d9dcfbc..0000000
Binary files a/public/image.png and /dev/null differ
diff --git a/public/lava.jpg b/public/lava.jpg
new file mode 100644
index 0000000..a7a2bb2
Binary files /dev/null and b/public/lava.jpg differ
diff --git a/public/lava_flows.jpg b/public/lava_flows.jpg
new file mode 100644
index 0000000..c685c66
Binary files /dev/null and b/public/lava_flows.jpg differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5ee2c09..a1a2321 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,13 @@
 import Image from "next/image";
-import Navbar from "@/components/tabbar";
+import Navbar from "@/components/tabbar_dd";
 
 export default function Home() {
 return (
-    <main className="min-h-screen bg-white text-black">
+    <main  className="min-h-screen bg-white text-black">
         <Navbar></Navbar>
-        <div className="w-full h-[70vh] relative overflow-hidden">
+        <div className="w-full h-[90vh] relative overflow-hidden">
             <div className="">
-                <Image height={2000} width={2000} alt="Background Image" src="/image.png"></Image>
+                <Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></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">
diff --git a/src/components/tabbar.tsx b/src/components/tabbar.tsx
index 4e5502a..6981de0 100644
--- a/src/components/tabbar.tsx
+++ b/src/components/tabbar.tsx
@@ -5,9 +5,11 @@ export default function Navbar(){
                 <p className="m-auto text-sm">Logo</p>
             </div>
             <div className="flex">
-                <button className="px-6">Earthquake</button>
+                <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">Shop</button>            
+                <button className="px-6">About Us</button>     
             </div>
             <div className="flex-grow"></div>
             <div className="my-2 mr-2 w-10 flex border rounded-full">
@@ -15,4 +17,4 @@ export default function Navbar(){
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/src/components/tabbar_dd.tsx b/src/components/tabbar_dd.tsx
new file mode 100644
index 0000000..f29ab70
--- /dev/null
+++ b/src/components/tabbar_dd.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import { useState, useEffect, useRef} from "react";
+
+export default function Navbar() {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target as Node)
+            ) {
+                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);
+        };
+    }, []);
+
+    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">Earthquakes</button>
+                <button className="px-6">Observatories</button>
+                <button className="px-6">Warehouse</button>
+                <button className="px-6">Shop</button>
+
+                <div className="my-auto relative">
+                    <button
+                        className="px-6"
+                        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                    >
+                        About Us
+                    </button>
+
+                    {isDropdownOpen && (
+                        <div ref={dropdownRef} className="absolute top-full left-0 mt-4 w-40 bg-white border border-neutral-300 rounded-lg shadow-lg z-50">
+                            <ul>
+                                <li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Our Mission</li>
+                                <li className="px-4 py-2 hover:bg-neutral-100 cursor-pointer">The Team</li>
+                                <li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Contact Us</li>
+                            </ul>
+                        </div>
+                    )}
+                </div>
+            </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>
+    );
+}