diff --git a/assets/1.jpg b/assets/1.jpg
new file mode 100644
index 0000000..2989f72
Binary files /dev/null and b/assets/1.jpg differ
diff --git a/assets/2.jpg b/assets/2.jpg
new file mode 100644
index 0000000..997e236
Binary files /dev/null and b/assets/2.jpg differ
diff --git a/assets/3.jpg b/assets/3.jpg
new file mode 100644
index 0000000..2b93fe4
Binary files /dev/null and b/assets/3.jpg differ
diff --git a/assets/4.jpg b/assets/4.jpg
new file mode 100644
index 0000000..6c21898
Binary files /dev/null and b/assets/4.jpg differ
diff --git a/assets/boat.jpg b/assets/boat.jpg
new file mode 100644
index 0000000..9b75837
Binary files /dev/null and b/assets/boat.jpg differ
diff --git a/assets/navigator.jpg b/assets/navigator.jpg
new file mode 100644
index 0000000..bee0d13
Binary files /dev/null and b/assets/navigator.jpg differ
diff --git a/assets/navigatorams.jpg b/assets/navigatorams.jpg
new file mode 100644
index 0000000..5769a5a
Binary files /dev/null and b/assets/navigatorams.jpg differ
diff --git a/assets/person.jpg b/assets/person.jpg
new file mode 100644
index 0000000..cdf632f
Binary files /dev/null and b/assets/person.jpg differ
diff --git a/assets/teams.jpg b/assets/teams.jpg
new file mode 100644
index 0000000..294a2e8
Binary files /dev/null and b/assets/teams.jpg differ
diff --git a/index.html b/index.html
index fefcf7c..6f888d5 100644
--- a/index.html
+++ b/index.html
@@ -17,30 +17,17 @@
 
     <!-- Header Section -->
     <div class="relative">
-
-        <header class="relative h-[667px] bg-cover bg-center" style="background-image: url('./assets/hawaii_resting.jpg');">
-            <nav class="absolute top-0 left-0 w-full p-6 flex justify-between items-center bg-opacity-30 bg-white">
-=======
         <header class="relative h-[667px] bg-cover bg-center" style="background-image: url('./assets/hawaii_resting.jpg'); ; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;"">
             <nav class="absolute top-0 left-0 w-full p-6 flex justify-between items-center">
-
                 <div>
                     <img src="./assets/logo.png" alt="NaviGator AMS Logo" class="h-10">
                 </div>
                 <ul class="flex space-x-6 z-20">
-
-                    <li><a href="#" class="text-black rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Home</a></li>
-                    <li><a href="#" class="text-black rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Team</a></li>
-                    <li><a href="#" class="text-black rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Vehicle</a></li>
-                    <li><a href="#" class="text-black rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Sponsors</a></li>
-                    <li><a href="#" class="text-black rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Photos</a></li>
-=======
                     <li><a href=#"" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Home</a></li>
                     <li><a href="team.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Team</a></li>
                     <li><a href="vehicle.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Vehicle</a></li>
                     <li><a href="sponsors.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Sponsors</a></li>
                     <li><a href="photos.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Photos</a></li>
-
                 </ul>
             </nav>
 
@@ -129,4 +116,4 @@ <h2 class="text-3xl font-bold font-light mb-6 text-left px-10">Meet the Team</h2
         </div>
     </section>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/photos.html b/photos.html
new file mode 100644
index 0000000..60db132
--- /dev/null
+++ b/photos.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photos</title>
+    <meta content="NaviGator AMS" property="og:title" />
+    <meta content="NaviGator AMS is a set of maritime vehicles built by students in the Machine Intelligence Laboratory (MIL) at the University of Florida (UF) for the Maritime RobotX competition." property="og:description" />
+    <meta content="https://navigatoruf.org" property="og:url" />
+    <meta content="https://navigatoruf.org/assets/hawaii_resting.jpg" property="og:image" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta content="#FA4616" data-react-helmet="true" name="theme-color" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <!-- Inter font used in the figma -->
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-300" style="font-family: 'Inter', sans-serif;">
+    <!-- Header Section -->
+    <div class="relative">
+        <header class="relative h-[500px] bg-cover bg-center" style="background-image: url('./assets/hawaii_resting.jpg'); ; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;">
+            <nav class="absolute top-0 left-0 w-full p-6 flex justify-between items-center">
+                <div>
+                    <img src="./assets/logo.png" alt="NaviGator AMS Logo" class="h-10">
+                </div>
+                <ul class="flex space-x-6 z-20">
+                    <li><a href="index.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Home</a></li>
+                    <li><a href="team.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Team</a></li>
+                    <li><a href="vehicle.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Vehicle</a></li>
+                    <li><a href="sponsors.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Sponsors</a></li>
+                    <li><a href="#" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Photos</a></li>
+                </ul>
+            </nav>
+
+            <div class="absolute inset-0 flex flex-col justify-center items-center text-white">
+                <h1 class="text-7xl font-bold">Photos</h1>
+            </div>
+        </header>
+    </div>
+    <!-- Section 2 (Large Photo with Arrows) -->
+    <section class="relative max-w-6xl mx-auto py-8">
+        <div class="relative">
+            <div class="flex justify-center">
+                <img src="./assets/teams.jpg" alt="teams" class="w-full object-relative rounded-lg h-relative">
+            </div>
+        </div>
+    </section>
+
+    <!-- Grid of Smaller Photos -->
+    <section class="max-w-6xl mx-auto py-8 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div class="relative">
+            <img src="./assets/boat.jpg" alt="Boat at Sea" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/navigator.jpg" alt="Boat Preparing" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/navigatorams.jpg" alt="Testing Equipment" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/person.jpg" alt="Teamwork" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/1.jpg" alt="Teamwork" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/2.jpg" alt="Teamwork" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/3.jpg" alt="Teamwork" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+        <div class="relative">
+            <img src="./assets/4.jpg" alt="Teamwork" class="w-full object-cover h-[200px] rounded-lg cursor-pointer" onclick="openModal(this.src)">
+        </div>
+    </section>
+
+    <!-- Fullscreen Modal -->
+    <div id="modal" class="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-75 hidden">
+        <span class="absolute top-10 right-10 text-white text-3xl cursor-pointer" onclick="closeModal()">&times;</span>
+        <img alt="modal" id="modalImg" class="max-w-full max-h-full object-contain">
+    </div>
+
+    <script>
+        // Function to open the modal and set the image
+        function openModal(src) {
+            document.getElementById('modalImg').src = src;
+            document.getElementById('modal').classList.remove('hidden');
+        }
+
+        // Function to close the modal
+        function closeModal() {
+            document.getElementById('modal').classList.add('hidden');
+        }
+    </script>
+</body>
+</html>
diff --git a/team.html b/team.html
new file mode 100644
index 0000000..e7fc313
--- /dev/null
+++ b/team.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meet the Team</title>
+    <meta content="NaviGator AMS" property="og:title" />
+    <meta content="NaviGator AMS is a set of maritime vehicles built by students in the Machine Intelligence Laboratory (MIL) at the University of Florida (UF) for the Maritime RobotX competition." property="og:description" />
+    <meta content="https://navigatoruf.org" property="og:url" />
+    <meta content="https://navigatoruf.org/assets/hawaii_resting.jpg" property="og:image" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta content="#FA4616" data-react-helmet="true" name="theme-color" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <!-- Inter font used in the figma -->
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-300" style="font-family: 'Inter', sans-serif;">
+    <!-- Header Section -->
+    <div class="relative">
+        <header class="relative h-[500px] bg-cover bg-center" style="background-image: url('./assets/hawaii_resting.jpg'); ; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;">
+            <nav class="absolute top-0 left-0 w-full p-6 flex justify-between items-center">
+                <div>
+                    <img src="./assets/logo.png" alt="NaviGator AMS Logo" class="h-10">
+                </div>
+                <ul class="flex space-x-6 z-20">
+                    <li><a href="index.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Home</a></li>
+                    <li><a href="#" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Team</a></li>
+                    <li><a href="vehicle.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Vehicle</a></li>
+                    <li><a href="sponsors.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Sponsors</a></li>
+                    <li><a href="photos.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Photos</a></li>
+                </ul>
+            </nav>
+
+            <div class="absolute inset-0 flex flex-col justify-center items-center text-white">
+                <h1 class="text-7xl font-bold">Meet the Team</h1>
+            </div>
+        </header>
+    </div>
+
+    <!-- Teams Section -->
+    <section class="max-w-6xl mx-auto py-16 bg-gray-300">
+        <div class="text-center mb-12"> <!-- Added more bottom margin to spread out sections -->
+            <h2 class="text-3xl font-bold mb-10">Mechanical Team</h2>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Example Team Member Placeholder -->
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]"> <!-- Increased height to make cards taller -->
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+        </div>
+
+        <!-- Additional margin between sections -->
+        <div class="text-center mt-16 mb-12"> <!-- Added margin top and bottom for more space -->
+            <h2 class="text-3xl font-bold mb-10">Software Team</h2>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+        </div>
+
+        <!-- More space between sections -->
+        <div class="text-center mt-16 mb-12">
+            <h2 class="text-3xl font-bold mb-10">Electrical Team</h2>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-lg h-[300px]">
+                <div class="flex items-center justify-center">
+                    <div class="rounded-full h-16 w-16 bg-gray-300 flex items-center justify-center text-2xl font-bold">D</div>
+                </div>
+                <h3 class="mt-4 text-xl font-semibold">Software Engineer</h3>
+                <p class="text-gray-600">Jane Doe</p>
+            </div>
+        </div>
+    </section>
+
+</body>
+</html>