diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..ad26d80
Binary files /dev/null and b/bun.lockb differ
diff --git a/public/forgejologo.svg b/public/forgejologo.svg
new file mode 100644
index 0000000..9c46d82
--- /dev/null
+++ b/public/forgejologo.svg
@@ -0,0 +1,40 @@
+<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
+  <metadata
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+  >
+    <rdf:RDF>
+      <cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
+        <dc:title>Forgejo logo</dc:title>
+        <cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <style type="text/css">
+    circle {
+      fill: none;
+      stroke: #000;
+      stroke-width: 15;
+    }
+    path {
+      fill: none;
+      stroke: #000;
+      stroke-width: 25;
+    }
+    .orange {
+      stroke:#ff6600;
+    }
+    .red {
+      stroke:#d40000;
+    }
+  </style>
+  <g transform="translate(6,6)">
+    <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange" />
+    <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red" />
+    <circle cx="142" cy="20" r="18" class="orange" />
+    <circle cx="142" cy="88" r="18" class="red" />
+    <circle cx="58" cy="180" r="18" class="red" />
+  </g>
+</svg>
diff --git a/public/graphitelogo.svg b/public/graphitelogo.svg
new file mode 100644
index 0000000..1aa9c24
--- /dev/null
+++ b/public/graphitelogo.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1935 6994 c-186 -39 -328 -137 -415 -287 -24 -39 -51 -84 -61 -99
+-11 -15 -19 -29 -19 -31 0 -3 -39 -71 -86 -153 -47 -82 -160 -277 -251 -434
+-90 -157 -169 -292 -174 -300 -5 -8 -55 -96 -112 -195 -113 -196 -393 -681
+-408 -705 -5 -8 -41 -71 -80 -140 -40 -69 -85 -147 -101 -175 -73 -126 -100
+-226 -97 -349 3 -109 33 -203 106 -329 69 -117 281 -485 310 -537 11 -19 111
+-192 223 -385 111 -192 212 -366 222 -385 11 -19 37 -64 58 -100 21 -36 47
+-81 58 -100 11 -19 59 -102 107 -185 48 -82 95 -163 104 -180 9 -16 49 -86 89
+-155 40 -69 78 -134 85 -145 77 -134 155 -215 259 -268 145 -74 44 -69 1583
+-69 1525 0 1434 -4 1570 63 l62 31 304 -217 c167 -120 360 -259 429 -308 69
+-50 148 -106 175 -125 48 -34 130 -93 150 -110 6 -4 21 -16 35 -26 17 -12 19
+-16 6 -12 -31 11 -209 55 -246 61 -19 3 -42 8 -50 10 -28 8 -184 26 -285 33
+-203 13 -1356 5 -1760 -13 -44 -2 -161 -6 -260 -10 -99 -4 -209 -8 -245 -10
+-36 -2 -121 -6 -190 -10 -191 -9 -276 -14 -380 -20 -90 -5 -125 -8 -315 -20
+-44 -3 -114 -8 -155 -11 -198 -13 -326 -22 -405 -29 -27 -2 -81 -7 -120 -10
+-38 -3 -88 -8 -110 -10 -22 -3 -62 -7 -90 -10 -27 -3 -66 -7 -85 -10 -19 -3
+-55 -7 -80 -10 -25 -4 -64 -11 -88 -16 -23 -5 -59 -12 -80 -15 -74 -11 -307
+-76 -381 -106 -42 -17 -91 -42 -109 -55 l-33 -25 38 -28 c47 -35 138 -66 218
+-75 33 -4 71 -9 85 -11 27 -5 291 -11 860 -19 462 -7 617 -12 1355 -40 66 -3
+181 -7 255 -10 74 -3 178 -7 230 -10 52 -3 142 -7 200 -10 232 -12 407 -28
+575 -50 17 -2 56 -7 88 -10 32 -4 111 -12 175 -19 104 -12 493 -13 602 -2 19
+1 78 6 130 11 52 4 102 9 112 10 9 2 48 7 85 10 37 4 75 8 83 10 8 2 35 7 60
+10 84 11 172 25 205 31 11 2 34 7 50 10 141 25 376 82 477 115 204 67 307 135
+359 237 20 40 24 61 24 142 0 83 -7 178 -20 301 -3 20 -7 65 -10 100 -3 35 -7
+84 -10 109 -2 25 -7 73 -9 108 -12 137 -17 188 -21 212 -2 14 -6 61 -10 105
+-5 74 -8 102 -20 225 -7 68 -15 158 -21 225 -3 33 -7 80 -10 105 -2 25 -6 71
+-9 102 -2 31 -6 82 -9 112 -3 31 -8 81 -11 111 -3 30 -7 79 -10 108 -3 28 -7
+79 -10 112 -3 33 -7 84 -10 113 -3 28 -7 76 -10 105 -2 28 -7 75 -9 102 -3 28
+-8 82 -11 120 -3 39 -8 86 -10 105 -2 19 -7 67 -10 105 -3 39 -8 90 -10 115
+-3 25 -7 74 -10 110 -3 36 -7 85 -10 110 -5 48 -11 105 -20 210 -3 36 -8 85
+-10 110 -3 25 -7 74 -10 110 -5 69 -13 141 -21 202 -7 53 -46 144 -110 255
+-32 54 -66 114 -77 133 -10 19 -61 107 -112 195 -51 88 -102 177 -114 199 -12
+21 -78 135 -147 255 -68 119 -130 225 -136 236 -6 11 -74 127 -151 259 -76
+131 -148 255 -159 275 -33 60 -288 501 -335 579 -23 40 -43 75 -43 78 0 10
+-63 88 -100 122 -78 74 -174 125 -275 147 -48 11 -341 13 -1440 13 -759 0
+-1389 -2 -1400 -4z m2666 -602 c87 -43 85 -39 309 -427 51 -88 104 -180 118
+-205 14 -25 33 -58 43 -75 10 -16 32 -55 49 -85 17 -30 40 -71 51 -90 12 -19
+134 -229 271 -467 l249 -432 -33 -37 c-18 -20 -42 -47 -53 -58 -58 -60 -211
+-273 -280 -390 -10 -17 -56 -26 -205 -41 -36 -4 -78 -8 -95 -10 -113 -12 -153
+-17 -175 -20 -14 -2 -56 -7 -95 -11 -38 -4 -81 -8 -95 -9 -14 -2 -34 -3 -45
+-4 -15 -1 -47 -37 -105 -117 -47 -64 -90 -122 -95 -128 -6 -6 -22 -27 -35 -46
+-13 -19 -68 -94 -121 -166 l-97 -131 -69 -2 c-145 -3 -301 -21 -457 -52 -94
+-19 -99 -19 -112 -2 -7 10 -14 21 -14 25 0 3 -21 42 -46 85 -26 43 -57 96 -70
+119 -13 23 -105 182 -205 355 -100 173 -192 332 -204 354 -13 22 -105 182
+-205 355 -101 173 -194 335 -208 359 -47 84 -82 146 -92 161 -8 13 -160 278
+-185 322 -5 10 -80 138 -165 285 -85 147 -167 288 -181 315 -14 26 -31 54 -38
+62 -24 29 65 158 133 193 76 40 73 40 1310 39 l1201 -1 46 -23z m-2956 -912
+c43 -74 86 -151 97 -170 11 -19 93 -161 182 -315 239 -412 431 -745 453 -785
+11 -19 76 -132 145 -250 69 -118 137 -236 151 -262 15 -26 82 -143 150 -260
+68 -117 195 -337 282 -488 87 -151 176 -303 198 -338 42 -66 56 -77 487 -385
+74 -53 215 -154 313 -224 l179 -128 -1071 -3 c-1052 -2 -1071 -2 -1123 18 -59
+23 -113 68 -144 120 -115 194 -164 279 -164 284 0 3 -15 29 -33 58 -19 29 -47
+78 -64 108 -17 30 -54 96 -83 145 -29 50 -61 106 -72 125 -45 78 -322 559
+-353 610 -18 30 -103 179 -190 330 -87 151 -170 295 -185 320 -48 81 -58 177
+-26 253 13 32 221 398 353 622 7 11 38 65 70 120 32 55 64 112 73 126 8 14 47
+81 85 148 39 67 75 130 80 139 6 9 37 63 69 120 32 56 60 101 61 100 1 -2 37
+-64 80 -138z m4304 -1486 c1 -32 4 -61 6 -64 2 -3 7 -48 10 -100 3 -52 8 -97
+10 -100 2 -3 6 -45 10 -95 4 -49 8 -101 10 -115 4 -26 8 -67 25 -240 17 -173
+21 -214 25 -240 2 -14 6 -65 10 -115 3 -49 8 -97 10 -105 2 -8 7 -51 10 -94 4
+-43 8 -86 10 -95 1 -9 6 -54 10 -101 4 -47 8 -98 10 -115 2 -16 7 -64 11 -105
+3 -41 7 -82 9 -90 2 -8 6 -53 10 -100 4 -47 9 -88 11 -92 2 -3 2 -12 -1 -20
+-4 -10 -20 -13 -53 -12 -71 4 -179 -22 -259 -61 -79 -39 -189 -139 -223 -203
+-37 -71 -28 -72 -155 19 -64 46 -126 91 -138 99 -12 8 -83 59 -157 112 -74 53
+-174 125 -223 160 -190 137 -212 153 -215 160 -2 5 -7 8 -12 8 -7 0 -188 126
+-300 210 -14 10 -106 76 -205 147 -290 208 -315 226 -312 229 7 7 227 42 312
+49 39 4 110 8 159 9 80 3 91 6 107 27 10 13 65 87 121 164 56 77 106 145 110
+150 5 6 49 64 97 131 49 66 95 121 102 121 24 0 167 14 186 17 10 2 50 7 88
+11 39 3 84 8 100 10 17 3 50 7 75 9 25 2 93 10 151 17 l106 12 38 64 c65 110
+281 394 296 387 3 -2 7 -29 8 -60z"/>
+<path d="M1314 4324 c-43 -14 -93 -67 -96 -99 -5 -66 5 -92 78 -218 78 -134
+88 -152 153 -265 20 -35 41 -71 46 -80 13 -21 67 -116 93 -162 11 -19 83 -145
+161 -278 77 -134 141 -248 141 -253 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5 27
+-55 60 -111 33 -55 60 -102 60 -104 0 -2 27 -49 60 -104 33 -56 60 -104 60
+-107 0 -2 8 -17 18 -32 11 -15 40 -63 67 -108 50 -85 77 -108 136 -118 49 -7
+116 28 141 74 37 68 11 140 -142 390 -28 47 -807 1395 -842 1460 -43 78 -66
+108 -91 122 -40 21 -84 26 -123 12z"/>
+</g>
+</svg>
diff --git a/public/index.html b/public/index.html
index ec23f94..3152822 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,40 +4,22 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/bunnie48px.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta content="#763568" data-react-helmet="true" name="theme-color" />
+    <meta content="Zoey's Bits" property="og:title" />
+    <meta content="Somebunny's place." property="og:description" />
+    <meta content="https://bits.li-yo.ts.net/" property="og:url" />
+    <meta content="https://bits.li-yo.ts.net/bunnie96px.png" property="og:image" />
     <meta
       name="description"
-      content="For all your bunny needs."
+      content="Somebunny's place."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/bunnie48px.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Zoey's Bits</title>
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/jellyfinlogo.svg b/public/jellyfinlogo.svg
new file mode 100644
index 0000000..d4d7f01
--- /dev/null
+++ b/public/jellyfinlogo.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- ***** BEGIN LICENSE BLOCK *****
+  - Part of the Jellyfin project (https://jellyfin.media)
+  - 
+  - All copyright belongs to the Jellyfin contributors; a full list can
+  - be found in the file CONTRIBUTORS.md
+  - 
+  - This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
+  - To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
+- ***** END LICENSE BLOCK ***** -->
+<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+	<defs>
+		<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
+			<stop offset="0" style="stop-color:#AA5CC3"/>
+			<stop offset="1" style="stop-color:#00A4DC"/>
+		</linearGradient>
+	</defs>
+	<title>icon-transparent</title>
+	<g id="icon-transparent">
+		<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
+		<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
+		M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
+	</g>
+</svg>
diff --git a/public/memoslogo.png b/public/memoslogo.png
new file mode 100644
index 0000000..7e2036c
Binary files /dev/null and b/public/memoslogo.png differ
diff --git a/public/owncastlogo.png b/public/owncastlogo.png
new file mode 100644
index 0000000..f5c52e0
Binary files /dev/null and b/public/owncastlogo.png differ
diff --git a/public/photonlogo.png b/public/photonlogo.png
new file mode 100644
index 0000000..3fec62e
Binary files /dev/null and b/public/photonlogo.png differ
diff --git a/public/versions.txt b/public/versions.txt
deleted file mode 100644
index 07559f5..0000000
--- a/public/versions.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-godot 4.2.1-1,
-blender 17:4.0.2-8,
-inkscape 1.3.2-3,
-krita 5.2.2-2,
-gimp 2.10.36-3
-
-
-
-
-
-please GOD LET ME FIX THIS BS
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 97e78a9..cd96acf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,28 +15,90 @@
 }
 
 .BunnyLogo,
-.GiteaLogo,
-.NextcloudLogo {
+.MemosLogo,
+.OwncastLogo,
+.PhotonLogo {
+  width: 115px;
+  height: 115px;
   user-select: none;
   pointer-events: none;
   object-position: center;
 }
 
-.LogoBoxes {
-  width: 100%;
-  height: auto;
+.PubP {
+  color: #111111;
+  font-size: larger;
+  user-select: none;
+  pointer-events: none;
+  object-position: center;
+}
+
+.LogoBoxesPub {
+  width: 150px;
+  height: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.LogoBoxes {
+.LogoBoxesPub {
   transition: transform 0.25s ease;
 }
 
-.LogoBoxes:hover {
+.LogoBoxesPub:hover {
+  transform: scale(1.1) /*rotate(360deg)*/;
+  animation: LogoHoverAnim 0.5s ease-in-out;
+}
+
+.TextButt {
+  user-select: none;
+  object-position: center;
+}
+
+.Teardrop {
+  user-select: none;
+  pointer-events: none;
+  object-position: center;
+}
+
+.ForgejoLogo,
+.JellyfinLogo,
+.GraphiteLogo {
+  height: 76px;
+  width: 76px;
+  user-select: none;
+  pointer-events: none;
+  object-position: center;
+}
+
+.TailP {
+  color: #111111;
+  user-select: none;
+  pointer-events: none;
+  object-position: center;
+}
+
+.SubHeaders {
+  user-select: none;
+  pointer-events: none;
+  object-position: center;
+}
+
+.LogoBoxesTail {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.LogoBoxesTail {
+  transition: transform 0.25s ease;
+}
+
+.LogoBoxesTail:hover {
   transform: scale(1.1) rotate(360deg);
-  animation: LogoHoverAnim 1s ease-in-out;
+  animation: LogoHoverSpinAnim 1s ease-in-out;
 }
 
 .VersionBox {
@@ -101,6 +163,17 @@
 }
 
 @keyframes LogoHoverAnim {
+  from {
+    /*transform: rotate(0deg) scale(1);*/
+    transform: scale(1);
+  }
+  to {
+    /*transform: rotate(360deg) scale(1.1);*/
+    transform: scale(1.1);
+  }
+}
+
+@keyframes LogoHoverSpinAnim {
   from {
     transform: rotate(0deg) scale(1);
   }
@@ -109,6 +182,7 @@
   }
 }
 
+
 @keyframes Welcome-spin {
   from {
     transform: rotate(-2deg);
diff --git a/src/App.jsx b/src/App.js
similarity index 90%
rename from src/App.jsx
rename to src/App.js
index d2d8a70..a0d1caf 100644
--- a/src/App.jsx
+++ b/src/App.js
@@ -12,7 +12,7 @@ import Home from './Home';
 
 function App() {
   return (
-    <div className="body">
+    <div className="body">    
       <Home />
       <TopBar />
       <BottomBar />
diff --git a/src/BottomBar.jsx b/src/BottomBar.js
similarity index 100%
rename from src/BottomBar.jsx
rename to src/BottomBar.js
diff --git a/src/Home.js b/src/Home.js
index 067ded4..c577c29 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -21,15 +21,37 @@ function Home() {
     <div className="flex w-screen h-screen overflow-hidden MainBG">
       <div className="flex flex-col mt-20 items-center justify-center text-secondary top-14 bottom-8 w-screen overflow-hidden">
         <p className="text-4xl mb-16 shadow-2xl WelcomeText">Welcome, fellow traveller!</p>
-        <div className="flex justify-center align-middle">
-          <a href="https://librebun.ooguy.com/nc/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
-            <img className="NextcloudLogo" draggable="false" src={process.env.PUBLIC_URL + "/Nextcloud_Logo.svg"} alt="Nextcloud"></img>
+        <p className="text-2xl mb-5 shadow-2xl SubHeaders">Public Services.</p>
+        <div className="flex justify-center align-middle h-auto">
+          <a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
+            <img className="MemosLogo" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
+            <p className="PubP">Memos</p>
           </a>
-          <a href="https://librebun.ooguy.com/gt/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
-            <img className="mx-0 GiteaLogo" draggable="false" src={process.env.PUBLIC_URL + "/Gitea_Logo.svg"} alt="Gitea"></img>
+          <a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
+            <img className="PhotonLogo" draggable="false" src={process.env.PUBLIC_URL + "/photonlogo.png"} alt="Lemmy"></img>
+            <p className="PubP">Lemmy</p>
+          </a>
+          <a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
+            <img className="OwncastLogo" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
+            <p className="PubP">Owncast</p>
           </a>
         </div>
-        <div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-20 overflow-hidden VersionBox">
+        <p className="text-2xl mt-5 mb-5 shadow-2xl SubHeaders">Tailscale</p>
+        <div className="flex justify-center align-middle mb-20">
+          <a href="http://daughter:4020/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
+            <img className="ForgejoLogo" draggable="false" src={process.env.PUBLIC_URL + "/forgejologo.svg"} alt="Forgejo"></img>
+            <p className="TailP">Forgejo</p>
+          </a>
+          <a href="http://daughter:4008" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
+            <img className="JellyfinLogo" draggable="false" src={process.env.PUBLIC_URL + "/jellyfinlogo.svg"} alt="Jellyfin"></img>
+            <p className="TailP">Jellyfin</p>
+          </a>
+          <a href="http://daughter:4033" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
+            <img className="GraphiteLogo" draggable="false" src={process.env.PUBLIC_URL + "/graphitelogo.svg"} alt="Graphite"></img>
+            <p className="TailP">Graphite</p>
+          </a>
+        </div>
+        <div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-0 overflow-hidden VersionBox">
           <div className="flex">
             <div className="flex-row mt-1">
               <p className="ml-2 mr-2">_&gt;# </p>
diff --git a/src/SideBar.jsx b/src/SideBar.js
similarity index 100%
rename from src/SideBar.jsx
rename to src/SideBar.js
diff --git a/src/TopBar.jsx b/src/TopBar.js
similarity index 85%
rename from src/TopBar.jsx
rename to src/TopBar.js
index edb675c..e6742ee 100644
--- a/src/TopBar.jsx
+++ b/src/TopBar.js
@@ -16,15 +16,15 @@ const TopBar = () => {
                         </div>
                     </div>
 
-                    <div className="flex items-center">
+                    <div className="flex items-center TextButt">
                         <div className="TopButton">
-                            <p className="text-lg mx-4">Projects</p>
+                            <p className="text-lg mx-4 TextButt">Projects</p>
                         </div>
-                        <div className="w-px bg-black h-8"></div>
+                        <div className="w-px bg-black h-8 TextButt"></div>
                         <div className="TopButton">
-                            <p className="text-lg mx-4">Rants</p>
+                            <p className="text-lg mx-4 TextButt">Rants</p>
                         </div>
-                        <div className="w-px bg-black h-8"></div>
+                        <div className="w-px bg-black h-8 TextButt"></div>
                         <div className="TopButton">
                             <p className="text-lg mx-4">About</p>
                         </div>