diff --git a/css/dark.css b/css/dark.css
new file mode 100644
index 0000000..7d99deb
--- /dev/null
+++ b/css/dark.css
@@ -0,0 +1,100 @@
+/*
+    Tier Away is a website that helps users create unique tier lists. No accounts, no hassle.
+    Copyright (C) 2022 Con Godsted
+*/
+/*body styling with the Theme*/
+
+html {
+    scrollbar-color: #393939 #1f1f1f; 
+}
+/*fancy header*/
+header {
+    border: transparent;
+    border-bottom: #d22d59 solid;
+}
+header button {
+    color: #6b6b6b;
+    border-color: #393939;
+}
+
+
+
+/*6b6b6b BORDER*/
+#button-panel button:hover, .export-visible a:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
+    border-color: #6b6b6b;
+}
+/*TRANSPARENT BORDER*/
+#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
+    border-color: transparent;
+}
+
+
+
+/*TRANSPARENT BACKGROUND*/
+#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
+    background-color: transparent;
+}
+/*WHITE BACKGROUND*/
+.export-visible a {
+    background-color: white;
+}
+/*222222 BORDER*/
+.hidden, .dropshown, .export-visible {
+    border-color: #222222;
+}
+/*393939 BORDER*/
+#button-panel button, .export-visible a, .hidden button, .export-visible a, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect {
+    border-color: #393939;
+}
+/*BLACK BORDER*/
+footer, table, tr, td, th {
+    border-color: black;
+}
+
+
+
+
+/*2b2b2b BACKGROUND*/
+#fileselect:hover, #url-upload button:hover, .export-visible a:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
+    background-color: #2b2b2b;
+}
+
+/*18181b BACKGROUND*/
+body, header button {
+    background-color: #18181b;
+}
+/*1f1f1f BACKGROUND*/
+.dropshown, .hidden, .export-visible, .tiersettings, #tablehead {
+    background-color: #1f1f1f;
+}
+/*222222 BACKGROUND*/
+#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, #button-panel button, .hidden button, header button:hover {
+    background-color: #222222;
+}
+/*393939 BACKGROUND*/
+table {
+    background-color: #393939;
+}
+/*BLACK BACKGROUND*/
+footer, #image-options, header {
+    background-color: black;
+}
+
+
+/*WHITE TEXT*/
+#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier  {
+    color: white;
+}
+
+/*RED TEXT*/
+#github:hover, footer a:hover, #change-theme-button:hover {
+    color: #d22d59
+}
+/*6b6b6b TEXT*/
+#trash, #new, #tier-move button, .del-tier {
+    color: #6b6b6b;
+}
+/*BLACK TEXT*/
+th:not(.header) {
+    color: black
+}
diff --git a/css/style.css b/css/desktop.css
similarity index 72%
rename from css/style.css
rename to css/desktop.css
index 6cce9c3..5a78806 100644
--- a/css/style.css
+++ b/css/desktop.css
@@ -13,42 +13,54 @@
 }
 /*body styling with the Theme*/
 body {
-    background-color: #18181b;
-    color: white;
     font-family: 'Source Sans Pro', sans-serif;
     margin: 0;
     
 }
-html {
-    scrollbar-color: #393939 #1f1f1f; 
+/*SOLID BORDERS*/
+.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a {
+    border-style: solid;
+}
+.hidden, .dropshown, .export-visible, header {
+    border-width: 5px;
+}
+
+table {
+    border-width:  3px;
+}
+
+tr, td, th, .export-visible a {
+    border-width: 2px;
+}
+#fileselect, header button {
+    border-width: 1px;
+}
+#change-theme-button {
+    font-size: 2.5em;
+    cursor: pointer;
+}
+/*TOP AND BOTTOM BORDERS*/
+footer {
+    border-width: 0px;
+    border-top-width: 10px;
+    border-bottom-width: 10px;
 }
 /*fancy header*/
 header {
     display:flex;
-    background-color: black;
     align-items: center;
     justify-content: space-between;
     padding-left: 20px;
     padding-right: 20px;
-    border-bottom: #d22d59 5px solid;
 }
 header button {
-    color: #6b6b6b;
     transition: color .1s;
     white-space:nowrap;
-    border: #393939 solid 1px;
     padding: 10px;
     border-radius: 5px;
     font-weight: bold;
-    background-color: #18181b;
     font-size: medium;
-    
 
-}
-header button:hover {
-    color: white;
-    background-color: #222222;
-    border-color: #393939;
 }
 /*popup menu buttons*/
 #button-panel button, .hidden button, .export-visible a {
@@ -56,20 +68,8 @@ header button:hover {
     padding-bottom: 10px;
     padding-top: 10px;
     font-size: large;
-    background-color: #222222;
-    color: white;
-    border-color: #393939;
     flex-wrap: wrap;
 }
-/*popup menu buttons hover*/
-#button-panel button:hover {
-    background-color: #2b2b2b;
-    border-color: #6b6b6b
-}
-.export-visible a:hover {
-    background-color: lightgray;
-    border-color: #6b6b6b
-}
 #addtierdiv, #addurldiv, #addtextdiv, #addimagediv {
     display: flex;
     width: 100%;
@@ -87,22 +87,13 @@ header button:hover {
     height: 20vh;
     width: 100%;
     text-align: center;
-    border: solid #393939 1px;
 }
 #fileselect::file-selector-button {
     padding-bottom: 10px;
     padding-top: 10px;
     font-size: large;
-    background-color: transparent;
-    color: white;
-    border-color: transparent;
     flex-wrap: wrap;
 }
-#fileselect:hover {
-    background-color: #2b2b2b;
-    border-color: #6b6b6b;
-    transition: border-color .1s;
-}
 #url-upload, #text-add {
     display: flex;
     width: 100%;
@@ -117,28 +108,15 @@ header button:hover {
     width: 40%;
     height: 100%;
     font-size: medium;
-    background-color: #222222;
-    color: white;
-    border-color: #393939;
     flex-wrap: wrap;
 }
-/*popup menu buttons hover*/
-#url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
-    background-color: #2b2b2b;
-    border-color: #6b6b6b
-}
 #urlselect, #text-select, #add-tier{
     width: 100%;
-    background-color: #222222;
-    color: white;
-    border-color: #393939;
     margin-right: 10px;
     
     
 }
 #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
-    background-color: #2b2b2b;
-    border-color: #6b6b6b;
     outline: none;
 }
 
@@ -171,12 +149,10 @@ td img {
 }
 table {
     border-collapse: collapse;
-    border: black solid 3px;
     width: 100%;
-    background-color: #393939;
 }
-tr, td, th {
-    border: black solid 2px;
+#padding {
+    min-height: 10vh
 }
 .tierheader {
     width: 7%;
@@ -186,7 +162,6 @@ tr, td, th {
 }
 .tiersettings {
     width: 7%;
-    background-color: #1f1f1f;
     text-align: center;
 }
 .tiersettings div {
@@ -196,21 +171,13 @@ tr, td, th {
 #dragged {
     opacity: 0.4;
 }
-#tablehead {
-    background-color: #1f1f1f;
-}
-th:not(.header) {
-    color: black
-}
 /*style the uploaded image options*/
 #image-options {
     min-height: 100px;
     display: flex;
     position: fixed;
     bottom: 0;
-    background-color: black;
     width: 100%;
-    border-top: black solid 10px;
     min-height: min-content;
     overflow: hidden;
 }
@@ -221,7 +188,6 @@ th:not(.header) {
 }
 #trash {
     padding: 5px;
-    color: #6b6b6b;
     transition: color .1s;
 }
 .hidden {
@@ -236,7 +202,6 @@ th:not(.header) {
     right: 0;
     width: 50%;
     text-align: center;
-    border: #222222 solid 5px;
     border-radius: 10px;
     justify-content: center;
 }
@@ -244,7 +209,6 @@ th:not(.header) {
 .dropshown {
     display: flex;
     position: absolute;
-    background-color: #1f1f1f;
     margin-left: auto;
     margin-right: auto;
     top: 25%;
@@ -281,10 +245,6 @@ th:not(.header) {
     padding-bottom: 10px;
 }
 .export-visible a {
-    background-color: white;
-    border: white solid 1px;
-    border-radius: 5px;
-    color: black;
     margin-top: 10px;
     padding: 5px;
     text-decoration: none;
@@ -299,30 +259,17 @@ th:not(.header) {
     
 }
 #new, #tier-move button, .del-tier {
-    color: #6b6b6b;
     transition: color .1s;
     
 }
-/*white links and white table buttons*/
-#new:hover, #tier-move button:hover, .del-tier:hover, footer a{
-    color: white;
-}
-
-#github:hover, footer a:hover {
-    color: #d22d59
-}
-
 /*give margin to links*/
 #desc, #upload-images-info {
     margin-left: 10px;
 }
 /*fancy footer*/
 footer {
-    background-color: black;
     margin-left: auto;
     margin-right: auto;
-    border-top: black 10px solid;
-    border-bottom: black 10px solid;
     text-align: center;
     position: bottom;
     bottom:0;
@@ -342,7 +289,6 @@ footer {
 /*style github*/
 #github {
     text-decoration: none;
-    color: white;
     padding-right: 2vh;
     margin-bottom: 5px;
 }
diff --git a/css/light.css b/css/light.css
new file mode 100644
index 0000000..4ebac7b
--- /dev/null
+++ b/css/light.css
@@ -0,0 +1,97 @@
+/*
+    Tier Away is a website that helps users create unique tier lists. No accounts, no hassle.
+    Copyright (C) 2022 Con Godsted
+*/
+
+/*fancy header*/
+header {
+    border: transparent;
+    border-bottom: #d22d59 solid;
+}
+header button {
+    color: #6b6b6b;
+    border-color: #393939;
+}
+
+
+
+/*6b6b6b BORDER*/
+#button-panel button:hover, .export-visible a:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
+    border-color: #949494;
+}
+/*TRANSPARENT BORDER*/
+#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
+    border-color: transparent;
+}
+
+
+
+/*TRANSPARENT BACKGROUND*/
+#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
+    background-color: transparent;
+}
+/*WHITE BACKGROUND*/
+.export-visible a {
+    background-color: black;
+}
+/*222222 BORDER*/
+.hidden, .dropshown, .export-visible {
+    border-color: #dddddd;
+}
+/*393939 BORDER*/
+#button-panel button, .hidden button, .export-visible a, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect {
+    border-color: #c6c6c6;
+}
+/*BLACK BORDER*/
+table, tr, td, th {
+    border-color: black;
+}
+/*BLACK BORDER*/
+footer {
+    border-color: white;
+}
+
+/*2b2b2b BACKGROUND*/
+#fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
+    background-color: #d4d4d4;
+}
+
+/*18181b BACKGROUND*/
+body, header button {
+    background-color: #e7e7e4;
+}
+/*1f1f1f BACKGROUND*/
+.dropshown, .hidden, .export-visible, .tiersettings, #tablehead, .export-visible a {
+    background-color: #e0e0e0;
+}
+/*222222 BACKGROUND*/
+#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, #button-panel button, .hidden button, header button:hover {
+    background-color: #dddddd;
+}
+/*393939 BACKGROUND*/
+table {
+    background-color: #393939;
+}
+/*BLACK BACKGROUND*/
+footer, #image-options, header {
+    background-color: white;
+}
+
+
+/*WHITE TEXT*/
+#github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier  {
+    color: black;
+}
+
+/*RED TEXT*/
+#github:hover, footer a:hover, #change-theme-button:hover {
+    color: #d22d59
+}
+/*6b6b6b TEXT*/
+#trash, #new, #tier-move button, .del-tier {
+    color: #6b6b6b;
+}
+/*BLACK TEXT*/
+th:not(.header), .export-visible a {
+    color: black
+}
diff --git a/index.html b/index.html
index e86679b..3ec824c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" href="css/style.css">
+        <link id="desktop-style"d rel="stylesheet" href="css/desktop.css">
+        <link class="dark-mode" id="theme-style" rel="stylesheet" href="css/dark.css">
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
@@ -33,6 +34,7 @@ <h1>Tier Away</h1>
         </div>
         <div style="transition: opacity .3s; opacity: 0;" id="export" class="hidden">
         </div>
+        <div id="padding"></div>
         <div id="image-options">
             <p id="upload-images-info">Uploaded images will appear here. Click the <i class="fa fa-plus " aria-hidden="true"> Plus</i> to get started!</p>
         
@@ -42,7 +44,10 @@ <h1>Tier Away</h1>
         <script type="text/javascript" src="lib/html2canvas.js"></script>
     <footer>
         <p id="copy">Tier Away was designed by <a href="https://congodsted.com">Con Godsted</a> &copy; 2022, with help from <a href="https://luketrenaman.com">Luke Trenaman</a>.<br> Tier Away is licensed under the <a href="https://github.com/ConGodsted/TierAway/blob/main/LICENSE.md">GNU General Public License v3.0.</a></p>
-        <a target="_blank" href="https://github.com/ConGodsted/TierAway" id="github" class="fa fa-github fa-3x" aria-hidden="true"></a>
+        <div>
+            <button id="change-theme-button" class="fa fa-moon-o fa-2x" onclick="changeTheme()"></button>
+            <a target="_blank" href="https://github.com/ConGodsted/TierAway" id="github" class="fa fa-github fa-3x" aria-hidden="true"></a>
+        </div>
 
     </footer>
     </body>
diff --git a/script.js b/script.js
index 5cc4a57..7db6038 100644
--- a/script.js
+++ b/script.js
@@ -398,7 +398,7 @@ function importTiers(input) {
 }
 let setHeight = document.body.offsetHeight
 window.onscroll = function() {
-    if ((window.innerHeight + Math.ceil(window.scrollY)) >= setHeight) {
+    if ((window.innerHeight + Math.ceil(window.scrollY)-60) >= setHeight) {
         document.getElementById("image-options").style.position = "static"
     }
     else {
@@ -411,4 +411,25 @@ window.onkeydown= function(key){
         closePlus()
         closeExport()
     };
-};
\ No newline at end of file
+};
+window.addEventListener("load", function(){
+    if (sessionStorage.theme == "light") {
+        changeTheme()
+    }
+});
+  
+
+function changeTheme() {
+    if (document.getElementById("theme-style").className == "dark-mode") {
+        document.getElementById("theme-style").className = "light-mode"
+        document.getElementById("theme-style").href = "/css/light.css"
+        document.getElementById("change-theme-button").className = "fa fa-sun-o"
+        sessionStorage.theme = "light"
+    }
+    else {
+        document.getElementById("theme-style").className = "dark-mode"
+        document.getElementById("theme-style").href = "/css/dark.css"
+        document.getElementById("change-theme-button").className = "fa fa-moon-o"
+        sessionStorage.theme = "dark"
+    }
+}
\ No newline at end of file