diff --git a/app/page.tsx b/app/page.tsx
index 1ee36b7..d6d9f35 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -28,13 +28,13 @@ const Page = async ({ searchParams }: PageProps) => {
 
   return (
     <section>
-      <h1 className="text-center">The Hub for Every Dev <br /> Event You Can&apos;t Miss</h1>
-      <p className="text-center mt-5">Hackathons, Meetups, and Conferences, All in One Place</p>
+     <h1 className="text-center drop-shadow-[0_6px_30px_rgba(0,0,0,0.7)]">The Hub for Every Dev <br /> Event You Can&apos;t Miss</h1>
+      <p className="text-center mt-5 max-w-3xl mx-auto text-lg text-gray-200 leading-8 drop-shadow-[0_2px_10px_rgba(0,0,0,0.6)]">Hackathons, Meetups, and Conferences, All in One Place</p>
 
       <ExploreBtn />
 
       {/* 3. Insert the newly generated Search and Filter component bar */}
-      <div className="mt-10">
+      <div className="mt-12">
         <SearchFilters />
       </div>
 
@@ -52,10 +52,10 @@ const Page = async ({ searchParams }: PageProps) => {
           </ul>
         ) : (
           /* Smooth Contextual Empty State displayed dynamically */
-          <div className="flex flex-col items-center justify-center text-center p-12 border border-dashed border-gray-300 rounded-2xl max-w-xl mx-auto bg-white/50">
-            <h4 className="text-lg font-semibold text-gray-800 mb-1">No events found</h4>
+           <div className="flex flex-col items-center justify-center text-center p-12 rounded-2xl max-w-xl mx-auto border border-cyan-500/20 bg-[#111827]/80 backdrop-blur-md shadow-lg">
+            <h4 className="text-lg font-semibold text-white mb-2">No events found</h4>
             {/* Fixed Linting Error: Escaped the apostrophe here */}
-            <p className="text-sm text-gray-500 max-w-xs">
+            <p className="text-sm text-gray-300 max-w-xs leading-6">
               We couldn&apos;t find any listings matching your search constraints. Try checking your spelling or adjusting filters.
             </p>
           </div>
diff --git a/components/SearchFilters.tsx b/components/SearchFilters.tsx
index add7e18..439a593 100644
--- a/components/SearchFilters.tsx
+++ b/components/SearchFilters.tsx
@@ -2,12 +2,10 @@
 
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
-import { captureEvent } from '@/lib/posthog/helpers';
-import { POSTHOG_EVENTS } from '@/lib/posthog/events';
+
 
 const MODES = ['All', 'Online', 'Offline', 'Hybrid'];
 const POPULAR_TAGS = ['All', 'Hackathon', 'Meetup', 'Web3', 'React', 'DevOps', 'AI'];
-
 const SORT_OPTIONS = [
   { label: 'Newest First', value: '' },
   { label: 'Date (Earliest First)', value: 'date_asc' },
@@ -32,29 +30,33 @@ export default function SearchFilters() {
       params.delete(key);
     }
     router.push(`${pathname}?${params.toString()}`, { scroll: false });
-    captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, { filter: key, value });
+    captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, {
+      filter: key,
+      value,
+    });
   };
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    const delayDebounceFn = setTimeout(() => {
       handleFilterChange('query', search);
       if (search.trim()) {
-        captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, { query: search });
+        captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, {
+          query: search,
+        });
       }
     }, 400);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(delayDebounceFn);
   }, [search]);
 
-  const selectClass =
-    'px-3 py-1.5 rounded-lg border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] transition cursor-pointer';
+  const selectClass = 'px-3 py-1.5 rounded-lg border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] transition cursor-pointer';
 
   return (
     <div className="w-full max-w-6xl mx-auto my-6 px-4 space-y-4">
-      {/* Search input */}
       <div className="relative">
         <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--color-light-200)] text-sm pointer-events-none">
           🔍
         </span>
+
         <input
           id="event-search-input"
           type="text"
@@ -64,12 +66,8 @@ export default function SearchFilters() {
           className="w-full pl-10 pr-4 py-3 rounded-xl border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] placeholder:text-[var(--color-light-200)] focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] shadow-sm transition"
         />
       </div>
-
-      {/* Filter row */}
-      <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-1">
-
-        {/* Mode filter */}
-        <div className="flex items-center gap-2 shrink-0">
+      <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-2">
+        <div className="flex items-center gap-2">
           <span className="text-sm font-medium text-[var(--color-light-200)]">Mode:</span>
           <select
             id="event-mode-filter"
@@ -82,11 +80,9 @@ export default function SearchFilters() {
             ))}
           </select>
         </div>
-
-        {/* Tag pills */}
         <div className="flex items-center gap-2 overflow-x-auto max-w-full">
           <span className="text-sm font-medium text-[var(--color-light-200)] shrink-0">Tags:</span>
-          <div className="flex gap-1.5 flex-wrap">
+          <div className="flex gap-1.5">
             {POPULAR_TAGS.map((tag) => {
               const isActive = (searchParams.get('tag') || 'All') === tag;
               return (
@@ -94,19 +90,18 @@ export default function SearchFilters() {
                   key={tag}
                   id={`tag-filter-${tag.toLowerCase()}`}
                   onClick={() => handleFilterChange('tag', tag)}
-                  className={`px-3 py-1 text-xs font-medium rounded-full border transition cursor-pointer ${
-                    isActive
-                      ? 'bg-[var(--primary)] text-black border-[var(--primary)]'
-                      : 'bg-[var(--color-dark-100)] text-[var(--color-light-100)] border-[var(--color-border-dark)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]'
-                  }`}
+                  className={`px-3 py-1 text-xs font-medium rounded-full border transition cursor-pointer ${isActive
+                    ? 'bg-[var(--primary)] text-black border-[var(--primary)]'
+                    : 'bg-[var(--color-dark-100)] text-[var(--color-light-100)] border-[var(--color-border-dark)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]'
+                    }`}
                 >
                   {tag}
                 </button>
               );
             })}
           </div>
-        </div>
 
+        </div>
         {/* Sort dropdown */}
         <div className="flex items-center gap-2 shrink-0">
           <label
@@ -130,5 +125,7 @@ export default function SearchFilters() {
         </div>
       </div>
     </div>
+
+
   );
 }