diff --git a/components/ui/wavy-background.tsx b/components/ui/wavy-background.tsx
new file mode 100644
index 0000000..082fe73
--- /dev/null
+++ b/components/ui/wavy-background.tsx
@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "~/lib/utils";
+import React, { useEffect, useRef, useState } from "react";
+import { createNoise3D } from "simplex-noise";
+
+export const WavyBackground = ({
+  children,
+  className,
+  containerClassName,
+  colors,
+  waveWidth,
+  backgroundFill,
+  blur = 10,
+  speed = "fast",
+  waveOpacity = 0.5,
+  ...props
+}: {
+  children?: any;
+  className?: string;
+  containerClassName?: string;
+  colors?: string[];
+  waveWidth?: number;
+  backgroundFill?: string;
+  blur?: number;
+  speed?: "slow" | "fast";
+  waveOpacity?: number;
+  [key: string]: any;
+}) => {
+  const noise = createNoise3D();
+  let w: number,
+    h: number,
+    nt: number,
+    i: number,
+    x: number,
+    ctx: any,
+    canvas: any;
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const getSpeed = () => {
+    switch (speed) {
+      case "slow":
+        return 0.001;
+      case "fast":
+        return 0.002;
+      default:
+        return 0.001;
+    }
+  };
+
+  const init = () => {
+    canvas = canvasRef.current;
+    ctx = canvas.getContext("2d");
+    w = ctx.canvas.width = window.innerWidth;
+    h = ctx.canvas.height = window.innerHeight;
+    ctx.filter = `blur(${blur}px)`;
+    nt = 0;
+    window.onresize = function () {
+      w = ctx.canvas.width = window.innerWidth;
+      h = ctx.canvas.height = window.innerHeight;
+      ctx.filter = `blur(${blur}px)`;
+    };
+    render();
+  };
+
+  const waveColors = colors ?? [
+    "#38bdf8",
+    "#818cf8",
+    "#c084fc",
+    "#e879f9",
+    "#22d3ee",
+  ];
+  const drawWave = (n: number) => {
+    nt += getSpeed();
+    for (i = 0; i < n; i++) {
+      ctx.beginPath();
+      ctx.lineWidth = waveWidth || 50;
+      ctx.strokeStyle = waveColors[i % waveColors.length];
+      for (x = 0; x < w; x += 5) {
+        var y = noise(x / 800, 0.3 * i, nt) * 100;
+        ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
+      }
+      ctx.stroke();
+      ctx.closePath();
+    }
+  };
+
+  let animationId: number;
+  const render = () => {
+    ctx.fillStyle = backgroundFill || "black";
+    ctx.globalAlpha = waveOpacity || 0.5;
+    ctx.fillRect(0, 0, w, h);
+    drawWave(5);
+    animationId = requestAnimationFrame(render);
+  };
+
+  useEffect(() => {
+    init();
+    return () => {
+      cancelAnimationFrame(animationId);
+    };
+  }, []);
+
+  const [isSafari, setIsSafari] = useState(false);
+  useEffect(() => {
+    // I'm sorry but i have got to support it on safari.
+    setIsSafari(
+      typeof window !== "undefined" &&
+        navigator.userAgent.includes("Safari") &&
+        !navigator.userAgent.includes("Chrome")
+    );
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "h-screen flex flex-col items-center justify-center",
+        containerClassName
+      )}
+    >
+      <canvas
+        className="absolute inset-0 z-0"
+        ref={canvasRef}
+        id="canvas"
+        style={{
+          ...(isSafari ? { filter: `blur(${blur}px)` } : {}),
+        }}
+      ></canvas>
+      <div className={cn("relative z-10", className)} {...props}>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/screens/home/MainHomeScreen.tsx b/screens/home/MainHomeScreen.tsx
index cfbff09..a69a6cc 100644
--- a/screens/home/MainHomeScreen.tsx
+++ b/screens/home/MainHomeScreen.tsx
@@ -29,7 +29,8 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "~/lib/utils";
 // import { Button } from "@/components/ui/button";
 import { BoxReveal } from "~/components/magicui/box-reveal";
- 
+import { WavyBackground } from "~/components/ui/wavy-background";
+
 const Header = () => {
     return <div className={`${readexPro.className} text-left flex flex-row mb-4 border-b border-primary/20 w-full lg:mt-0 mt-20`}>
       <span className='font-normal text-transparent bg-clip-text bg-gradient-to-r from-cyan to-light-green text-2xl flex flex-row items-center w-full'>
@@ -68,66 +69,28 @@ export const Container = ({ children, noHeader }: any) => {
 }
 
 const EmptyHome = () => {
-    return <Container noHeader>
-        <div className="group mt-12 relative mx-auto bg-black/50 flex items-center justify-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] ">
-      <span
-        className={cn(
-          "absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-cyan/50 via-green/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]",
-        )}
-        style={{
-          WebkitMask:
-            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-          WebkitMaskComposite: "destination-out",
-          mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-          maskComposite: "subtract",
-          WebkitClipPath: "padding-box",
-        }}
-      />
-      <AnimatedGradientText className="text-sm font-medium">
-        Welcome to Carmel City
-      </AnimatedGradientText>
-    </div>
-        <div className="w-full flex flex-col justify-start items-center mt-32 lg:mt-8 bg-black/0 z-50">
-            <div className="h-[12rem] flex items-center justify-center w-full">
-            <TextHoverEffect text="CARMEL" />
-            </div>
-           
-<div className=" items-center justify-center align-center flex flex-col overflow-hidden pt-8">
-    <BoxReveal boxColor={"#0097A7"} duration={0.5}>
-        <h2 className="mt-[.5rem] text-[1rem]">
-          People are debating about
-        </h2>
-      </BoxReveal>
-
-      <BoxReveal boxColor={"#0097A7"} duration={0.5}>
-        <h1 className="text-3xl font-semibold">
-          how to build more human world
-        </h1>
-      </BoxReveal>
- 
-      <BoxReveal boxColor={"#0097A7"} duration={0.5}>
-            <Link href={'/carmels'} key={'reg1'}>
-                <button
-                    className={`${readex_pro.className} mt-4 text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-3 shadow-early-access-button shrink-0 rounded-md`}>
-                        Join the conversation
-                </button>
-            </Link>
-      </BoxReveal>
-     
-      <BoxReveal boxColor={"#0097A7"} duration={0.5}>
-        <p className="text-lg font-semibold mt-12" >
-            <Link href={'/store'} key={'reg1'} className='mr-1'>
-                Check out what the community is building
-            </Link>
-        </p>
-      </BoxReveal>
-    </div>
-
-
-    
-     
-        </div>
-    </Container>
+    return <WavyBackground className="w-full black/10 p-4 lg:p-24" backgroundFill='#0A0F12'>
+    <div className='w-full flex flex-col items-center'>
+      <h1 className="text-3xl lg:text-5xl text-white font-bold inter-var text-center">
+        How do we build a more human world?
+      </h1>
+      <h2 className="mt-4 text-white font-normal text-xl lg:text-2xl inter-var text-center">
+        See what  other Carmel members in debating how we build a more human world.
+      </h2>
+      <Link href={'/carmels'} key={'reg1'}>
+          <button
+              className={`${readex_pro.className} w-full mt-20 text-nowrap shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-3 shadow-early-access-button shrink-0 rounded-md`}>
+                  Join the conversation
+          </button>
+      </Link>
+      <Link href={'/store'} key={'reg2'}>
+          <button
+              className={`${readex_pro.className} w-full mt-2 text-nowrap text-sm shrink-0 hover:opacity-80 font-medium text-primary px-2 py-3 `}>
+                 See what the community is already building
+          </button>
+      </Link>
+      </div>
+    </WavyBackground>
 }
 
 const onItemPress = (element: any, router: any) => {
diff --git a/styles/globals.css b/styles/globals.css
index b11600b..86ea7f4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -287,8 +287,6 @@ blockquote.twitter-tweet a:focus {
   margin-top: 1rem;
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -297,7 +295,7 @@ blockquote.twitter-tweet a:focus {
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: 0 73% 83%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
@@ -324,7 +322,7 @@ blockquote.twitter-tweet a:focus {
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 187 92.4% 69%;
     --primary-foreground: 0 0% 9%;
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;