diff --git a/components/LatestScripts.tsx b/components/LatestScripts.tsx
index 431b837..00fddba 100644
--- a/components/LatestScripts.tsx
+++ b/components/LatestScripts.tsx
@@ -50,7 +50,7 @@ function LatestScripts({ items }: { items: Category[] }) {
         {latestScripts.slice(startIndex, endIndex).map((item) => (
           <Card
             key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow "
+            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
           >
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
diff --git a/components/MostViewedScripts.tsx b/components/MostViewedScripts.tsx
index 33d2022..6abd5ca 100644
--- a/components/MostViewedScripts.tsx
+++ b/components/MostViewedScripts.tsx
@@ -57,7 +57,7 @@ export default function MostViewedScripts({ items }: { items: Category[] }) {
         {mostViewedScripts.slice(startIndex, endIndex).map((item) => (
           <Card
             key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow"
+            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
           >
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
diff --git a/components/RecentlyUpdatedScripts.tsx b/components/RecentlyUpdatedScripts.tsx
index 880c50f..59b5739 100644
--- a/components/RecentlyUpdatedScripts.tsx
+++ b/components/RecentlyUpdatedScripts.tsx
@@ -51,7 +51,7 @@ export default function RecentlyUpdatedScripts({ items }: { items: Category[] })
                 {updatedScripts.slice(startIndex, endIndex).map((item) => (
                     <Card
                         key={item.id}
-                        className=" min-w-[250px] flex-1 flex-grow"
+                        className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
                     >
                         <CardHeader>
                             <CardTitle className="flex items-center gap-3">
diff --git a/components/Script.tsx b/components/Script.tsx
index 244d0ec..911677c 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -184,11 +184,11 @@ function ScriptItem({
                 <h2 className="text-lg font-semibold">Selected Script</h2>
                 <X onClick={closeScript} className="cursor-pointer" />
               </div>
-              <div className="mt-2 rounded-lg border p-4">
+              <div className="mt-2 rounded-lg border p-4 bg-accent/20">
                 <div className="mt-4 flex justify-between">
                   <div className="flex">
                     <Image
-                      className="h-32 w-32 rounded-lg bg-accent object-contain p-3"
+                      className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3"
                       src={item.logo}
                       width={400}
                       height={400}
@@ -348,7 +348,7 @@ function ScriptItem({
                     )}
                   </div>
 
-                  <div className="mt-6 rounded-lg border bg-blue-900/20 p-4 dark:bg-blue-900/20">
+                  <div className="mt-6 rounded-lg border bg-accent/50 p-4">
                     <h2 className="text-lg font-semibold">
                       How to {item.item_type ? "install" : "use"}
                     </h2>
diff --git a/components/ScriptBrowser.tsx b/components/ScriptBrowser.tsx
index 0399ad1..7916a0d 100644
--- a/components/ScriptBrowser.tsx
+++ b/components/ScriptBrowser.tsx
@@ -137,7 +137,7 @@ const ScriptBrowser = ({
       <div className="relative">
         <div className="mb-1 flex items-center">
           <Input
-            className="flex-grow"
+            className="flex-grow bg-accent/30"
             type="text"
             placeholder="Type '/' to search"
             onChange={(e) => handleSearch(e.target.value)}
@@ -156,11 +156,11 @@ const ScriptBrowser = ({
           )}
         </div>
         {searchTerm ? (
-          <p className="mb-1 ml-2 text-xs text-muted-foreground">
+          <p className="mb-4 ml-2 text-xs text-muted-foreground">
             Press &apos;Esc&apos; to clear the search
           </p>
         ) : (
-          <p className="mb-1 ml-2 text-xs text-muted-foreground">
+          <p className="mb-4 ml-2 text-xs text-muted-foreground">
             <a
               className="cursor-pointer"
               onClick={() => setShowLogos(!showLogos)}