diff --git a/app/events/page.tsx b/app/events/page.tsx
index 429bdc7..8324a90 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -7,6 +7,7 @@ import Footer from '../../components/custom/footer';
 import { ethers } from 'ethers';
 import { getContract } from '@/lib/ethers';
 import { fetchEvents } from '@/lib/fetchEvents';
+import { Button } from '@/components/ui/button';
 
 export const dynamic = 'force-dynamic';
 
@@ -148,6 +149,7 @@ const EventsPage: React.FC = () => {
           Your browser does not support the video tag.
         </video>
         <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+        <br></br>
 
         <div className="relative z-20 container mx-auto p-4 pt-16">
           <Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}>
@@ -161,37 +163,37 @@ const EventsPage: React.FC = () => {
           </Suspense>
           <div className="flex mt-4 space-x-4">
             <div className="relative" ref={sortRef}>
-              <button
-                className="bg-blue-500 text-white px-4 py-2 rounded"
+              <Button
+                className="bg-light-purple bg-opacity-75 rounded"
                 onClick={() => setShowSortMenu(!showSortMenu)}
               >
                 Sort
-              </button>
+              </Button>
               {showSortMenu && (
                 <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
-                  <button onClick={() => setSortOption('price-asc')}>
+                  <Button variant="ghost" onClick={() => setSortOption('price-asc')}>
                     Price Ascending
-                  </button>
-                  <button onClick={() => setSortOption('price-desc')}>
+                  </Button>
+                  <Button variant="ghost" onClick={() => setSortOption('price-desc')}>
                     Price Descending
-                  </button>
-                  <button onClick={() => setSortOption('date-asc')}>
+                  </Button>
+                  <Button variant="ghost" onClick={() => setSortOption('date-asc')}>
                     Date Ascending
-                  </button>
-                  <button onClick={() => setSortOption('date-desc')}>
+                  </Button>
+                  <Button variant="ghost" onClick={() => setSortOption('date-desc')}>
                     Date Descending
-                  </button>
+                  </Button>
                 </div>
               )}
             </div>
 
             <div className="relative" ref={filterRef}>
-              <button
-                className="bg-blue-500 text-white px-4 py-2 rounded"
+              <Button
+                className="bg-light-purple bg-opacity-75 rounded"
                 onClick={() => setShowFilterMenu(!showFilterMenu)}
               >
                 Filters
-              </button>
+              </Button>
               {showFilterMenu && (
                 <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
                   <label className="flex items-center">
@@ -244,6 +246,7 @@ const EventsPage: React.FC = () => {
           <main>
             <section>
               <h2 className="text-2xl font-semibold text-white mb-4">
+                <br></br>
                 Available Events
               </h2>
               <div className="grid grid-cols-1 gap-6">
diff --git a/components/custom/EventDescription.tsx b/components/custom/EventDescription.tsx
index f7e1daf..03b4497 100644
--- a/components/custom/EventDescription.tsx
+++ b/components/custom/EventDescription.tsx
@@ -46,7 +46,7 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
         </h1>
         <Badge
           variant="outline"
-          className="text-blue-600 bg-blue-100 px-3 py-1 rounded-full"
+          className="text-light-purple bg-blue-100 px-3 py-1 rounded-full"
         >
           Price: ${eventDetails.ticketPrice.toFixed(2)}
         </Badge>
@@ -74,7 +74,8 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
       <CardFooter className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
         <Button
           variant="default"
-          className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
+          // className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
+          className="w-full md: w-auto px-4 py-2 text-left hover:bg-purple hover:bg-opacity-75"
           onClick={handleBuyNow}
         >
           Buy now Using MetaMask