diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..cc6aa06
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "window.autoDetectColorScheme": false
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index dea3be1..f2d0ba8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "d-dev-astrotest",
       "version": "0.0.1",
       "dependencies": {
-        "astro": "^4.1.2"
+        "astro": "^4.1.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1213,9 +1213,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-4.1.2.tgz",
-      "integrity": "sha512-C/CrsIjRnRZYsLIBquAoTKj3ZPyGPVRByEcPMs6CrJLiHmcYnjpRMVd7oBFepU6772U1ZcXLy0zdxoRYjHFf5w==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-4.1.3.tgz",
+      "integrity": "sha512-9i8l0mEnpAOAi9F3DMkHGaZ4q56TGtt71XaAxhPXAlhZrVR/6ruobCyYdYwL1Fo0ATpuGXdaod1I7FFxFMcQbw==",
       "dependencies": {
         "@astrojs/compiler": "^2.3.4",
         "@astrojs/internal-helpers": "0.2.1",
diff --git a/package.json b/package.json
index 4694e1d..bdd7d42 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.1.2"
+    "astro": "^4.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6d61d99..da5a7ad 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,19 +1,25 @@
 <style>
-    div, p {
-        display: flex;
-        justify-content: center;
-    }
     p {
         margin: 0;
         font-weight: bold;
+        width: 100%;
     }
     footer {
         padding: 0.5rem;
         background-color: #71578e50;
         backdrop-filter: blur(10px);
     }
+    .frame {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
 </style>
 
 <footer>
-    <p>made with the power of :3</p>
+    <div class="frame">
+        <p style="text-align: start">made with astro</p>
+        <p style="text-align: center">powered by the power of :3</p>
+        <p style="text-align: end">part of the orbithub network</p>
+    </div>
 </footer>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f16e996..f2ab4e1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -22,11 +22,20 @@ import HeaderButton from './buttons/HeaderButton.astro';
     }
 </style>
 
+<script>
+    const curPage = window.location.pathname
+    const selector = 'a[href="'+curPage+'"].headerButton'
+    document.querySelectorAll(selector).forEach(function(ele, idx) {
+        ele.classList.add('currentPage');
+    });
+</script>
+
 <header>
     <nav>
         <img class="logo" src="/melogo.svg" height=45px />
-        <HeaderButton location="/" text="home" />
-        <HeaderButton location="/links/" text="my links" />
-        <HeaderButton location="/thoughts/" text="thoughts" />
+        <HeaderButton location="/" text="home" class="homeBtn" />
+        <HeaderButton location="/links/" text="my links" class="linksBtn" />
+        <HeaderButton location="/thoughts/" text="thoughts" class="thoughtsBtn" />
+        <HeaderButton location="/gallery/" text="gallery" class="galleryBtn" />
     </nav>
 </header>
\ No newline at end of file
diff --git a/src/components/buttons/HeaderButton.astro b/src/components/buttons/HeaderButton.astro
index 0e23ad6..4d223bb 100644
--- a/src/components/buttons/HeaderButton.astro
+++ b/src/components/buttons/HeaderButton.astro
@@ -35,6 +35,20 @@ const { location, text } = Astro.props;
         transition: 0.1s;
         background: linear-gradient(180deg, #e0bb65 0%, var(--page-bg) 100%);
     }
+    .currentPage::after {
+        content: "";
+        background: #cbabee;
+        border-radius: 50px;
+        width: 2rem;
+        height: 0.3rem;
+        position: absolute;
+        bottom: -0.2rem;
+    }
+    .currentPage:hover::after {
+        width: 3rem;
+        transition: all .4s;
+    }
+
 </style>
 
-<a href={location}>{text}</a>
\ No newline at end of file
+<a class="headerButton" href={location}>{text}</a>
\ No newline at end of file
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
new file mode 100644
index 0000000..76d6c92
--- /dev/null
+++ b/src/pages/gallery.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+const pageTitle = "gallery";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<h2>this will have photos soon</h2>
+    <h3>maybe...</h3>
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5b87ffc..469fa68 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,8 +3,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 const pageTitle = "home";
 ---
 
+<!-- <script type="module" src="https://unpkg.com/@fluentui/web-components">
+</script> -->
+
 <BaseLayout pageTitle={pageTitle}>
 	<h2>hey all, rin here</h2>
     <h3>minorly stupid and majorly silly</h3>
-	<p>this is a home page for something cool to come</p>
+	<p>im doing trolling here soon</p>
 </BaseLayout>
\ No newline at end of file