diff --git a/public/main-background.svg b/public/main-background.svg
new file mode 100644
index 0000000..cfe6451
--- /dev/null
+++ b/public/main-background.svg
@@ -0,0 +1,21 @@
+<svg width="456" height="761" viewBox="0 0 456 761" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_1_14)">
+<circle cx="541.789" cy="555.408" r="156.383" fill="#4A3AFF"/>
+<g filter="url(#filter1_b_1_14)">
+<circle cx="570.819" cy="570.819" r="393.819" fill="#A800A3" fill-opacity="0.79"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1_14" x="0.699997" y="0.699997" width="1140.24" height="1140.24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="88.15" result="effect1_foregroundBlur_1_14"/>
+</filter>
+<filter id="filter1_b_1_14" x="-73.1" y="-73.1" width="1287.84" height="1287.84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="125.05"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1_14"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1_14" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/layout/shared/BaseLayout.tsx b/src/components/layout/shared/BaseLayout.tsx
index a3c9a38..f5629be 100644
--- a/src/components/layout/shared/BaseLayout.tsx
+++ b/src/components/layout/shared/BaseLayout.tsx
@@ -30,13 +30,19 @@ export default function BaseLayout({ children, mode = 'default' }: IBaseLayout)
       </div>
       <div className="flex flex-1 flex-col overflow-hidden">
         <Header />
-        <main className="flex flex-1 flex-col gap-4 overflow-auto scroll-smooth p-4 lg:gap-6 lg:p-6" id="scrollRef">
-          <div>
-            <div className="mx-auto max-w-7xl px-4 py-4 lg:px-12">{children}</div>
-            <div className="pointer-events-none fixed bottom-0 left-[220px] right-0 top-14 z-[-1] overflow-hidden md:left-[220px] lg:left-[280px] lg:top-[60px]">
-              <Meteors number={20} />
+        <main
+          className="relative flex flex-1 flex-col gap-4 overflow-auto scroll-smooth p-4 lg:gap-6 lg:p-6"
+          id="scrollRef"
+        >
+          <div className="pointer-events-none fixed bottom-0 left-[220px] right-0 top-14 z-[-1] overflow-hidden md:left-[220px] lg:left-[280px] lg:top-[60px]">
+            <Meteors number={20} />
+            <div className="absolute bottom-0 right-0">
+              <img src="/main-background.svg" alt="background" className="h-auto w-[456px] opacity-30" />
             </div>
           </div>
+          <div className="relative z-10">
+            <div className="mx-auto max-w-7xl px-4 py-4 lg:px-12">{children}</div>
+          </div>
         </main>
         <Toaster />
       </div>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 5cfde0d..09c3567 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -27,7 +27,7 @@ function StatsCard({ title, value, icon }: { title: string; value: number; icon:
 
 function ProjectRecommendations({ projects }: { projects: Project[] }) {
   return (
-    <Card className="w-full">
+    <Card className="w-full bg-transparent">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <LucideStar className="h-6 w-6" />