diff --git a/src/components/features.tsx b/src/components/features.tsx
index 1bcf9a6..b480ddf 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -261,10 +261,10 @@ export default function Features() {
           {feature == "item-1" && (
             <div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
               <div></div>
-              <div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
+              <div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
                 <Logo className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <svg className='w-10 h-10 relative dark:fill-white' xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity"><path style={{ transform: "scale(2) translate(5%, 5%)" }} d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z" /></svg>
               </div>
-              <a href='https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
+              <a href='https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
                 See what version of Firefox Zen uses <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
               </a>
             </div>
@@ -272,10 +272,10 @@ export default function Features() {
           {feature == "item-2" && (
             <div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
               <div></div>
-              <div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
+              <div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
                 <LockClosedIcon className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <EyeClosedIcon className='w-10 h-10' />
               </div>
-              <a href='/privacy-policy' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
+              <a href='/privacy-policy' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
                 Learn about Zen's privacy policy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
               </a>
             </div>
@@ -283,10 +283,10 @@ export default function Features() {
           {feature == "item-3" && (
             <div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
               <div></div>
-              <div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
+              <div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
                 <ShieldCheck className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <ShieldAlertIcon className='w-10 h-10' />
               </div>
-              <a href='https://docs.zen-browser.app/security' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
+              <a href='https://docs.zen-browser.app/security' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
                 See how Zen keeps you safe <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
               </a>
             </div>
diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index 9bcfdbc..528c0ef 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -11,13 +11,13 @@ export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
 
   return (
     <div className="flex flex-col w-full mx-auto items-center justify-center h-full">
-      <div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-gradient-to-r from-[#f6cfbe] to-[#b9dcf2] dark:from-[#0d1117] dark:to-[#0d1117]">
+      <div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-surface">
         <div className="w-full lg:w-1/2 xl:w-1/2 mx-auto px-2 lg:px-none">
           <h1 className="text-4xl lg:text-7xl font-bold">Themes Store</h1>
           <ThemesSearch input={searchInput} setInput={setSearchInput} tags={tags} setTags={setTags} />
         </div>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
+      <div className="px-5 lg:px-0 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
         {getThemesFromSearch(themes, searchInput, tags).map((theme) => (
           <ThemeCard key={theme.name} theme={theme} />
         ))}
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 690f307..bbc0623 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -22,7 +22,7 @@ export default function ThemeCard({
     <ThemeCardWrapper onClick={(event) => {
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
-    }} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ", className)}>
+    }} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-surface hover:border-blue-500 cursor-pointer select-none ", className)}>
       <img src={theme.image} alt={theme.name} width={500} height={500}
       className="w-full h-32 object-cover rounded-lg border shadow" />
       <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 752ea94..7af036c 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -17,8 +17,8 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
-      <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
-        <a className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" href="/themes">
+      <div className="mx-auto md:mx-0 flex flex-col relative bg-surface rounded-lg border shadow lg:sticky lg:top-0 w-md h-full p-5 mr-5 w-full md:max-w-sm">
+        <a className="flex mt-2 mb-4 items-center cursor-pointer opacity-70" href="/themes">
           <ChevronLeft className="w-4 h-4 mr-1" />
           <h3 className="text-md">Go back</h3>
         </a>
@@ -37,19 +37,18 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
         )}
         <hr className="mt-4" />
         <Button
-          className="mt-4 hidden"
+          className="mt-4 hidden !rounded-lg"
           id="install-theme"
           zen-theme-id={theme.id}
         >Install Theme 🎉</Button>
         <Button
-          className="mt-4 hidden"
+          className="mt-4 hidden !rounded-lg"
           id="install-theme-uninstall"
           zen-theme-id={theme.id}
         >Uninstall Theme</Button>
         <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
       </div>
-      <hr className="block my-4 lg:hidden" />
-      <div className="flex lg:border-l flex-col lg:min-h-[calc(100vh/2-2rem)] px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
+      <div className="flex flex-col lg:min-h-[calc(100vh/2-2rem)] px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
         <div id="policy" className="w-full">
           {readme === null ? (
             <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />