diff --git a/src/app/(main)/page.jsx b/src/app/(main)/page.jsx
index 1ebb53a..50d2c44 100644
--- a/src/app/(main)/page.jsx
+++ b/src/app/(main)/page.jsx
@@ -1,9 +1,9 @@
 import { Homepage } from '@/components/Homepage'
 import { Hero } from '@/components/Hero'
+import Community from '@/components/Community'
 import  Communicate  from '@/components/Communicate'
 import Collaborate from '@/components/Collaborate'
 import Build from '@/components/Build'
-import { Newsletter } from '@/components/Newsletter'
 import { Product } from '@/components/Product'
 import { Speakers } from '@/components/Speakers'
 import { Sponsors } from '@/components/Sponsors'
@@ -18,7 +18,7 @@ export default function Home() {
       <Collaborate />
       <Build />
       <Product />
-      <Newsletter />
+      <Community />
     </>
   )
 }
diff --git a/src/app/community/page.jsx b/src/app/community/page.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/events/versefest/page.jsx b/src/app/community/versefest/page.jsx
similarity index 100%
rename from src/app/events/versefest/page.jsx
rename to src/app/community/versefest/page.jsx
diff --git a/src/app/usecases/layout.jsx b/src/app/usecases/layout.jsx
new file mode 100644
index 0000000..0ac25f6
--- /dev/null
+++ b/src/app/usecases/layout.jsx
@@ -0,0 +1,5 @@
+import { Layout } from '@/components/Layout'
+
+export default function MainLayout({ children }) {
+  return <Layout>{children}</Layout>
+}
diff --git a/src/app/usecases/page.jsx b/src/app/usecases/page.jsx
new file mode 100644
index 0000000..610bb87
--- /dev/null
+++ b/src/app/usecases/page.jsx
@@ -0,0 +1,11 @@
+import Usecases from '@/components/Usecases'
+import Banner from '@/components/Banner'
+
+export default function usecases() {
+    return (
+      <>
+        <Banner />
+        <Usecases />
+        </>
+  )
+}
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
new file mode 100644
index 0000000..8e9371c
--- /dev/null
+++ b/src/components/Banner.jsx
@@ -0,0 +1,23 @@
+import { XMarkIcon } from '@heroicons/react/20/solid'
+
+export default function Example() {
+  return (
+    <div className="flex items-center gap-x-6 bg-gradient px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+      <p className="text-sm leading-6 text-white">
+        <a href="#">
+          <strong className="font-semibold">OurVerse FutureFest 2024</strong>
+          <svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline h-0.5 w-0.5 fill-current">
+            <circle r={1} cx={1} cy={1} />
+          </svg>
+          Join us at OurWorld Verse from Oct 25 – 27 to see what’s coming next&nbsp;<span aria-hidden="true">&rarr;</span>
+        </a>
+      </p>
+      <div className="flex flex-1 justify-end">
+        <button type="button" className="-m-3 p-3 focus-visible:outline-offset-[-4px]">
+          <span className="sr-only">Dismiss</span>
+          <XMarkIcon aria-hidden="true" className="h-5 w-5 text-white" />
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 74b48ed..7cead2f 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 bg-blue-700 py-2 px-4 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
+    'inline-flex justify-center rounded-2xl bg-gradient py-2 px-4 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
     className,
   )