diff --git a/src/components/theme.tsx b/src/components/theme.tsx
index 2091f9c..b2c549f 100644
--- a/src/components/theme.tsx
+++ b/src/components/theme.tsx
@@ -8,7 +8,7 @@ export const themeEvent = () => {
 
 export const ThemeSelection = () => {
   const [theme, setTheme] = createSignal(
-    localStorage.getItem("theme") === null ? "system"
+    localStorage.getItem("theme") === null ? "auto"
     : localStorage.theme === "dark" ? "dark"
     : "light",
   );
@@ -18,17 +18,17 @@ export const ThemeSelection = () => {
     document.documentElement.classList.toggle(
       "dark",
       newTheme === "dark" ||
-        (newTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches),
+        (newTheme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches),
     );
-    if (newTheme === "system") localStorage.removeItem("theme");
+    if (newTheme === "auto") localStorage.removeItem("theme");
     else localStorage.theme = newTheme;
   };
 
-  const ThemeOption = (props: { theme: string; icon: string; label: string }) => {
+  const ThemeOption = (props: { theme: string; label: string }) => {
     return (
       <button
         classList={{
-          "flex items-center gap-2 rounded-xl border px-3 py-2": true,
+          "flex items-center min-w-21 justify-center rounded-xl border px-3 py-2": true,
           "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":
             theme() === props.theme,
           "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800":
@@ -36,19 +36,18 @@ export const ThemeSelection = () => {
         }}
         onclick={() => updateTheme(props.theme)}
       >
-        <span class={"iconify " + props.icon}></span>
-        <span>{props.label}</span>
+        {props.label}
       </button>
     );
   };
 
   return (
-    <div class="flex flex-col gap-0.5">
+    <div class="flex flex-col gap-1">
       <label class="select-none">Theme</label>
       <div class="flex gap-2">
-        <ThemeOption theme="system" icon="lucide--monitor" label="System" />
-        <ThemeOption theme="light" icon="lucide--sun" label="Light" />
-        <ThemeOption theme="dark" icon="lucide--moon" label="Dark" />
+        <ThemeOption theme="auto" label="Auto" />
+        <ThemeOption theme="light" label="Light" />
+        <ThemeOption theme="dark" label="Dark" />
       </div>
     </div>
   );
diff --git a/src/views/settings.tsx b/src/views/settings.tsx
index 1ff9d81..a97e578 100644
--- a/src/views/settings.tsx
+++ b/src/views/settings.tsx
@@ -6,12 +6,10 @@ export const [hideMedia, setHideMedia] = createSignal(localStorage.hideMedia ===
 
 const Settings = () => {
   return (
-    <div class="flex w-full flex-col gap-3 px-2">
-      <div class="flex items-center gap-1 font-semibold">
-        <span>Settings</span>
-      </div>
+    <div class="flex w-full flex-col gap-2 px-2">
+      <div class="text-lg font-semibold">Settings</div>
       <div class="flex flex-col gap-3">
-        <div class="flex flex-col gap-0.5">
+        <div class="flex flex-col gap-1">
           <label for="plcDirectory" class="select-none">
             PLC Directory
           </label>
@@ -26,20 +24,39 @@ const Settings = () => {
           />
         </div>
         <ThemeSelection />
-        <div class="flex justify-between">
-          <div class="flex items-center gap-1">
-            <input
-              id="disableMedia"
-              type="checkbox"
-              checked={localStorage.hideMedia === "true"}
-              onChange={(e) => {
-                localStorage.hideMedia = e.currentTarget.checked;
-                setHideMedia(e.currentTarget.checked);
+        <div class="flex flex-col gap-1">
+          <label class="select-none">Blob media preview</label>
+          <div class="flex gap-2">
+            <button
+              classList={{
+                "flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
+                "border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
+                  !hideMedia(),
+                "border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
+                  hideMedia(),
+              }}
+              onClick={() => {
+                localStorage.hideMedia = "false";
+                setHideMedia(false);
+              }}
+            >
+              Show
+            </button>
+            <button
+              classList={{
+                "flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
+                "border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
+                  hideMedia(),
+                "border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
+                  !hideMedia(),
+              }}
+              onClick={() => {
+                localStorage.hideMedia = "true";
+                setHideMedia(true);
               }}
-            />
-            <label for="disableMedia" class="select-none">
-              Hide media embeds
-            </label>
+            >
+              Hide
+            </button>
           </div>
         </div>
       </div>