diff --git a/Website/index.html b/Website/index.html
index a4fe190..f7241e6 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -18,12 +18,6 @@
     <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
   </topbar>
   <viewport>
-    <sidebar>
-      <background-placeholder></background-placeholder>
-      
-      <spacer></spacer>
-      <p style="text-align: center">Made with Blåhaj 🦈</p>
-    </sidebar>
     <content>
       <div id="addPublication">
         <p>+</p>
@@ -76,25 +70,33 @@
         </publication-information>
       </publication-viewer>
     </popup>
-    
+    <popup id="settingsPopup">
+      <blur-background id="blurBackgroundSettingsPopup"></blur-background>
+      <settings>
+        <span class="title">Settings</span>
+        <div>
+          <span class="title">Download Location:</span>
+          <span id="downloadLocation"></span>
+        </div>
+        <div>
+          <span class="title">API-URI</span>
+          <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+        </div>
+        <komga-settings>
+          <span class="title">Komga</span>
+          <div>Configured: <span id="komgaConfigured">✅❌</span></div>
+          <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
+          <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
+          <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
+          <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
+          <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
+        </komga-settings>
+      </settings>
+    </popup>
   </viewport>
-  
-  <settingstab id="settingstab">
-    <span class="title">Download Location:</span>
-    <span id="downloadLocation"></span>
-    <span class="title">API-URI</span>
-    <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
-    <komga-settings>
-      <span class="title">Komga</span>
-      <div>Configured: <span id="komgaConfigured">✅❌</span></div>
-      <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
-      <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
-      <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
-      <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
-      <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
-    </komga-settings>
-  </settingstab>
-  
+  <footer>
+    <p style="text-align: center">Made with Blåhaj 🦈</p>
+  </footer>  
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>
diff --git a/Website/interaction.js b/Website/interaction.js
index f470d92..a834782 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -1,31 +1,11 @@
-const slideInRight = [
-    { right: "-20rem" },
-    { right: "0" }
-];
-
-const slideInRightTiming = {
-    duration: 200,
-    iterations: 1,
-    fill: "forwards",
-    easing: "ease-out"
-}
-
-const slideOutRightTiming = {
-    direction: "reverse",
-    duration: 200,
-    iterations: 1,
-    fill: "forwards",
-    easing: "ease-in"
-}
-
-let publications = [];
+let publications = [];
 let tasks = [];
 let toEditId;
 
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
 const connectorSelect = document.querySelector("#connectors");
-const settingsTab = document.querySelector("#settingstab");
+const settingsPopup = document.querySelector("#settingsPopup");
 const settingsCog = document.querySelector("#settingscog");
 const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
@@ -49,6 +29,7 @@ const settingApiUri = document.querySelector("#settingApiUri");
 
 
 settingsCog.addEventListener("click", () => OpenSettings());
+document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
 closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
@@ -139,15 +120,6 @@ function AddTaskClick(){
     HidePublicationPopup();
 }
 
-let slideIn = true;
-function slide() {
-    if (slideIn)
-        settingsTab.animate(slideInRight, slideInRightTiming);
-    else
-        settingsTab.animate(slideInRight, slideOutRightTiming);
-    slideIn = !slideIn;
-}
-
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -214,7 +186,11 @@ const fadeInTiming = {
 
 function OpenSettings(){
     GetSettingsClick();
-    slide();
+    settingsPopup.style.display = "flex";
+}
+
+function HideSettings(){
+    settingsPopup.style.display = "none";
 }
 
 function GetSettingsClick(){
diff --git a/Website/style.css b/Website/style.css
index 0ed75cf..715e6ba 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -90,22 +90,24 @@ viewport {
     flex-flow: row;
     flex-wrap: nowrap;
     flex-grow: 1;
+    height: 100%;
+    overflow-y: scroll;
 }
 
-sidebar{
-    position: relative;
-    width: 20rem;
-    margin-bottom: 20px;
-    border-radius: 0 0 5px 0;
+footer {
     display: flex;
-    flex-direction: column;
-    
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color: var(--primary-color);
 }
 
 content {
     position: relative;
     flex-grow: 1;
-    margin: 0 10px 10px 10px;
     border-radius: 5px;
     display: flex;
     flex-direction: row;
@@ -114,35 +116,28 @@ content {
     align-content: start;
 }
 
-settingstab{
-    position: absolute;
-    right: -20rem;
-    bottom: 0;
-    background-color: rgba(0,0,0,0.5);
-    width: 20rem;
-    height: calc(100% - var(--topbar-height) - 40px);
-    margin-bottom: 10px;
-    border-radius: 5px 0 0 5px;
+settings {
+    width: 50%;
+    background-color: var(--accent-color);
     display: flex;
     flex-direction: column;
-    flex-wrap: nowrap;
+    z-index: 10;
+    position: absolute;
+    left: 25%;
+    top: 25%;
+    border-radius: 5px;
 }
 
-settingstab > * {
-    margin: 0 20px;
+#settingsPopup{
+    z-index: 10;
 }
 
-settingstab input {
-    padding: 3px;
-    border-radius: 3px;
-    border: 0;
-    margin: 2px 20px;
+settings > *{
+    margin: 10px 5px;
 }
 
-settingstab .title {
-    font-size: 14pt;
+settings .title {
     font-weight: bolder;
-    margin-top: 20px;
 }
 
 komga-settings {
@@ -153,7 +148,7 @@ komga-settings {
 }
 
 komga-settings input {
-    margin: 2px 0;
+    margin: 3px 0;
 }
 
 #addPublication {
@@ -232,8 +227,8 @@ publication img {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     z-index: 0;
 }
 
@@ -268,7 +263,6 @@ addtask-window {
     max-height: 80%;
     padding: 0;
     background-color: var(--accent-color);
-    z-index: 5;
     border-radius: 5px;
 }
 
@@ -339,7 +333,7 @@ addtask-settings addtask-setting{
 }
 
 #publicationViewerPopup{
-    z-index: 6;
+    z-index: 5;
 }
 
 publication-viewer{
@@ -372,7 +366,7 @@ publication-viewer img {
     position: absolute;
     left: 0;
     top: 0;
-    min-height: 100%;
+    max-height: 100%;
     max-width: 100%;
     border-radius: 5px;
     z-index: 0;