diff --git a/backend/controllers/default.py b/backend/controllers/default.py
index 15fa1ba4..72f8f187 100644
--- a/backend/controllers/default.py
+++ b/backend/controllers/default.py
@@ -17,6 +17,28 @@ async def root(request: Request):
     }
 
 
+@router.get("/health")
+async def health(request: Request):
+    return {
+        "success": True,
+        "message": "Iceburg is running!",
+    }
+
+
 @router.get("/user")
 async def get_rd_user():
     return get_user()
+
+
+@router.get("/services")
+async def get_services():
+    return {
+        "success": True,
+        "data": {
+            "plex": settings_manager.get("plex"),
+            "mdblist": settings_manager.get("mdblist"),
+            "overseerr": settings_manager.get("overseerr"),
+            "torrentio": settings_manager.get("torrentio"),
+            "realdebrid": settings_manager.get("realdebrid"),
+        },
+    }
diff --git a/backend/controllers/settings.py b/backend/controllers/settings.py
index 0c9e1016..ae1cd0e2 100644
--- a/backend/controllers/settings.py
+++ b/backend/controllers/settings.py
@@ -2,11 +2,12 @@
 from fastapi import APIRouter
 from utils.settings import settings_manager
 from pydantic import BaseModel
+from typing import Any
 
 
 class SetSettings(BaseModel):
     key: str
-    value: str
+    value: Any
 
 
 router = APIRouter(
@@ -34,6 +35,14 @@ async def save_settings():
     }
 
 
+@router.get('/get/all')
+async def get_all_settings():
+    return {
+        "success": True,
+        "data": copy(settings_manager.get_all()),
+    }
+
+
 @router.get("/get/{key}")
 async def get_settings(key: str):
     return {
diff --git a/entrypoint.sh b/entrypoint.sh
index 2112ec8e..fc7eb5ea 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -31,4 +31,4 @@ fi
 chown -R ${USERNAME}:${GROUPNAME} /iceberg
 
 echo "Container Initialization complete."
-exec su -m $USERNAME -c 'cd backend && source /venv/bin/activate && exec python /iceberg/backend/main.py & node /iceberg/frontend/build'
\ No newline at end of file
+exec su -m $USERNAME -c 'cd backend && source /venv/bin/activate && exec python /iceberg/backend/main.py & ORIGIN=http://localhost:3000 node /iceberg/frontend/build'
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 26251adb..c0657b15 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,9 +17,9 @@
 		"@sveltejs/adapter-node": "^2.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/luxon": "^3.3.7",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.0.0",
-		"@types/luxon": "^3.3.7",
 		"autoprefixer": "^10.4.14",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -30,7 +30,7 @@
 		"prettier-plugin-tailwindcss": "^0.5.9",
 		"svelte": "^4.2.8",
 		"svelte-check": "^3.6.0",
-		"tailwindcss": "^3.3.2",
+		"tailwindcss": "^3.4.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.0",
@@ -38,13 +38,15 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "^0.11.6",
+		"bits-ui": "^0.11.8",
 		"clsx": "^2.0.0",
 		"lucide-svelte": "^0.298.0",
 		"luxon": "^3.4.4",
 		"mode-watcher": "^0.1.2",
 		"svelte-sonner": "^0.3.6",
+		"sveltekit-superforms": "^1.13.0",
 		"tailwind-merge": "^2.1.0",
-		"tailwind-variants": "^0.1.18"
+		"tailwind-variants": "^0.1.18",
+		"zod": "^3.22.4"
 	}
 }
\ No newline at end of file
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 2061872a..d0b52271 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -6,7 +6,7 @@ settings:
 
 dependencies:
   bits-ui:
-    specifier: ^0.11.6
+    specifier: ^0.11.8
     version: 0.11.8(svelte@4.2.8)
   clsx:
     specifier: ^2.0.0
@@ -23,12 +23,18 @@ dependencies:
   svelte-sonner:
     specifier: ^0.3.6
     version: 0.3.6(svelte@4.2.8)
+  sveltekit-superforms:
+    specifier: ^1.13.0
+    version: 1.13.1(@sveltejs/kit@2.0.1)(svelte@4.2.8)(zod@3.22.4)
   tailwind-merge:
     specifier: ^2.1.0
     version: 2.1.0
   tailwind-variants:
     specifier: ^0.1.18
-    version: 0.1.19(tailwindcss@3.3.6)
+    version: 0.1.19(tailwindcss@3.4.0)
+  zod:
+    specifier: ^3.22.4
+    version: 3.22.4
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -83,8 +89,8 @@ devDependencies:
     specifier: ^3.6.0
     version: 3.6.2(postcss-load-config@4.0.2)(postcss@8.4.32)(svelte@4.2.8)
   tailwindcss:
-    specifier: ^3.3.2
-    version: 3.3.6
+    specifier: ^3.4.0
+    version: 3.4.0
   tslib:
     specifier: ^2.4.1
     version: 2.6.2
@@ -129,7 +135,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.19.9:
@@ -138,7 +143,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.19.9:
@@ -147,7 +151,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.19.9:
@@ -156,7 +159,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.19.9:
@@ -165,7 +167,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.19.9:
@@ -174,7 +175,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.19.9:
@@ -183,7 +183,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.19.9:
@@ -192,7 +191,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.19.9:
@@ -201,7 +199,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.19.9:
@@ -210,7 +207,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.19.9:
@@ -219,7 +215,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.19.9:
@@ -228,7 +223,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.19.9:
@@ -237,7 +231,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.19.9:
@@ -246,7 +239,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.19.9:
@@ -255,7 +247,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.19.9:
@@ -264,7 +255,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.19.9:
@@ -273,7 +263,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.19.9:
@@ -282,7 +271,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.19.9:
@@ -291,7 +279,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.19.9:
@@ -300,7 +287,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.19.9:
@@ -309,7 +295,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.19.9:
@@ -318,7 +303,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -467,7 +451,6 @@ packages:
 
   /@polka/url@1.0.0-next.24:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
-    dev: true
 
   /@rollup/plugin-commonjs@25.0.7(rollup@4.9.1):
     resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
@@ -538,7 +521,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.9.1:
@@ -546,7 +528,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.9.1:
@@ -554,7 +535,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.9.1:
@@ -562,7 +542,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.9.1:
@@ -570,7 +549,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.9.1:
@@ -578,7 +556,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.9.1:
@@ -586,7 +563,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.9.1:
@@ -594,7 +570,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.9.1:
@@ -602,7 +577,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.9.1:
@@ -610,7 +584,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.9.1:
@@ -618,7 +591,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.9.1:
@@ -626,7 +598,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.9.1:
@@ -634,7 +605,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@sinclair/typebox@0.27.8:
@@ -686,7 +656,6 @@ packages:
       svelte: 4.2.8
       tiny-glob: 0.2.9
       vite: 5.0.10
-    dev: true
 
   /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10):
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
@@ -702,7 +671,6 @@ packages:
       vite: 5.0.10
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@sveltejs/vite-plugin-svelte@3.0.1(svelte@4.2.8)(vite@5.0.10):
     resolution: {integrity: sha512-CGURX6Ps+TkOovK6xV+Y2rn8JKa8ZPUHPZ/NKgCxAmgBrXReavzFl8aOSCj3kQ1xqT7yGJj53hjcV/gqwDAaWA==}
@@ -722,7 +690,6 @@ packages:
       vitefu: 0.2.5(vite@5.0.10)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@swc/helpers@0.5.3:
     resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
@@ -732,7 +699,6 @@ packages:
 
   /@types/cookie@0.6.0:
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
-    dev: true
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
@@ -1180,7 +1146,6 @@ packages:
   /cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -1213,7 +1178,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /deep-eql@4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -1229,7 +1193,6 @@ packages:
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -1242,7 +1205,6 @@ packages:
 
   /devalue@4.3.2:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
-    dev: true
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@@ -1305,7 +1267,6 @@ packages:
       '@esbuild/win32-arm64': 0.19.9
       '@esbuild/win32-ia32': 0.19.9
       '@esbuild/win32-x64': 0.19.9
-    dev: true
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -1426,7 +1387,6 @@ packages:
 
   /esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
-    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -1631,7 +1591,6 @@ packages:
 
   /globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
-    dev: true
 
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -1647,7 +1606,6 @@ packages:
 
   /globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -1801,7 +1759,6 @@ packages:
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /known-css-properties@0.29.0:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
@@ -1958,16 +1915,13 @@ packages:
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
-    dev: true
 
   /mrmime@1.0.1:
     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
     engines: {node: '>=10'}
-    dev: true
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
@@ -2389,7 +2343,6 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.9.1
       '@rollup/rollup-win32-x64-msvc': 4.9.1
       fsevents: 2.3.3
-    dev: true
 
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -2401,7 +2354,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
-    dev: true
 
   /sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
@@ -2422,7 +2374,6 @@ packages:
 
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
-    dev: true
 
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -2452,7 +2403,6 @@ packages:
       '@polka/url': 1.0.0-next.24
       mrmime: 1.0.1
       totalist: 3.0.1
-    dev: true
 
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -2586,7 +2536,6 @@ packages:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
       svelte: 4.2.8
-    dev: true
 
   /svelte-preprocess@5.1.2(postcss-load-config@4.0.2)(postcss@8.4.32)(svelte@4.2.8)(typescript@5.3.3):
     resolution: {integrity: sha512-XF0aliMAcYnP4hLETvB6HRAMnaL09ASYT1Z2I1Gwu0nz6xbdg/dSgAEthtFZJA4AKrNhFDFdmUDO+H9d/6xg5g==}
@@ -2663,6 +2612,18 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /sveltekit-superforms@1.13.1(@sveltejs/kit@2.0.1)(svelte@4.2.8)(zod@3.22.4):
+    resolution: {integrity: sha512-aWHAV6t6+7g37IGFNLRtbRIoqfC3a56Hf4/tTUNFZfwO2mOQGfeMb49WWBLdZZTrFRPGngfNRUxQzeoO3GspnQ==}
+    peerDependencies:
+      '@sveltejs/kit': 1.x || 2.x
+      svelte: 3.x || 4.x
+      zod: 3.x
+    dependencies:
+      '@sveltejs/kit': 2.0.1(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
+      svelte: 4.2.8
+      zod: 3.22.4
+    dev: false
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: false
@@ -2677,18 +2638,18 @@ packages:
       '@babel/runtime': 7.23.6
     dev: false
 
-  /tailwind-variants@0.1.19(tailwindcss@3.3.6):
+  /tailwind-variants@0.1.19(tailwindcss@3.4.0):
     resolution: {integrity: sha512-D9Yf5WqsxodnCtjZt6KifEoKwW8rTURXQV03KRKlojITQM5gV1vPVWufWNiIvd/ptC3QybYFpwmHK9cs4Ei08Q==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}
     peerDependencies:
       tailwindcss: '*'
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.3.6
+      tailwindcss: 3.4.0
     dev: false
 
-  /tailwindcss@3.3.6:
-    resolution: {integrity: sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==}
+  /tailwindcss@3.4.0:
+    resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -2737,7 +2698,6 @@ packages:
     dependencies:
       globalyzer: 0.1.0
       globrex: 0.1.2
-    dev: true
 
   /tinybench@2.5.1:
     resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
@@ -2762,7 +2722,6 @@ packages:
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /ts-api-utils@1.0.3(typescript@5.3.3):
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
@@ -2880,7 +2839,6 @@ packages:
       rollup: 4.9.1
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vitefu@0.2.5(vite@5.0.10):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
@@ -2891,7 +2849,6 @@ packages:
         optional: true
     dependencies:
       vite: 5.0.10
-    dev: true
 
   /vitest@1.0.4:
     resolution: {integrity: sha512-s1GQHp/UOeWEo4+aXDOeFBJwFzL6mjycbQwwKWX2QcYfh/7tIerS59hWQ20mxzupTJluA2SdwiBuWwQHH67ckg==}
@@ -2991,3 +2948,7 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: false
diff --git a/frontend/src/lib/components/status-media-card.svelte b/frontend/src/lib/components/status-media-card.svelte
index 5f3fe3a2..251c037f 100644
--- a/frontend/src/lib/components/status-media-card.svelte
+++ b/frontend/src/lib/components/status-media-card.svelte
@@ -9,6 +9,9 @@
 	let fallback = 'https://via.placeholder.com/198x228.png?text=No+thumbnail';
 	let poster = `https://images.metahub.space/poster/small/${plexDebridItem.imdb_id}/img`;
 	let banner = `https://images.metahub.space/background/medium/${plexDebridItem.imdb_id}/img`;
+
+	// TODO: Use item ID to show more data
+	// TODO: Make use of type
 </script>
 
 <div
@@ -53,6 +56,10 @@
 				<p class="text-lg font-semibold">Requested</p>
 				<p>{formatDate(plexDebridItem.requested_at, 'long', true)}</p>
 			</div>
+			<div class="flex gap-2 items-center">
+				<p class="text-lg font-semibold">Requested by</p>
+				<p>{plexDebridItem.requested_by}</p>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ui/alert/alert-description.svelte b/frontend/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 00000000..42a9133a
--- /dev/null
+++ b/frontend/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/ui/alert/alert-title.svelte b/frontend/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 00000000..72d01389
--- /dev/null
+++ b/frontend/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 00000000..ef6b407c
--- /dev/null
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { alertVariants, type Variant } from ".";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div
+	class={cn(alertVariants({ variant }), className)}
+	{...$$restProps}
+	role="alert"
+>
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/ui/alert/index.ts b/frontend/src/lib/components/ui/alert/index.ts
new file mode 100644
index 00000000..cde7987b
--- /dev/null
+++ b/frontend/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};
diff --git a/frontend/src/lib/components/ui/radio-group/index.ts b/frontend/src/lib/components/ui/radio-group/index.ts
new file mode 100644
index 00000000..b39aed3d
--- /dev/null
+++ b/frontend/src/lib/components/ui/radio-group/index.ts
@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+const Input = RadioGroupPrimitive.Input;
+
+export {
+	Root,
+	Input,
+	Item,
+	//
+	Root as RadioGroup,
+	Input as RadioGroupInput,
+	Item as RadioGroupItem
+};
diff --git a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
new file mode 100644
index 00000000..7c11b65d
--- /dev/null
+++ b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { Circle } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = RadioGroupPrimitive.ItemProps;
+	type $$Events = RadioGroupPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<div class="flex items-center justify-center">
+		<RadioGroupPrimitive.ItemIndicator>
+			<Circle class="h-2.5 w-2.5 fill-current text-current" />
+		</RadioGroupPrimitive.ItemIndicator>
+	</div>
+</RadioGroupPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/radio-group/radio-group.svelte b/frontend/src/lib/components/ui/radio-group/radio-group.svelte
new file mode 100644
index 00000000..b9c17651
--- /dev/null
+++ b/frontend/src/lib/components/ui/radio-group/radio-group.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = RadioGroupPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:value
+	class={cn("grid gap-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</RadioGroupPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/select/index.ts b/frontend/src/lib/components/ui/select/index.ts
new file mode 100644
index 00000000..e8a54970
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator
+};
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 00000000..5c6cae5a
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { scale } from "svelte/transition";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 00000000..cbdd7fb6
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { Check } from "lucide-svelte";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot />
+</SelectPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/select/select-label.svelte b/frontend/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 00000000..2fd2be47
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 00000000..aa028c40
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/frontend/src/lib/components/ui/select/select-trigger.svelte b/frontend/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 00000000..b5149960
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { ChevronDown } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/switch/index.ts b/frontend/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..f0e5fb79
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..abc28424
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SwitchPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/textarea/index.ts b/frontend/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 00000000..eb0f7beb
--- /dev/null
+++ b/frontend/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,28 @@
+import Root from "./textarea.svelte";
+
+type FormTextareaEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLTextAreaElement;
+};
+
+type TextareaEvents = {
+	blur: FormTextareaEvent<FocusEvent>;
+	change: FormTextareaEvent<Event>;
+	click: FormTextareaEvent<MouseEvent>;
+	focus: FormTextareaEvent<FocusEvent>;
+	keydown: FormTextareaEvent<KeyboardEvent>;
+	keypress: FormTextareaEvent<KeyboardEvent>;
+	keyup: FormTextareaEvent<KeyboardEvent>;
+	mouseover: FormTextareaEvent<MouseEvent>;
+	mouseenter: FormTextareaEvent<MouseEvent>;
+	mouseleave: FormTextareaEvent<MouseEvent>;
+	paste: FormTextareaEvent<ClipboardEvent>;
+	input: FormTextareaEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Textarea,
+	type TextareaEvents,
+	type FormTextareaEvent
+};
diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 00000000..d8523ff9
--- /dev/null
+++ b/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLTextareaAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<textarea
+	class={cn(
+		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
diff --git a/frontend/src/lib/helpers.ts b/frontend/src/lib/helpers.ts
index 7b1bb4db..23136a69 100644
--- a/frontend/src/lib/helpers.ts
+++ b/frontend/src/lib/helpers.ts
@@ -69,3 +69,45 @@ export function convertPlexDebridItemsToObject(items: PlexDebridItem[]) {
 
 	return result;
 }
+
+export async function getSettings(fetch: any, toGet: string[]) {
+	const promises = toGet.map(async (item) => {
+		const res = await fetch(`http://127.0.0.1:8080/settings/get/${item}`);
+		if (res.ok) {
+			return await res.json();
+		}
+		return null;
+	});
+
+	const results = (await Promise.all(promises)).reduce((acc, item, index) => {
+		acc[toGet[index]] = item;
+		return acc;
+	}, {});
+
+	return results;
+}
+
+export async function setSettings(fetch: any, toSet: any) {
+	const promises = Object.keys(toSet).map(async (item) => {
+		const res = await fetch('http://127.0.0.1:8080/settings/set', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ key: item, value: toSet[item] })
+		});
+		if (res.ok) {
+			return await res.json();
+		}
+		return null;
+	});
+
+	const resp = await Promise.all(promises);
+
+	const saveSettings = await fetch('http://127.0.0.1:8080/settings/save', {
+		method: 'POST'
+	});
+	const loadSettings = await fetch('http://127.0.0.1:8080/settings/load');
+
+	return { resp, saveSettings, loadSettings };
+}
diff --git a/frontend/src/lib/schemas/setting.ts b/frontend/src/lib/schemas/setting.ts
new file mode 100644
index 00000000..4f79174c
--- /dev/null
+++ b/frontend/src/lib/schemas/setting.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const generalSettingsSchema = z.object({
+	host_mount: z.string().min(1),
+	container_mount: z.string().min(1),
+	realdebrid_api_key: z.string().min(1),
+	torrentio_filter: z.string().min(1)
+});
+
+export const plexSettingsSchema = z.object({
+	user: z.string().min(1),
+	token: z.string().min(1),
+	url: z.string().min(1),
+	watchlist: z.string().optional().default('')
+});
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index dbb249a8..6ef917e8 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -16,7 +16,9 @@ export interface UserResponse {
 }
 
 export interface PlexDebridItem {
+	item_id: number;
 	title: string;
+	type: string;
 	imdb_id: string;
 	state: string;
 	imdb_link: string;
@@ -24,6 +26,7 @@ export interface PlexDebridItem {
 	genres: string[];
 	guid: string;
 	requested_at: string;
+	requested_by: string;
 }
 
 export interface StatusInterface {
@@ -36,3 +39,37 @@ export interface StatusInterface {
 export interface StatusInfo {
 	[key: string]: StatusInterface;
 }
+
+export interface PlexService {
+	user: string;
+	token: string;
+	url: string;
+	watchlist?: string;
+}
+
+export interface MdblistService {
+	lists: string[];
+	api_key: string;
+	update_interval: number;
+}
+
+export interface OverseerrService {
+	url: string;
+	api_key: string;
+}
+
+export interface TorrentioService {
+	filter: string;
+}
+
+export interface RealdebridService {
+	api_key: string;
+}
+
+export interface IcebergServices {
+	plex: PlexService;
+	mdblist?: MdblistService;
+	overseerr?: OverseerrService;
+	torrentio?: TorrentioService;
+	realdebrid: RealdebridService;
+}
diff --git a/frontend/src/routes/+page.server.ts b/frontend/src/routes/+page.server.ts
index cdc2f3a8..5fbe21de 100644
--- a/frontend/src/routes/+page.server.ts
+++ b/frontend/src/routes/+page.server.ts
@@ -12,11 +12,25 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			error(400, `Unable to fetch user data: ${res.status} ${res.statusText}`);
 		} catch (e) {
 			console.error(e);
-			error(500, 'Unable to fetch user data. API is down.');
+			error(503, 'Unable to fetch user data. API is down.');
+		}
+	}
+
+	async function getServices() {
+		try {
+			const res = await fetch('http://127.0.0.1:8080/services');
+			if (res.ok) {
+				return await res.json();
+			}
+			error(400, `Unable to fetch services data: ${res.status} ${res.statusText}`);
+		} catch (e) {
+			console.error(e);
+			error(503, 'Unable to fetch services data. API is down.');
 		}
 	}
 
 	return {
-		user: await getUserData()
+		user: await getUserData(),
+		services: getServices()
 	};
 };
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d517c6b5..1d68b0b4 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,12 +1,48 @@
 <script lang="ts">
-	import { formatRDDate } from '$lib/helpers';
-	import type { UserResponse } from '$lib/types';
+	import type { PageData } from './$types';
+	import { formatRDDate, formatWords } from '$lib/helpers';
+	import type { UserResponse, IcebergServices } from '$lib/types';
+	import { Separator } from '$lib/components/ui/separator';
+	import { Loader2, Check, X } from 'lucide-svelte';
 
-	interface ExportedData {
-		user: UserResponse;
-	}
+	type ServiceResponse = {
+		success: boolean;
+		data: IcebergServices;
+	};
+
+	export let data: PageData;
+
+	function checkConfiguration(data: IcebergServices) {
+		const fieldsToCheck: { [key: string]: string } = {
+			plex: 'url',
+			mdblist: 'api_key',
+			overseerr: 'url',
+			realdebrid: 'api_key',
+			torrentio: 'filter'
+		};
+
+		const servicesStatus: { [key: string]: boolean } = {
+			plex: false,
+			mdblist: false,
+			overseerr: false,
+			realdebrid: false,
+			torrentio: false
+		};
 
-	export let data: ExportedData;
+		for (let key in fieldsToCheck) {
+			const serviceData = (data as any)[key];
+			if (
+				serviceData &&
+				(serviceData[fieldsToCheck[key]] === null || serviceData[fieldsToCheck[key]] === '')
+			) {
+				servicesStatus[key] = false;
+			} else {
+				servicesStatus[key] = true;
+			}
+		}
+
+		return servicesStatus as Record<string, boolean>;
+	}
 </script>
 
 <svelte:head>
@@ -19,4 +55,39 @@
 	<p class="md:text-lg text-muted-foreground break-words">
 		Premium expires on {formatRDDate(data.user?.expiration, 'short')}
 	</p>
+	<Separator class="my-4" />
+	<h2 class="text-xl md:text-2xl font-semibold">Services status</h2>
+	<p class="md:text-lg text-muted-foreground">These are the services that are currently running.</p>
+
+	{#await data.services}
+		<div class="flex gap-1 items-center mt-2">
+			<Loader2 class="w-4 h-4 animate-spin" />
+			<p class="md:text-lg text-muted-foreground">Fetching services status</p>
+		</div>
+	{:then services}
+		{@const servicesStatus = checkConfiguration(services.data)}
+		<div class="flex flex-col gap-2 items-start mt-2">
+			{#each Object.keys(servicesStatus) as serviceStatus}
+				<div class="flex gap-1 items-center">
+					{#if servicesStatus[serviceStatus]}
+						<div class="p-1 bg-green-500 rounded-full">
+							<Check class="w-4 h-4 text-white" />
+						</div>
+						<p class="md:text-lg text-muted-foreground">
+							<span class="font-semibold">{formatWords(serviceStatus)}</span> is configured
+						</p>
+					{:else}
+						<div class="p-1 bg-red-500 rounded-full">
+							<X class="w-4 h-4 text-white" />
+						</div>
+						<p class="md:text-lg text-muted-foreground">
+							<span class="font-semibold">{formatWords(serviceStatus)}</span> is not configured
+						</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{:catch}
+		<p class="md:text-lg text-muted-foreground">Failed to fetch services status</p>
+	{/await}
 </div>
diff --git a/frontend/src/routes/settings/+layout.svelte b/frontend/src/routes/settings/+layout.svelte
new file mode 100644
index 00000000..014a0cee
--- /dev/null
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator';
+	import * as Select from '$lib/components/ui/select';
+	import type { NavItem } from '$lib/types';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import clsx from 'clsx';
+
+	const settingsItems: NavItem[] = [
+		{
+			name: 'General',
+			path: '/settings/general'
+		},
+		{
+			name: 'Plex',
+			path: '/settings/plex'
+		},
+		{
+			name: 'Content',
+			path: '/settings/content'
+		},
+		{
+			name: 'About',
+			path: '/settings/about'
+		}
+	];
+</script>
+
+<svelte:head>
+	<title>Settings | General</title>
+</svelte:head>
+
+<div class="p-8 md:px-24 lg:px-32 flex flex-col">
+	<Select.Root
+		onSelectedChange={(selected) => {
+			goto(String(selected?.value));
+		}}
+		selected={{
+			value: $page.url.pathname,
+			label:
+				(settingsItems.find((item) => item.path === $page.url.pathname) || {}).name || 'Not found'
+		}}
+	>
+		<Select.Trigger class="text-base lg:hidden">
+			<Select.Value placeholder="Select settings type" />
+		</Select.Trigger>
+		<Select.Content>
+			{#each settingsItems as item}
+				<Select.Item value={item.path} label={item.name}>{item.name}</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+
+	<div
+		class="hidden lg:flex flex-wrap w-full bg-slate-200 dark:bg-slate-800 p-2 gap-2 rounded-md text-base"
+	>
+		{#each settingsItems as item}
+			<a
+				class={clsx('rounded-md p-2 px-4 transition-all duration-300', {
+					'bg-slate-100 dark:bg-slate-900 font-semibold': item.path === $page.url.pathname,
+					'hover:bg-slate-100 dark:hover:bg-slate-900 hover:font-semibold': item.path !== $page.url.pathname
+				})}
+				href={item.path}
+			>
+				{item.name}
+			</a>
+		{/each}
+	</div>
+
+	<Separator class="mb-4 mt-2" />
+
+	<slot />
+</div>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
deleted file mode 100644
index e48a4ac3..00000000
--- a/frontend/src/routes/settings/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import { Construction } from 'lucide-svelte';
-</script>
-
-<div class="flex flex-col p-8 md:px-24 lg:px-32">
-	<div class="flex flex-wrap gap-2 items-center">
-		<Construction class="w-12 h-12 text-white" />
-		<h1 class="text-xl md:text-2xl font-semibold">This page is under construction</h1>
-	</div>
-</div>
diff --git a/frontend/src/routes/settings/+page.ts b/frontend/src/routes/settings/+page.ts
new file mode 100644
index 00000000..bee3e946
--- /dev/null
+++ b/frontend/src/routes/settings/+page.ts
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({}) => {
+	redirect(302, '/settings/general');
+};
diff --git a/frontend/src/routes/settings/about/+page.server.ts b/frontend/src/routes/settings/about/+page.server.ts
new file mode 100644
index 00000000..b4db25a1
--- /dev/null
+++ b/frontend/src/routes/settings/about/+page.server.ts
@@ -0,0 +1,20 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { getSettings } from '$lib/helpers';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	async function getAboutInfo() {
+		try {
+			const toGet = ['version', 'host_mount', 'container_mount'];
+			const results = await getSettings(fetch, toGet);
+			return results;
+		} catch (e) {
+			console.error(e);
+			error(503, 'Unable to fetch settings data. API is down.');
+		}
+	}
+
+	return {
+		settings: await getAboutInfo()
+	};
+};
diff --git a/frontend/src/routes/settings/about/+page.svelte b/frontend/src/routes/settings/about/+page.svelte
new file mode 100644
index 00000000..b9bfc799
--- /dev/null
+++ b/frontend/src/routes/settings/about/+page.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { Separator } from '$lib/components/ui/separator';
+	import { formatWords } from '$lib/helpers';
+	import * as Alert from '$lib/components/ui/alert';
+
+	export let data: PageData;
+
+	const supportData = {
+		github: 'https://github.com/dreulavelle/iceberg',
+		discord: 'To be announced'
+	};
+</script>
+
+<svelte:head>
+	<title>Settings | About</title>
+</svelte:head>
+
+<div class="flex flex-col gap-2">
+	<Alert.Root class="text-lg">
+		<Alert.Title>Heads up!</Alert.Title>
+		<Alert.Description class="text-base"
+			>Iceberg is in rapid development. Expect bugs.</Alert.Description
+		>
+	</Alert.Root>
+
+	<h1 class="text-2xl md:text-3xl font-semibold mb-2">About Iceberg</h1>
+
+	<div class="flex flex-col gap-4 w-full">
+		{#each Object.keys(data.settings) as key}
+			<Separator />
+			<div class="flex flex-col md:flex-row items-start md:items-center mb-2">
+				<h3 class="text-lg md:text-xl font-semibold w-[12rem] min-w-[12rem] text-muted-foreground">
+					{formatWords(key)}
+				</h3>
+				<div class="flex w-full">
+					<p class="text-base md:text-lg break-words p-2 rounded-md bg-slate-100 dark:bg-slate-900">
+						{data.settings[key].data}
+					</p>
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	<h1 class="text-2xl md:text-3xl font-semibold mt-4 mb-2">Support</h1>
+
+	<div class="flex flex-col gap-4 w-full">
+		<Separator />
+		<div class="flex flex-col md:flex-row items-start md:items-center mb-2">
+			<h3 class="text-lg md:text-xl font-semibold w-[12rem] min-w-[12rem] text-muted-foreground">
+				GitHub
+			</h3>
+			<div class="flex w-full">
+				<a
+					href="https://github.com/dreulavelle/iceberg"
+					class="text-base md:text-lg break-words underline"
+				>
+					https://github.com/dreulavelle/iceberg
+				</a>
+			</div>
+		</div>
+
+		<Separator />
+		<div class="flex flex-col md:flex-row items-start md:items-center mb-2">
+			<h3 class="text-lg md:text-xl font-semibold w-[12rem] min-w-[12rem] text-muted-foreground">
+				Discord
+			</h3>
+			<div class="flex w-full">
+				<a href="https://discord.gg/wDgVdH8vNM" class="text-base md:text-lg break-words underline">
+					https://discord.gg/wDgVdH8vNM
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/settings/content/+page.server.ts b/frontend/src/routes/settings/content/+page.server.ts
new file mode 100644
index 00000000..c184c251
--- /dev/null
+++ b/frontend/src/routes/settings/content/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load = (async () => {
+    return {};
+}) satisfies PageServerLoad;
\ No newline at end of file
diff --git a/frontend/src/routes/settings/content/+page.svelte b/frontend/src/routes/settings/content/+page.svelte
new file mode 100644
index 00000000..079429a2
--- /dev/null
+++ b/frontend/src/routes/settings/content/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<p>Under Construction</p>
\ No newline at end of file
diff --git a/frontend/src/routes/settings/general/+page.server.ts b/frontend/src/routes/settings/general/+page.server.ts
new file mode 100644
index 00000000..8571b585
--- /dev/null
+++ b/frontend/src/routes/settings/general/+page.server.ts
@@ -0,0 +1,64 @@
+import type { PageServerLoad, Actions } from './$types';
+import { fail, error } from '@sveltejs/kit';
+import { message, superValidate } from 'sveltekit-superforms/server';
+import { generalSettingsSchema } from '$lib/schemas/setting';
+import { getSettings, setSettings } from '$lib/helpers';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	async function getPartialSettings() {
+		try {
+			const toGet = ['version', 'host_mount', 'container_mount', 'realdebrid', 'torrentio'];
+			const results = await getSettings(fetch, toGet);
+			return results;
+		} catch (e) {
+			console.error(e);
+			error(503, 'Unable to fetch settings data. API is down.');
+		}
+	}
+
+	let toPassToSchema: any = await getPartialSettings();
+	toPassToSchema = {
+		host_mount: toPassToSchema.host_mount.data,
+		container_mount: toPassToSchema.container_mount.data,
+		realdebrid_api_key: toPassToSchema.realdebrid.data.api_key,
+		torrentio_filter: toPassToSchema.torrentio.data.filter
+	};
+
+	const form = await superValidate(toPassToSchema, generalSettingsSchema);
+
+	return { form };
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, generalSettingsSchema);
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		console.log(form);
+
+		const toSet = {
+			host_mount: form.data.host_mount,
+			container_mount: form.data.container_mount,
+			realdebrid: {
+				api_key: form.data.realdebrid_api_key
+			},
+			torrentio: {
+				filter: form.data.torrentio_filter
+			}
+		};
+
+		try {
+			const data = await setSettings(event.fetch, toSet);
+		} catch (e) {
+			console.error(e);
+			return message(form, 'Unable to save settings. API is down.', {
+				status: 400
+			});
+		}
+
+		return message(form, 'Settings saved!');
+	}
+};
diff --git a/frontend/src/routes/settings/general/+page.svelte b/frontend/src/routes/settings/general/+page.svelte
new file mode 100644
index 00000000..347be748
--- /dev/null
+++ b/frontend/src/routes/settings/general/+page.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { superForm } from 'sveltekit-superforms/client';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import { toast } from 'svelte-sonner';
+	import { Loader2 } from 'lucide-svelte';
+	import { page } from '$app/stores';
+
+	export let data: PageData;
+	const { form, errors, message, enhance, constraints, delayed } = superForm(data.form);
+
+	$: if ($message && $page.status === 200) {
+		toast.success($message);
+	} else if ($message) {
+		toast.error($message);
+	}
+</script>
+
+<div class="flex flex-col">
+	<h2 class="text-2xl md:text-3xl font-semibold">General Settings</h2>
+	<p class="text-base md:text-lg text-muted-foreground">
+		Configure global and default settings for Iceberg.
+	</p>
+
+	<form method="POST" class="flex flex-col my-4 gap-4" use:enhance>
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="host_mount">Host Mount</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="host_mount"
+				name="host_mount"
+				bind:value={$form.host_mount}
+				{...$constraints.host_mount}
+			/>
+		</div>
+		{#if $errors.host_mount}
+			<small class="text-sm md:text-base text-red-500">{$errors.host_mount}</small>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="container_mount">Container Mount</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="container_mount"
+				name="container_mount"
+				bind:value={$form.container_mount}
+				{...$constraints.container_mount}
+			/>
+		</div>
+		{#if $errors.container_mount}
+			<p class="text-sm md:text-base text-red-500">{$errors.container_mount}</p>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="realdebrid_api_key">RealDebrid API Key</Label
+			>
+			<Input
+				class="blur-sm hover:blur-none focus:blur-none transition-all duration-300 text-sm md:text-base"
+				type="text"
+				id="realdebrid_api_key"
+				name="realdebrid_api_key"
+				bind:value={$form.realdebrid_api_key}
+				{...$constraints.realdebrid_api_key}
+			/>
+		</div>
+		{#if $errors.realdebrid_api_key}
+			<p class="text-sm md:text-base text-red-500">{$errors.realdebrid_api_key}</p>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="torrentio_filter">Torrentio Filter</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="torrentio_filter"
+				name="torrentio_filter"
+				bind:value={$form.torrentio_filter}
+				{...$constraints.torrentio_filter}
+			/>
+		</div>
+		{#if $errors.torrentio_filter}
+			<p class="text-sm md:text-base text-red-500">{$errors.torrentio_filter}</p>
+		{/if}
+
+		<Separator class=" mt-4" />
+		<div class="flex w-full justify-end">
+			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+				{#if $delayed}
+					<Loader2 class="w-4 h-4 animate-spin mr-2" />
+				{/if}
+				Save changes
+			</Button>
+		</div>
+	</form>
+</div>
diff --git a/frontend/src/routes/settings/plex/+page.server.ts b/frontend/src/routes/settings/plex/+page.server.ts
new file mode 100644
index 00000000..c73e8f15
--- /dev/null
+++ b/frontend/src/routes/settings/plex/+page.server.ts
@@ -0,0 +1,62 @@
+import type { PageServerLoad, Actions } from './$types';
+import { fail, error } from '@sveltejs/kit';
+import { message, superValidate } from 'sveltekit-superforms/server';
+import { plexSettingsSchema } from '$lib/schemas/setting';
+import { getSettings, setSettings } from '$lib/helpers';
+
+export const load = (async ({ fetch }) => {
+	async function getPartialSettings() {
+		try {
+			const toGet = ['plex'];
+			const results = await getSettings(fetch, toGet);
+			return results;
+		} catch (e) {
+			console.error(e);
+			error(503, 'Unable to fetch settings data. API is down.');
+		}
+	}
+
+	let toPassToSchema: any = await getPartialSettings();
+	toPassToSchema = {
+		user: toPassToSchema.plex.data.user,
+		token: toPassToSchema.plex.data.token,
+		url: toPassToSchema.plex.data.url,
+		watchlist: toPassToSchema.plex.data.watchlist
+	};
+
+	const form = await superValidate(toPassToSchema, plexSettingsSchema);
+
+	return { form };
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	default: async (event) => {
+		const form = await superValidate(event, plexSettingsSchema);
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		console.log(form);
+
+		const toSet = {
+			plex: {
+				user: form.data.user,
+				token: form.data.token,
+				url: form.data.url,
+				watchlist: form.data.watchlist
+			}
+		};
+
+		try {
+			const data = await setSettings(event.fetch, toSet);
+		} catch (e) {
+			console.error(e);
+			return message(form, 'Unable to save settings. API is down.', {
+				status: 400
+			});
+		}
+
+		return message(form, 'Settings saved!');
+	}
+};
diff --git a/frontend/src/routes/settings/plex/+page.svelte b/frontend/src/routes/settings/plex/+page.svelte
new file mode 100644
index 00000000..8f5bac3d
--- /dev/null
+++ b/frontend/src/routes/settings/plex/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { superForm } from 'sveltekit-superforms/client';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import { toast } from 'svelte-sonner';
+	import { Loader2 } from 'lucide-svelte';
+	import { page } from '$app/stores';
+
+	export let data: PageData;
+	const { form, errors, message, enhance, constraints, delayed } = superForm(data.form);
+
+	$: if ($message && $page.status === 200) {
+		toast.success($message);
+	} else if ($message) {
+		toast.error($message);
+	}
+</script>
+
+<div class="flex flex-col">
+	<h2 class="text-2xl md:text-3xl font-semibold">Plex Settings</h2>
+	<p class="text-base md:text-lg text-muted-foreground">Configure settings for Plex.</p>
+
+	<form method="POST" class="flex flex-col my-4 gap-4" use:enhance>
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="user">User</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="user"
+				name="user"
+				bind:value={$form.user}
+				{...$constraints.user}
+			/>
+		</div>
+		{#if $errors.user}
+			<small class="text-sm md:text-base text-red-500">{$errors.user}</small>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="token">Token</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="token"
+				name="token"
+				bind:value={$form.token}
+				{...$constraints.token}
+			/>
+		</div>
+		{#if $errors.token}
+			<small class="text-sm md:text-base text-red-500">{$errors.token}</small>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="url">Server URL</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="url"
+				name="url"
+				bind:value={$form.url}
+				{...$constraints.url}
+			/>
+		</div>
+		{#if $errors.url}
+			<small class="text-sm md:text-base text-red-500">{$errors.url}</small>
+		{/if}
+
+		<div class="flex flex-col md:flex-row items-start md:items-center max-w-6xl">
+			<Label
+				class="text-base md:text-lg font-semibold w-48 min-w-48 text-muted-foreground"
+				for="watchlist">Watchlist</Label
+			>
+			<Input
+				class="text-sm md:text-base"
+				type="text"
+				id="watchlist"
+				name="watchlist"
+				bind:value={$form.watchlist}
+				{...$constraints.watchlist}
+			/>
+		</div>
+		{#if $errors.watchlist}
+			<small class="text-sm md:text-base text-red-500">{$errors.watchlist}</small>
+		{/if}
+
+		<Separator class=" mt-4" />
+		<div class="flex w-full justify-end">
+			<Button disabled={$delayed} type="submit" size="sm" class="w-full md:max-w-max">
+				{#if $delayed}
+					<Loader2 class="w-4 h-4 animate-spin mr-2" />
+				{/if}
+				Save changes
+			</Button>
+		</div>
+	</form>
+</div>
diff --git a/frontend/src/routes/status/+page.server.ts b/frontend/src/routes/status/+page.server.ts
index c8d71a26..cbd96084 100644
--- a/frontend/src/routes/status/+page.server.ts
+++ b/frontend/src/routes/status/+page.server.ts
@@ -1,7 +1,9 @@
 import type { PageServerLoad } from './$types';
 import { error } from '@sveltejs/kit';
 
-export const load: PageServerLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch, depends }) => {
+	depends('api:states');
+
 	async function getStates() {
 		try {
 			const res = await fetch('http://127.0.0.1:8080/items/states');
@@ -11,7 +13,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			error(400, `Unable to fetch states data: ${res.status} ${res.statusText}`);
 		} catch (e) {
 			console.error(e);
-			error(500, 'Unable to fetch states data. API is down.');
+			error(503, 'Unable to fetch states data. API is down.');
 		}
 	}
 
@@ -24,12 +26,12 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			error(400, `Unable to fetch items data: ${res.status} ${res.statusText}`);
 		} catch (e) {
 			console.error(e);
-			error(500, 'Unable to fetch items data. API is down.');
+			error(503, 'Unable to fetch items data. API is down.');
 		}
 	}
 
 	return {
-		items: getItems(),
-		states: await getStates()
+		states: await getStates(),
+		items: getItems()
 	};
 };
diff --git a/frontend/src/routes/status/+page.svelte b/frontend/src/routes/status/+page.svelte
index 60121752..98b99e2e 100644
--- a/frontend/src/routes/status/+page.svelte
+++ b/frontend/src/routes/status/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+	import type { PageData } from './$types';
 	import { convertPlexDebridItemsToObject, formatWords } from '$lib/helpers';
-	import { invalidateAll } from '$app/navigation';
+	import { invalidateAll, invalidate } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import * as Accordion from '$lib/components/ui/accordion';
@@ -8,15 +9,14 @@
 	import StatusMediaCard from '$lib/components/status-media-card.svelte';
 	import { toast } from 'svelte-sonner';
 	import type { StatusInfo } from '$lib/types';
-	import { onMount } from 'svelte';
 
-	export let data;
+	export let data: PageData;
 
 	let reloadButtonLoading = false;
 
 	async function reloadData(message: string = 'Refreshed data') {
 		reloadButtonLoading = true;
-		await invalidateAll();
+		await invalidate('api:states');
 		reloadButtonLoading = false;
 		toast.success(message);
 	}
@@ -60,13 +60,6 @@
 			description: 'Item is in your library and is ongoing'
 		}
 	};
-
-	// every 5s reload data
-	onMount(async () => {
-		setInterval(async () => {
-			await reloadData('Automatically refreshed data');
-		}, 60000);
-	});
 </script>
 
 <svelte:head>
diff --git a/makefile b/makefile
index 03a4ecce..87d5fd8d 100644
--- a/makefile
+++ b/makefile
@@ -25,7 +25,7 @@ help:
 
 start: stop
 	@docker build -t iceberg:latest -f Dockerfile .
-	@docker run -d --name iceberg --hostname iceberg -p 3000:3000 -p 8080:8080 -e PUID=1000 -e PGID=1000 -v $(DATA_PATH):/iceberg/data iceberg:latest
+	@docker run -d --name iceberg --hostname iceberg --net host -e PUID=1000 -e PGID=1000 -v $(DATA_PATH):/iceberg/data -v /mnt:/mnt iceberg:latest
 	@echo Iceberg Frontend is running on http://localhost:3000/status/
 	@echo Iceberg Backend is running on http://localhost:8080/items/
 	@docker logs iceberg -f