diff --git a/_includes/base.html b/_includes/base.html
index e24b361..932fc12 100644
--- a/_includes/base.html
+++ b/_includes/base.html
@@ -10,20 +10,33 @@
     <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
 </head>
 <body>
-    <nav>
-      <a href="/">home</a>
-      <a href="/blog">blog</a>
-      <a href="/store">store</a>
-      <a href="https://git.astolfo.org">git</a>
-    </nav>
-
     <header>
-      <h1 id="wave-text">
-        <span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span>
-      </h1>
+      <marquee>astolfo is such a cutie // church of astolfo!! // such a good girl // breathing in his bussy gas rn</marquee>
+      <div class="flex">
+        <h1 id="wave-text">
+          <span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span>
+        </h1>
+        <img src="/img/astolfos/header.gif">
+      </div>
     </header>
 
-    <div style="padding: 2em;">{{ content }}</div>
+    <div id="main-page">
+      <nav>
+        <ul>
+          <li><a href="/">home</a></li>
+          <li><a href="/blog">blog</a></li>
+          <li><a href="/store">store</a></li>
+          <li><a href="https://git.astolfo.org">git</a></li>
+        </ul>
+        <div id="buttons">
+          <h2>buttons!!!</h2>
+          <a><img src="/img/buttons/ublock-now.png"></a>
+          <a><img src="/img/buttons/firefox.gif"></a>
+        </div>
+
+      </nav>
+      <div style="margin: 2em;">{{ content }}</div>
+    </div>
 
     <footer class="horizontal-flex">
       <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>
diff --git a/bundle.css b/bundle.css
index e0b82a4..1703030 100644
--- a/bundle.css
+++ b/bundle.css
@@ -20,6 +20,20 @@ body {
   font-family: ComicShannsMono Nerd Font, Chalkboard, Comic Sans MS, sans-serif;
 }
 
+a {
+  padding: 0.3em;
+  display: inline-block;
+  border-radius: var(--rounding);
+  text-decoration: none;
+  color: var(--text);
+}
+
+a:hover {
+  background-color: var(--accent2);
+  transform: translateY(-5px) rotate(-7deg) scale(200%);
+  margin-left: 2em;
+  margin-right: 2em;
+}
 /*
  * basic elements
  */
@@ -46,86 +60,88 @@ a:hover {
  */
 
 header {
-  background-image: url("/img/astolfos/header.gif");
-  background-position: 100% 100%;
-  background-size: 100% 100%;
-  border-radius: var(--rounding);
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
-
-  width: 60em;
-  height: 30em;
+  width: auto;
+  height: 30svh;
   margin: auto;
-  margin-top: 2em;
   animation: spinin 1s;
+
+  border-bottom-left-radius: var(--rounding);
+  border-bottom-right-radius: var(--rounding);
+
+  marquee {
+    color: var(--text);
+    background-color: var(--accent2);
+  }
+
+/*  h1 {
+    border-radius: var(--rounding);
+    background-color: var(--accent2);
+
+    position: absolute;
+    left: 0px;
+    margin: auto;
+    font-size: 8em;
+    height: fit-content;
+    width: fit-content;
+    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+  }*/
+
+  h1 {
+    text-orientation: mixed;
+    writing-mode: vertical-lr;
+    margin-left: 0px;
+    margin-right: 0px;
+
+    color: var(--background-body);
+    background-color: var(--accent2);
+    -webkit-text-stroke: 2px var(--text);
+  }
+
+  .flex {
+    margin-left: 0px;
+    padding-left: 0px;
+    height: inherit;
+  }
+
+  img {
+    width: 100%;
+    object-fit: cover;
+    max-height: 100%;
+    border-bottom-right-radius: var(--rounding);
+  }
+
+  #wave-text * {
+    animation: wave 3s infinite;
+    display: inline-block;
+
+  }
 }
 
-header:hover {
-  transition-duration: 3s;
-  scale: 125%;
-  transform: translateY(10%);
-  filter: hue-rotate(360deg);
-}
-
-header h1 {
-  border-radius: var(--rounding);
-  background-color: var(--accent2);
-
-  position: relative;
-  top: 3em;
-  margin: auto;
-  font-size: 8em;
-  height: fit-content;
-  width: fit-content;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
-}
-
-#wave-text * {
-  animation: wave 3s infinite;
-  display: inline-block;
-
-}
-
-header a{
-  padding: 0.3em;
-  display: inline-block;
-  border-radius: var(--rounding);
-  text-decoration: none;
-  color: var(--text);
-}
-
-header a:hover {
-  background-color: var(--accent2);
-  scale: 200%;
-  transform: translateY(-5px) rotate(-7deg);
-  margin-left: 2em;
-  margin-right: 2em;
+.flex {
+  display: flex;
 }
 
 @keyframes wave { 
   0% {
-    transform: translateY(0);
+    transform: translateX(0);
   }
   25% {
     scale: 120%;
   }
   50% {
-    transform: translateY(-50px);
+    transform: translateX(50px);
   }
   100% {
-    transform: translateY(0px);
+    transform: translateX(0px);
   }
 }
 
 @keyframes spinin { 
   0% {
-    transform: translateY(-100vh);
-    rotate: 360deg;
-    scale: 300%;
+    transform: translateX(-100%);
   }
   100% {
-    transform: translateY(0px);
-    rotate: 0deg;
-    scale: 100%;
+    transform: translateX(0px);
   }
 }
 
@@ -133,22 +149,52 @@ header a:hover {
  * nav/sidebar
  */
 
-nav {
-  list-style-type: none;
-  justify-content: space-evenly;
+#main-page {
   display: flex;
+  flex-direction: reverse-row;
 }
 
-nav a {
-  color: var(--text) !important;
-}
+nav {
+  margin-top: 2em;
+  width: 7em;
 
-nav a:hover {
-  color: var(--accent2);
-  background-color: inherit;
-  transform: none;
-  scale: 100%;
-  rotate: 0deg;
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    color: var(--text) !important;
+    background-color: var(--background);
+    border-radius: var(--rounding);
+
+    list-style-type: none;
+    margin: 0;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding: 1em;
+    width: 6em;
+  }
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  li:hover {
+    transform: scale(125%);
+    filter: hue-rotate(60deg);
+    border: white 2px solid;
+    background-image: url("/img/astolfos/header.gif");
+    background-position: 100% 100%;
+    background-size: 100% 100%;
+  }
+
+  a:hover {
+    background-color: inherit;
+    transform: none;
+    rotate: 0deg;
+  }
 }
 
 /*
diff --git a/img/buttons/firefox.gif b/img/buttons/firefox.gif
new file mode 100644
index 0000000..a4cd0bd
Binary files /dev/null and b/img/buttons/firefox.gif differ
diff --git a/img/buttons/ublock-now.png b/img/buttons/ublock-now.png
new file mode 100644
index 0000000..c82555b
Binary files /dev/null and b/img/buttons/ublock-now.png differ
