diff --git a/assets/discord_8x8.png b/assets/discord_8x8.png
new file mode 100644
index 0000000..663219b
Binary files /dev/null and b/assets/discord_8x8.png differ
diff --git a/assets/github_8x8.png b/assets/github_8x8.png
new file mode 100644
index 0000000..0d273fa
Binary files /dev/null and b/assets/github_8x8.png differ
diff --git a/assets/powerplates_8x8.png b/assets/powerplates_8x8.png
new file mode 100644
index 0000000..08db3b6
Binary files /dev/null and b/assets/powerplates_8x8.png differ
diff --git a/assets/youtube_8x8.png b/assets/youtube_8x8.png
new file mode 100644
index 0000000..96b7916
Binary files /dev/null and b/assets/youtube_8x8.png differ
diff --git a/index.html b/index.html
index 8046467..31c5afd 100644
--- a/index.html
+++ b/index.html
@@ -15,21 +15,25 @@
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/discord_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/youtube_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/github_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
       </button>
     </li>
     <li>
diff --git a/navBar.css b/navBar.css
index 7525fd3..6319998 100644
--- a/navBar.css
+++ b/navBar.css
@@ -1,7 +1,8 @@
 li {
   list-style-type: none;
-  display: inline;
+  display: inline-flex;
   margin: calc(1px * var(--pxDensity));
+  margin-bottom: calc(2px * var(--pxDensity));
 }
 
 .navBar {
@@ -12,29 +13,36 @@ li {
               0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
 
   filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
-  padding: calc(1px * var(--pxDensity)) 0px;
+  padding: 0%;
   display: inline-block;
 }
 .navBtn {
   background-color: transparent;
-  width: calc(12px * var(--pxDensity));
-  height: calc(12px * var(--pxDensity));
-  display: inline-block;
+  display: inline-flex;
   padding: 0%;
   border: none;
-}
-.navBtnImg {
-  width: 100%;
-  height: 100%;
-  image-rendering: pixelated;
-  margin: 0%;
+  position: relative;
   filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
 }
-.navBtnImg:hover {
+.navBtn:hover {
   filter: brightness(1.35)  drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
   cursor: pointer;
 }
-.navBtnImg:active {
+.navBtn:active {
   filter: brightness(0.75);
   transform: translateY(calc(1px * var(--pxDensity)));
+}
+.navBtnImg {
+  width: calc(12px * var(--pxDensity));
+  height: calc(12px * var(--pxDensity));
+  image-rendering: pixelated;
+  margin: 0%;
+}
+.navBtnIcon {
+  width: calc(8px * var(--pxDensity));
+  height: calc(8px * var(--pxDensity));
+  image-rendering: pixelated;
+  position: absolute;
+  margin: calc(2px * var(--pxDensity));
+  pointer-events: none;
 }
\ No newline at end of file