diff --git a/app/grants/page.tsx b/app/grants/page.tsx
index 423a6836af6..5cdfabd2b81 100644
--- a/app/grants/page.tsx
+++ b/app/grants/page.tsx
@@ -48,14 +48,14 @@ function ProgramCard({ title, description, icon, color, arrowColor }: ProgramCar
 }
 
 export default function Page() {
+  const { resolvedTheme } = useTheme()
+  const opacity = resolvedTheme === "dark" ? .1 : .5
+  const arrowColor = resolvedTheme === "dark" ? "white" : "black"
+
   const particlesInit = useCallback(async (engine: Engine) => {
     await loadSlim(engine)
   }, [])
 
-  const { theme, setTheme } = useTheme()
-  const opacity = theme === "dark" ? .1 : .5
-  const arrowColor = theme === "dark" ? "white" : "black"
-
   return (
     <div className="min-h-screen bg-background text-foreground overflow-hidden">
       <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:50px_50px]" />
@@ -98,7 +98,7 @@ export default function Page() {
           distance: 215,
           enable: true,
           opacity: opacity,
-          width: 5,
+          width: 3,
         },
         move: {
           direction: "none",
@@ -107,13 +107,13 @@ export default function Page() {
           default: "bounce",
           },
           random: false,
-          speed: 1,
+          speed: 0.5,
           straight: false,
         },
         number: {
           density: {
           enable: true,
-          area: 800,
+          area: 900,
           },
           value: 80,
         },
@@ -124,7 +124,7 @@ export default function Page() {
           type: "circle",
         },
         size: {
-          value: { min: 5, max: 18 },
+          value: { min: 8, max: 18 },
         },
         },
         detectRetina: true,