diff --git a/main/index.css b/main/index.css
index 52f63bb..6eae577 100644
--- a/main/index.css
+++ b/main/index.css
@@ -1,345 +1,93 @@
-@import url(https://fonts.bunny.net/css?family=poppins);
-
-body {
-    font-family: 'Poppins', sans-serif;
-    padding:0px;
-    margin:0px;
-    max-width:100vw;
-    overflow-x:hidden;
-    scroll-behavior: smooth;
+@import url(https://fonts.bunny.net/css?family=azeret-mono);
+*{
+    font-family: 'Azeret Mono', monospace;
 }
-@keyframes rotate {
-    0% {transform: rotate(0deg);}
-    100% {transform: rotate(360deg);}
-}
-header {
-    width:92vw;
+body{
     padding:6vh 4vw;
-    position:fixed;
+}
+ /* The side navigation menu */
+.sidebar {
+  margin: 0;
+  padding: 0;
+  width: 200px;
+  background-color: #5e344a
+  position: fixed;
+  height: 100%;
+  overflow: auto;
+}
+/* Sidebar links */
+.sidebar a {
+  display: block;
+  color: black;
+  padding: 16px;
+  text-decoration: none;
+}
+/* Active/current link */
+.sidebar a.active {
+  background-color: #04AA6D;
+  color: #5e344a;
+}
+/* Links on mouse-over */
+.sidebar a:hover:not(.active) {
+  background-color: #555;
+  color: #5e344a;
+}
+/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
+div.content {
+  margin-left: 200px;
+  padding: 16px 16px;
+}
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: relative;
+  }
+  .sidebar a {float: left;}
+  div.content {margin-left: 0;}
+}
+/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
+@media screen and (max-width: 400px) {
+  .sidebar a {
+    text-align: center;
+    float: none;
+  }
+}
+#home {
     font-weight:bold;
-    background:transparent;
-    color:#fff;
-    transition:0.4s ease-in-out;
-    z-index:2;
-}
-header table {
-    width:100%;
-}
-#logo {
-    width:20%;
-}
-#navigation {
-    width:80%;
-}
-#img_here {
-    width:60%;
-    height:90%;
-    background-size:contain !important;
-    background-repeat:no-repeat !important;
-    margin:0px auto;
-}
-#logo {
-    font-size:24px;
-    color:rgb(255, 44, 90);
-}
-#navigation {
-    text-align:right;
-}
-#navigation a {
-    color:inherit;
-    text-decoration:none;
-    padding:5px 10px;
-    border-bottom:2px solid transparent;
-    margin-left:2vw;
-    margin-right:2vw;
-    transition:0.4s ease-in-out;
-}
-#navigation a:hover{
-    border-bottom:2px solid #fff;
-}
-#top_part {
-    width:100%;
- /*   border:2vh solid #fff; */
-}
-#top_part tr td{
-    width:50%;
-}
-#about {
-    width:84% !important;
-    height:95vh;
-    display:flex;
-    flex-direction:column;
-    justify-content:center;
-    text-align:left;
-    padding:0px 8%;
-}
-#about h1 {
-    font-size:45px;
-    word-wrap:break-word;
-}
-#about table {
-    width:70%;
-    margin-top:4vh;
-}
-#about table tr td {
-    width:20% !important;
-    text-align:left;
-}
-.social {
-    color:rgb(255, 44, 90);
-    font-size:23px;
-    padding:12px 17px;
-    border-radius:50%;
-    background:transparent;
-    transition:0.4s ease-in-out;
-    font-weight:bold;
-    margin:0px 8px;
-}
-.social:hover { 
-    cursor: pointer;
-    color:#fff;
-    background:rgb(255, 44, 90);
-    box-shadow:0px 10px 30px rgba(255, 66, 107,0.8);
-}
-.btn_one {
-    font-size:18px;
-    font-family: 'Poppins', sans-serif;
-    color:rgb(255, 44, 90);
-    background:#fff;
-    border:3px solid rgb(255, 44, 90);
-    padding:8px 40px;
-    width:35%;
-    border-radius:80px;
-    font-weight:bold;
-    margin:2vh 0px;
-    transition:0.4s ease-in-out;
-}
-.btn_one:hover {
-    box-shadow:0px 10px 30px rgba(255, 44, 90, 0.8);
-    cursor:pointer;
-    color:#fff;
-    background:rgb(255, 44, 90);
-}
-#rightImage {
-    width:100%;
-    height:100vh;
-    background:linear-gradient(0deg,rgba(255, 44, 90, 0.8),rgba(255, 44, 90, 0.8)), url("images/xeniakiki.png") center center;
-    background-size:cover;
-    background-repeat:no-repeat;
 }
 #gallery {
-    width:92vw;
-    padding:6vh 4vw;
-    font-weight:bold;
 }
 #gallery h1 {
-    padding:5px 0px;
     border-bottom:4px solid rgb(255, 44, 90);
     width:6%;
 }
 #photos {
-    width:100%;
-    columns:3;
+    width:50%;
     column-gap:4%;
-    z-index:1;
     transition:0.4s ease-in-out;
 }
 #photos img {
-    width:100%;
+    width:20%;
     height:auto;
     margin:4.5% 0px;
     transition:0.4s ease-in-out;
 }
 #photos img:hover {
-    transform: scale(1.1);
+    transform: scale(2);
     cursor: pointer;
 }
-#comms {
-    width:92vw;
-    padding:6vh 4vw;
-    font-weight:bold;
-}
-#comms h1 {
-    padding:5px 0px;
-    border-bottom:4px solid rgb(255, 44, 90);
-    width:25%;
-}
 #contact {
-    width:92vw;
-    padding:6vh 4vw;
+    width:auto;
 }
 #contact h1 {
-    padding:5px 0px;
     border-bottom:4px solid rgb(255, 44, 90);
     width:10%;
 }
-#contact table {
-    width:100%;
-}
-#contact table tr td {
-    width:50%;
-}
-#inner_div table{
-    width:100%;
-}
-#inner_div table tr td{
-    font-weight:bold;
-}
-#inner_table tr td{
-    padding:10px 20px !important;
-}
 #footer {
     width:100%;
     padding:10vh 0px;
     text-align:center;
     font-weight:bold;
 }
-#footer a {
-    color:rgb(255, 44, 90);
-    text-decoration:none;
-}
-::placeholder {
-    color:#000;
-}
-button:focus {
-    outline:none;
-}
-::-webkit-scrollbar {
-    width:5px;
-    height:5px;
-}
-::-webkit-scrollbar-track {
-    background: #f1f1f1; 
-}
-::-webkit-scrollbar-thumb {
-    background: rgb(0, 0, 0); 
-}
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0,0.8); 
-}
-
-@media (max-width: 1000px){
-    #photos {
-    columns:1;
-    column-gap:0%;
-    }
-    #photos img {
-        margin:2% 0px;
-    }
-    #photos img:hover {
-        transform: scale(1);
-        cursor: pointer;
-    }
-    #rightImage {
-        display:none;
-    }
-    #top_part {
-        border:0px;
-    }
-    #top_part tr td{
-        width:100%;
-        text-align:center;
-    }
-    #about {
-        width:92% !important;
-        height:75vh;
-        padding-top:20vh !important;
-        text-align:center;
-        padding:0px 4%;
-    }
-    #about table {
-        width:100%;
-        margin-top:6vh;
-    }
-    #about table tr td {
-        text-align:center;
-    }
-    .btn_one {
-    padding:6px 30px;
-    width:60%;
-    margin:4vh auto;
-    box-shadow:0px 10px 20px rgba(255, 44, 90, 0.8);
-    background:rgb(255, 44, 90);
-    color:#fff;
-    }
-    .btn_one:hover {
-        box-shadow:0px 10px 40px rgba(255, 44, 90, 0.8);
-        cursor:pointer;
-    }
-    #contact table tr td {
-        width:100%;
-        display:block;
-    }
-    #inner_table tr td{
-        padding:10px 0px !important;
-    }
-    #contact form input {
-        width:90%;
-    }
-    #contact form textarea {
-        width:90%;
-    }
-    #gallery h1 {
-        width:19%;
-    }
-    #comms h1 {
-        width:25%;
-    }
-    #contact h1 {
-        width:33%;
-    }
-    header {
-        width:96vw;
-        background:#fff;
-        padding:4vh 2vw;
-        position:absolute;
-    }
-    #header table tr td {
-        width:100%;
-        display:block;
-        text-align:center;
-        padding:15px 0px;
-    }
-    #navigation a {
-        color:#000;
-    }
-}
- /* Dropdown Button */
-.dropbtn {
-  color: white;
-}
-
-/* The container <div> - needed to position the dropdown content */
-.dropdown {
-  position: center;
-  display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: purple;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-
-/* Links inside the dropdown */
-.dropdown-content a {
-  color:inherit;
-  text-decoration:none;
-  padding:5px 10px;
-  border-bottom:2px solid transparent;
-  text-decoration: none;
-  display: block;
-}
-
-/* Change color of dropdown links on hover */
-#dropdown-content a:hover {background-color: #grey;}
-
-/* Show the dropdown menu on hover */
-.dropdown:hover .dropdown-content {display: block;}
-
-/* Change the background color of the dropdown button when the dropdown content is shown
-.dropdown:hover .dropbtn {background-color: #3e8e41;}
-*/
diff --git a/main/index.html b/main/index.html
index dd6825c..3cbd45d 100644
--- a/main/index.html
+++ b/main/index.html
@@ -1,77 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Alison Kit</title>
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
-    <link rel="stylesheet" href="index.css">
-</head>
-<body>
-    <header id="header">
-        <table>
-            <tr>
-                <td id="logo">Alison Kit</td>
-                <td id="navigation">
-                    <a href="#gallery">Gallery</a>
-                    <a href="#comms">Commission</a>
-                    <a href="https://nuzzle.thecomicseries.com">Nuzzle</a>
-                    <div class="dropdown">
-                        <a class="dropbtn">Contact</a>
-                        <div class="dropdown-content">
-                            <a href="https://ko-fi.com/alisonkit">Ko-Fi</a>
-                            <a href="https://cohost.org.alisonkit">Cohost</a>
-                            <a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a>
-                            <a href="https://bsky.app/alisonkit.com">Bluesky</a>
-                            <a href="https://twitch.tv/alisonkit">Twitch</a>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </table>
-    </header>
-    <table id="top_part">
-        <tr>
-            <td id="about">
-                <h1>Artist, Writer, Red Panda.</h1>
-                <table>
-                    <tr>
-                    <td><a class="social" href="https://mastodon.art/@alisonkit"><i class="fab fa-mastodon"></i></a></td>
-                    <td><a class="social" href="https://tumblr.com/alisonkit"><i class="fab fa-tumblr"></i></a></td>
-                    <td><a class="social" href="https://cohost.org/alisonkit">Cohost</a></td>
-                    </tr>
-                </table>
-            </td>
-            <td id="rightImage"></td>
-        </tr>
-    </table>
-    <div id="gallery">
-        <h1>Gallery</h1>
-        <div id="photos">
-            <img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/niko.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/nona.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
-            <img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
-            <img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Alison Kit</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <!-- The sidebar -->
+        <div class="sidenav">
+            <a href="#home">Home</a>
+            <a href="#gallery">Gallery</a>
+            <a href="#about">About</a>
+            <a href="#contact">Contact</a>
         </div>
-    </div>
-    <div id="comms">
-        <h1>Commissions</h1>
-        <h2>Commissions are open.</h2>
-        <button>Commission Info</button>
-        <button>Commission Queue</button>
-        <p>For current commission slot availability, check social media for any annoucements.</p>
-    </div>
-    <div id="footer">
-        Alison Kit 2023 <br> website based on template by <a href="https://imfunniee.github.io">imfunniee</a>
-    </div>
-    <div style="text-align:right">
-<a href="https://cd5k.net/tau/">&tau;</a>
-    <script src="index.js" type="text/javascript"></script>
-</body>
+        <div class="main"><!-- container to push stuff aside from nav bar -->
+            <!-- home -->
+            <div id="home">
+                <br>
+                <h1>Alison Kit</h1>
+                <h2>My WAH-bsite!</h2>
+                <p>I'm an illustrator, animator, and comic artist. I draw furry art and anything cringe.</p>
+            </div>
+            <!-- gallery -->
+            <div id="gallery">
+                <h2>Gallery</h2>
+                <div id="photos">
+                    <img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/niko.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/nona.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
+                    <img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
+                    <img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
+                </div>
+            </div>
+            <!-- about-->
+            <div id="about">
+                <h2>About</h2>
+                    <ul>
+                        <li><p>25, she/they</p></li>
+                        <li><p>EN/ES</p></li>
+                        <li><p>Red Panda fursona</p></li>
+                        <li><p>Latine</p></li>
+                        <li><p>Very queer and autistic</p></li>
+                    </ul>
+                    <br>
+                </div>
+            <!-- Contact -->
+            <div id="contact">
+                <h2>Contact</h2>
+                    <p><a href="mailto:alisonkit@tuta.io">Mail</a> >>> for commission contact</p>
+                    <p><a href="https://ko-fi.com/alisonkit">Ko-Fi</a> >>> tip me!!!</p>
+                    <p><a href="https://cohost.org.alisonkit">Cohost</a> >>> for thoughts</p>
+                    <p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p>
+                    <p><a href="https://bsky.app/alisonkit.net">Bluesky</a> >>> better twitter</p>
+                    <p><a href="https://twitch.tv/alison_kit">Twitch</a> >>> Art Streams!</p>
+                    <p><a href="https://twitter.com/kittwah">Twitter</a> ...sigh</p>
+                    <p><a href="https:/https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p>
+                    <br>
+                <h3>Commissions are open.</h3>
+                    <p>For current commission slot availability, check social media for any annoucements.</p>
+                <h3>About my streams</h3>
+                    <p><a href="live/">Visit this link to see more information about my streams.</a></p>
+            </div>
+            <div id="footer">
+                <p>Alison Kit 2024</p>
+            </div>
+            <div style="text-align:right">
+                <a href="https://cd5k.net/tau/">&tau;</a>
+            </div>
+        </div> <!-- main -->
+    </body>
 </html>
diff --git a/main/index.js b/main/index.js
deleted file mode 100644
index 3eece44..0000000
--- a/main/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-var width = $(window).width(); 
-window.onscroll = function(){
-if ((width >= 1000)){
-    if(document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
-        $("#header").css("background","#fff");
-        $("#header").css("color","#000");
-        $("#header").css("box-shadow","0px 0px 20px rgba(0,0,0,0.09)");
-        $("#header").css("padding","4vh 4vw");
-        $("#navigation a").hover(function(){
-            $(this).css("border-bottom","2px solid rgb(255, 44, 90)");
-        },function(){
-            $(this).css("border-bottom","2px solid transparent");
-        });
-    }else{
-        $("#header").css("background","transparent");
-        $("#header").css("color","#fff");
-        $("#header").css("box-shadow","0px 0px 0px rgba(0,0,0,0)");
-        $("#header").css("padding","6vh 4vw");
-        $("#navigation a").hover(function(){
-            $(this).css("border-bottom","2px solid #fff");
-        },function(){
-            $(this).css("border-bottom","2px solid transparent");
-        });
-    }
-}
-}
-
-function magnify(imglink){
-    $("#img_here").css("background",`url('${imglink}') center center`);
-    $("#magnify").css("display","flex");
-    $("#magnify").addClass("animated fadeIn");
-    setTimeout(function(){
-        $("#magnify").removeClass("animated fadeIn");
-    },800);
-}
-
-function closemagnify(){
-    $("#magnify").addClass("animated fadeOut");
-    setTimeout(function(){
-        $("#magnify").css("display","none");
-        $("#magnify").removeClass("animated fadeOut");
-        $("#img_here").css("background",`url('') center center`);
-    },800);
-}
-
-setTimeout(function(){
-    $("#loading").addClass("animated fadeOut");
-    setTimeout(function(){
-      $("#loading").removeClass("animated fadeOut");
-      $("#loading").css("display","none");
-    },800);
-},1650);
-
-$(document).ready(function(){
-    $("a").on('click', function(event) {
-      if (this.hash !== "") {
-        event.preventDefault();
-        var hash = this.hash;
-        $('body,html').animate({
-        scrollTop: $(hash).offset().top
-        }, 1800, function(){
-        window.location.hash = hash;
-       });
-       } 
-      });
-  });
-  
\ No newline at end of file
diff --git a/main/live/style.css b/main/live/style.css
new file mode 100644
index 0000000..9225a3a
--- /dev/null
+++ b/main/live/style.css
@@ -0,0 +1,92 @@
+@import url(https://fonts.bunny.net/css?family=azeret-mono);
+*{
+  font-family: 'Azeret Mono', monospace;
+  background-color:#2b1d22;
+  color:#edd0db;
+}
+body {
+  padding:6vh 4vw;
+  background-color: rgba(0,0,0,0);
+}
+h1,h2,h3,h4,h5,h6,p,a{
+  background-color: rgba(0,0,0,0);
+}
+h2{
+  color: #f98498;
+  border-bottom:4px solid #af3d56;
+  width:10%;
+}
+h3{
+  color: #f98498;
+}
+p{
+
+}
+a{
+  color: #ef679b;
+}
+.sidenav {
+  width: 150px;
+  position: fixed;
+  z-index: 1;
+  top: 25px;
+  left: 25px;
+  background: #6b3b46;
+  overflow-x: hidden;
+  padding: 8px 0;
+}
+
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  color: #edd0db;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #af3d56;
+}
+
+.main {
+  margin-left: 140px; /* Same width as the sidebar + left position in px */
+  padding: 0px 10px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+#home {
+  font-weight:bold;
+}
+#home h2{
+  width:25%;
+}
+#gallery {
+  width:auto;
+}
+#photos {
+  width:100%;
+  columns:3;
+  column-gap:4%;
+  transition:0.4s ease-in-out;
+}
+#photos img {
+  width:100%;
+  height:auto;
+  margin:4.5% 0px;
+  transition:0.4s ease-in-out;
+}
+#photos img:hover {
+  transform: scale(1.2);
+  cursor: pointer;
+}
+#contact {
+  width:auto;
+}
+#footer {
+  width:100%;
+  padding:10vh 0px;
+  text-align:center;
+  font-weight:bold;
+}
diff --git a/main/robots.txt b/main/robots.txt
new file mode 100644
index 0000000..1f53798
--- /dev/null
+++ b/main/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/main/style.css b/main/style.css
new file mode 100644
index 0000000..9225a3a
--- /dev/null
+++ b/main/style.css
@@ -0,0 +1,92 @@
+@import url(https://fonts.bunny.net/css?family=azeret-mono);
+*{
+  font-family: 'Azeret Mono', monospace;
+  background-color:#2b1d22;
+  color:#edd0db;
+}
+body {
+  padding:6vh 4vw;
+  background-color: rgba(0,0,0,0);
+}
+h1,h2,h3,h4,h5,h6,p,a{
+  background-color: rgba(0,0,0,0);
+}
+h2{
+  color: #f98498;
+  border-bottom:4px solid #af3d56;
+  width:10%;
+}
+h3{
+  color: #f98498;
+}
+p{
+
+}
+a{
+  color: #ef679b;
+}
+.sidenav {
+  width: 150px;
+  position: fixed;
+  z-index: 1;
+  top: 25px;
+  left: 25px;
+  background: #6b3b46;
+  overflow-x: hidden;
+  padding: 8px 0;
+}
+
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  color: #edd0db;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #af3d56;
+}
+
+.main {
+  margin-left: 140px; /* Same width as the sidebar + left position in px */
+  padding: 0px 10px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+#home {
+  font-weight:bold;
+}
+#home h2{
+  width:25%;
+}
+#gallery {
+  width:auto;
+}
+#photos {
+  width:100%;
+  columns:3;
+  column-gap:4%;
+  transition:0.4s ease-in-out;
+}
+#photos img {
+  width:100%;
+  height:auto;
+  margin:4.5% 0px;
+  transition:0.4s ease-in-out;
+}
+#photos img:hover {
+  transform: scale(1.2);
+  cursor: pointer;
+}
+#contact {
+  width:auto;
+}
+#footer {
+  width:100%;
+  padding:10vh 0px;
+  text-align:center;
+  font-weight:bold;
+}