diff --git a/js/alle.js b/js/alle.js
index 1cb3047..040efea 100644
--- a/js/alle.js
+++ b/js/alle.js
@@ -3,71 +3,69 @@
 
 pages.alle = (async () => {
 
-	chrome.storage.local.get(["light"], (result) => {
-		if (result.light) document.body.classList.add("light-theme")
-	})
-	chrome.storage.local.get(["fri"], async (result) => {
-		if (result.fri) {
-			const fGetXML = async (skoleId, elevId) => {
-				const response = await getBackend("skemaEnd", async () => {
-					return new Promise(async res2 => {
-						var xhttpUrl = "https://www.lectio.dk/lectio/" + skoleId + "/SkemaNy.aspx?type=elev&elevid=" + elevId;
-						var xhttp = new XMLHttpRequest();
-						xhttp.onreadystatechange = function () {
-							if (this.readyState == 4 && this.status == 200) {
-								const skema = xhttp.responseXML.querySelector(".s2skema tbody tr:nth-child(4)");
-				
-								const currentDate = new Date()
-								const currentWeekday = new Date().getDay();
-								const skemaDay = skema.querySelector(`td:nth-child(${currentWeekday + 1})`);
-								const skemaBlock = skemaDay.querySelector("div");
-								let theEnd = new Date();
-				
-								const lectures = skemaBlock.querySelectorAll(".s2skemabrik:not(.s2cancelled)");
-								for (const lecture of lectures) {
-									if (parseInt(xhttp.responseXML.querySelector(`.s2dayHeader td:nth-child(` + (currentWeekday + 1) + `)`).innerText.split("/")[0].match(/\d+/g)[0]) !== new Date().getDate()) continue;
-									//   const start = lecture.getAttribute("data-additionalinfo").match(/\d+:\d+/)[0]
-									const end = lecture.getAttribute("data-additionalinfo").match(/\d+:\d+/g).pop()
-									const endTime = new Date(
-										currentDate.getFullYear(),
-										currentDate.getMonth(),
-										currentDate.getDate(),
-										end.split(":")[0],
-										end.split(":")[1]
-									).getTime();
-									theEnd = endTime
-								}
-								res2(theEnd)
+	// chrome.storage.local.get(["light"], (result) => {
+	// 	if (result.light) document.body.classList.add("light-theme")
+	// })
+	getSetting("Fri Counter").then(async isEnabled => {
+		if (!isEnabled) return
+		const fGetXML = async (skoleId, elevId) => {
+			const response = await getBackend("skemaEnd", async () => {
+				return new Promise(async res2 => {
+					var xhttpUrl = "https://www.lectio.dk/lectio/" + skoleId + "/SkemaNy.aspx?type=elev&elevid=" + elevId;
+					var xhttp = new XMLHttpRequest();
+					xhttp.onreadystatechange = function () {
+						if (this.readyState == 4 && this.status == 200) {
+							const skema = xhttp.responseXML.querySelector(".s2skema tbody tr:nth-child(4)");
+			
+							const currentDate = new Date()
+							const currentWeekday = new Date().getDay();
+							const skemaDay = skema.querySelector(`td:nth-child(${currentWeekday + 1})`);
+							const skemaBlock = skemaDay.querySelector("div");
+							let theEnd = new Date();
+			
+							const lectures = skemaBlock.querySelectorAll(".s2skemabrik:not(.s2cancelled)");
+							for (const lecture of lectures) {
+								if (parseInt(xhttp.responseXML.querySelector(`.s2dayHeader td:nth-child(` + (currentWeekday + 1) + `)`).innerText.split("/")[0].match(/\d+/g)[0]) !== new Date().getDate()) continue;
+								//   const start = lecture.getAttribute("data-additionalinfo").match(/\d+:\d+/)[0]
+								const end = lecture.getAttribute("data-additionalinfo").match(/\d+:\d+/g).pop()
+								const endTime = new Date(
+									currentDate.getFullYear(),
+									currentDate.getMonth(),
+									currentDate.getDate(),
+									end.split(":")[0],
+									end.split(":")[1]
+								).getTime();
+								theEnd = endTime
 							}
+							res2(theEnd)
 						}
-						xhttp.open("GET", xhttpUrl, true);
-						xhttp.responseType = "document";
-						xhttp.send();
-					})
-				}, 1000 * 60 * 60)
-				const headerNav = await first("header[role='banner'] nav .floatLeft");
-				headerNav.innerHTML += `<p class="fricount">Du har fri om <strong id="fritid"></strong> <p>`;
-				setInterval(() => {
-					const timeUntilDate = response - (new Date())
-					let htmlToApply = formatTime(timeUntilDate);
-					document.getElementById("fritid").innerText = htmlToApply;
-				}, 1000)
-			}
-		
-			const location = window.location.href;
-			fGetXML(location?.split("/")?.[4], location?.split("?elevid=")?.[1]?.split("&")[0] ?? location?.split("&elevid=")?.[1]?.split("&")?.[0]);
+					}
+					xhttp.open("GET", xhttpUrl, true);
+					xhttp.responseType = "document";
+					xhttp.send();
+				})
+			}, 1000 * 60 * 60)
+			const headerNav = await first("header[role='banner'] nav .floatLeft");
+			headerNav.innerHTML += `<p class="fricount">Du har fri om <strong id="fritid"></strong> <p>`;
+			setInterval(() => {
+				const timeUntilDate = response - (new Date())
+				let htmlToApply = formatTime(timeUntilDate);
+				document.getElementById("fritid").innerText = htmlToApply;
+			}, 1000)
 		}
+	
+		const location = window.location.href;
+		fGetXML(location?.split("/")?.[4], location?.split("?elevid=")?.[1]?.split("&")[0] ?? location?.split("&elevid=")?.[1]?.split("&")?.[0]);
 	})
 
-	chrome.storage.local.get(["antiAFK"], (result) => {
-		if (result.antiAFK) {
-			setInterval(() => {
-				const afkAlert = document.querySelector("div.ui-dialog.ui-corner-all.ui-widget")
-				if (afkAlert != null){
-					window.location.reload()
-				}
-			}, 5000)
-		}
+	getSetting("Anti AFK").then(isEnabled => {
+		if (!isEnabled) return
+		setInterval(() => {
+			const afkAlert = document.querySelector("div.ui-dialog.ui-corner-all.ui-widget")
+			if (afkAlert != null){
+				window.location.reload()
+			}
+		}, 5000)
 	})
 	first(".lectioToolbar .floatLeft", e => {
 		const btn = document.createElement("div")
diff --git a/js/opgaver.js b/js/opgaver.js
index 9c640de..e1750d5 100644
--- a/js/opgaver.js
+++ b/js/opgaver.js
@@ -41,6 +41,8 @@ const sleep = (ms) => {
 }
 pages.opgaver = (async () => {
 		// Sort the elements in the opgaver table by date with newest first
+	const isEnabled = await getSetting("Opgave Funktioner");
+	if (!isEnabled) return;
 	await sleep(1000)
 	sortTable(await first("table"), 3, true);
 	const opgaver = document.querySelectorAll("tr");
diff --git a/js/util.js b/js/util.js
index 294facc..17f77dd 100644
--- a/js/util.js
+++ b/js/util.js
@@ -107,6 +107,20 @@ const defaultSettings = {
         "Dark Mode": {
             default: false,
         },
+    },
+    "General": {
+        "Fri Counter": {
+            default: false,
+        },
+        "Anti AFK": {
+            default: false,
+        },
+        "Auto Login": {
+            default: false,
+        },
+        "Opgave Funktioner": {
+            default: false,
+        },
     }
 }
 const getSetting = async (setting) => {
diff --git a/popup/popup.css b/popup/popup.css
new file mode 100644
index 0000000..71811a5
--- /dev/null
+++ b/popup/popup.css
@@ -0,0 +1,25 @@
+:root {
+    --primary-color: #ffffff;
+    --background-color: #393b3d;
+    --seperator-color: rgb(172, 172, 172);
+}
+body {
+    margin: 5px;
+    min-width: 257px;
+    min-height: 250px;
+    overflow-x: hidden;
+    color: var(--primary-color);
+    background-color: var(--background-color);
+    font-family: HCo Gotham SSm, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: large;
+}
+ul {
+    padding: 0;
+}
+li {
+    list-style-type: none;
+}
\ No newline at end of file
diff --git a/popup/popup.html b/popup/popup.html
index 0afd00f..0274e41 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -6,19 +6,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Settings</title>
+    <link rel="stylesheet" href="./popup.css">
 </head>
 
 <body>
     <h1>Settings</h1>
-    <input type="checkbox" name="autologin" id="autologin" checked="checked">
-    <label for="autologin">Auto Login</label>
-    <input type="checkbox" name="fri" id="fri" checked="checked">
-    <label for="fri">Fri Counter</label>
-    <input type="checkbox" name="light" id="light" checked="">
-    <label for="light">Light Theme</label>
-    <input type="checkbox" name="antiAFK" id="antiAFK" checked="">
-    <label for="antiAFK">Anti AFK</label>
+    <ul>
+    </ul>
 </body>
+<script src="../js/util.js"></script>
 <script src="popup.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
index 23c4f12..63459a9 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,24 +1,18 @@
-chrome.storage.local.get(["checked"], (result) => {
-    document.getElementById("autologin").checked = result.checked;
-})
-chrome.storage.local.get(["light"], (result) => {
-    document.getElementById("light").checked = result.light;
-})
-chrome.storage.local.get(["fri"], (result) => {
-    document.getElementById("fri").checked = result.fri;
-})
-chrome.storage.local.get(["antiAFK"], (result) => {
-    document.getElementById("antiAFK").checked = result.antiAFK;
-})
-document.getElementById("autologin").addEventListener("change", (e) => {
-    chrome.storage.local.set({ checked: e.target.checked });
-})
-document.getElementById("light").addEventListener("change", (e) => {
-    chrome.storage.local.set({ light: e.target.checked });
-})
-document.getElementById("fri").addEventListener("change", (e) => {
-    chrome.storage.local.set({ fri: e.target.checked });
-})
-document.getElementById("antiAFK").addEventListener("change", (e) => {
-    chrome.storage.local.set({ antiAFK: e.target.checked });
-})
\ No newline at end of file
+
+for (const category of Object.values(defaultSettings)) {
+    for (const setting in category) {
+        const nameWithNoSpace = setting.replace(/\s/g, "");
+        const settingElement = document.createElement("li");
+        settingElement.innerHTML = `
+            <input type="checkbox" name="${nameWithNoSpace}" id="${nameWithNoSpace}" checked="checked">
+            <label for="${nameWithNoSpace}">${setting}</label>
+        `;
+        document.querySelector("ul").appendChild(settingElement);
+        getSetting(setting).then((result) => {
+            document.getElementById(nameWithNoSpace).checked = result;
+        })
+        document.getElementById(nameWithNoSpace).addEventListener("change", (e) => {
+            setSetting(setting, e.target.checked);
+        })
+    }
+}
\ No newline at end of file