diff --git a/assets/style.css b/assets/style.css
index 1ddb3b9..dd0c374 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -40,7 +40,7 @@ html {
 
 body {
   margin: 0;
-  padding: 16px;
+  padding: 8px 16px;
   box-sizing: border-box;
   min-height: 100%;
   width: 100%;
@@ -49,7 +49,7 @@ body {
   font-family: var(--font-text-legible);
 }
 
-main {
+main, div.fakemain {
   text-align: start;
   display: inline-block;
   width: 100%;
@@ -60,9 +60,14 @@ main {
   color: var(--foreground);
   min-height: 100%;
   padding: 8px;
+  margin: 8px 0;
   box-shadow: 4px 4px 0 var(--foreground);
 }
 
+div.fakemain {
+  min-height: unset;
+}
+
 section {
   margin: 1em;
 }
@@ -106,4 +111,20 @@ hr {
   :last-child {
     margin-bottom: 0;
   }
+}
+
+.web-button {
+  position: relative;
+  filter: grayscale(1);
+  left: 0;
+  top: 0;
+  transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.web-button:hover {
+  left: -4px;
+  top: -4px;
+  z-index: 999;
+  filter: grayscale(0);
+  box-shadow: 4px 4px 16px #0008;
 }
\ No newline at end of file
diff --git a/views/components/about-boxes.ejs b/views/components/about-boxes.ejs
index e12b836..bdb2a66 100644
--- a/views/components/about-boxes.ejs
+++ b/views/components/about-boxes.ejs
@@ -27,11 +27,4 @@
     </div>
     <img class="AboutboxElementImage" src="/assets/icons/links.png" />
   </div>
-  <div class="AboutboxElement">
-    <div class="AboutboxElementText">
-      <h1><a href="/about/">ABOUT</a></h1>
-      <p>Who I am.</p>
-    </div>
-    <img class="AboutboxElementImage" src="/assets/icons/about.png" />
-  </div>
 </div>
\ No newline at end of file
diff --git a/views/components/footer.ejs b/views/components/footer.ejs
index e4f4e9d..31d2d47 100644
--- a/views/components/footer.ejs
+++ b/views/components/footer.ejs
@@ -1,13 +1,13 @@
-<hr />
 <footer>
   <section>
-    <p>abtmtr.link v13 &copy; MeowcaTheoRange 2024</p>
+    <h2>abtmtr.link v13</h2>
+    <p>&copy; <a href="mailto:me@abtmtr.link">MeowcaTheoRange</a> 2023-2024</p>
     <p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p>
     <p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p>
   </section>
   <section style="text-align: center;">
     <% buttons.forEach((button) => { %>
-      <a href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
+      <a href="<%= button.href %>"><img class="web-button" src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
     <% }) %>
   </section>
 </footer>
\ No newline at end of file
diff --git a/views/components/header.ejs b/views/components/header.ejs
index 22f14e4..94d2ded 100644
--- a/views/components/header.ejs
+++ b/views/components/header.ejs
@@ -8,9 +8,9 @@
   </div>
   <div class="HeaderLinks">
     <a class="HeaderLinksLink" href="/">Home</a>
+    <a class="HeaderLinksLink" href="/matkap/">matkap zone</a>
     <a class="HeaderLinksLink" href="/services/">Services</a>
     <a class="HeaderLinksLink" href="/computers/">Computers</a>
     <a class="HeaderLinksLink" href="/links/">Links</a>
-    <a class="HeaderLinksLink" href="/about/">About</a>
   </div>
 </div>
\ No newline at end of file
diff --git a/views/pages/about/index.ejs b/views/pages/about/index.ejs
index 5da099a..f4ea9ae 100644
--- a/views/pages/about/index.ejs
+++ b/views/pages/about/index.ejs
@@ -10,14 +10,18 @@
 </head>
 
 <body>
-  <main>
+  <div class="fakemain">
     <%- include("../../components/header.ejs") %>
+  </div>
+  <main>
     <p class="tagline">Who I am.</p>
     <section>
       <p>abtmtr.link is a website. that's for sure</p>
     </section>
-    <%- include("../../components/footer.ejs") %>
   </main>
+  <div class="fakemain">
+    <%- include("../../components/footer.ejs") %>
+  </div>
   <script src="/assets/script.js"></script>
 </body>
 
diff --git a/views/pages/computers/index.ejs b/views/pages/computers/index.ejs
index 4d77758..a6a4852 100644
--- a/views/pages/computers/index.ejs
+++ b/views/pages/computers/index.ejs
@@ -10,16 +10,20 @@
 </head>
 
 <body>
-  <main>
+  <div class="fakemain">
     <%- include("../../components/header.ejs") %>
+  </div>
+  <main>
     <p class="tagline">Computers I own, use, and host stuff on.</p>
     <div class="Aboutbox">
       <% computers.forEach((computer) => { %>
         <%- include("../../components/computer-boxes.ejs", computer) %>
       <%  }) %>
     </div>
-    <%- include("../../components/footer.ejs") %>
   </main>
+  <div class="fakemain">
+    <%- include("../../components/footer.ejs") %>
+  </div>
   <script src="/assets/script.js"></script>
 </body>
 
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index ffade11..730c4ee 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -10,8 +10,10 @@
 </head>
 
 <body>
-  <main>
+  <div class="fakemain">
     <%- include("../components/header.ejs") %>
+  </div>
+  <main>
     <% statuses.forEach((status) => { %>
       <div class="boxThing">
         <h1><%= status.title %></h1>
@@ -21,8 +23,10 @@
     <% }) %>
     <p class="tagline">abtmtr.link is a domain for all kinds of services, from web search to live-streaming.</p>
     <%- include("../components/about-boxes.ejs") %>
-    <%- include("../components/footer.ejs") %>
   </main>
+  <div class="fakemain">
+    <%- include("../components/footer.ejs") %>
+  </div>
   <script src="/assets/script.js"></script>
 </body>
 
diff --git a/views/pages/links/index.ejs b/views/pages/links/index.ejs
index 0e89c8b..35d0645 100644
--- a/views/pages/links/index.ejs
+++ b/views/pages/links/index.ejs
@@ -10,16 +10,20 @@
 </head>
 
 <body>
-  <main>
+  <div class="fakemain">
     <%- include("../../components/header.ejs") %>
+  </div>
+  <main>
     <p class="tagline">Where I am on the Internet.</p>
     <div class="Aboutbox">
       <% links.forEach((link) => { %>
         <%- include("../../components/link-boxes.ejs", link) %>
       <%  }) %>
     </div>
-    <%- include("../../components/footer.ejs") %>
   </main>
+  <div class="fakemain">
+    <%- include("../../components/footer.ejs") %>
+  </div>
   <script src="/assets/script.js"></script>
 </body>
 
diff --git a/views/pages/matkap/index.ejs b/views/pages/matkap/index.ejs
index 7fc729f..baa1753 100644
--- a/views/pages/matkap/index.ejs
+++ b/views/pages/matkap/index.ejs
@@ -10,6 +10,9 @@
 </head>
 
 <body>
+  <div class="fakemain">
+    <a href="/">&lt; back to abtmtr.link</a>
+  </div>
   <main>
     <div class="header">
       <p>welcome to ...</p>
@@ -18,7 +21,7 @@
     </div>
     <p style="text-align: center;font-size: 12px;">this website is best viewed on a computer</p>
     <h1>hey i'm mat what's up?</h1>
-    <p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but some call me matkap</p>
+    <p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but most call me matkap</p>
     <div class="box">
       <p><b>ABOUT ME</b></p>
       <ul>
@@ -26,8 +29,7 @@
         <li>i go by he/they <b>pronou</b>ns</li>
         <li>im 17 (minor ! !!! !!!)</li>
         <li>i tied my hair once and i never stopped doing it</li>
-        <li>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck</li>
-        <li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> and others</li>
+        <li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> <a href="https://klausveen.bandcamp.com/">klaus veen</a> and others</li>
         <li>i watch some youtube. <a href="https://youtube.com/@kurtisconner">kurtis conner</a> and <a href="https://youtube.com/@Danny-Gonzalez">danny gonzalez</a> are cool</li>
         <li><a href="https://twitter.com/mattkp134">follow me on twitter</a></li>
         <li><a href="https://spectrum.avris.it/9Z96">my spectrum</a> and also <a href="https://cake.avris.it/bB5">have a slice of my cake!</a></li>
@@ -36,14 +38,29 @@
       <p><a href="https://users3.smartgb.com/g/g.php?a=s&i=this-is-fake-and-im-not-very-creative-give-me-a-break">sign my guestbook</a></p>
     </div>
     <p>this is my website! i sure hope you like it.</p>
-    <img src="/assets/matkap/me.jpg" style="width: calc(66% - 32px); height: 200px;" />
+    <p>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck.</p>
+    <img src="/assets/matkap/me.jpg" width="463" height="200" />
     <center><p><b><i>this is me</i></b></p></center>
+    <p>i am a 🌈g<b>ay dude</b>🌈 i sorta like men but also i'm aroace so DON'T flirt with me !!!! thank you</p>
+    <div class="box2">
+      <h2>dni list</h2>
+      <ul>
+        <li>*-phobic</li>
+        <li><a href="https://basic-dni.crd.co/">basically everything here</a> except the toothpaste flag stuff. i love that flag</li>
+      </ul>
+    </div>
+    <h2>now playing</h2>
+    <p>classical by klaus veen</p>
+    <iframe width="200" height="200" src="https://www.youtube.com/embed/fzynKBSruwY?si=y6J2OVNajxPVbG24&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
     <h2>this site is a work in progress</h2>
     <p>im not very good at this website stuff someone help me</p>
     <script type="text/javascript" src="https://counter.websiteout.com/js/6/10/0/0"></script>
   </main>
   <script src="/assets/script.js"></script>
   <style>
+    main {
+      width: 768px;
+    }
     @keyframes flash {
       0% {
         color: var(--grey);
@@ -71,6 +88,22 @@
       }
     }
 
+    .box2 {
+      display: inline-block;
+      width: 100%;
+      border: 1px solid currentColor;
+      box-sizing: border-box;
+      padding: 8px;
+      margin-top: 8px;
+
+      :first-child {
+        margin-top: 0;
+      }
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
     .header {
       border: 1px solid currentColor;
       padding: 8px;
diff --git a/views/pages/services/index.ejs b/views/pages/services/index.ejs
index c2bacc5..39cc5e2 100644
--- a/views/pages/services/index.ejs
+++ b/views/pages/services/index.ejs
@@ -10,16 +10,20 @@
 </head>
 
 <body>
-  <main>
+  <div class="fakemain">
     <%- include("../../components/header.ejs") %>
+  </div>
+  <main>
     <p class="tagline">Stuff I host here on abtmtr.link.</p>
     <div class="Aboutbox">
       <% services.forEach((service) => { %>
         <%- include("../../components/service-boxes.ejs", {...service, arr: visibility}) %>
       <%  }) %>
     </div>
-    <%- include("../../components/footer.ejs") %>
   </main>
+  <div class="fakemain">
+    <%- include("../../components/footer.ejs") %>
+  </div>
   <script src="/assets/script.js"></script>
 </body>
 
