diff --git a/dev-share-ui/app/search/page.tsx b/dev-share-ui/app/search/page.tsx
index ad888d4..576efdf 100644
--- a/dev-share-ui/app/search/page.tsx
+++ b/dev-share-ui/app/search/page.tsx
@@ -1,64 +1,9 @@
-'use client';
-
-import { useState } from 'react';
 import HeroSection from '@/components/HeroSection';
-import { mockResources } from '@/lib/data';
-import ResourceCard from '@/components/ResourceCard';
-import FromAISearchResourceCard from '@/components/FromAISearchResourceCard';
-import { handleGlobalSearch, searchResources } from '@/services/search-service';
 
 export default function SearchPage() {
-  const [resources, setResources] = useState(mockResources);
-  const [isSearching, setIsSearching] = useState(false);
-  const [SearchQuery, setSearchQuery] = useState('');
-  const topRelative = 6;
-
-  const handleSearch = async (query: string) => {
-    setIsSearching(true);
-    setSearchQuery(query);
-    setResources([]);
-
-    const result = await searchResources(query);
-    if (result.length === 0) {
-      await handleGlobalSearch();
-    } else {
-      setResources(result);
-    }
-    setIsSearching(false);
-  };
-
-  const handleResourceAction = (id: string, action: 'like' | 'bookmark') => {
-    // TODO: Integrate with feedback loop API
-    // Integration point for feedback loop:
-    // 1. Send user action to your API
-    // 2. Update resource in your database
-    // 3. Use this data to improve recommendations
-
-    setResources((prevResources) =>
-      prevResources.map((resource) => {
-        if (resource.id === id) {
-          if (action === 'like') {
-            return {
-              ...resource,
-              likes: resource.isLiked ? resource.likes - 1 : resource.likes + 1,
-              isLiked: !resource.isLiked,
-            };
-          } else {
-            return { ...resource, isBookmarked: !resource.isBookmarked };
-          }
-        }
-        return resource;
-      })
-    );
-  };
-
-  const handleSearchSuggestion = (suggestion: string) => {
-    handleSearch(suggestion);
-  };
-
   return (
     <div className="bg-background flex grow pb-16 justify-center items-center">
-      <HeroSection onSearch={handleSearch} isSearching={isSearching} />
+      <HeroSection />
     </div>
   );
 }
diff --git a/dev-share-ui/components/HeroSection.tsx b/dev-share-ui/components/HeroSection.tsx
index e80c9d0..9830661 100644
--- a/dev-share-ui/components/HeroSection.tsx
+++ b/dev-share-ui/components/HeroSection.tsx
@@ -1,56 +1,17 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Search, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Particles } from '@/components/magicui/particles';
 import { useTheme } from 'next-themes';
-import { useRouter } from 'next/navigation';
 import SearchBar from './SearchBar';
 
-interface HeroSectionProps {
-  onSearch: (query: string) => void;
-  isSearching: boolean;
-}
-
-export default function HeroSection({
-  onSearch,
-  isSearching,
-}: HeroSectionProps) {
-  const [query, setQuery] = useState('');
-  const [placeholderIndex, setPlaceholderIndex] = useState(0);
+export default function HeroSection() {
   const { resolvedTheme } = useTheme();
   const [color, setColor] = useState('#ffffff');
-  const router = useRouter();
+
   useEffect(() => {
     setColor(resolvedTheme === 'dark' ? '#ffffff' : '#000000');
   }, [resolvedTheme]);
-  const placeholders = [
-    'Search resources, tools, guides...',
-    'TypeScript tutorials for beginners',
-    'How to optimize Next.js performance',
-    'GraphQL resources for frontend developers',
-    'Learn CSS Grid and Flexbox',
-    'Node.js backend architecture patterns',
-  ];
-
-  // Rotate placeholder text every 5 seconds
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setPlaceholderIndex((prev) => (prev + 1) % placeholders.length);
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, [placeholders.length]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (query.trim()) {
-      onSearch(query);
-      router.push(`/result`);
-    }
-  };
 
   return (
     <section className="w-full bg-background">
@@ -64,7 +25,7 @@ export default function HeroSection({
         <div className="flex flex-col gap-8 py-10">
           <div className="flex flex-row items-center justify-center w-full mb-2">
             <div className="flex flex-col gap-6 ">
-              <h2 className="text-5xl font-bold tracking-tight text-foreground mb-1">
+              <h2 className="text-5xl font-bold tracking-tight text-center text-foreground mb-1">
                 Discover Resources
               </h2>
               <p className="text-sm text-muted-foreground text-center">
@@ -72,19 +33,6 @@ export default function HeroSection({
               </p>
             </div>
           </div>
-          {/* <form onSubmit={handleSubmit} className="flex w-full space-x-2">
-            <div className="relative flex-1 flex items-center justify-center">
-              <Search className="relative left-8 text-muted-foreground" />
-              <Input
-                type="text"
-                placeholder={placeholders[placeholderIndex]}
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                className="pl-10 h-11 rounded-lg bg-card transition-all duration-300 focus:ring-2 focus:ring-primary/20 w-3/5"
-                disabled={isSearching}
-              />
-            </div>
-          </form> */}
           <SearchBar />
         </div>
       </div>
diff --git a/dev-share-ui/components/Navbar.tsx b/dev-share-ui/components/Navbar.tsx
index 0f85992..a753f19 100644
--- a/dev-share-ui/components/Navbar.tsx
+++ b/dev-share-ui/components/Navbar.tsx
@@ -2,19 +2,12 @@
 
 import Link from 'next/link';
 import { BookMarked } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
 export default function Navbar() {
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm px-4">
-      <div className="container flex h-16 items-center justify-between mx-auto max-w-7xl">
+    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
+      <div className="flex h-16 items-center justify-between px-12">
         <div className="flex items-center gap-2">
           <BookMarked className="w-6 h-6" />
           <Link href="/" className="text-xl font-bold tracking-tight">
@@ -23,68 +16,14 @@ export default function Navbar() {
         </div>
 
         <nav className="hidden md:flex items-center gap-8">
-          <Link
-            href="/"
-            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Discover
-          </Link>
           <Link
             href="/share"
             className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
           >
             Share
           </Link>
-          <Link
-            href="/collections"
-            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Collections
-          </Link>
-        </nav>
-
-        <div className="flex items-center gap-4">
           <ThemeToggle />
-          <div className="hidden md:block">
-            <Button>Sign In</Button>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild className="md:hidden">
-              <Button variant="ghost" size="icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="h-5 w-5"
-                >
-                  <line x1="4" x2="20" y1="12" y2="12" />
-                  <line x1="4" x2="20" y1="6" y2="6" />
-                  <line x1="4" x2="20" y1="18" y2="18" />
-                </svg>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild>
-                <Link href="/">Discover</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/share">Share</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/collections">Collections</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/sign-in">Sign In</Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        </nav>
       </div>
     </header>
   );
diff --git a/dev-share-ui/components/ResourceCard.tsx b/dev-share-ui/components/ResourceCard.tsx
index ede612f..c36ad27 100644
--- a/dev-share-ui/components/ResourceCard.tsx
+++ b/dev-share-ui/components/ResourceCard.tsx
@@ -5,132 +5,68 @@ import {
   ThumbsUp,
   Bookmark,
   Link as LinkIcon,
-  MessageSquare,
 } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Resource } from '@/lib/types';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
 import ReadMoreArea from '@foxeian/react-read-more';
 
 interface ResourceCardProps {
   resource: Resource;
   onAction: (id: string, action: 'like' | 'bookmark') => void;
-  isAIGenerated?: boolean;
-}
-const buttonStyle = {};
-
-function timeAgo(dateString: string) {
-  const now = new Date();
-  const date = new Date(dateString);
-  const diff = now.getTime() - date.getTime();
-  const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
-  if (years > 0) return `over ${years} year${years > 1 ? 's' : ''} ago`;
-  const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
-  if (months > 0) return `${months} month${months > 1 ? 's' : ''} ago`;
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
-  return 'recently';
 }
 
 export default function ResourceCard({
   resource,
   onAction,
-  isAIGenerated = false,
 }: ResourceCardProps) {
   return (
     <Card
-      className={`flex flex-col justify-between min-h-[320px] min-w-0 p-0 rounded-xl border shadow-sm bg-white transition-all duration-300 hover:shadow-md relative ${
-        isAIGenerated ? 'border-indigo-500 ring-2 ring-indigo-200' : ''
+      className={`flex flex-col justify-between min-h-[280px] px-2 pt-4 rounded-xl border-2 shadow-sm bg-background/80 transition-all duration-300 hover:shadow-md relative'
       }`}
     >
-      {/* AI Generated badge */}
-      {isAIGenerated && (
-        <span className="absolute top-4 left-4 z-10 bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs font-semibold shadow border border-indigo-200 flex items-center gap-1">
-          <svg
-            className="w-4 h-4 mr-1"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            viewBox="0 0 20 20"
+      {/* Title and description */}
+      <div className="flex-1 px-6 flex flex-col">
+        <div className="flex flex-row justify-between items-center pt-2">
+          <h1 className="text-xl font-semibold leading-snug mb-1 text-foreground">
+            {resource.title}
+          </h1>
+          <button
+            className={`bg-background/80 rounded-full p-2 shadow-sm border-2 border-muted-foreground/10 hover:bg-primary/10 transition-colors ${
+              resource.isBookmarked ? 'text-primary' : 'text-muted-foreground'
+            }`}
+            onClick={() => onAction(resource.id, 'bookmark')}
+            aria-label={resource.isBookmarked ? 'Remove bookmark' : 'Bookmark'}
           >
-            <path d="M10 2a1 1 0 0 1 1 1v1.07a7.002 7.002 0 0 1 5.93 5.93H18a1 1 0 1 1 0 2h-1.07a7.002 7.002 0 0 1-5.93 5.93V18a1 1 0 1 1-2 0v-1.07a7.002 7.002 0 0 1-5.93-5.93H2a1 1 0 1 1 0-2h1.07a7.002 7.002 0 0 1 5.93-5.93V3a1 1 0 0 1 1-1z" />
-          </svg>
-          AI Generated
-        </span>
-      )}
-      {/* Bookmark button top right */}
-      <button
-        className={`absolute top-4 right-4 z-10 bg-white/80 rounded-full p-2 shadow-sm border border-muted-foreground/10 hover:bg-primary/10 transition-colors ${
-          resource.isBookmarked ? 'text-primary' : 'text-muted-foreground'
-        }`}
-        onClick={() => onAction(resource.id, 'bookmark')}
-        aria-label={resource.isBookmarked ? 'Remove bookmark' : 'Bookmark'}
-      >
-        <Bookmark
-          className={`h-5 w-5 ${resource.isBookmarked ? 'fill-current' : ''}`}
-        />
-      </button>
-      {/* Author and meta */}
-      <div className="flex items-center gap-3 px-6 pt-6 pb-2">
-        {/* <img
-          src={resource.authorAvatar}
-          alt={resource.authorName}
-          className="w-8 h-8 rounded-full object-cover border fill-gray-600"
-        /> */}
-        <div className="w-8 h-8 rounded-full object-cover border bg-slate-500"></div>
-        <div className="flex flex-col">
-          <span className="font-medium text-sm text-foreground leading-tight">
-            {resource.authorName}
-          </span>
-          <span className="text-xs text-muted-foreground">
-            {timeAgo(resource.createdAt)}
-          </span>
+            <Bookmark
+              className={`h-5 w-5 ${
+                resource.isBookmarked ? 'fill-current' : ''
+              }`}
+            />
+          </button>
         </div>
-      </div>
-      {/* User comment (collapsed, tooltip on hover) */}
-      {resource.comment && (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="px-6 pb-1 flex items-start gap-2 cursor-pointer">
-                <MessageSquare className="h-4 w-4 text-muted-foreground mt-0.5" />
-                <span
-                  className="italic text-muted-foreground text-sm line-clamp-1 max-w-full"
-                  style={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {resource.comment}
-                </span>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="top" className="max-w-xs whitespace-pre-line">
-              {resource.comment}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-      {/* Title and description */}
-      <div className="flex-1 px-6 pt-2 pb-0 flex flex-col">
-        <h3 className="text-lg font-semibold leading-snug mb-1 text-foreground">
-          {resource.title}
-        </h3>
+        {/* AI Generated badge */}
+        {resource.isAIGenerated && (
+          <span className="bg-foreground/20 text-primary px-2 py-1 rounded-lg text-xs font-semibold shadow border border-foreground/30 flex flex-wrap items-center gap-1 w-fit">
+            <svg
+              className="w-4 h-4 mr-1"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 20 20"
+            >
+              <path d="M10 2a1 1 0 0 1 1 1v1.07a7.002 7.002 0 0 1 5.93 5.93H18a1 1 0 1 1 0 2h-1.07a7.002 7.002 0 0 1-5.93 5.93V18a1 1 0 1 1-2 0v-1.07a7.002 7.002 0 0 1-5.93-5.93H2a1 1 0 1 1 0-2h1.07a7.002 7.002 0 0 1 5.93-5.93V3a1 1 0 0 1 1-1z" />
+            </svg>
+            Searched with AI
+          </span>
+        )}
         <ReadMoreArea
-          className="flex flex-col" // classes styles of main div (tailwind)
+          className="flex flex-col justify-start" // classes styles of main div (tailwind)
           expandLabel="Read more" // Expand Label
           collapseLabel="Read less" // Collapse Label
           textClassName="text-sm text-muted-foreground" // classes styles of text (tailwind)
-          buttonClassName="text-foreground no-underline" // classes styles of button (tailwind)
-          buttonStyle={buttonStyle}
+          buttonClassName="text-foreground no-underline text-sm" // classes styles of button (tailwind)
           lettersLimit={80} // limit of letters (100 letters)
         >
           {resource.description}
@@ -143,6 +79,7 @@ export default function ResourceCard({
           ))}
         </div>
       </div>
+
       {/* Footer actions */}
       <div className="flex items-center justify-between px-6 py-4 border-t mt-2">
         <div className="flex items-center gap-6 text-muted-foreground">
@@ -165,7 +102,7 @@ export default function ResourceCard({
         <Button
           asChild
           size="sm"
-          className="px-5 font-semibold text-base bg-primary hover:bg-primary/90 text-white"
+          className="p px-4 bg-foreground/90 hover:bg-primary/90 text-background"
         >
           <a
             href={resource.url}
diff --git a/dev-share-ui/components/ResourceCardSkeleton.tsx b/dev-share-ui/components/ResourceCardSkeleton.tsx
index 4010f8a..f062a22 100644
--- a/dev-share-ui/components/ResourceCardSkeleton.tsx
+++ b/dev-share-ui/components/ResourceCardSkeleton.tsx
@@ -3,7 +3,7 @@ import { Card } from './ui/card';
 
 export default function ResourceCardSkeleton() {
   return (
-    <Card className="flex flex-col justify-between min-h-[320px] min-w-0 p-0 rounded-xl border shadow-sm bg-white transition-all duration-300 hover:shadow-md relative animate-pulse">
+    <Card className="flex flex-col justify-between min-h-[320px] min-w-0 p-0 rounded-xl border shadow-sm bg-background transition-all duration-300 hover:shadow-md">
       {/* Top - Avatar and Meta */}
       <div className="flex items-center gap-3 px-6 pt-6 pb-2">
         <Skeleton className="h-8 w-8 rounded-full" />
diff --git a/dev-share-ui/components/ResourceGrid.tsx b/dev-share-ui/components/ResourceGrid.tsx
deleted file mode 100644
index 28ca850..0000000
--- a/dev-share-ui/components/ResourceGrid.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { Resource } from "@/lib/types";
-import ResourceCard from "@/components/ResourceCard";
-import EmptyState from "@/components/EmptyState";
-import { Skeleton } from "@/components/ui/skeleton";
-
-interface ResourceGridProps {
-  resources: Resource[];
-  onAction: (id: string, action: 'like' | 'bookmark') => void;
-  isLoading?: boolean;
-  searchQuery?: string;
-  onSearchSuggestion?: (query: string) => void;
-}
-
-export default function ResourceGrid({ 
-  resources, 
-  onAction, 
-  isLoading = false, 
-  searchQuery,
-  onSearchSuggestion
-}: ResourceGridProps) {
-  // Create skeleton array for loading state
-  const skeletonCards = Array.from({ length: 6 }, (_, i) => i);
-
-  const handleResourceAnimation = (index: number) => {
-    // Add staggered animation delay based on item index
-    return {
-      animationDelay: `${index * 0.05}s`
-    };
-  };
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {skeletonCards.map((i) => (
-          <div key={i} className="space-y-3">
-            <Skeleton className="h-40 w-full rounded-md" />
-            <div className="space-y-2">
-              <Skeleton className="h-5 w-4/5" />
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-3/4" />
-            </div>
-            <div className="flex justify-between items-center pt-2">
-              <div className="flex space-x-2">
-                <Skeleton className="h-8 w-16 rounded-md" />
-                <Skeleton className="h-8 w-8 rounded-md" />
-              </div>
-              <Skeleton className="h-8 w-16 rounded-md" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (resources.length === 0) {
-    return (
-      <EmptyState 
-        searchQuery={searchQuery} 
-        onSearchSuggestion={onSearchSuggestion}
-      />
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {resources.map((resource, index) => (
-        <div 
-          key={resource.id} 
-          className="animate-in fade-in slide-in-from-bottom-4 duration-500 fill-mode-both"
-          style={handleResourceAnimation(index)}
-        >
-          <ResourceCard 
-            resource={resource} 
-            onAction={onAction} 
-            isAIGenerated={resource.isAIGenerated}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/dev-share-ui/components/ResourceTable.tsx b/dev-share-ui/components/ResourceTable.tsx
index 027b352..dbd3af5 100644
--- a/dev-share-ui/components/ResourceTable.tsx
+++ b/dev-share-ui/components/ResourceTable.tsx
@@ -1,40 +1,61 @@
 'use client';
 
+import useSWR from 'swr';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useDebounce } from 'use-debounce';
 import { searchResources } from '@/services/search-service';
 import ResourceCard from './ResourceCard';
 import ResourceTableSkeleton from './ResourceTableSkeleton';
+import { Resource } from '@/lib/types';
+
+const fetcher = (query: string) => searchResources(query);
 
 export default function ResourceTable() {
   const searchParams = useSearchParams();
   const query = searchParams.get('query') || '';
   const [debouncedQuery] = useDebounce(query, 400);
-  const [resources, setResources] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+
+  const { data, isLoading } = useSWR(
+    debouncedQuery.trim() ? ['resources', debouncedQuery] : null, //Caches previous results
+    () => fetcher(debouncedQuery.trim()),
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: 5000, //Avoids rerender too quickly
+    }
+  );
+
+  const [resources, setResources] = useState<Resource[]>([]);
 
   useEffect(() => {
-    let cancelled = false;
-
-    const fetchResources = async () => {
-      setLoading(true);
-      const result = debouncedQuery.trim()
-        ? await searchResources(debouncedQuery)
-        : [];
-      if (!cancelled) {
-        setResources(result);
-        setLoading(false);
-      }
-    };
-
-    fetchResources();
-    return () => {
-      cancelled = true;
-    };
-  }, [debouncedQuery]);
-
-  if (loading) return <ResourceTableSkeleton />;
+    if (data) {
+      setResources(data);
+    }
+  }, [data]);
+
+  const handleResourceAction = (id: string, action: 'like' | 'bookmark') => {
+    setResources((prevResources) =>
+      prevResources.map((resource) => {
+        if (resource.id !== id) return resource;
+
+        if (action === 'like') {
+          return {
+            ...resource,
+            likes: resource.isLiked ? resource.likes - 1 : resource.likes + 1,
+            isLiked: !resource.isLiked,
+          };
+        }
+
+        return { ...resource, isBookmarked: !resource.isBookmarked };
+      })
+    );
+
+    // Optional: send update to API
+  };
+
+  if (isLoading) {
+    return <ResourceTableSkeleton />;
+  }
 
   return (
     <div className="container px-4 py-8 mx-auto max-w-7xl">
@@ -44,8 +65,12 @@ export default function ResourceTable() {
         </span>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {resources.map((r) => (
-          <ResourceCard key={r.id} resource={r} onAction={() => {}} />
+        {resources.map((resource) => (
+          <ResourceCard
+            key={resource.id}
+            resource={resource}
+            onAction={handleResourceAction}
+          />
         ))}
       </div>
     </div>
diff --git a/dev-share-ui/components/ShareResourceForm.tsx b/dev-share-ui/components/ShareResourceForm.tsx
index 3a3ea4c..da5a13d 100644
--- a/dev-share-ui/components/ShareResourceForm.tsx
+++ b/dev-share-ui/components/ShareResourceForm.tsx
@@ -79,9 +79,11 @@ export const ShareResourceForm = () => {
   return (
     <Form {...form}>
       <div className="container px-4 py-8 mx-auto max-w-2xl">
-        <Card className="animate-in fade-in-50 slide-in-from-bottom-8 duration-300 rounded-2xl shadow-lg bg-white">
+        <Card className="animate-in fade-in-50 slide-in-from-bottom-8 duration-300 rounded-2xl shadow-lg bg-background">
           <CardHeader>
-            <CardTitle className="text-2xl">Share a Resource</CardTitle>
+            <CardTitle className="text-2xl text-foreground">
+              Share a Resource
+            </CardTitle>
             <CardDescription>
               Share a valuable developer resource. Our AI will analyze it and
               add relevant details.
@@ -96,7 +98,7 @@ export const ShareResourceForm = () => {
                 name="url"
                 render={({ field }) => (
                   <FormItem className="space-y-2">
-                    <Label htmlFor="url">
+                    <Label htmlFor="url" className="text-foreground">
                       Resource URL <span className="text-destructive">*</span>
                     </Label>
                     <div className="relative">
@@ -124,7 +126,7 @@ export const ShareResourceForm = () => {
                   <FormItem className="space-y-2">
                     <Label
                       htmlFor="comment"
-                      className="flex items-center gap-2"
+                      className="flex items-center gap-2 text-foreground"
                     >
                       <MessageSquare className="h-4 w-4 text-muted-foreground" />
                       Your Comment
@@ -162,7 +164,7 @@ export const ShareResourceForm = () => {
               <Button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full sm:w-auto bg-primary text-white font-semibold px-6 py-2 rounded-lg flex items-center justify-center gap-2 shadow-md hover:bg-primary/90 transition-all duration-200"
+                className="w-full sm:w-auto border bg-background text-foreground font-semibold px-6 py-2 rounded-lg flex items-center justify-center gap-2 shadow-md hover:bg-primary/90 transition-all duration-200"
               >
                 {isSubmitting ? (
                   <>
diff --git a/dev-share-ui/package-lock.json b/dev-share-ui/package-lock.json
index 29de740..f8beaa1 100644
--- a/dev-share-ui/package-lock.json
+++ b/dev-share-ui/package-lock.json
@@ -61,6 +61,7 @@
         "react-resizable-panels": "^2.1.3",
         "recharts": "^2.12.7",
         "sonner": "^1.5.0",
+        "swr": "^2.3.4",
         "tailwind-merge": "^2.5.2",
         "tailwindcss": "3.3.3",
         "tailwindcss-animate": "^1.0.7",
@@ -3874,6 +3875,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -7113,6 +7123,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.4.tgz",
+      "integrity": "sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz",
@@ -7453,6 +7476,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/dev-share-ui/package.json b/dev-share-ui/package.json
index a4ef2f6..b35defa 100644
--- a/dev-share-ui/package.json
+++ b/dev-share-ui/package.json
@@ -62,6 +62,7 @@
     "react-resizable-panels": "^2.1.3",
     "recharts": "^2.12.7",
     "sonner": "^1.5.0",
+    "swr": "^2.3.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",