diff --git a/frontend/src/components/HeroText.tsx b/frontend/src/components/HeroText.tsx
new file mode 100644
index 00000000..103faa1c
--- /dev/null
+++ b/frontend/src/components/HeroText.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { TypewriterEffectSmooth } from "./ui/TypeWriter";
+
+export function TypewriterEffectSmoothDemo() {
+  const words = [
+    {
+      text: "Welcome",
+      className:"text-5xl text-white"
+    },
+    {
+      text: "To",
+      className:"text-5xl text-white"
+    },
+    {
+      text: "Style",
+      className: "text-blue-500 text-5xl",
+    },
+    {
+      text: "Share",
+      className: "text-blue-500 text-5xl",
+    },
+    
+  ];
+  return (
+    <div className=" mx-autofont-bold mb-4">
+      <TypewriterEffectSmooth words={words} />
+      </div>
+     
+  );
+}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index a0fc2a86..a1c36731 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,18 +1,25 @@
 import { Link } from "react-router-dom";
+import { TypewriterEffectSmoothDemo } from "../components/HeroText";
+import MagicButton from "../components/ui/MagicButton";
 
 function Home() {
   return (
     <div className="max-w-screen-xl mx-auto px-4 py-8 text-white">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center justify-center">
         <div>
-          <h1 className="text-6xl font-bold mb-4">Welcome to Style Share</h1>
-          <p className="text-xl  mb-6">
+          <h1 className="text-6xl font-bold mb-4">
+            {/* Welcome to Style Share */}
+            <TypewriterEffectSmoothDemo/>
+            </h1>
+          <p className="text-[1.3rem]  mb-6 text-gray-300">
             A simple web based platform where users can easily create, explore,
             and share Tailwind CSS components and designs with fellow users.
           </p>
-          <button className="bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-600">
-            <Link to="/app/posts">Explore</Link>
-          </button>
+          <div className=" text-white py-2 rounded-md">
+            <Link to="/app/posts">
+            <MagicButton title="Explore" ></MagicButton>
+            </Link>
+          </div>
         </div>
         {/* <div className="h-58 w-45 bg-red"></div> */}
         <div className="hidden md:block">