diff --git a/.index.php.kate-swp b/.index.php.kate-swp
new file mode 100644
index 0000000..5114be1
Binary files /dev/null and b/.index.php.kate-swp differ
diff --git a/_config.php b/_config.php
index f0e32c0..22c9b11 100644
--- a/_config.php
+++ b/_config.php
@@ -18,14 +18,14 @@
   $twig->addGlobal('discord_auth', $_ENV['DISCORD_OAUTH']);
   
   $discord = new Discord(
-    $_ENV['DISCORD_CLIENT'], 
+    $_ENV['DISCORD_CLIENT'],
     $_ENV['DISCORD_SECRET'],
     $_ENV['DISCORD_REDIRECT']
   );
-  
+
   $mysql = new Database(
     $_ENV['MYSQL_HOST'],
     $_ENV['MYSQL_USER'],
     $_ENV['MYSQL_PASS'],
     $_ENV['MYSQL_DB']
-  );
\ No newline at end of file
+   );
diff --git a/css/src/_fonts.scss b/css/src/_fonts.scss
index 4ad29e5..f6bcfe2 100644
--- a/css/src/_fonts.scss
+++ b/css/src/_fonts.scss
@@ -1,11 +1,18 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-* {
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap');
+
+body, input {
   font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "Outfit", "Noto Color Emoji", sans-serif;
+  font-weight: 500;
+  //margin-bottom: 6px;
+}
 
-  margin-bottom: 6px;
-}
\ No newline at end of file
+.pageHero {
+  font-family: "Comic Neue", "Comic Sans MS", "Noto Color Emoji", sans-serif;
+  //margin-bottom: 6px;
+}
diff --git a/css/src/_reset.scss b/css/src/_reset.scss
index 22c532d..cdf9012 100644
--- a/css/src/_reset.scss
+++ b/css/src/_reset.scss
@@ -1,4 +1,3 @@
 * {
-  padding: 0;
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/css/src/style.scss b/css/src/style.scss
index da417e1..27d773b 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -1,57 +1,70 @@
-@import "reset";
+//@import "reset";
 @import "fonts";
 
 body {
-  background: #f8fafc;
+  background: white;
+  margin: 0;
+
+  @media (prefers-color-scheme: dark) {
+    background: #202120;
+    color: white;
+  }
 }
 
 .container {
-  max-width: 1100px;
+  max-width: 960px;
 
   width: 100%;
 
   margin: 0 auto;
+
+  padding: 24px;
+  box-sizing: border-box;
 }
 
 ul, ol {
   list-style-position: inside;
 }
 
-.pageHero {
-  background-image: url('/img/spawn/2023-11-18_12.50.56.png');
+p {
+  line-height: 1.6;
+  opacity: 0.92;
+}
 
-  background-position: center;
+img {
+  max-width: 100%;
+}
 
-  color: #fff;
+a {
+  color: #527D52;
 
-  height: 240px;
+  @media (prefers-color-scheme: dark) {
+    color: #D0DFD0;
+  }
 
-  > .blurFiler {
-    backdrop-filter: blur(2px);
-
-    padding: 8px 0;
-
-    height: calc(100% - (8px + 8px));
-
-    > .container {
-      height: 100%;
-
-      display: flex;
-      flex-direction: row;
-
-      align-items: center;
-      justify-content: space-between;
-    }
+  &:visited {
+    opacity: 0.9;
   }
 }
 
-.pageNav {
-  width: 100svw;
+.pageHero {
+  background-image:
+    linear-gradient(rgba(white, 0.9),rgba(white, 0.9)), // white overlay. yeah that's a bit of an ugly hack?
+    url('/img/Panorama-Lens-Blur.png');
 
-  background: #f1f5f9;
+  @media (prefers-color-scheme: dark) {
+    background-image:
+    linear-gradient(rgba(#101610, 0.9),rgba(#101610, 0.9)),
+    url('/img/Panorama-Lens-Blur.png');
+  }
+
+  background-position: center;
+  background-size: cover;
+
+  height: 220px;
 
   > .container {
-    padding: 16px 0;
+    height: 100%;
 
     display: flex;
     flex-direction: row;
@@ -59,31 +72,184 @@ ul, ol {
     align-items: center;
     justify-content: space-between;
 
-    > ul {
-      list-style: none;
+    @media (max-width: 600px) {
+      justify-content: center;
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+
+      gap: 12px;
+
+      &.Branding {
+        align-items: flex-start;
+
+        @media (max-width: 600px) {
+          align-items: center;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          img { filter: invert(1) }
+        }
+
+        span {
+          font-size: 24px;
+          opacity: 0.75;
+        }
+      }
+
+      &.Server-Information {
+        @media (max-width: 600px) {
+          display: none;
+        }
+
+        align-items: center;
+        gap: 4px;
+
+        input {
+          text-align: center;
+          font-size: 24px;
+
+          &:not(:hover, :focus) {
+            color: inherit;
+            border-color: transparent;
+            background: transparent;
+          }
+        }
+      }
+    }
+  }
+}
+
+.Nav-Toggle {
+  @media (min-width: 601px) {
+    display: none;
+  }
+  z-index: 10;
+  
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  font-size: 18px;
+
+  background: #527D52;
+  color: #fff;
+
+  padding: 8px 24px;
+
+  border-radius: 32px;
+ 
+  font-weight: bold;
+  user-select: none;
+
+  cursor: pointer;
+}
+
+.pageNav {
+  width: 100%;
+
+  border: solid #D0DFD0;
+  border-width: 0 0 1px 0;
+
+  background: #F9FFF9;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: #575F57;
+    background: #272F27;
+  }
+
+  > .container {
+    padding: 16px 24px;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+
+    @media (max-width: 600px) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 9;
+
+      background: inherit;
+      
+      transition: 0.12s;
+
+      &:not(.openned) {
+        opacity: 0;
+        pointer-events: none;
+
+        transform: scale(1.2);
+
+        transition: 0.24s;
+      }
+    }
+
+    > div {
+      margin: 0;
 
       display: flex;
+      flex-wrap: wrap;
 
       gap: 8px;
 
-      > li {
-        > a {
-          color: #0f172a;
+      @media (max-width: 600px) {
+        width: 100%;
+        flex-direction: column;
+        gap: 6px;
+        align-items: center;
+      }
 
-          text-decoration: none;
+      > a {
+        user-select: none;
 
-          padding: 8px 16px;
+        font-size: 18px;
+        box-sizing: border-box;
+        color: #7E9E7E;
 
-          border-radius: 32px;
+        @media (max-width: 600px) {
+          font-size: 24px;
+          width: 100%;
+          padding: 12px 24px;
+          text-align: center;
+        }
 
-          &:hover, &.active {
-            background: rgba(15, 23, 42, 0.1);
+
+        text-decoration: none;
+
+        padding: 8px 24px;
+
+        border-radius: 32px;
+
+        outline: solid transparent 2px;
+
+        transition: 0.24s;
+
+        &:hover, &.active {
+          //background: rgba(15, 23, 42, 0.1);
+          outline-color: #D0DFD0;
+
+          color: #527D52;
+
+          @media (prefers-color-scheme: dark) {
+            color: #DEFEDE;
+            outline-color: #707F70;
           }
 
-          &.buttonPrimary {
-            background: #6366f1;
-            color: #fff;
-          }
+
+          transition: 0.08s;
+        }
+
+        &.buttonPrimary {
+          background: #527D52;
+          color: #fff;
+
+          font-weight: bold;
         }
       }
     }
@@ -91,41 +257,36 @@ ul, ol {
 }
 
 .pageContent {
-  margin: 16px 0;
+  //
 }
 
 .pageFooter {
-  display: flex;
-  flex-direction: row;
+  opacity: 0.8;
 
-  align-items: center;
-  justify-content: space-between;
-
-  > .left {
+  > .SNS-Links {
     display: flex;
-    flex-direction: column;
-  }
-  
-  > .right {
-    list-style: none;
+    flex-wrap: wrap;
+    gap: 16px;
 
-    display: flex;
-    
-    > li {
-      padding: 8px;
-      
-      > a {
-        display: block;
-        
-        width: 24px;
-        height: 24px;
-        
-        color: rgba(0, 0, 0, 0.7);
-        
-        &:hover {
-          color: rgba(0, 0, 0, 1);
+    > a {
+      display: flex;
+      gap: 8px;
+
+      font-size: 18px;
+
+      color: inherit;
+
+      img {
+        width: 1em;
+
+        @media (prefers-color-scheme: dark) {
+          filter: invert(1);
         }
       }
+
+      &:not(:hover, :focus) {
+        text-decoration: none;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/css/style.css b/css/style.css
index 508c82f..0c7a13a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,110 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
-* {
-  padding: 0;
-  margin: 0;
-}
-
-* {
-  font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Outfit", "Noto Color Emoji", sans-serif;
-  margin-bottom: 6px;
-}
-
-body {
-  background: #f8fafc;
-}
-
-.container {
-  max-width: 1100px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-ul, ol {
-  list-style-position: inside;
-}
-
-.pageHero {
-  background-image: url("/img/spawn/2023-11-18_12.50.56.png");
-  background-position: center;
-  color: #fff;
-  height: 240px;
-}
-.pageHero > .blurFiler {
-  backdrop-filter: blur(2px);
-  padding: 8px 0;
-  height: calc(100% - 16px);
-}
-.pageHero > .blurFiler > .container {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.pageNav {
-  width: 100svw;
-  background: #f1f5f9;
-}
-.pageNav > .container {
-  padding: 16px 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.pageNav > .container > ul {
-  list-style: none;
-  display: flex;
-  gap: 8px;
-}
-.pageNav > .container > ul > li > a {
-  color: #0f172a;
-  text-decoration: none;
-  padding: 8px 16px;
-  border-radius: 32px;
-}
-.pageNav > .container > ul > li > a:hover, .pageNav > .container > ul > li > a.active {
-  background: rgba(15, 23, 42, 0.1);
-}
-.pageNav > .container > ul > li > a.buttonPrimary {
-  background: #6366f1;
-  color: #fff;
-}
-
-.pageContent {
-  margin: 16px 0;
-}
-
-.pageFooter {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.pageFooter > .left {
-  display: flex;
-  flex-direction: column;
-}
-.pageFooter > .right {
-  list-style: none;
-  display: flex;
-}
-.pageFooter > .right > li {
-  padding: 8px;
-}
-.pageFooter > .right > li > a {
-  display: block;
-  width: 24px;
-  height: 24px;
-  color: rgba(0, 0, 0, 0.7);
-}
-.pageFooter > .right > li > a:hover {
-  color: rgb(0, 0, 0);
-}
-
-/*# sourceMappingURL=style.css.map */
+@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap";body,input{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;font-weight:500}.pageHero{font-family:"Comic Neue","Comic Sans MS","Noto Color Emoji",sans-serif}body{background:#fff;margin:0}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}.container{max-width:960px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}ul,ol{list-style-position:inside}p{line-height:1.6;opacity:.92}img{max-width:100%}a{color:#527d52}@media(prefers-color-scheme: dark){a{color:#d0dfd0}}a:visited{opacity:.9}.pageHero{background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("/img/Panorama-Lens-Blur.png");background-position:center;background-size:cover;height:220px}@media(prefers-color-scheme: dark){.pageHero{background-image:linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)),url("/img/Panorama-Lens-Blur.png")}}.pageHero>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageHero>.container{justify-content:center}}.pageHero>.container>div{display:flex;flex-direction:column;gap:12px}.pageHero>.container>div.Branding{align-items:flex-start}@media(max-width: 600px){.pageHero>.container>div.Branding{align-items:center}}@media(prefers-color-scheme: dark){.pageHero>.container>div.Branding img{filter:invert(1)}}.pageHero>.container>div.Branding span{font-size:24px;opacity:.75}.pageHero>.container>div.Server-Information{align-items:center;gap:4px}@media(max-width: 600px){.pageHero>.container>div.Server-Information{display:none}}.pageHero>.container>div.Server-Information input{text-align:center;font-size:24px}.pageHero>.container>div.Server-Information input:not(:hover,:focus){color:inherit;border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.Nav-Toggle{z-index:10;position:fixed;top:8px;right:8px;font-size:18px;background:#527d52;color:#fff;padding:8px 24px;border-radius:32px;font-weight:bold;user-select:none;cursor:pointer}@media(min-width: 601px){.Nav-Toggle{display:none}}.pageNav{width:100%;border:solid #d0dfd0;border-width:0 0 1px 0;background:#f9fff9}@media(prefers-color-scheme: dark){.pageNav{border-color:#575f57;background:#272f27}}.pageNav>.container{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageNav>.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:inherit;transition:.12s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none;transform:scale(1.2);transition:.24s}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column;gap:6px;align-items:center}}.pageNav>.container>div>a{user-select:none;font-size:18px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:8px 24px;border-radius:32px;outline:solid rgba(0,0,0,0) 2px;transition:.24s}@media(max-width: 600px){.pageNav>.container>div>a{font-size:24px;width:100%;padding:12px 24px;text-align:center}}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{outline-color:#d0dfd0;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:bold}.pageFooter{opacity:.8}.pageFooter>.SNS-Links{display:flex;flex-wrap:wrap;gap:16px}.pageFooter>.SNS-Links>a{display:flex;gap:8px;font-size:18px;color:inherit}.pageFooter>.SNS-Links>a img{width:1em}@media(prefers-color-scheme: dark){.pageFooter>.SNS-Links>a img{filter:invert(1)}}.pageFooter>.SNS-Links>a:not(:hover,:focus){text-decoration:none}/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
index 9afae3d..ea6d06c 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;;;AAGF;EACE;EAEA;;;AENF;EACE;;;AAGF;EACE;EAEA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAKN;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;;;AAGF;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAEA;EACE;EAEA;EACA;EAEA;;AAEA;EACE","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ,6JAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECZF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,EACE,cAEA,mCAHF,EAII,eAGF,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,YAIE,WAEA,eACA,QACA,UACA,eAEA,mBACA,WAEA,iBAEA,mBAEA,iBACA,iBAEA,eApBA,yBADF,YAEI,cAsBJ,SACE,WAEA,qBACA,uBAEA,mBAEA,mCARF,SASI,qBACA,oBAGF,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEA,mBAEA,gBAEA,kCACE,UACA,oBAEA,qBAEA,iBAIJ,wBACE,SAEA,aACA,eAEA,QAEA,yBARF,wBASI,WACA,sBACA,QACA,oBAGF,0BACE,iBAEA,eACA,sBACA,cAUA,qBAEA,iBAEA,mBAEA,gCAEA,gBAhBA,yBAPF,0BAQI,eACA,WACA,kBACA,mBAcF,iEAEE,sBAEA,cAQA,gBANA,mCANF,iEAOI,cACA,uBAOJ,wCACE,mBACA,WAEA,iBAWV,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.min.css b/css/style.min.css
deleted file mode 100644
index b0966fc..0000000
--- a/css/style.min.css
+++ /dev/null
@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap";*{padding:0;margin:0}*{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;margin-bottom:6px}body{background:#f8fafc}.container{max-width:1100px;width:100%;margin:0 auto}ul,ol{list-style-position:inside}.pageHero{background-image:url("/img/spawn/2023-11-18_12.50.56.png");background-position:center;color:#fff;height:240px}.pageHero>.blurFiler{backdrop-filter:blur(2px);padding:8px 0;height:calc(100% - 16px)}.pageHero>.blurFiler>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav{width:100svw;background:#f1f5f9}.pageNav>.container{padding:16px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav>.container>ul{list-style:none;display:flex;gap:8px}.pageNav>.container>ul>li>a{color:#0f172a;text-decoration:none;padding:8px 16px;border-radius:32px}.pageNav>.container>ul>li>a:hover,.pageNav>.container>ul>li>a.active{background:rgba(15,23,42,.1)}.pageNav>.container>ul>li>a.buttonPrimary{background:#6366f1;color:#fff}.pageContent{margin:16px 0}.pageFooter{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageFooter>.left{display:flex;flex-direction:column}.pageFooter>.right{list-style:none;display:flex}.pageFooter>.right>li{padding:8px}.pageFooter>.right>li>a{display:block;width:24px;height:24px;color:rgba(0,0,0,.7)}.pageFooter>.right>li>a:hover{color:#000}/*# sourceMappingURL=style.min.css.map */
diff --git a/css/style.min.css b/css/style.min.css
new file mode 120000
index 0000000..f6b71cc
--- /dev/null
+++ b/css/style.min.css
@@ -0,0 +1 @@
+style.css
\ No newline at end of file
diff --git a/fiveserver.config.js b/fiveserver.config.js
new file mode 100644
index 0000000..2d7f846
--- /dev/null
+++ b/fiveserver.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  php: "/usr/bin/php"
+}
diff --git a/img/CRSS-Logo.svg b/img/CRSS-Logo.svg
new file mode 100644
index 0000000..f5e8c1c
--- /dev/null
+++ b/img/CRSS-Logo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="146px" height="96px" viewBox="0 0 146 96" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path d="M146 0L146 0L146 96L0 96L0 0L146 0Z" id="path_1" />
+    <clipPath id="clip_1">
+      <use xlink:href="#path_1" clip-rule="evenodd" fill-rule="evenodd" />
+    </clipPath>
+  </defs>
+  <g id="Frame" clip-path="url(#clip_1)">
+    <path d="M146 0L146 0L146 96L0 96L0 0L146 0Z" id="Frame" fill="none" stroke="none" />
+    <path d="M83.7827 12.6087C83.7827 10.6157 85.3984 9 87.3914 9C89.3844 9 91.0001 10.6157 91.0001 12.6087C91.0001 14.6017 89.3844 16.2174 87.3914 16.2174C85.3984 16.2174 83.7827 14.6017 83.7827 12.6087Z" id="Oval-5" fill="#000000" fill-rule="evenodd" stroke="none" />
+    <path d="M32.6594 16.4528L41.9008 32.5134L50.8527 17.4646L54.8404 29.75L55.9553 28.8478L66.5686 10.2029" id="Vector-3" fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M8 19.8261C8 17.8331 9.61567 16.2174 11.6087 16.2174C13.6017 16.2174 15.2174 17.8331 15.2174 19.8261C15.2174 21.8191 13.6017 23.4348 11.6087 23.4348C9.61567 23.4348 8 21.8191 8 19.8261Z" id="Oval-6" fill="#000000" fill-rule="evenodd" stroke="none" />
+    <g id="CRSS" transform="translate(0 32)">
+      <g id="CRSS">
+        <path d="M21.25 57.9906C27.4531 57.9906 33.0938 55.3656 36.6094 50.3656C37.0625 49.725 37.1875 49.0844 37.1875 48.4438C37.1875 46.3969 35.6406 45.2406 33.9844 45.2406C33.0312 45.2406 32.25 45.5063 31.4844 46.5219C29.4375 49.2094 26.2969 51.8344 21.25 51.8344C14.5938 51.8344 8.95312 47.0375 8.95312 38.725C8.95312 29.4438 15.4844 20.5375 22.0781 20.5375C25.5312 20.5375 27.5156 21.6313 28.8594 23.0375L28.8594 23.4906C28.8594 24.8344 30.1406 26.0531 31.875 26.0531C33.6562 26.0531 35.0781 24.5688 35.0781 22.85L35.0781 18.7563C35.0781 17.1469 33.8594 15.8031 32.125 15.8031C31.2344 15.8031 30.5938 16.1938 30.2031 16.5688C28.2812 15.4281 25.4062 14.3344 22.5312 14.3344C12.7344 14.3344 2.5625 25.9125 2.5625 38.725C2.5625 50.8813 11.0781 57.9906 21.25 57.9906ZM46.4015 57.9906C48.0578 57.9906 49.5421 56.6469 49.5421 54.85L49.5421 43.2563C51.0734 43.0063 52.6046 42.8813 53.8234 42.8813C56.0578 42.8813 60.9953 43.6469 68.9328 56.3188C69.5734 57.35 70.5265 57.9906 71.7453 57.9906C73.6671 57.9906 74.8859 56.4438 74.8859 54.85C74.8859 54.3969 74.8234 53.8813 74.5578 53.3813C71.3546 46.975 66.9484 42.7563 63.9328 40.3813C68.9953 38.1469 73.4015 34.4281 73.4015 27.975C73.4015 19.3344 65.339 14.3344 51.0109 14.3344L48.3859 14.3344C43.964 14.3344 43.2609 14.9125 43.2609 18.1781L43.2609 54.85C43.2609 56.6469 44.6046 57.9906 46.4015 57.9906ZM49.5421 37.3813L49.5421 20.475L50.8234 20.475C61.0578 20.475 67.0734 23.0375 67.0734 27.975C67.0734 34.1156 57.339 36.8656 49.5421 37.3813ZM93.0573 57.9906C101.37 57.9906 108.479 52.475 108.479 45.1156C108.479 38.85 103.807 34.8188 95.3541 32.3813C88.4479 30.3969 85.5104 28.5375 85.5104 25.5375C85.5104 22.3344 88.4479 20.225 94.276 20.225C99.0104 20.225 101.885 22.0844 102.214 24.3813C102.401 25.85 103.62 27.0688 105.151 27.0688C106.948 27.0688 108.292 25.6625 108.292 23.7406C108.292 18.1156 103.104 14.3344 94.276 14.3344C84.9948 14.3344 79.2916 19.1313 79.2916 25.9906C79.2916 33.2875 85.8854 36.4125 93.1823 38.4594C100.229 40.4438 102.339 42.8188 102.339 45.4438C102.339 49.0844 98.5573 51.975 93.1823 51.975C89.3385 51.975 84.9323 50.1781 83.526 46.2719C83.0104 44.8656 81.9166 43.8969 80.3229 43.8969C78.4635 43.8969 77.0573 45.3813 77.0573 47.1C77.0573 47.8031 77.3073 48.6469 77.7604 49.6C79.8073 53.9594 85.2448 57.9906 93.0573 57.9906ZM128.001 57.9906C136.314 57.9906 143.423 52.475 143.423 45.1156C143.423 38.85 138.751 34.8188 130.298 32.3813C123.392 30.3969 120.454 28.5375 120.454 25.5375C120.454 22.3344 123.392 20.225 129.22 20.225C133.954 20.225 136.829 22.0844 137.158 24.3813C137.345 25.85 138.564 27.0688 140.095 27.0688C141.892 27.0688 143.236 25.6625 143.236 23.7406C143.236 18.1156 138.048 14.3344 129.22 14.3344C119.939 14.3344 114.236 19.1313 114.236 25.9906C114.236 33.2875 120.829 36.4125 128.126 38.4594C135.173 40.4438 137.283 42.8188 137.283 45.4438C137.283 49.0844 133.501 51.975 128.126 51.975C124.283 51.975 119.876 50.1781 118.47 46.2719C117.954 44.8656 116.861 43.8969 115.267 43.8969C113.408 43.8969 112.001 45.3813 112.001 47.1C112.001 47.8031 112.251 48.6469 112.704 49.6C114.751 53.9594 120.189 57.9906 128.001 57.9906Z" />
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/Discord.svg b/img/Discord.svg
new file mode 100644
index 0000000..f9fd918
--- /dev/null
+++ b/img/Discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
\ No newline at end of file
diff --git a/img/Mastodon.svg b/img/Mastodon.svg
new file mode 100644
index 0000000..e03938c
--- /dev/null
+++ b/img/Mastodon.svg
@@ -0,0 +1,3 @@
+<svg width="74" height="79" viewBox="0 0 74 79" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.7014 17.4323C72.5616 9.05152 65.1774 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925 47.3144Z" fill="inherit"/>
+</svg>
diff --git a/img/Panorama-Lens-Blur.png b/img/Panorama-Lens-Blur.png
new file mode 100644
index 0000000..a5d7d06
Binary files /dev/null and b/img/Panorama-Lens-Blur.png differ
diff --git a/img/Youtube.svg b/img/Youtube.svg
new file mode 100644
index 0000000..a07f31a
--- /dev/null
+++ b/img/Youtube.svg
@@ -0,0 +1,3 @@
+<svg width="72" height="52" viewBox="0 0 72 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.8125 36.7812L47.464 26L28.8125 15.2188V36.7812ZM70.3562 8.64225C70.8235 10.3313 71.147 12.5952 71.3625 15.4702C71.614 18.3452 71.722 20.825 71.722 22.9813L71.9375 26C71.9375 33.8703 71.3625 39.6562 70.3562 43.3577C69.4577 46.5923 67.3735 48.6765 64.139 49.575C62.45 50.0422 59.3595 50.3658 54.6158 50.5813C49.9438 50.8328 45.6672 50.9408 41.714 50.9408L36 51.1562C20.9422 51.1562 11.5625 50.5812 7.861 49.575C4.6265 48.6765 2.54225 46.5923 1.64375 43.3577C1.1765 41.6688 0.853251 39.4047 0.637501 36.5297C0.386001 33.6547 0.278 31.175 0.278 29.0188L0.0625 26C0.0625 18.1297 0.637499 12.3438 1.64375 8.64225C2.54225 5.40775 4.6265 3.3235 7.861 2.425C9.55 1.95775 12.6407 1.63425 17.3845 1.41875C22.0562 1.16725 26.3327 1.05925 30.286 1.05925L36 0.84375C51.0578 0.84375 60.4375 1.41875 64.139 2.425C67.3735 3.3235 69.4577 5.40775 70.3562 8.64225Z" fill="black"/>
+</svg>
\ No newline at end of file
diff --git a/index.php b/index.php
index f722d0c..f98fead 100644
--- a/index.php
+++ b/index.php
@@ -44,12 +44,12 @@
     echo $twig->render('nations.twig');
   });
 
-  $router->get('/rules', function() {
+  $router->get('/gallery', function() {
     global $twig;
 
-    $twig->addGlobal('pageUri', '/rules');
+    $twig->addGlobal('pageUri', '/gallery');
   
-    echo $twig->render('rules.twig');
+    echo $twig->render('gallery.twig');
   });
 
   $router->get('/map', function() {
@@ -102,4 +102,4 @@
     echo $twig->render('404.twig');
   });
 
-  $router->run();
\ No newline at end of file
+  $router->run();
diff --git a/js/nav.js b/js/nav.js
new file mode 100644
index 0000000..7047489
--- /dev/null
+++ b/js/nav.js
@@ -0,0 +1,16 @@
+const $ = selector => document.querySelector(selector);
+
+const navToggle = $(".Nav-Toggle");
+const menu = $(".pageNav > .container");
+
+navToggle.onclick = () => {
+	const menuToggled = menu.classList.contains("openned");
+
+	if (menuToggled) {
+		menu.classList.remove("openned");
+	} else {
+		menu.classList.add("openned");
+	}
+
+	navToggle.innerHTML = menuToggled ? "Menu" : "Close";
+}
\ No newline at end of file
diff --git a/template/404.twig b/template/404.twig
index 3dbf287..b01f4ff 100644
--- a/template/404.twig
+++ b/template/404.twig
@@ -1,22 +1,16 @@
 {% include 'includes/head.twig' with {'pageTitle': '404'} %}
 
-<div class="pageHero" id="hero">
-  <div class="blurFiler">
-    <div class="container">
-      <h1>Clyde's Real Survival SMP</h1>
-    
-      <div class="serverInfo">
-        Online: <label>0</label> / <label>20</label>
-      </div>
-    </div>
-  </div>
-</div>
+{% include 'includes/hero.twig' %}
 
 {% include 'includes/nav.twig' with {'page': '404',} %}
     
 <main class="pageContent" id="content">
   <div class="container">
-    <h2>(404) This page is non-existent! Go on Discord and yell at Clash!</h2>
+    <h1>Not found! :<</h1>
+    <p>
+      This page is nowhere to be found!<br>
+      Go on Discord and complain about it to Clash or Mya!!
+    </p>
   </div>
 </main>
 
diff --git a/template/gallery.twig b/template/gallery.twig
new file mode 100644
index 0000000..47941d9
--- /dev/null
+++ b/template/gallery.twig
@@ -0,0 +1,16 @@
+{% include 'includes/head.twig' with {'pageTitle': 'Gallery'} %}
+
+{% include 'includes/hero.twig' %}
+
+{% include 'includes/nav.twig' with {'page': 'gallery',} %}
+
+<main class="container">
+	<h1>Gallery</h1>
+	<p>
+		Yet to be filled. :3<br>
+		Come later!
+	</p>
+</main>
+
+{% include 'includes/footer.twig' %}
+{% include 'includes/foot.twig' %}
\ No newline at end of file
diff --git a/template/includes/footer.twig b/template/includes/footer.twig
index fd24ce6..8f1a96e 100644
--- a/template/includes/footer.twig
+++ b/template/includes/footer.twig
@@ -3,36 +3,29 @@
   <script async src="//ads.theclashfruit.me/www/delivery/asyncjs.php"></script>
 </div>
 
-<footer class="pageFooter container" id="footer">
-  <div class="left">
-    <p class="copyright">
-      Copyright &copy; 2023 CRSS
-    </p>
-    <p class="sponsors">
-      Brought to by PrideCraft, TheClashFruit's Real Hosting Company.
-    </p>
-  </div>
-  <ul class="right">
-    <li>
-      <a href="https://tech.lgbt/@blurryface" target="_blank" rel="me">
-        <svg style="width: 24px; height: 24px;" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M20.94,14C20.66,15.41 18.5,16.96 15.97,17.26C14.66,17.41 13.37,17.56 12,17.5C9.75,17.39 8,16.96 8,16.96V17.58C8.32,19.8 10.22,19.93 12.03,20C13.85,20.05 15.47,19.54 15.47,19.54L15.55,21.19C15.55,21.19 14.27,21.87 12,22C10.75,22.07 9.19,21.97 7.38,21.5C3.46,20.45 2.78,16.26 2.68,12L2.67,8.57C2.67,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.37,11.78 20.94,14M18,8.91C18,7.83 17.7,7 17.15,6.35C16.59,5.72 15.85,5.39 14.92,5.39C13.86,5.39 13.05,5.8 12.5,6.62L12,7.5L11.5,6.62C10.94,5.8 10.14,5.39 9.07,5.39C8.15,5.39 7.41,5.72 6.84,6.35C6.29,7 6,7.83 6,8.91V14.17H8.1V9.06C8.1,8 8.55,7.44 9.46,7.44C10.46,7.44 10.96,8.09 10.96,9.37V12.16H13.03V9.37C13.03,8.09 13.53,7.44 14.54,7.44C15.44,7.44 15.89,8 15.89,9.06V14.17H18V8.91Z"></path>
-        </svg>
-      </a>
-    </li>
-    <li>
-      <a href="https://mas.to/@TheClashFruit" target="_blank" rel="me">
-        <svg style="width: 24px; height: 24px;" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M20.94,14C20.66,15.41 18.5,16.96 15.97,17.26C14.66,17.41 13.37,17.56 12,17.5C9.75,17.39 8,16.96 8,16.96V17.58C8.32,19.8 10.22,19.93 12.03,20C13.85,20.05 15.47,19.54 15.47,19.54L15.55,21.19C15.55,21.19 14.27,21.87 12,22C10.75,22.07 9.19,21.97 7.38,21.5C3.46,20.45 2.78,16.26 2.68,12L2.67,8.57C2.67,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.37,11.78 20.94,14M18,8.91C18,7.83 17.7,7 17.15,6.35C16.59,5.72 15.85,5.39 14.92,5.39C13.86,5.39 13.05,5.8 12.5,6.62L12,7.5L11.5,6.62C10.94,5.8 10.14,5.39 9.07,5.39C8.15,5.39 7.41,5.72 6.84,6.35C6.29,7 6,7.83 6,8.91V14.17H8.1V9.06C8.1,8 8.55,7.44 9.46,7.44C10.46,7.44 10.96,8.09 10.96,9.37V12.16H13.03V9.37C13.03,8.09 13.53,7.44 14.54,7.44C15.44,7.44 15.89,8 15.89,9.06V14.17H18V8.91Z"></path>
-        </svg>
-      </a>
-    </li>
-    <li>
+<footer class="pageFooter container">
+  <p class="copyright">
+    Copyright &copy; 2023 CRSS <br>
+    Brought to by PrideCraft, TheClashFruit's Real Hosting Company!
+  </p>
+
+  <div class="SNS-Links">
       <a href="https://youtube.com/@CRSS666" target="_blank" rel="me">
-        <svg style="width: 24px; height: 24px;" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z"></path>
-        </svg>
+        <img src="/img/Youtube.svg" alt="YouTube's icon">
+        <span>CRSS's channel</span>
       </a>
-    </li>
-  </ul>
+      <a href="https://tech.lgbt/@blurryface" target="_blank" rel="me">
+        <img src="/img/Mastodon.svg" alt="Mastodon's icon">
+        <span>Blurryface</span>
+      </a>
+      <a href="https://mas.to/@TheClashFruit" target="_blank" rel="me">
+        <img src="/img/Mastodon.svg" alt="Mastodon's icon">
+        <span>TheClashFruit</span>
+      </a>
+      <a href="https://mas.to/@Myadeleines" target="_blank" rel="me">
+        <img src="/img/Mastodon.svg" alt="Mastodon's icon">
+        <span>Myadeleines</span>
+      </a>
+  </div>
+
 </footer>
\ No newline at end of file
diff --git a/template/includes/hero.twig b/template/includes/hero.twig
index 7b7675a..8094f16 100644
--- a/template/includes/hero.twig
+++ b/template/includes/hero.twig
@@ -1,11 +1,18 @@
-<div class="pageHero" id="hero">
-  <div class="blurFiler">
-    <div class="container">
-      <h1>Clyde's Real Survival SMP</h1>
+<header class="pageHero">
+  <div class="container">
 
-      <div class="serverInfo">
-        Online: <label>{{ playerCount }}</label> / <label>200</label>
-      </div>
+    <!-- Left -->
+    <div class="Branding">
+      <img src="/img/CRSS-Logo.svg">
+      <span>Clyde's Real Survival SMP!</span>
     </div>
+
+    <!-- Right -->
+    <div class="Server-Information">
+      <span>Server address:</span>
+      <input type="text" size="10" readonly value="play.blurryface.xyz">
+      <span>Version: 1.3.2</span>
+    </div>
+
   </div>
-</div>
\ No newline at end of file
+</header>
\ No newline at end of file
diff --git a/template/includes/nav.twig b/template/includes/nav.twig
index 273d935..fecee00 100644
--- a/template/includes/nav.twig
+++ b/template/includes/nav.twig
@@ -1,41 +1,35 @@
-<nav class="pageNav" id="navigation">
+<script src="/js/nav.js" type="module"></script>
+<div class="Nav-Toggle">Menu</div>
+<nav class="pageNav">
   <div class="container">
-    <ul class="navLeft">
-      <li>
-        <a {% if page == 'home' %} class="active" href="#" {% else %} href="/" {% endif %}>
-          Home
-        </a>
-      </li>
-      <li>
-        <a {% if page == 'nations' %} class="active" href="#" {% else %} href="/nations" {% endif %}>
-          Nations
-        </a>
-      </li>
-      <li>
-        <a {% if page == 'rules' %} class="active" href="#" {% else %} href="/rules" {% endif %}>
-          Rules
-        </a>
-      </li>
-      <li>
-        <a {% if page == 'map.js' %} class="active" href="#" {% else %} href="/map" {% endif %}>
-          Map
-        </a>
-      </li>
-    </ul>
-    <ul class="navRight">
+    <div class="navLeft">
+      <a {% if page == 'home' %} class="active" {% else %} href="/" {% endif %}>
+        Home
+      </a>
+      <a href="https://youtube.com/@CRSS666">Videos</a>
+      <a {% if page == 'gallery' %} class="active" {% else %} href="/gallery" {% endif %}>
+        Gallery
+      </a>
+      <a {% if page == 'nations' %} class="active" {% else %} href="/nations" {% endif %}>
+        Nations
+      </a>
+      <!--<a {% if page == 'rules' %} class="active" {% else %} href="/rules" {% endif %}>
+        Rules
+      </a>-->
+      <a {% if page == 'map.js' %} class="active" {% else %} href="/map" {% endif %}>
+        Map
+      </a>
+    </div>
+    <div class="navRight" style="display: none;">
       {% if user %}
-        <li>
-          <a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
-            {{ user.global_name }}
-          </a>
-        </li>
+        <a class="userButton {% if page == 'profile' %}active{% endif %}" href="{% if page == 'profile' %}#{% else %}/profile{% endif %}">
+          {{ user.global_name }}
+        </a>
       {% else %}
-        <li>
-          <a class="buttonPrimary" href="{{ discord_auth }}">
-            Login
-          </a>
-        </li>
+        <a class="buttonPrimary" href="{{ discord_auth }}">
+          Login
+        </a>
       {% endif %}
-    </ul>
+    </div>
   </div>
 </nav>
\ No newline at end of file
diff --git a/template/index.twig b/template/index.twig
index 1c14e15..2ce0375 100644
--- a/template/index.twig
+++ b/template/index.twig
@@ -4,10 +4,22 @@
 
 {% include 'includes/nav.twig' with {'page': 'home',} %}
     
-<main class="pageContent" id="content">
+<main>
   <div class="container">
     <h1>Welcome to Clyde's Real Survival SMP (CRSS)!</h1>
-    This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!
+    <p>This is a server made by Blurryface, hosted by TheClashFruit, played by Devin, and sponsored by TheClashFruit's Real Hosting Company Limited Liability Company (TCFRHCLLC) and Pridecraft Studios!</p>
+    
+    <h2 id="rules">Rules</h2>
+    <ol>
+      <li>
+        The usage of modified clients that gives unfair advantage to players is not permitted. <b>TL;DR Do not cheat.</b>
+      </li>
+      <li>
+        Do not modify (or destroy) other players' constructions, or take their items, without their permission. <b>TL;DR Do not grief or steal.</b>
+      </li>
+    </ol>
+    <b>Failing to follow these basic rules will result in a ban.</b>
+
   </div>
 </main>
 
diff --git a/template/nations.twig b/template/nations.twig
index b14f93c..c808974 100644
--- a/template/nations.twig
+++ b/template/nations.twig
@@ -6,7 +6,7 @@
 
 <main class="pageContent" id="content">
   <div class="container">
-    <h2>Nations</h2>
+    <h1>Nations</h1>
     <ul>
       <li>
         <a href="/nation/rop">Republic of Panorama</a>