diff --git a/index.html b/index.html
index 6afdef5..ef42848 100644
--- a/index.html
+++ b/index.html
@@ -16,224 +16,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
-
-  <style>
-    body {
-      font-family: 'Poppins';
-      font-size: 22px;
-      user-select: none;
-      color: aliceblue;
-      background: rgb(63, 47, 60);
-      background: linear-gradient(45deg, rgba(63, 47, 60, 1) 0%, rgba(17, 17, 17, 1) 10%, rgba(17, 17, 17, 1) 90%, rgba(53, 59, 100, 1) 100%);
-      height: max(100vh, 100%);
-    }
-
-    .hero {
-      max-width: 2000px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .hero .headings {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .hero img {
-      border-radius: 50%;
-      user-select: none;
-      float: right;
-      width: 500px;
-      height: 500px;
-      margin-right: 50px;
-      box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav {
-      max-width: 2000px;
-      margin: auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-    }
-
-    .nav .left {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-left: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: left;
-      text-decoration: none;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav .right {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: right;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .nav a:hover {
-      background-color: #111;
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      border-radius: 10px;
-    }
-
-    .about {
-      max-width: 1500px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .about h1 {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .about img {
-      border-radius: 50%;
-      user-select: none;
-      width: 140px;
-      height: 140px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .about .devs {
-      text-align: center;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      align-self: auto;
-      margin: auto;
-      transition: 0.2s;
-    }
-
-    .about .devs a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .about .devs:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .about .devs p {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .features {
-      max-width: 1500px;
-      padding: 10px;
-      margin: 200px auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-
-    .features h1 {
-      width: 100%;
-      font-size: 50px;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-    }
-
-    .features .feature {
-      flex: 1 1 calc(50% - 40px);
-      /* Two columns */
-      margin-top: 20px;
-      padding: 10px;
-      background-color: #222;
-      border-radius: 10px;
-      color: white;
-      text-decoration: none;
-      box-sizing: border-box;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-      transition: 0.2s;
-    }
-
-    .features .feature:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .features .feature h1 {
-      font-size: 30px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature p {
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature i {
-      font-size: 50px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    /* Styles for the tilt block */
-    #tilt {
-      display: block;
-      width: 500px;
-      height: 500px;
-      background-color: grey;
-      transition: box-shadow 0.1s, transform 0.1s;
-    }
-
-    #tilt:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      cursor: pointer;
-    }
-  </style>
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <div class="nav">
   <div class="left">
@@ -251,7 +34,7 @@
     <h1>Rotur</h1>
     <p>A networking standard<br>over websockets</p>
   </div>
-  <img src="./Rotur Logo.png" id="tilt" alt="Rotur Logo" draggable="false">
+  <img src="/Rotur Logo.png" id="tilt" alt="Rotur Logo" draggable="false">
 </div>
 <div class="about">
   <h1>About</h1>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..cd7fa02
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,215 @@
+    body {
+      font-family: 'Poppins';
+      font-size: 22px;
+      user-select: none;
+      color: aliceblue;
+      background: rgb(63, 47, 60);
+      background: linear-gradient(45deg, rgba(63, 47, 60, 1) 0%, rgba(17, 17, 17, 1) 10%, rgba(17, 17, 17, 1) 90%, rgba(53, 59, 100, 1) 100%);
+      height: max(100vh, 100%);
+    }
+
+    .hero {
+      max-width: 2000px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      margin: 200px auto;
+    }
+
+    .hero .headings {
+      font-size: 50px;
+      float: left;
+      padding-left: 10px;
+      padding-right: 50px;
+      margin-left: 50px;
+      top: 50px;
+    }
+
+    .hero img {
+      border-radius: 50%;
+      user-select: none;
+      float: right;
+      width: 500px;
+      height: 500px;
+      margin-right: 50px;
+      box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.5);
+    }
+
+    .nav {
+      max-width: 2000px;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+    }
+
+    .nav .left {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 10px;
+      margin-top: 20px;
+      margin-left: 20px;
+      background-color: #222;
+      overflow: hidden;
+      float: left;
+      text-decoration: none;
+      border-radius: 20px;
+      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+    }
+
+    .nav .right {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 10px;
+      margin-top: 20px;
+      margin-right: 20px;
+      background-color: #222;
+      overflow: hidden;
+      float: right;
+      border-radius: 20px;
+      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+    }
+
+    .nav a {
+      color: white;
+      text-align: center;
+      padding: 4px 15px;
+      text-decoration: none;
+    }
+
+    .nav a:hover {
+      background-color: #111;
+      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
+    }
+
+    .about {
+      max-width: 1500px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      margin: 200px auto;
+    }
+
+    .about h1 {
+      font-size: 50px;
+      float: left;
+      padding-left: 10px;
+      padding-right: 50px;
+      margin-left: 50px;
+      top: 50px;
+    }
+
+    .about img {
+      border-radius: 50%;
+      user-select: none;
+      width: 140px;
+      height: 140px;
+      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+    }
+
+    .about .devs {
+      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 10px;
+      margin-top: 20px;
+      margin-right: 20px;
+      align-self: auto;
+      margin: auto;
+      transition: 0.2s;
+    }
+
+    .about .devs a {
+      color: white;
+      text-align: center;
+      padding: 4px 15px;
+      text-decoration: none;
+    }
+
+    .about .devs:hover {
+      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
+      scale: 1.03;
+      cursor: pointer;
+    }
+
+    .about .devs p {
+      color: white;
+      text-align: center;
+      padding: 4px 15px;
+      text-decoration: none;
+    }
+
+    .features {
+      max-width: 1500px;
+      padding: 10px;
+      margin: 200px auto;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+
+    .features h1 {
+      width: 100%;
+      font-size: 50px;
+      padding-left: 10px;
+      padding-right: 50px;
+      margin-left: 50px;
+    }
+
+    .features .feature {
+      flex: 1 1 calc(50% - 40px);
+      /* Two columns */
+      margin-top: 20px;
+      padding: 10px;
+      background-color: #222;
+      border-radius: 10px;
+      color: white;
+      text-decoration: none;
+      box-sizing: border-box;
+      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+      transition: 0.2s;
+    }
+
+    .features .feature:hover {
+      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
+      scale: 1.03;
+      cursor: pointer;
+    }
+
+    .features .feature h1 {
+      font-size: 30px;
+      padding: 5px;
+      margin-left: 10px;
+    }
+
+    .features .feature p {
+      padding: 5px;
+      margin-left: 10px;
+    }
+
+    .features .feature i {
+      font-size: 50px;
+      padding: 5px;
+      margin-left: 10px;
+    }
+
+    /* Styles for the tilt block */
+    #tilt {
+      display: block;
+      width: 500px;
+      height: 500px;
+      background-color: grey;
+      transition: box-shadow 0.1s, transform 0.1s;
+    }
+
+    #tilt:hover {
+      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+    }
\ No newline at end of file
diff --git a/systems/index.html b/systems/index.html
index 531d3bf..fc21bf7 100644
--- a/systems/index.html
+++ b/systems/index.html
@@ -16,224 +16,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
-
-  <style>
-    body {
-      font-family: 'Poppins';
-      font-size: 22px;
-      user-select: none;
-      color: aliceblue;
-      background: rgb(63, 47, 60);
-      background: linear-gradient(45deg, rgba(63, 47, 60, 1) 0%, rgba(17, 17, 17, 1) 10%, rgba(17, 17, 17, 1) 90%, rgba(53, 59, 100, 1) 100%);
-      height: max(100vh, 100%);
-    }
-
-    .hero {
-      max-width: 2000px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .hero .headings {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .hero img {
-      border-radius: 50%;
-      user-select: none;
-      float: right;
-      width: 500px;
-      height: 500px;
-      margin-right: 50px;
-      box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav {
-      max-width: 2000px;
-      margin: auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-    }
-
-    .nav .left {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-left: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: left;
-      text-decoration: none;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav .right {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: right;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .nav a:hover {
-      background-color: #111;
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      border-radius: 10px;
-    }
-
-    .about {
-      max-width: 1500px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .about h1 {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .about img {
-      border-radius: 50%;
-      user-select: none;
-      width: 140px;
-      height: 140px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .about .devs {
-      text-align: center;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      align-self: auto;
-      margin: auto;
-      transition: 0.2s;
-    }
-
-    .about .devs a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .about .devs:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .about .devs p {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .features {
-      max-width: 1500px;
-      padding: 10px;
-      margin: 200px auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-
-    .features h1 {
-      width: 100%;
-      font-size: 50px;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-    }
-
-    .features .feature {
-      flex: 1 1 calc(50% - 40px);
-      /* Two columns */
-      margin-top: 20px;
-      padding: 10px;
-      background-color: #222;
-      border-radius: 10px;
-      color: white;
-      text-decoration: none;
-      box-sizing: border-box;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-      transition: 0.2s;
-    }
-
-    .features .feature:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .features .feature h1 {
-      font-size: 30px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature p {
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature i {
-      font-size: 50px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    /* Styles for the tilt block */
-    #tilt {
-      display: block;
-      width: 500px;
-      height: 500px;
-      background-color: grey;
-      transition: box-shadow 0.1s, transform 0.1s;
-    }
-
-    #tilt:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      cursor: pointer;
-    }
-  </style>
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <div class="nav">
   <div class="left">