diff --git a/components/AllApps.tsx b/components/AllApps.tsx
index 3482b83..fa32839 100644
--- a/components/AllApps.tsx
+++ b/components/AllApps.tsx
@@ -8,7 +8,7 @@ type AllAppsProps = {
 
 const AllApps: FC<AllAppsProps> = ({ applications }) => {
   return (
-    <div className="container px-6 pb-2 mx-auto mt-24">
+    <div className="container px-6 pb-2 mx-auto mt-24 bg-secondbg-white dark:bg-secondbg-dark">
       <H2 className="text-center text-transparent mb-14 bg-gradient-to-br bg-clip-text from-primary to-slate-500 dark:text-gray-300">
         All Available Tools
       </H2>
diff --git a/public/secondbg-dark.webp b/public/secondbg-dark.webp
new file mode 100644
index 0000000..07c8861
Binary files /dev/null and b/public/secondbg-dark.webp differ
diff --git a/public/secondbg-white.webp b/public/secondbg-white.webp
new file mode 100644
index 0000000..a9dab0f
Binary files /dev/null and b/public/secondbg-white.webp differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 83dc4fb..4e6fb7b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,6 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
-
-    // Or if using `src` directory:
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: "class",
@@ -17,6 +15,8 @@ module.exports = {
       backgroundImage: {
         "light-pattern": "url('/light-bg.webp')",
         "dark-pattern": "url('/dark-bg.webp')",
+        "secondbg-white": "url('/secondbg-white.webp')",
+        "secondbg-dark": "url('/secondbg-dark.webp')",
       },
       colors: {
         primary: "#202328",