diff --git a/src/components/Abouthero.jsx b/src/components/Abouthero.jsx
index 821373c..2accf9f 100644
--- a/src/components/Abouthero.jsx
+++ b/src/components/Abouthero.jsx
@@ -17,8 +17,8 @@ export default function Abouthero() {
       </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="lg:text-6xl font-semibold tracking-tight lg:max-w-xl max-w-md leading-tight text-gradient text-3xl">At OurVerse, <br/>
-          we go beyond traditional video calls. </h2>
+          <h2 className="lg:text-6xl font-semibold tracking-tight lg:max-w-2xl max-w-xl leading-tight text-white text-3xl">
+          Beyond Traditional Video Calls. </h2>
           <p className="mt-6 section-text-light  font-display">
           Our immersive decentralized metaverse platform brings people together in a dynamic, interactive environment where meetings and events feel REAL. 
           </p>
@@ -27,7 +27,7 @@ export default function Abouthero() {
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
               href="#"
-              className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+              className="rounded-2xl btn-dark text-base font-semibold px-3.5 py-2.5"
             >
               Join OurVerse
             </a>
diff --git a/src/components/Aboutnodes.jsx b/src/components/Aboutnodes.jsx
index 346220f..e3d47cf 100644
--- a/src/components/Aboutnodes.jsx
+++ b/src/components/Aboutnodes.jsx
@@ -21,8 +21,10 @@ export default function Aboutnodes() {
           </p>
           <div className="mt-8">
             <a
-              href="/community.html"
-              className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm btn-gradient-dark2"
+              href="https://www.threefold.io/getnode/"
+              className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Host a Node
             </a>
diff --git a/src/components/Bentosection.jsx b/src/components/Bentosection.jsx
index 026af99..7f88b57 100644
--- a/src/components/Bentosection.jsx
+++ b/src/components/Bentosection.jsx
@@ -67,12 +67,12 @@ export default function BentoSection() {
           </p>
           <div className="mt-10 flex gap-x-8">
           <a
-              href="#"
-              className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              href="/features.html"
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
             >
               See Features
             </a>
-          <a href="#" className="text-sm py-2.5 font-semibold leading-6 text-cyan-600 hover:text-purple-500">
+          <a href="/usecases.html" className="text-base py-2.5 font-semibold leading-6 text-link">
           Read Use Cases <span aria-hidden="true">→</span>
             </a>
             </div>
diff --git a/src/components/Bottom.jsx b/src/components/Bottom.jsx
index 7335c40..233c088 100644
--- a/src/components/Bottom.jsx
+++ b/src/components/Bottom.jsx
@@ -3,7 +3,7 @@ export default function Bottom() {
       <div className="relative isolate overflow-hidden bg-gray-900">
         <div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gradient-light lg:text-5xl">
+            <h2 className="text-3xl font-bold tracking-tight text-white  lg:text-5xl">
               The Future of Collaboration
               <br />
               is now.
@@ -13,8 +13,10 @@ export default function Bottom() {
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
               <a
-                href="#"
-                className="rounded-2xl btn-gradient-dark2 px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                href="https://portal.ourverse.tf"
+                className="rounded-2xl btn-dark text-base font-semibold text-gray-900"
+                target="_blank"
+                rel="noopener noreferrer"c
               >
                 Sign Up Now
               </a>
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index e13b5f3..319f6e2 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 export function Button({ className, ...props }) {
   className = clsx(
-    'inline-flex justify-center rounded-2xl btn-gradient-dark py-2 px-4 text-xs font-semibold text-white hover:btn-gradient-dark-hover focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500 active:text-white/70',
+    'inline-flex justify-center rounded-2xl btn-dark py-4 px-3 text-sm font-semibold text-white hover:btn-dark-hover focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500 active:text-white/70',
     className,
   )
 
diff --git a/src/components/Communhero.jsx b/src/components/Communhero.jsx
index 87b76f4..66ed321 100644
--- a/src/components/Communhero.jsx
+++ b/src/components/Communhero.jsx
@@ -15,9 +15,9 @@ export default function Communhero() {
       
       {/* Content container with a higher z-index */}
       <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="mt-2 text-3xl font-semibold tracking-tight text-gradient sm:text-4xl">
-          A United Community <br/>Creating the Future of <br/>Virtual Worlds
+        <div className="mx-auto max-w-xl lg:mx-0">
+          <h2 className="mt-2 lg:text-5xl font-semibold tracking-tight text-white text-3xl">
+          Create the Future of Virtual World Together 
           </h2>
           <p className="mt-6 section-text-light font-display max-w-xl text-purple-50">
           Join a global movement where visionaries, creators, and innovators come together to shape immersive digital experiences. 
@@ -29,7 +29,7 @@ export default function Communhero() {
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
               href="#"
-              className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
             >
               Join OurVerse
             </a>
diff --git a/src/components/Cta.jsx b/src/components/Cta.jsx
index 43d8da1..538f3c0 100644
--- a/src/components/Cta.jsx
+++ b/src/components/Cta.jsx
@@ -20,10 +20,13 @@ export default function CTA() {
             <div className="mt-8">
               <a
                 href="/community.html"
-                className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm btn-gradient-dark2"
+                className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"
               >
                 Be a Part of OurVerse
               </a>
+              <a href="https://threefold.io" className=" inline-flex  text-base py-2.5 font-semibold leading-6 text-link" target="_blank" rel="noopener noreferrer">
+                Visit ThreeFold  <span aria-hidden="true"> →</span>
+            </a>
             </div>
           </div>
         </div>
diff --git a/src/components/Eventbanner.jsx b/src/components/Eventbanner.jsx
index c675b34..b4564e1 100644
--- a/src/components/Eventbanner.jsx
+++ b/src/components/Eventbanner.jsx
@@ -18,16 +18,16 @@ export default function Eventbanner() {
             <div aria-hidden="true" className="relative h-32 w-full lg:hidden" />
             <div className="absolute py-4 inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-purple-950 bg-opacity-90 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96  lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
               <div>
-                <h2 className="mt-4 lg:text-3xl text-xl font-bold text-gradient-light">OurVerse </h2>
-                    <h2 className="lg:text-3xl text-xl font-bold text-gradient-light">FutureFest 2024</h2>
-                    <h3 className="text-xl font-bold text-gradient-light">Nov 22 - 24</h3>
+                <h2 className="mt-4 lg:text-3xl text-xl font-bold text-white">OurVerse </h2>
+                    <h2 className="lg:text-3xl text-xl font-bold text-white">FutureFest 2024</h2>
+                    <h3 className="text-xl font-bold text-white">Nov 22 - 24</h3>
                 <p className="mt-4 text-md text-gray-300">
                 OurVerse's OurFutureFest connects freelancers, innovators, and businesses in the Metaverse, empowering them to explore new technologies and collaborate seamlessly across boundaries.
                 </p>
               </div>
               <a
                 href="/events/versefest.html"
-                className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-gradient-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
+                className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
               >
                 Register Now
               </a>
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index f91d269..66bf661 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -54,11 +54,11 @@ const featuredPost = {
             <div className="mt-4 flex items-center gap-x-6">
                     <a
                       href="#"
-                      className="rounded-2xl font-semibold btn-gradient-dark2 text-sm leading-6"
+                      className="rounded-2xl font-semibold btn-dark text-base leading-6"
                     >
                       Learn More
                     </a>
-                    <a href="/events" className="text-sm font-semibold leading-6 text-cyan-600 hover:text-purple-700">
+                    <a href="/events" className="text-base font-semibold leading-6 text-linkgo">
                       See more events <span aria-hidden="true">→</span>
                     </a>
                   </div>
diff --git a/src/components/Featurehero.jsx b/src/components/Featurehero.jsx
index e30ca68..099a1fe 100644
--- a/src/components/Featurehero.jsx
+++ b/src/components/Featurehero.jsx
@@ -17,7 +17,7 @@ export default function Featurehero() {
       </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="lg:text-6xl font-semibold tracking-tight text-gradient text-xl">The Future of Collaboration</h2>
+          <h2 className="lg:text-6xl font-semibold tracking-tight text-white text-4xl">The Future of Collaboration</h2>
           <p className="mt-6 section-text-light max-w-xl font-display">
           Step into the future of communication and collaboration with immersive virtual environments. 
           OurVerse provides innovative tools that transform your events, meetings, and creative projects, 
@@ -25,8 +25,10 @@ export default function Featurehero() {
           </p>
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
-              href="#"
-              className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+              href="https://portal.ourverse.tf"
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Join OurVerse
             </a>
diff --git a/src/components/Featureshome.jsx b/src/components/Featureshome.jsx
index 2c296bc..e15835d 100644
--- a/src/components/Featureshome.jsx
+++ b/src/components/Featureshome.jsx
@@ -82,40 +82,19 @@ export default function Featureshome() {
         </svg>
 
         <div className="relative">
-<<<<<<< HEAD
-          <h2 className="text-center lg:text-4xl font-bold leading-8 tracking-tight font-gradient text-2xl">
-          The Future of Communication and Collaboration
-          </h2>
-          <p className="mx-auto mt-4 max-w-3xl text-center text-xl text-purple-700">
-=======
           <h2 className="text-center h3-title">
           The Future of Communication and Collaboration
           </h2>
-<<<<<<< HEAD
           <p className="mx-auto mt-4 max-w-3xl text-center section-text">
->>>>>>> 9bb32049f9694017a1195f230654a76d796df3af
-=======
-          <p className="mx-auto mt-4 max-w-3xl text-center section-text font-display ">
->>>>>>> development
           OurVerse offers cutting-edge tools and immersive virtual environments designed to bring your events, meetings, and creative projects to life in new and exciting ways.
           </p>
         </div>
 
         <div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
           <div className="relative">
-<<<<<<< HEAD
-            <h2 className="text-base  font-medium font-mono leading-7 text-purple-700">Features</h2>
-            <h3 className="text-2xl font-bold tracking-tight text-purple-700 sm:text-3xl">Collaboration & Creation Tools</h3>
-            <p className="mt-3 text-lg text-purple-500">
-=======
             <h2 className="text-base  font-medium font-mono leading-7 text-cyan-700">Features</h2>
             <h3 className="h3-title">Collaboration & Creation Tools</h3>
-<<<<<<< HEAD
             <p className="mt-4 section-text">
->>>>>>> 9bb32049f9694017a1195f230654a76d796df3af
-=======
-            <p className="mt-4 section-text font-display ">
->>>>>>> development
             Transform how you and your team work together with our innovative, real-time creative tools.
             </p>
 
@@ -123,21 +102,12 @@ export default function Featureshome() {
               {transferFeatures.map((item) => (
                 <div key={item.id} className="relative">
                   <dt>
-<<<<<<< HEAD
-                    <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500 text-white">
-                      <item.icon aria-hidden="true" className="h-8 w-8" />
-                    </div>
-                    <p className="ml-16 text-lg font-semibold leading-6 text-purple-700">{item.name}</p>
-                  </dt>
-                  <dd className="ml-16 mt-2 text-base text-purple-500">{item.description}</dd>
-=======
                     <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-gradient text-white">
                       <item.icon aria-hidden="true" className="h-8 w-8" />
                     </div>
                     <p className="ml-16 text-lg font-semibold leading-6 text-cyan-700">{item.name}</p>
                   </dt>
                   <dd className="ml-16 mt-2 text-base text-purple-700">{item.description}</dd>
->>>>>>> 9bb32049f9694017a1195f230654a76d796df3af
                 </div>
               ))}
             </dl>
@@ -206,31 +176,16 @@ export default function Featureshome() {
                 {communicationFeatures.map((item) => (
                   <div key={item.id} className="relative">
                     <dt>
-<<<<<<< HEAD
-                      <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500 text-white">
-                        <item.icon aria-hidden="true" className="h-8 w-8" />
-                      </div>
-                      <p className="ml-16 text-lg font-semibold leading-6 text-purple-700">{item.name}</p>
-                    </dt>
-                    <dd className="ml-16 mt-2 text-base text-purple-500">{item.description}</dd>
-=======
                       <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-gradient text-white">
                         <item.icon aria-hidden="true" className="h-8 w-8" />
                       </div>
                       <p className="ml-16 text-lg font-semibold leading-6 text-cyan-700">{item.name}</p>
                     </dt>
                     <dd className="ml-16 mt-2 text-base text-purple-700">{item.description}</dd>
->>>>>>> 9bb32049f9694017a1195f230654a76d796df3af
                   </div>
                 ))}
                 <div className="mt-6">
-                  <a
-                    href="/features"
-<<<<<<< HEAD
-                    className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-gradient"
-=======
-                    className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-gradient-dark"
->>>>>>> 9bb32049f9694017a1195f230654a76d796df3af
+                  <a href="/features" className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-dark"
                   >
                     Explore Features
                   </a>
diff --git a/src/components/HeroFeature.jsx b/src/components/HeroFeature.jsx
index a0fd435..75aab66 100644
--- a/src/components/HeroFeature.jsx
+++ b/src/components/HeroFeature.jsx
@@ -64,11 +64,11 @@ import {
         <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
               href="#"
-              className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
             >
               Try Now
             </a>
-            <a href="#" className="text-sm font-semibold leading-6 text-purple-900 hover:text-purple-500">
+            <a href="/heroverse.html" className="text-base font-semibold leading-6 text-link">
               Learn more <span aria-hidden="true">→</span>
             </a>
           </div>
diff --git a/src/components/Heropage.jsx b/src/components/Heropage.jsx
index 46e965b..9df3fac 100644
--- a/src/components/Heropage.jsx
+++ b/src/components/Heropage.jsx
@@ -20,16 +20,16 @@ export function Heropage() {
         </video>
 
         <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
-          <h1 className="font-display lg:max-w-3xl font-bold text-gradient tracking-tighter lg:text-6xl text-4xl">
+          <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-6xl text-4xl">
           OurHero Verse 3D
           </h1>
-          <h2 className="font-display mt-8 lg:max-w-4xl section-text-light">OurVerse has developed <span className='text-gradient font-semibold'>OurHero Verse 3D</span>, a cutting-edge system that allows users to generate full 3D virtual environments using text input alone. With this tool, users can create immersive and interactive environments, tailored to their needs, simply by describing them.  <br/> <br/>In addition to full environments, the system can generate HDRI environments, ensuring a surrounding atmosphere that matches the generated space. </h2>
+          <h2 className="font-display mt-8 lg:max-w-4xl section-text-light">OurVerse has developed <span className='font-semibold text-white'>OurHero Verse 3D</span>, a cutting-edge system that allows users to generate full 3D virtual environments using text input alone. With this tool, users can create immersive and interactive environments, tailored to their needs, simply by describing them.  <br/> <br/>In addition to full environments, the system can generate HDRI environments, ensuring a surrounding atmosphere that matches the generated space. </h2>
           <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
           </div>
           <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
               href="#"
-              className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold shadow-sm"
             >
               Try HeroVerse 3D
             </a>
diff --git a/src/components/Homepage.jsx b/src/components/Homepage.jsx
index c0f6ac0..a577b36 100644
--- a/src/components/Homepage.jsx
+++ b/src/components/Homepage.jsx
@@ -21,19 +21,21 @@ export function Homepage() {
 
         <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
           <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-7xl text-5xl">
-            The Future of <span className='text-gradient-light'>Collaboration is Now.</span>
+            The Future of <span className='text-white'>Collaboration is Now.</span>
           </h1>
           <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
           </div>
           <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
-              href="#"
-              className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              href="https://portal.ourverse.tf"
+              target="_blank" 
+              rel="noopener noreferrer" 
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold"
             >
               Join OurVerse
             </a>
-            <a href="#" className="text-sm font-semibold leading-6 text-white hover:text-purple-200">
-              Learn more <span aria-hidden="true">→</span>
+            <a href="/features.html" className="text-base font-semibold leading-6 text-white hover:text-purple-200">
+              Discover Features <span aria-hidden="true">→</span>
             </a>
           </div>
         </div>
diff --git a/src/components/Phases.jsx b/src/components/Phases.jsx
index b516b5b..eaa4a33 100644
--- a/src/components/Phases.jsx
+++ b/src/components/Phases.jsx
@@ -44,7 +44,7 @@ export function Phasesdark() {
     return (
         <div className="bg-gradient-dark min-h-screen">
           <div className="mx-auto max-w-7xl py-24 px-6 lg:px-8">
-            <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient-light text-3xl">
+            <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-3xl">
               Experience True Collaboration
             </h2>
             <p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">
@@ -62,7 +62,7 @@ export function Phasesdark() {
                   <time
                     dateTime={item.dateTime}
                     className={`flex items-center text-md font-semibold leading-6 ${
-                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white lg:text-xl' : 'text-purple-200'
                     }`}
                   >
                     <svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
@@ -72,7 +72,7 @@ export function Phasesdark() {
                   </time>
                   <p
                     className={`mt-6 text-lg font-semibold leading-6 tracking-tight ${
-                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white' : 'text-purple-200'
                     }`}
                   >
                     {item.name}
diff --git a/src/components/Usecases.jsx b/src/components/Usecases.jsx
index 54b31bb..602e1c7 100644
--- a/src/components/Usecases.jsx
+++ b/src/components/Usecases.jsx
@@ -15,8 +15,8 @@ export default function Usecases() {
       {/* Content container with a higher z-index */}
       <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="mt-2 text-3xl font-semibold tracking-tight text-gradient sm:text-4xl">
-            Exploring Impactful<br/>Use Cases from <br/>Real-life Applications
+          <h2 className="mt-2 lg:text-5xl font-semibold tracking-tight text-white text-3xl">
+            Exploring Impactful Use Cases from Real-life Applications
           </h2>
           <p className="mt-6 text-lg max-w-xl leading-8 text-purple-50">
             Discover how OurVerse uniquely addresses challenges and fosters innovation in education, healthcare, environmental conservation, 
@@ -26,8 +26,10 @@ export default function Usecases() {
         
         <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
-              href="#"
-              className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+              href="https://portal.ourverse.tf"
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Join OurVerse
             </a>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 608ee3d..ef2e3b1 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -309,3 +309,125 @@
     color: rgb(116, 0, 204); /* equivalent to 'text-cyan-700' */
 }
 
+/* NEW STYLES */
+
+/* For text on a dark background */
+.text-light {
+  background-color: #f0e3f9; /* Light purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+/* For text on a light background */
+.text-dark {
+  background-color: #4e2c7e; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+
+
+.text-gradient-new {
+  background-image: linear-gradient(45deg, #5e4589 0%, #341a55 100%); /* Gradient dark purple */
+  background-color: #341a55;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.text-gradient-new2 {
+  background-image: linear-gradient(45deg, #ceb1ff 0%, #fcfcfc 50%, #ceb1ff  100%); /* Gradient dark purple */
+  background-color: #341a55;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+   /* H3 Section title */
+
+   .h3-title-new {
+    font-weight: 600; /* Equivalent to font-semibold */
+    letter-spacing: -0.01em; /* Equivalent to tracking-tight */
+    line-height: 1.2; /* Equivalent to leading-normal */
+    font-size: 1.25rem; /* Equivalent to text-xl */
+    background-color: #5e4589;
+    background-image: linear-gradient(45deg, #684c97 0%, #341a55 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+
+  @media (min-width: 1024px) {
+    .h3-title-new {
+      font-size: 2.25rem; /* Equivalent to lg:text-4xl */
+    }
+  }
+
+/* Button styles */
+
+/* Button gradient for dark backgrounds */
+.btn-light {
+  background: radial-gradient(circle, #eee1ff 0%, #9971e0 100%); /* Radial gradient with #eee1ff in the center */
+  color: #341a55;
+  padding: 8px 15px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.btn-light:hover {
+  background: radial-gradient(circle, #9971e0 0%, #341a55 100%); /* Reverse radial gradient on hover */
+  color: #eee1ff;
+}
+
+
+
+/* Button gradient for light backgrounds */
+.btn-dark {
+  background: radial-gradient(circle, #5e4589 0%, #341a55 100%); /* Radial gradient dark purple */
+  color: white;
+  padding: 10px 18px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.btn-dark:hover {
+  background: radial-gradient(circle, #341a55 0%, #5e4589 100%); /* Reverse radial gradient on hover */
+}
+
+.text-link {
+  background-color: #703db7; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.text-link:hover {
+  background-color: #4e2c7e; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.btn-new {
+  background:  radial-gradient(circle, #7152a6 0%, #755bb2 0%, #5e4589 50%, #341a55 100%); /* Light purple gradient similar to the bird */
+  color: #ffffff; /* Dark purple color similar to the text */
+  padding: 8px 15px;
+  border: none;
+  cursor: pointer;
+  border-radius: 1rem /* 16px */;
+}
+
+.btn-new:hover {
+  background: radial-gradient(circle, #341a55 0%, #5e4589 100%); /* Reverse gradient on hover */
+}