diff --git a/public/images/background.png b/public/images/background.png
deleted file mode 100644
index 341ffad..0000000
Binary files a/public/images/background.png and /dev/null differ
diff --git a/public/music/Moog City 2.opus b/public/music/Moog City 2 .opus
similarity index 100%
rename from public/music/Moog City 2.opus
rename to public/music/Moog City 2 .opus
diff --git a/src/components/modals/CustomTUModal.tsx b/src/components/modals/CustomTUModal.tsx
index 3755f0d..271c6f0 100644
--- a/src/components/modals/CustomTUModal.tsx
+++ b/src/components/modals/CustomTUModal.tsx
@@ -130,13 +130,7 @@ export default function CustomTUModal({
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 outline-none border-none">
       <div
-        className="relative w-[400px] p-6 flex flex-col items-center"
-        style={{
-          backgroundImage: "url('/images/background.png')",
-          backgroundSize: "100% 100%",
-          backgroundRepeat: "no-repeat",
-          imageRendering: "pixelated",
-        }}
+        className="relative w-[400px] p-6 flex flex-col items-center mc-options-bg"
       >
         <h2 className="text-xl text-black mc-text-shadow mb-4 text-center">
           {editingEdition ? "Edit Custom TU" : "Import Custom TU"}
diff --git a/src/components/views/LceLiveView.tsx b/src/components/views/LceLiveView.tsx
index efc971d..bc0d8b5 100644
--- a/src/components/views/LceLiveView.tsx
+++ b/src/components/views/LceLiveView.tsx
@@ -767,14 +767,7 @@ const LceLiveView = memo(function LceLiveView() {
             {tabs.map((t) => (
               <button
                 key={t}
-                className={`flex-1 font-bold text-xl outline-none uppercase transition-all duration-200 ease-in-out ${currentTab === t ? "text-[#2a2a2a] z-20 pb-6 pt-5 text-2xl drop-shadow-[5px_-5px_15px_rgba(0,0,0,0.3)] rounded-t border-4 border-[#222] border-b-0" : "text-[#555] mt-2 py-4 hover:bg-black/30 bg-black/10 hover:text-[#222] border-4 border-transparent border-b-0"}`}
-                style={{
-                  backgroundImage: "url('/images/background.png')",
-                  backgroundSize: "100% 100%",
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "bottom",
-                  imageRendering: "pixelated",
-                }}
+                className={`flex-1 font-bold text-xl outline-none uppercase transition-all duration-200 ease-in-out mc-lce-tab-bg ${currentTab === t ? "active" : ""}`}
                 onClick={() => {
                   setCurrentTab(t);
                   setFocusIndex(0);
diff --git a/src/components/views/SetupView.tsx b/src/components/views/SetupView.tsx
index 523803c..36fb17c 100644
--- a/src/components/views/SetupView.tsx
+++ b/src/components/views/SetupView.tsx
@@ -245,12 +245,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 0 && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-sm tracking-widest text-center uppercase">
                         Let's configure your launcher
@@ -278,12 +273,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && isMac && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         {runtimeAlreadyInstalled
@@ -342,12 +332,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && isLinux && (
                     <div
-                      className="p-5 flex flex-col gap-3"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-3 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Choose your preferred compatibility layer
@@ -382,12 +367,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && !isMac && !isLinux && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Everything is ready to go!
@@ -404,12 +384,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 2 && (
                     <div
-                      className="p-5 flex flex-col gap-2"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-2 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase mb-2">
                         Choose your preferred launcher settings
@@ -474,12 +449,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 3 && (
                     <div
-                      className="p-5 flex flex-col gap-3"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-3 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Emerald Launcher is now configured and ready to use!
diff --git a/src/components/views/VersionsView.tsx b/src/components/views/VersionsView.tsx
index d9d515a..13db997 100644
--- a/src/components/views/VersionsView.tsx
+++ b/src/components/views/VersionsView.tsx
@@ -262,13 +262,7 @@ const VersionsView = memo(function VersionsView() {
       </h2>
 
       <div
-        className="w-full min-w-[480px] p-6 mb-4"
-        style={{
-          backgroundImage: "url('/images/background.png')",
-          backgroundSize: "100% 100%",
-          backgroundRepeat: "no-repeat",
-          imageRendering: "pixelated",
-        }}
+        className="w-full min-w-[480px] p-6 mb-4 mc-options-bg"
       >
         <div
           ref={listRef}