diff --git a/app/page.tsx b/app/page.tsx
index 75eb149..0018a04 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react';
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
+import { Input } from '@/components/ui/input';
 
 export default function Home() {
   const [isClient, setIsClient] = useState(false);
@@ -33,12 +34,15 @@ export default function Home() {
         {/* Page Content Over the Video */}
         <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
           <div className="container mx-auto p-4">
-            <input
-              type="text"
-              placeholder="Search events..."
-              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
-            />
+            <div className="flex items-center justify-center">
+              <Input
+                type="text"
+                placeholder="Search events ..."
+                className="search-bar mt-4 p-2 border bg-white bg-opacity-25 border-gray-300 rounded-xl w-full max-w-5xl text-white"
+              />
+            </div>
             <main>
+              <br></br>
               <section className="mb-8">
                 <h2 className="text-2xl font-semibold text-white mb-4">
                   Featured Events