diff --git a/about.html b/about.html
new file mode 100644
index 0000000..86854d1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset = "utf-8" />
+        <title>
+            Home
+        </title>
+        <!-- add icon link -->
+        <link rel = "icon" href = "assets/obo-icon.png" 
+        type = "image/x-icon">
+        <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="navigation">
+        <div class="menuToggle"></div>
+        <ul>
+            <li class="list" style="--clr:rgb(0, 196, 157);">
+                <a href="index.html">
+                    <span class="icon"><ion-icon name="planet"></ion-icon></span>
+                    <span class="text">Home</span>
+                </a>
+            </li>
+            <li class="list active" style="--clr:rgb(0, 196, 157);">
+                <a href="about.html">
+                    <span class="icon"><ion-icon name="egg"></ion-icon></span>
+                    <span class="text">About</span>
+                </a>
+            </li>
+            <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="code-slash"></ion-icon></span>
+                <span class="text">Projects</span>
+            </a>
+        </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="camera"></ion-icon></span>
+                <span class="text">Photography</span>
+            </a>
+        </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="videocam"></ion-icon></span>
+                <span class="text">Videography</span>
+            </a>
+        </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="archive"></ion-icon></span>
+                <span class="text">Old Site</span>
+            </a>
+        </li>
+        </ul>
+    </div>
+
+
+
+
+    <script>
+        const menuToggle = document.querySelector('.menuToggle');
+        const navigation = document.querySelector('.navigation');
+        menuToggle.onclick = function(){
+            navigation.classList.toggle('open')
+        }
+
+        const list = document.querySelectorALl('.list');
+        function activeLink(){
+            list.forEach((item) =>
+            item.classList.remove('active'));
+            this.classList.add('active');
+        }
+        list.forEach((item) =>
+        item.addEventListener('click',activeLink))
+    </script>
+
+<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index bdeaa5f..5d1190d 100644
--- a/index.html
+++ b/index.html
@@ -15,37 +15,37 @@
         <div class="menuToggle"></div>
         <ul>
             <li class="list active" style="--clr:rgb(0, 196, 157);">
-                <a href="#">
+                <a href="#home">
                     <span class="icon"><ion-icon name="planet"></ion-icon></span>
                     <span class="text">Home</span>
                 </a>
             </li>
             <li class="list" style="--clr:rgb(0, 196, 157);">
-                <a href="#">
+                <a href="about.html">
                     <span class="icon"><ion-icon name="egg"></ion-icon></span>
                     <span class="text">About</span>
                 </a>
             </li>
             <li class="list" style="--clr:rgb(0, 196, 157);">
-            <a href="#">
+            <a href="projects.html">
                 <span class="icon"><ion-icon name="code-slash"></ion-icon></span>
                 <span class="text">Projects</span>
             </a>
         </li>
         <li class="list" style="--clr:rgb(0, 196, 157);">
-            <a href="#">
+            <a href="photography.html">
                 <span class="icon"><ion-icon name="camera"></ion-icon></span>
                 <span class="text">Photography</span>
             </a>
         </li>
         <li class="list" style="--clr:rgb(0, 196, 157);">
-            <a href="#">
+            <a href="videography.html">
                 <span class="icon"><ion-icon name="videocam"></ion-icon></span>
                 <span class="text">Videography</span>
             </a>
         </li>
         <li class="list" style="--clr:rgb(0, 196, 157);">
-            <a href="#">
+            <a href="old/index.html">
                 <span class="icon"><ion-icon name="archive"></ion-icon></span>
                 <span class="text">Old Site</span>
             </a>
diff --git a/style.css b/style.css
index 8a597db..07a3017 100644
--- a/style.css
+++ b/style.css
@@ -89,6 +89,10 @@ body
 {
     transform: translateX(30px)
 }
+.navigation.open ul li.active
+{
+    transform: translateX(10px)
+}
 .navigation ul li a
 {
     position: relative;
