diff --git a/public/images/Button_Background.png b/public/images/Button_Background.png
index 28a3269..333eecd 100644
Binary files a/public/images/Button_Background.png and b/public/images/Button_Background.png differ
diff --git a/public/images/Layout_Button_Bmp.png b/public/images/Layout_Button_Bmp.png
new file mode 100644
index 0000000..27fa8c4
Binary files /dev/null and b/public/images/Layout_Button_Bmp.png differ
diff --git a/public/images/Layout_Button_Over.png b/public/images/Layout_Button_Over.png
new file mode 100644
index 0000000..d4fc594
Binary files /dev/null and b/public/images/Layout_Button_Over.png differ
diff --git a/public/images/button_highlighted.png b/public/images/button_highlighted.png
index af20c13..ca98e16 100644
Binary files a/public/images/button_highlighted.png and b/public/images/button_highlighted.png differ
diff --git a/src/components/views/ArcEditorView.tsx b/src/components/views/ArcEditorView.tsx
index 4a92027..9bf6ce9 100644
--- a/src/components/views/ArcEditorView.tsx
+++ b/src/components/views/ArcEditorView.tsx
@@ -58,7 +58,7 @@ export const ArcEditorView: React.FC = () => {
       parsed.name = path.split(/[\/\\]/).pop() || "archive.arc";
       setArc(parsed);
       setOpenedPath(path);
-      
+
       const locEntry = parsed.entries.find(entry => entry.filename.toLowerCase() === "languages.loc");
       if (locEntry) {
         try {
@@ -92,7 +92,7 @@ export const ArcEditorView: React.FC = () => {
       if (!targetPath) {
         targetPath = await TauriService.saveFileDialog(t("arcEditor.saveArcDialog"), arc.name || "archive.arc", ["arc"]);
       }
-      
+
       if (targetPath) {
         await TauriService.writeBinaryFile(targetPath, data);
         setOpenedPath(targetPath);
@@ -302,7 +302,7 @@ export const ArcEditorView: React.FC = () => {
       if (!baseFolder) return;
       playPressSound();
       showNotification(t("arcEditor.exportingAll"));
-      
+
       for (const entry of arc.entries) {
         const fileName = entry.filename.replace(/\//g, "_");
         await TauriService.writeBinaryFile(`${baseFolder}/${fileName}`, entry.data);
@@ -331,7 +331,7 @@ export const ArcEditorView: React.FC = () => {
           <button
             onClick={handleFileLoad}
             className="px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none"
-            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+            style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
           >
             {t("arcEditor.openArc")}
           </button>
@@ -339,7 +339,7 @@ export const ArcEditorView: React.FC = () => {
             onClick={handleExportAll}
             disabled={!arc || arc.entries.length === 0}
             className={`px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none ${(!arc || arc.entries.length === 0) ? "opacity-50 grayscale" : ""}`}
-            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+            style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
           >
             {t("arcEditor.exportAll")}
           </button>
@@ -347,7 +347,7 @@ export const ArcEditorView: React.FC = () => {
             onClick={handleSaveArc}
             disabled={!arc}
             className={`px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none ${!arc ? "opacity-50 grayscale" : ""}`}
-            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+            style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
           >
             {t("arcEditor.saveArc")}
           </button>
@@ -397,7 +397,7 @@ export const ArcEditorView: React.FC = () => {
                     <button
                       onClick={() => setIsAddModalOpen(true)}
                       className="px-6 py-2 text-white mc-text-shadow text-sm"
-                      style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                      style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                     >
                       {t("arcEditor.addEntry")}
                     </button>
@@ -428,21 +428,21 @@ export const ArcEditorView: React.FC = () => {
                         <button
                           onClick={() => handleExtractEntry(selectedEntry)}
                           className="w-full py-2 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55]"
-                          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                         >
                           {t("arcEditor.exportFile")}
                         </button>
                         <button
                           onClick={() => setIsReplaceModalOpen(true)}
                           className="w-full py-2 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55]"
-                          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                         >
                           {t("arcEditor.replaceData")}
                         </button>
                         <button
                           onClick={() => setIsRenameModalOpen(true)}
                           className="w-full py-2 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55]"
-                          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                         >
                           {t("arcEditor.renamePath")}
                         </button>
@@ -489,7 +489,7 @@ export const ArcEditorView: React.FC = () => {
                         showNotification(t("arcEditor.createdNewLocaleStructure"));
                       }}
                       className="px-6 py-2 text-white mc-text-shadow text-lg"
-                      style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                      style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                     >
                       {t("arcEditor.createLoc")}
                     </button>
@@ -516,14 +516,14 @@ export const ArcEditorView: React.FC = () => {
                       <button
                         onClick={() => setIsLocEditModalOpen({ langIdx: selectedLocLangIdx, strIdx: -1, isNew: true })}
                         className="px-6 py-2 text-white mc-text-shadow text-sm"
-                        style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                        style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                       >
                         {t("arcEditor.addString")}
                       </button>
                       <button
                         onClick={handleSaveLocToArc}
                         className="px-6 py-2 text-[#FFFF55] mc-text-shadow text-sm"
-                        style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                        style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
                       >
                         {t("arcEditor.writeToArc")}
                       </button>
@@ -573,7 +573,7 @@ export const ArcEditorView: React.FC = () => {
         <button
           onClick={() => { playBackSound(); setActiveView("devtools"); }}
           className="w-72 h-full shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
-          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
         >
           {t("arcEditor.back")}
         </button>
@@ -738,4 +738,3 @@ function LocEditModal({ data, lang, onClose, onConfirm }: { data: { langIdx: num
     </div>
   );
 }
-
diff --git a/src/components/views/ColEditorView.tsx b/src/components/views/ColEditorView.tsx
index 3f2251b..c596436 100644
--- a/src/components/views/ColEditorView.tsx
+++ b/src/components/views/ColEditorView.tsx
@@ -143,7 +143,7 @@ export default function ColEditorView() {
           <button
             onClick={() => fileInputRef.current?.click()}
             className="px-6 py-2 text-white mc-text-shadow text-lg"
-            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+            style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
           >
             {t("colEditor.openCol")}
           </button>
@@ -151,7 +151,7 @@ export default function ColEditorView() {
             onClick={handleSaveCol}
             disabled={!col}
             className={`px-6 py-2 text-white mc-text-shadow text-lg ${!col ? "opacity-50 grayscale" : ""}`}
-            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+            style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
           >
             {t("colEditor.saveCol")}
           </button>
@@ -193,7 +193,7 @@ export default function ColEditorView() {
               <button
                 onClick={activeTab === "colors" ? handleAddColor : handleAddWorldColor}
                 className="px-6 py-2 text-white mc-text-shadow text-sm"
-                style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
+                style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%" }}
               >
                 {activeTab === "colors" ? t("colEditor.addColor") : t("colEditor.addWorldColor")}
               </button>
@@ -371,7 +371,7 @@ export default function ColEditorView() {
         <button
           onClick={() => { playBackSound(); setActiveView("devtools"); }}
           className="w-72 h-full shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
-          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
         >
           {t("colEditor.back")}
         </button>
diff --git a/src/components/views/CreditsView.tsx b/src/components/views/CreditsView.tsx
index d8a81d1..d07f471 100644
--- a/src/components/views/CreditsView.tsx
+++ b/src/components/views/CreditsView.tsx
@@ -346,8 +346,8 @@ const CreditsView = memo(function CreditsView() {
           className="fixed bottom-8 left-8 z-50 h-10 flex items-center justify-center gap-2 px-4 text-xl mc-text-shadow outline-none border-none"
           style={{
             backgroundImage: isHovered
-              ? "url('/images/button_highlighted.png')"
-              : "url('/images/Button_Background.png')",
+              ? "url('/images/Layout_Button_Over.png')"
+              : "url('/images/Layout_Button_Bmp.png')",
             backgroundSize: "100% 100%",
             imageRendering: "pixelated",
             color: isHovered ? "#FFFF55" : "white",
diff --git a/src/components/views/DevtoolsView.tsx b/src/components/views/DevtoolsView.tsx
index 64f3887..d7969e3 100644
--- a/src/components/views/DevtoolsView.tsx
+++ b/src/components/views/DevtoolsView.tsx
@@ -180,8 +180,8 @@ export default function DevtoolsView() {
         style={{
           backgroundImage:
             focusIndex === BACK_BUTTON_INDEX
-              ? "url('/images/button_highlighted.png')"
-              : "url('/images/Button_Background.png')",
+              ? "url('/images/Layout_Button_Over.png')"
+              : "url('/images/Layout_Button_Bmp.png')",
           backgroundSize: "100% 100%",
           imageRendering: "pixelated",
         }}
diff --git a/src/components/views/GoldMapperView.tsx b/src/components/views/GoldMapperView.tsx
index 74b2da2..c662231 100644
--- a/src/components/views/GoldMapperView.tsx
+++ b/src/components/views/GoldMapperView.tsx
@@ -428,7 +428,7 @@ const GoldMapperView = memo(function GoldMapperView() {
         onClick={handleBack}
         className="w-40 h-10 flex items-center justify-center transition-colors text-xl mc-text-shadow outline-none border-none hover:text-[#ffff00] mt-4 text-white"
         style={{
-          backgroundImage: "url('/images/Button_Background.png')",
+          backgroundImage: "url('/images/Layout_Button_Bmp.png')",
           backgroundSize: "100% 100%",
           imageRendering: "pixelated",
         }}
diff --git a/src/components/views/GrfEditorView.tsx b/src/components/views/GrfEditorView.tsx
index 5e468d3..379e80d 100644
--- a/src/components/views/GrfEditorView.tsx
+++ b/src/components/views/GrfEditorView.tsx
@@ -229,7 +229,7 @@ export default function GrfEditorView() {
         <button
           onClick={() => { playBackSound(); setActiveView("devtools"); }}
           className="w-72 h-full shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
-          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
         >
           {t("grfEditor.back")}
         </button>
diff --git a/src/components/views/GuidesView.tsx b/src/components/views/GuidesView.tsx
index c1893f2..ed22922 100644
--- a/src/components/views/GuidesView.tsx
+++ b/src/components/views/GuidesView.tsx
@@ -274,8 +274,8 @@ export default function GuidesView() {
         style={{
           backgroundImage:
             focusIndex === BACK_BUTTON_INDEX
-              ? "url('/images/button_highlighted.png')"
-              : "url('/images/Button_Background.png')",
+              ? "url('/images/Layout_Button_Over.png')"
+              : "url('/images/Layout_Button_Bmp.png')",
           backgroundSize: "100% 100%",
           imageRendering: "pixelated",
         }}
diff --git a/src/components/views/LocEditorView.tsx b/src/components/views/LocEditorView.tsx
index 8b57b8a..0806c90 100644
--- a/src/components/views/LocEditorView.tsx
+++ b/src/components/views/LocEditorView.tsx
@@ -206,7 +206,7 @@ export default function LocEditorView() {
         <button
           onClick={() => { playBackSound(); setActiveView("devtools"); }}
           className="w-72 h-full shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
-          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
         >
           {t("locEditor.back")}
         </button>
diff --git a/src/components/views/ModelEditorView.tsx b/src/components/views/ModelEditorView.tsx
index 19970e3..4b6fa02 100644
--- a/src/components/views/ModelEditorView.tsx
+++ b/src/components/views/ModelEditorView.tsx
@@ -692,7 +692,7 @@ export default function ModelEditorView() {
           }}
           className="w-72 h-full flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
           style={{
-            backgroundImage: "url('/images/Button_Background.png')",
+            backgroundImage: "url('/images/Layout_Button_Bmp.png')",
             backgroundSize: "100% 100%",
             imageRendering: "pixelated",
           }}
diff --git a/src/components/views/OptionsEditorView.tsx b/src/components/views/OptionsEditorView.tsx
index e90ab45..c4014c8 100644
--- a/src/components/views/OptionsEditorView.tsx
+++ b/src/components/views/OptionsEditorView.tsx
@@ -217,7 +217,7 @@ export default function OptionsEditorView() {
         <button
           onClick={() => { playBackSound(); setActiveView("devtools"); }}
           className="w-72 h-full shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
-          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+          style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
         >
           {t("optionsEditor.back")}
         </button>
diff --git a/src/components/views/PckEditorView.tsx b/src/components/views/PckEditorView.tsx
index 0707fc3..87456b7 100644
--- a/src/components/views/PckEditorView.tsx
+++ b/src/components/views/PckEditorView.tsx
@@ -1039,7 +1039,7 @@ export default function PckEditorView() {
         }}
         className="w-72 h-14 shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow mt-6 outline-none border-none hover:text-[#FFFF55] text-white"
         style={{
-          backgroundImage: "url('/images/Button_Background.png')",
+          backgroundImage: "url('/images/Layout_Button_Bmp.png')",
           backgroundSize: "100% 100%",
           imageRendering: "pixelated",
         }}
diff --git a/src/components/views/SettingsView.tsx b/src/components/views/SettingsView.tsx
index 0d98544..7d460de 100644
--- a/src/components/views/SettingsView.tsx
+++ b/src/components/views/SettingsView.tsx
@@ -173,8 +173,8 @@ const SettingsView = memo(function SettingsView() {
         <h3 class="text-2xl text-[#333333] mb-4 text-left w-full px-4 mc-text-shadow">${t("settings.reset.title")}</h3>
         <p class="text-[#333333] mb-8 text-left w-full px-4">${t("settings.reset.confirm")}</p>
         <div class="flex flex-col gap-3 w-full px-4">
-          <button id="reset-cancel" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Button_Background.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/button_highlighted.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.cancel")}</button>
-          <button id="reset-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Button_Background.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/button_highlighted.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.ok")}</button>
+          <button id="reset-cancel" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.cancel")}</button>
+          <button id="reset-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.ok")}</button>
         </div>
       </div>
     `;
@@ -220,8 +220,8 @@ const SettingsView = memo(function SettingsView() {
           <p class="mt-3 text-[#333333]">${t("settings.reset.cannotBeUndone")}</p>
         </div>
         <div class="flex flex-col gap-3 w-full px-4">
-          <button id="reset-final-cancel" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Button_Background.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/button_highlighted.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.cancel")}</button>
-          <button id="reset-final-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Button_Background.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/button_highlighted.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.ok")}</button>
+          <button id="reset-final-cancel" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Layout_Button_Bmp.png)'">${t("common.cancel")}</button>
+          <button id="reset-final-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Layout_Button_Bmp.png)'">${t("common.ok")}</button>
         </div>
       </div>
     `;
@@ -1239,8 +1239,8 @@ const SettingsView = memo(function SettingsView() {
               style={{
                 backgroundImage:
                   focusIndex === backIndex
-                    ? "url('/images/button_highlighted.png')"
-                    : "url('/images/Button_Background.png')",
+                    ? "url('/images/Layout_Button_Over.png')"
+                    : "url('/images/Layout_Button_Bmp.png')",
                 backgroundSize: "100% 100%",
                 imageRendering: "pixelated",
               }}
diff --git a/src/components/views/SkinEditorView.tsx b/src/components/views/SkinEditorView.tsx
index 1cbc76c..25c1e64 100644
--- a/src/components/views/SkinEditorView.tsx
+++ b/src/components/views/SkinEditorView.tsx
@@ -473,7 +473,7 @@ const SkinEditorView = memo(function SkinEditorView() {
     inset: 3,
   };
   const getBtnStyle = (active: boolean) =>
-    fillBg(active ? "/images/button_highlighted.png" : "/images/Button_Background.png");
+    fillBg(active ? "/images/Layout_Button_Over.png" : "/images/Layout_Button_Bmp.png");
   const sliderBg = fillBg("/images/Button_Background2.png");
   const btnClass = (id: string) =>
     `text-2xl mc-text-shadow ${focusBtn === id ? "text-[#FFFF55]" : "text-white"}`;
@@ -518,7 +518,7 @@ const SkinEditorView = memo(function SkinEditorView() {
       transition={{ duration: animationsEnabled ? 0.3 : 0 }}
       className="flex flex-col items-center w-full max-w-5xl h-full"
     >
-      <h2 className="text-2xl text-white mc-text-shadow mt-2 mb-4 pb-2 w-[60%] 
+      <h2 className="text-2xl text-white mc-text-shadow mt-2 mb-4 pb-2 w-[60%]
         text-center tracking-widest uppercase opacity-80 font-bold border-b-2 border-[#373737]">
         {t("skinEditor.title")}
       </h2>
diff --git a/src/components/views/SkinsView.tsx b/src/components/views/SkinsView.tsx
index 47ac09e..55f32a4 100644
--- a/src/components/views/SkinsView.tsx
+++ b/src/components/views/SkinsView.tsx
@@ -829,8 +829,8 @@ const SkinsView = memo(function SkinsView() {
           style={{
             backgroundImage:
               focusIndex === BACK_BUTTON_INDEX
-                ? "url('/images/button_highlighted.png')"
-                : "url('/images/Button_Background.png')",
+                ? "url('/images/Layout_Button_Over.png')"
+                : "url('/images/Layout_Button_Bmp.png')",
             backgroundSize: "100% 100%",
             imageRendering: "pixelated",
           }}
diff --git a/src/components/views/SwfView.tsx b/src/components/views/SwfView.tsx
index 3e8165c..a8be279 100644
--- a/src/components/views/SwfView.tsx
+++ b/src/components/views/SwfView.tsx
@@ -311,7 +311,7 @@ export default function SwfView() {
       <button
         onClick={handleBack}
         className="w-72 h-14 shrink-0 flex items-center justify-center transition-colors text-2xl mc-text-shadow mt-6 outline-none border-none hover:text-[#FFFF55] text-white"
-        style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
+        style={{ backgroundImage: "url('/images/Layout_Button_Bmp.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
       >
         {t("swfEditor.back")}
       </button>
@@ -335,7 +335,7 @@ export default function SwfView() {
       <style>{`
         .pattern-checkerboard {
             background-color: #2a2a2a;
-            background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%, #1a1a1a), 
+            background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%, #1a1a1a),
                               linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%, #1a1a1a);
             background-size: 16px 16px;
             background-position: 0 0, 8px 8px;
diff --git a/src/components/views/VersionsView.tsx b/src/components/views/VersionsView.tsx
index e39cefd..4be1c52 100644
--- a/src/components/views/VersionsView.tsx
+++ b/src/components/views/VersionsView.tsx
@@ -613,7 +613,7 @@ const VersionsView = memo(function VersionsView() {
                                         <h3 class="text-2xl font-bold text-[#333333] mb-4 text-left w-full px-4 mc-text-shadow">${t("versions.invalidDirectory")}</h3>
                                         <p class="text-[#333333] mb-6 text-left w-full px-4">${t("versions.selectEmptyDirectory")}</p>
                                         <div class="flex flex-col gap-3 w-full px-4">
-                                          <button id="empty-dir-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Button_Background.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/button_highlighted.png)'" onmouseleave="this.style.backgroundImage='url(/images/Button_Background.png)'">${t("common.ok")}</button>
+                                          <button id="empty-dir-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Layout_Button_Bmp.png)'">${t("common.ok")}</button>
                                         </div>
                                       </div>
                                     `;
diff --git a/src/components/views/WorkshopView.tsx b/src/components/views/WorkshopView.tsx
index 6513775..edf8813 100644
--- a/src/components/views/WorkshopView.tsx
+++ b/src/components/views/WorkshopView.tsx
@@ -1152,17 +1152,17 @@ const WorkshopView = memo(function WorkshopView({
             }}
             className="w-72 h-10 flex items-center justify-center text-xl mc-text-shadow hover:text-[#FFFF55] text-white border-none outline-none transition-all"
             style={{
-              backgroundImage: "url('/images/Button_Background.png')",
+              backgroundImage: "url('/images/Layout_Button_Bmp.png')",
               backgroundSize: "100% 100%",
               imageRendering: "pixelated",
             }}
             onMouseEnter={(e) => {
               (e.currentTarget as HTMLButtonElement).style.backgroundImage =
-                "url('/images/button_highlighted.png')";
+                "url('/images/Layout_Button_Over.png')";
             }}
             onMouseLeave={(e) => {
               (e.currentTarget as HTMLButtonElement).style.backgroundImage =
-                "url('/images/Button_Background.png')";
+                "url('/images/Layout_Button_Bmp.png')";
             }}
           >
             {t("workshop.back")}