diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss
index 99f2569b..609ef95f 100644
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -89,13 +89,14 @@
   height: 80vh;
   width: clamp(60vw, 1400px, 90vw);
 
-  background-color: rgba(1, 1, 1, 0.7);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   backdrop-filter: blur(16px) saturate(180%);
+  overflow: hidden;
+  border-radius: 12px;
 
-  // @include themed {
-  //   background-color: t($modal-background);
-  // }
+  @include themed {
+    background-color: t($modal-background);
+  }
 }
 
 /* fixes for font size on extension */
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
index cdbe885c..8fc6b8be 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
@@ -26,50 +26,37 @@
   @include modal-button(standard);
 
   padding: 10px 20px;
-  border-radius: 16px !important;
-  transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
+  border-radius: 12px !important;
+  transition: all 0.2s ease;
   position: relative;
 
   @include themed {
-    backdrop-filter: blur(16px) saturate(180%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
-    background: rgba(255, 255, 255, 0.1) !important;
-    border: 1px solid rgba(209, 213, 219, 0.2) !important;
+    background: transparent !important;
+    border: none !important;
     box-shadow: none !important;
-
-    @media (prefers-color-scheme: dark) {
-      background: rgba(255, 255, 255, 0.05) !important;
-      border: 1px solid rgba(255, 255, 255, 0.15) !important;
-    }
   }
 
   .light & {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border: 1px solid rgba(209, 213, 219, 0.2) !important;
+    background: transparent !important;
+    border: none !important;
   }
 
   .dark & {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    background: transparent !important;
+    border: none !important;
   }
 
   &:hover {
     @include themed {
-      backdrop-filter: blur(18px) saturate(190%);
-      -webkit-backdrop-filter: blur(18px) saturate(190%);
-      background: rgba(255, 255, 255, 0.15) !important;
+      background: rgba(0, 0, 0, 0.04) !important;
     }
 
     .light & {
-      background: rgba(255, 255, 255, 0.15) !important;
+      background: rgba(0, 0, 0, 0.04) !important;
     }
 
     .dark & {
-      background: rgba(255, 255, 255, 0.08) !important;
-    }
-
-    svg {
-      filter: brightness(1.1);
+      background: rgba(255, 255, 255, 0.06) !important;
     }
   }
 
@@ -96,22 +83,18 @@
 
 .btn-navigation-active {
   @include themed {
-    backdrop-filter: blur(20px) saturate(200%) !important;
-    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
-    background: rgba(255, 255, 255, 0.2) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+    background: rgba(0, 0, 0, 0.06) !important;
+    box-shadow: none !important;
   }
 
   .light & {
-    background: rgba(255, 255, 255, 0.25) !important;
-    border: 1px solid rgba(209, 213, 219, 0.3) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    background: rgba(0, 0, 0, 0.06) !important;
+    border: none !important;
   }
 
   .dark & {
-    background: rgba(255, 255, 255, 0.12) !important;
-    border: 1px solid rgba(255, 255, 255, 0.2) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: none !important;
   }
 }
 
diff --git a/src/components/Elements/MainModal/scss/modules/_topBar.scss b/src/components/Elements/MainModal/scss/modules/_topBar.scss
index 82f36b2d..3039e33f 100644
--- a/src/components/Elements/MainModal/scss/modules/_topBar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_topBar.scss
@@ -10,10 +10,13 @@
   padding: 1.5rem 1.5rem;
   // width: 100%;
 
-  background-color: rgba(1, 1, 1, 0.9);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   backdrop-filter: blur(16px) saturate(180%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  @include themed {
+    background-color: t($modal-background);
+    border-bottom: 1px solid t($modal-sidebarActive);
+  }
 
   .topBarLeft {
     display: flex;
diff --git a/src/features/misc/sections/Changelog.jsx b/src/features/misc/sections/Changelog.jsx
index 273a6f0b..78fcd1ff 100644
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -1,15 +1,29 @@
 import variables from 'config/variables';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { MdOutlineWifiOff } from 'react-icons/md';
 
 const Changelog = () => {
   const [isLoading, setIsLoading] = useState(true);
+  const iframeRef = useRef(null);
 
   const offlineMode = localStorage.getItem('offlineMode') === 'true';
   const isOffline = navigator.onLine === false || offlineMode;
 
   const handleLoad = () => {
     setIsLoading(false);
+
+    // Send theme to iframe after it loads
+    if (iframeRef.current?.contentWindow) {
+      const theme = localStorage.getItem('theme') || 'auto';
+      const blogOrigin = new URL(variables.constants.CHANGELOG_URL).origin;
+      iframeRef.current.contentWindow.postMessage(
+        {
+          type: 'mue:theme',
+          payload: { theme },
+        },
+        blogOrigin
+      );
+    }
   };
 
   // Show offline error message if offline
@@ -45,7 +59,11 @@ const Changelog = () => {
         </div>
       )}
       <iframe
-        src={variables.constants.CHANGELOG_URL + '?embed=true'}
+        ref={iframeRef}
+        src={(() => {
+          const theme = localStorage.getItem('theme') || 'auto';
+          return `${variables.constants.CHANGELOG_URL}?embed=true&theme=${theme}`;
+        })()}
         onLoad={handleLoad}
         style={{
           width: '100%',
diff --git a/src/features/misc/views/Discover.jsx b/src/features/misc/views/Discover.jsx
index 82ff5e89..1c4678f9 100644
--- a/src/features/misc/views/Discover.jsx
+++ b/src/features/misc/views/Discover.jsx
@@ -38,13 +38,17 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       onBreadcrumbsChange([]);
     }
 
+    // Get current theme
+    const theme = localStorage.getItem('theme') || 'auto';
+    const themeParam = `&theme=${theme}`;
+
     // Update iframe src with category
     if (iframeRef.current) {
       // Collections use path-based routing, others use query params
       if (category === 'collections') {
-        iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}`;
+        iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`;
       } else {
-        iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`;
+        iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
       }
     }
   }, [category, onBreadcrumbsChange, previewParam]);
@@ -59,6 +63,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       if (itemId && iframeRef.current) {
         setIsLoading(true);
 
+        // Get current theme
+        const theme = localStorage.getItem('theme') || 'auto';
+        const themeParam = `&theme=${theme}`;
+
         // Get item from localStorage to determine type
         const installed = JSON.parse(localStorage.getItem('installed')) || [];
         const item = installed.find((i) => i.name === itemId);
@@ -75,10 +83,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
           const itemIdToUse = item.id || itemId;
 
           // Navigate to /packs/{id} or /presets/{id}
-          iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}`;
+          iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}${themeParam}`;
         } else {
           // Fallback if item not found in localStorage
-          iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}`;
+          iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}${themeParam}`;
         }
       }
     };
@@ -186,6 +194,18 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
 
   const handleLoad = () => {
     setIsLoading(false);
+
+    // Send theme to iframe after it loads
+    if (iframeRef.current?.contentWindow) {
+      const theme = localStorage.getItem('theme') || 'auto';
+      iframeRef.current.contentWindow.postMessage(
+        {
+          type: 'marketplace:theme',
+          payload: { theme },
+        },
+        MARKETPLACE_URL
+      );
+    }
   };
 
   // Show offline error message if offline
@@ -232,7 +252,13 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       )}
       <iframe
         ref={iframeRef}
-        src={category === 'collections' ? `${MARKETPLACE_URL}/collections?embed=true${previewParam}` : `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`}
+        src={(() => {
+          const theme = localStorage.getItem('theme') || 'auto';
+          const themeParam = `&theme=${theme}`;
+          return category === 'collections'
+            ? `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`
+            : `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
+        })()}
         onLoad={handleLoad}
         scrolling="no"
         style={{