diff --git a/src/css/injected.scss b/src/css/injected.scss
index 680312f9..5a8519ef 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -257,7 +257,16 @@ ul.magicDelete > li.deleting {
   background: transparent !important;
   color: var(--text-color) !important;
 }
+#media-container {
+  width: 100%;
+  height: 100%;
+}
 
+#media-container video, #media-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 #menu li,
 #menu section {
   margin: 8px auto !important;
diff --git a/src/seqta/ui/AddBetterSEQTAElements.ts b/src/seqta/ui/AddBetterSEQTAElements.ts
index c09637a3..fe3c0476 100644
--- a/src/seqta/ui/AddBetterSEQTAElements.ts
+++ b/src/seqta/ui/AddBetterSEQTAElements.ts
@@ -17,7 +17,7 @@ export async function AddBetterSEQTAElements() {
     handleStudentData();
     createNewsButton();
     setupEventListeners();
-    appendBackgroundToUI();
+    await appendBackgroundToUI();
     await addDarkLightToggle();
     customizeMenuToggle();
   }
diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts
index 69502146..bd58384b 100644
--- a/src/seqta/ui/ImageBackgrounds.ts
+++ b/src/seqta/ui/ImageBackgrounds.ts
@@ -2,14 +2,6 @@ import { getDataById, isIndexedDBSupported } from '@/svelte-interface/hooks/Back
 
 export async function appendBackgroundToUI() {
   const parent = document.getElementById('container');
-
-  // embed background.html - old method
-  /* const background = document.createElement('iframe');
-  background.id = 'background';
-  background.classList.add('imageBackground');
-  background.setAttribute('excludeDarkCheck', 'true');
-  background.src = browser.runtime.getURL('seqta/ui/background/background.html');
-  parent!.appendChild(background); */
   if (!parent) return;
 
   const backgroundContainer = document.createElement('div');
@@ -21,25 +13,8 @@ export async function appendBackgroundToUI() {
   backgroundContainer.appendChild(mediaContainer);
 
   parent.appendChild(backgroundContainer);
-
-  // Add styles
-  const style = document.createElement('style');
-  style.textContent = `
-    #media-container {
-      width: 100%;
-      height: 100%;
-    }
-
-    #media-container video, #media-container img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  `;
-  document.head.appendChild(style);
-
-  // Load and display the background
   await loadBackground();
+  return;
 }
 
 export async function loadBackground() {
diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 25110548..0544871e 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -104,7 +104,7 @@
       transition={springTransition}
     >
       <button
-        class="w-full px-4 py-2 mb-4 text-[13px] text-white transition rounded-xl bg-zinc-700/50"
+        class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
         onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
       >
         {#if isFormVisible}
diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte
index 93d5fcba..149c5924 100644
--- a/src/svelte-interface/pages/settings/theme.svelte
+++ b/src/svelte-interface/pages/settings/theme.svelte
@@ -13,8 +13,8 @@
 <div class="py-4">
   <button
     onclick={() => selectNoBackground()}
-    class="w-full px-4 py-2 mb-4 text-[13px] text-white transition rounded-xl bg-zinc-700/50">
-    { clearTheme ? 'Clear Theme' : 'Select Theme' }
+    class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50">
+    { clearTheme ? 'Clear Theme' : 'Select a Theme' }
   </button>
   <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
   <ThemeSelector isEditMode={editMode} />