diff --git a/dev-share-ui/app/globals.css b/dev-share-ui/app/globals.css
index 20b1c1d..7e971d0 100644
--- a/dev-share-ui/app/globals.css
+++ b/dev-share-ui/app/globals.css
@@ -77,6 +77,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground min-h-screen flex flex-col;
   }
 }
diff --git a/dev-share-ui/app/layout.tsx b/dev-share-ui/app/layout.tsx
index d5f74fa..ea070f7 100644
--- a/dev-share-ui/app/layout.tsx
+++ b/dev-share-ui/app/layout.tsx
@@ -3,12 +3,14 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { ThemeProvider } from '@/components/ThemeProvider';
 import { Toaster } from 'sonner';
+import Navbar from '@/components/Navbar';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'blotz dev share',
-  description: 'A place to discover and share the best developer resources with the community',
+  description:
+    'A place to discover and share the best developer resources with the community',
 };
 
 export default function RootLayout({
@@ -25,10 +27,11 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <Navbar />
+          <main className="flex flex-col grow">{children}</main>
         </ThemeProvider>
         <Toaster />
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/app/result/page.tsx b/dev-share-ui/app/result/page.tsx
new file mode 100644
index 0000000..7cb5fc2
--- /dev/null
+++ b/dev-share-ui/app/result/page.tsx
@@ -0,0 +1,13 @@
+import SearchBar from '@/components/SearchBar';
+import ResourceTable from '@/components/ResourceTable';
+
+export default function ResultPage() {
+  return (
+    <div className="min-h-screen bg-background py-10 flex flex-col gap-4 items-center px-20">
+      <div className="w-full max-w-7xl">
+        <SearchBar />
+      </div>
+      <ResourceTable />
+    </div>
+  );
+}
diff --git a/dev-share-ui/app/search/page.tsx b/dev-share-ui/app/search/page.tsx
index 4190e7b..ad888d4 100644
--- a/dev-share-ui/app/search/page.tsx
+++ b/dev-share-ui/app/search/page.tsx
@@ -1,32 +1,26 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import Navbar from "@/components/Navbar";
-import HeroSection from "@/components/HeroSection";
-import { mockResources } from "@/lib/data";
-import { Resource, VectorSearchResultDTO } from "@/lib/types";
-import ResourceCard from "@/components/ResourceCard";
-import FromAISearchResourceCard from "@/components/FromAISearchResourceCard";
-import{handleGlobalSearch,searchResources} from "@/services/search-service";
+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 [isAIFallback, setIsAIFallback] = 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();
-      setIsAIFallback(true);
     } else {
       setResources(result);
     }
@@ -39,12 +33,16 @@ export default function SearchPage() {
     // 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 => {
+
+    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 };
+            return {
+              ...resource,
+              likes: resource.isLiked ? resource.likes - 1 : resource.likes + 1,
+              isLiked: !resource.isLiked,
+            };
           } else {
             return { ...resource, isBookmarked: !resource.isBookmarked };
           }
@@ -53,37 +51,14 @@ export default function SearchPage() {
       })
     );
   };
-  
+
   const handleSearchSuggestion = (suggestion: string) => {
     handleSearch(suggestion);
   };
 
-
   return (
-    <main className="min-h-screen bg-background">
-      <Navbar />
+    <div className="bg-background flex grow pb-16 justify-center items-center">
       <HeroSection onSearch={handleSearch} isSearching={isSearching} />
-      
-      <div className="container px-4 py-8 mx-auto max-w-7xl">
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center gap-4">
-          <span className="text-lg font-medium text-muted-foreground">
-            {isAIFallback ? "No direct results found. Showing AI suggestions instead." : `${resources.length} resources found`}</span>
-          </div>
-          <a href="#" className="text-primary hover:underline flex items-center gap-1 text-sm font-medium">View All <span aria-hidden="true">→</span></a>
-        </div>
-        { (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {resources.sort((a, b) => b.likes - a.likes).map((resource, idx) =>
-              resource.isAIGenerated ? (
-                <FromAISearchResourceCard key={resource.id} resource={resource} onAction={handleResourceAction} />
-              ) : (
-                <ResourceCard key={resource.id} resource={resource} onAction={handleResourceAction} />
-              )
-            )}
-          </div>
-        )}
-      </div>
-    </main>
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/app/share/page.tsx b/dev-share-ui/app/share/page.tsx
index 554a7ab..81fbd4a 100644
--- a/dev-share-ui/app/share/page.tsx
+++ b/dev-share-ui/app/share/page.tsx
@@ -1,172 +1,9 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { Link as LinkIcon, MessageSquare } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { toast } from "sonner";
-import Navbar from "@/components/Navbar";
-import { submitSharedResource} from "@/services/share-service";
-import { pollShareStatus } from "@/services/polling-service";
+import { ShareResourceForm } from '@/components/ShareResourceForm';
 
 export default function ShareResourcePage() {
-  const [url, setUrl] = useState("");
-  const [comment, setComment] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [urlError, setUrlError] = useState("");
-  const router = useRouter();
-
-  const validateUrl = (url: string) => {
-    try {
-      new URL(url);
-      setUrlError("");
-      return true;
-    } catch (e) {
-      setUrlError("Please enter a valid URL (including http:// or https://)");
-      return false;
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!validateUrl(url)) {
-      return;
-    }
-    
-    setIsSubmitting(true);
-    
-    // TODO: Integration point for AI processing
-    // 1. Send URL and prompt to backend
-    // 2. Backend will:
-    //    - Scrape the URL for content
-    //    - Use AI to generate title, description, and tags
-    //    - Store the processed resource
-    // Example:
-    // const resource = await processResourceWithAI({ url, prompt });
-    
-    // Simulate API call
-    //set the max processing time
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 6000);
-
-    //TODO: Move this to "share" service
-    try {
-      const taskId = await submitSharedResource(url, comment);
-      toast.success("Processing resource...please check status later", { duration: 2500 });
-    
-      const result = await pollShareStatus(taskId, { maxPolls: 5, interval: 3000 });
-    
-      if (result === "success") {
-        toast.success("Resource processing completed!");
-      } else if (result === "failed") {
-        toast.error("Resource processing failed.");
-      } else {
-        toast.error("Resource processing timed out.");
-      }
-    
-      router.push("/");
-    } catch (err: any) {
-      if (err.name === "AbortError") {
-        toast.error("Request timed out after 5 seconds.");
-      } else {
-        toast.error("An unexpected error occurred.");
-      }
-    }
-    setIsSubmitting(false);
-    router.push("/");
-  };
-
   return (
-    <main className="min-h-screen bg-background">
-        <Navbar />
-      <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">
-          <CardHeader>
-            <CardTitle className="text-2xl">Share a Resource</CardTitle>
-            <CardDescription>
-              Share a valuable developer resource. Our AI will analyze it and add relevant details.
-            </CardDescription>
-            <hr className="my-4 border-muted" />
-          </CardHeader>
-          <form onSubmit={handleSubmit}>
-            <CardContent className="space-y-6">
-              <div className="space-y-2">
-                <Label htmlFor="url">Resource URL <span className="text-destructive">*</span></Label>
-                <div className="relative">
-                  <LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    id="url"
-                    type="text"
-                    placeholder="https://example.com/resource"
-                    value={url}
-                    onChange={(e) => setUrl(e.target.value)}
-                    className="pl-10 focus:ring-2 focus:ring-primary/30 hover:border-primary transition-all duration-200"
-                    required
-                  />
-                </div>
-                {urlError && <p className="text-sm text-destructive">{urlError}</p>}
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="comment" className="flex items-center gap-2">
-                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
-                  Your Comment
-                </Label>
-                <Textarea
-                  id="comment"
-                  placeholder="Share your thoughts, experience, or recommendation about this resource (e.g. I read this docs and I learn a lot... very recommend for beginner to React!)"
-                  value={comment}
-                  onChange={(e) => setComment(e.target.value)}
-                  rows={3}
-                  required
-                  className="focus:ring-2 focus:ring-primary/30 hover:border-primary transition-all duration-200"
-                />
-                <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
-                  <span>Let others know why you recommend this resource.</span>
-                  <span>{comment.length}/200</span>
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter className="flex flex-col sm:flex-row sm:justify-between gap-2 mt-2">
-              <Button 
-                type="button" 
-                variant="outline" 
-                onClick={() => router.push("/")}
-                className="w-full sm:w-auto"
-              >
-                Cancel
-              </Button>
-              <Button 
-                type="submit" 
-                disabled={isSubmitting || !url.trim()}
-                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"
-              >
-                {isSubmitting ? (
-                  <>
-                    <div className="h-4 w-4 mr-2 rounded-full border-2 border-current border-t-transparent animate-spin" />
-                    Submitting...
-                  </>
-                ) : (
-                  <>
-                    Share Resource
-                  </>
-                )}
-              </Button>
-            </CardFooter>
-          </form>
-        </Card>
-      </div>
+    <main className="min-h-80vh bg-background">
+      <ShareResourceForm />
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/components/HeroSection.tsx b/dev-share-ui/components/HeroSection.tsx
index 3e0299d..e80c9d0 100644
--- a/dev-share-ui/components/HeroSection.tsx
+++ b/dev-share-ui/components/HeroSection.tsx
@@ -1,35 +1,46 @@
-"use client";
+'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 Link from "next/link";
+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("");
+export default function HeroSection({
+  onSearch,
+  isSearching,
+}: HeroSectionProps) {
+  const [query, setQuery] = useState('');
   const [placeholderIndex, setPlaceholderIndex] = useState(0);
-  
+  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"
+    '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]);
 
@@ -37,40 +48,46 @@ export default function HeroSection({ onSearch, isSearching }: HeroSectionProps)
     e.preventDefault();
     if (query.trim()) {
       onSearch(query);
+      router.push(`/result`);
     }
   };
 
   return (
-    <section className="w-full py-8 md:py-10 bg-background border-b">
-      <div className="container px-4 py-8 mx-auto max-w-7xl">
-        <div className="flex flex-col gap-6">
-          <div className="flex flex-row items-center justify-between w-full mb-2">
-            <div>
-              <h2 className="text-2xl font-bold tracking-tight text-foreground mb-1 text-left">Discover Resources</h2>
-              <p className="text-sm text-muted-foreground text-left">Find and share valuable community resources</p>
+    <section className="w-full bg-background">
+      <Particles
+        className="absolute inset-0 z-0"
+        ease={80}
+        color={color}
+        refresh
+      />
+      <div className="container px-4 mx-auto max-w-7xl">
+        <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">
+                Discover Resources
+              </h2>
+              <p className="text-sm text-muted-foreground text-center">
+                Find and share valuable community resources
+              </p>
             </div>
-            <Button asChild className="h-11 px-5 bg-primary text-white hover:bg-primary/90">
-              <Link href="/share">
-                <Plus className="h-4 w-4 mr-2" />
-                Share Resource
-              </Link>
-            </Button>
           </div>
-          <form onSubmit={handleSubmit} className="flex w-full items-center space-x-2">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          {/* <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-full"
+                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>
+          </form> */}
+          <SearchBar />
         </div>
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/components/Navbar.tsx b/dev-share-ui/components/Navbar.tsx
index 4f8430e..0f85992 100644
--- a/dev-share-ui/components/Navbar.tsx
+++ b/dev-share-ui/components/Navbar.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { BookMarked } from "lucide-react";
-import { Button } from "@/components/ui/button";
+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";
+} 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">
-      <div className="container flex h-16 items-center justify-between px-4 mx-auto max-w-7xl">
+    <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">
         <div className="flex items-center gap-2">
           <BookMarked className="w-6 h-6" />
           <Link href="/" className="text-xl font-bold tracking-tight">
@@ -22,22 +22,22 @@ export default function Navbar() {
           </Link>
         </div>
 
-        <nav className="hidden md:flex items-center gap-6">
-          <Link 
+        <nav className="hidden md:flex items-center gap-8">
+          <Link
             href="/"
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
           >
             Discover
           </Link>
-          <Link 
+          <Link
             href="/share"
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
           >
             Share
           </Link>
-          <Link 
+          <Link
             href="/collections"
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
           >
             Collections
           </Link>
@@ -88,4 +88,4 @@ export default function Navbar() {
       </div>
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/components/ResourceCard.tsx b/dev-share-ui/components/ResourceCard.tsx
index ab7d2d1..ede612f 100644
--- a/dev-share-ui/components/ResourceCard.tsx
+++ b/dev-share-ui/components/ResourceCard.tsx
@@ -1,17 +1,30 @@
-"use client";
+'use client';
 
-import { ExternalLink, 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 {
+  ExternalLink,
+  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();
@@ -26,34 +39,59 @@ function timeAgo(dateString: string) {
   return 'recently';
 }
 
-export default function ResourceCard({ resource, onAction, isAIGenerated = false }: ResourceCardProps) {
+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' : ''}`}>
+    <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' : ''
+      }`}
+    >
       {/* 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"><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>
+          <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>
           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'}`}
+        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"}
+        aria-label={resource.isBookmarked ? 'Remove bookmark' : 'Bookmark'}
       >
-        <Bookmark className={`h-5 w-5 ${resource.isBookmarked ? 'fill-current' : ''}`} />
+        <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
+        {/* <img
           src={resource.authorAvatar}
           alt={resource.authorName}
-          className="w-10 h-10 rounded-full object-cover border"
-        />
+          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>
+          <span className="font-medium text-sm text-foreground leading-tight">
+            {resource.authorName}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {timeAgo(resource.createdAt)}
+          </span>
         </div>
       </div>
       {/* User comment (collapsed, tooltip on hover) */}
@@ -63,7 +101,16 @@ export default function ResourceCard({ resource, onAction, isAIGenerated = false
             <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>
+                <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">
@@ -74,11 +121,25 @@ export default function ResourceCard({ resource, onAction, isAIGenerated = false
       )}
       {/* 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>
-        <p className="text-sm text-muted-foreground mb-3 line-clamp-2">{resource.description}</p>
+        <h3 className="text-lg font-semibold leading-snug mb-1 text-foreground">
+          {resource.title}
+        </h3>
+        <ReadMoreArea
+          className="flex flex-col" // 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}
+          lettersLimit={80} // limit of letters (100 letters)
+        >
+          {resource.description}
+        </ReadMoreArea>
         <div className="flex flex-wrap gap-2 mb-2 mt-auto">
           {resource.tags.map((tag) => (
-            <Badge key={tag} variant="outline" className="text-xs font-medium">#{tag}</Badge>
+            <Badge key={tag} variant="outline" className="text-xs font-medium">
+              #{tag}
+            </Badge>
           ))}
         </div>
       </div>
@@ -86,7 +147,9 @@ export default function ResourceCard({ resource, onAction, isAIGenerated = false
       <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">
           <button
-            className={`flex items-center gap-1 text-xs hover:text-primary transition-colors ${resource.isLiked ? 'font-semibold text-primary' : ''}`}
+            className={`flex items-center gap-1 text-xs hover:text-primary transition-colors ${
+              resource.isLiked ? 'font-semibold text-primary' : ''
+            }`}
             onClick={() => onAction(resource.id, 'like')}
             aria-label="Like"
           >
@@ -104,7 +167,12 @@ export default function ResourceCard({ resource, onAction, isAIGenerated = false
           size="sm"
           className="px-5 font-semibold text-base bg-primary hover:bg-primary/90 text-white"
         >
-          <a href={resource.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+          <a
+            href={resource.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2"
+          >
             Visit
             <ExternalLink className="h-4 w-4" />
           </a>
@@ -112,4 +180,4 @@ export default function ResourceCard({ resource, onAction, isAIGenerated = false
       </div>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/components/ResourceCardSkeleton.tsx b/dev-share-ui/components/ResourceCardSkeleton.tsx
new file mode 100644
index 0000000..4010f8a
--- /dev/null
+++ b/dev-share-ui/components/ResourceCardSkeleton.tsx
@@ -0,0 +1,45 @@
+import { Skeleton } from '@/components/ui/skeleton';
+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">
+      {/* 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" />
+        <div className="flex flex-col gap-2 flex-1">
+          <Skeleton className="h-3 w-3/4" />
+          <Skeleton className="h-2 w-1/2" />
+        </div>
+      </div>
+
+      {/* Comment line (tooltip in real) */}
+      <div className="px-6 pb-1">
+        <Skeleton className="h-3 w-4/5" />
+      </div>
+
+      {/* Title, Description, Tags */}
+      <div className="flex-1 px-6 pt-2 pb-0 flex flex-col gap-2">
+        <Skeleton className="h-4 w-4/5" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-5/6" />
+
+        {/* Tags */}
+        <div className="flex flex-wrap gap-2 mt-auto mb-2">
+          <Skeleton className="h-5 w-12 rounded-full" />
+          <Skeleton className="h-5 w-16 rounded-full" />
+          <Skeleton className="h-5 w-10 rounded-full" />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-6 py-4 border-t mt-2">
+        <div className="flex gap-6">
+          <Skeleton className="h-4 w-12" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <Skeleton className="h-8 w-20 rounded" />
+      </div>
+    </Card>
+  );
+}
diff --git a/dev-share-ui/components/ResourceTable.tsx b/dev-share-ui/components/ResourceTable.tsx
new file mode 100644
index 0000000..027b352
--- /dev/null
+++ b/dev-share-ui/components/ResourceTable.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+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';
+
+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);
+
+  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 />;
+
+  return (
+    <div className="container px-4 py-8 mx-auto max-w-7xl">
+      <div className="mb-8">
+        <span className="text-lg text-muted-foreground">
+          {`${resources.length} resources found`}
+        </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={() => {}} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/dev-share-ui/components/ResourceTableSkeleton.tsx b/dev-share-ui/components/ResourceTableSkeleton.tsx
new file mode 100644
index 0000000..72768a5
--- /dev/null
+++ b/dev-share-ui/components/ResourceTableSkeleton.tsx
@@ -0,0 +1,20 @@
+import ResourceCardSkeleton from './ResourceCardSkeleton';
+
+export default function ResourceTableSkeleton() {
+  return (
+    <div className="container px-4 py-8 mx-auto max-w-7xl min-h-[800px]">
+      <div className="flex items-center justify-between mb-8">
+        <span className="text-lg font-medium text-muted-foreground">
+          Loading resources...
+        </span>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array(6)
+          .fill(1)
+          .map((index) => (
+            <ResourceCardSkeleton key={index} />
+          ))}
+      </div>
+    </div>
+  );
+}
diff --git a/dev-share-ui/components/SearchBar.tsx b/dev-share-ui/components/SearchBar.tsx
new file mode 100644
index 0000000..bdf186d
--- /dev/null
+++ b/dev-share-ui/components/SearchBar.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function SearchBar() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [input, setInput] = useState(searchParams.get('query') || '');
+  const [placeholderIndex, setPlaceholderIndex] = useState(0);
+  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 (input && input !== searchParams.get('query')) {
+      router.push(`/result?query=${encodeURIComponent(input)}`);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="relative w-full flex items-center justify-center"
+    >
+      <Search className="relative left-8 text-muted-foreground" />
+      <Input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder={placeholders[placeholderIndex]}
+        className="pl-10 h-11 rounded-lg bg-card w-3/5"
+      />
+    </form>
+  );
+}
diff --git a/dev-share-ui/components/ShareResourceForm.tsx b/dev-share-ui/components/ShareResourceForm.tsx
index 308b11b..3a3ea4c 100644
--- a/dev-share-ui/components/ShareResourceForm.tsx
+++ b/dev-share-ui/components/ShareResourceForm.tsx
@@ -1,12 +1,14 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Plus, Link as LinkIcon, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ShareResourceFormSchema } from '@/lib/schemas';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
 import {
   Card,
   CardContent,
@@ -14,201 +16,167 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from './ui/card';
 
-interface ShareResourceFormProps {
-  onClose: () => void;
-  onSubmit: (resource: any) => void;
-}
+import { toast } from 'sonner';
+import { LinkIcon, MessageSquare } from 'lucide-react';
+import { submitSharedResource } from '@/services/share-service';
+import { pollShareStatus } from '@/services/polling-service';
+import { useRouter } from 'next/navigation';
+import { useWatch } from 'react-hook-form';
 
-export default function ShareResourceForm({ onClose, onSubmit }: ShareResourceFormProps) {
-  const [url, setUrl] = useState("");
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [comment, setComment] = useState("");
-  const [tagInput, setTagInput] = useState("");
-  const [tags, setTags] = useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [urlError, setUrlError] = useState("");
+type ShareFormInput = z.infer<typeof ShareResourceFormSchema>;
 
-  const handleAddTag = () => {
-    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
-      setTags([...tags, tagInput.trim()]);
-      setTagInput("");
-    }
-  };
+export const ShareResourceForm = () => {
+  const router = useRouter();
+  const form = useForm<ShareFormInput>({
+    resolver: zodResolver(ShareResourceFormSchema),
+    defaultValues: {
+      url: '',
+      comment: '',
+    },
+  });
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAddTag();
-    }
-  };
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { isSubmitting },
+  } = form;
 
-  const removeTag = (tagToRemove: string) => {
-    setTags(tags.filter(tag => tag !== tagToRemove));
-  };
+  const commentValue = useWatch({ control, name: 'comment' });
 
-  const validateUrl = (url: string) => {
-    try {
-      new URL(url);
-      setUrlError("");
-      return true;
-    } catch (e) {
-      setUrlError("Please enter a valid URL (including http:// or https://)");
-      return false;
-    }
-  };
+  const processForm: SubmitHandler<ShareFormInput> = async (data) => {
+    const result = ShareResourceFormSchema.safeParse(data);
+    if (!result.success) return;
+
+    const { url, comment } = result.data;
+    const task = await submitSharedResource(url, comment);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!validateUrl(url)) {
-      return;
-    }
-    
-    if (!title.trim()) {
-      return;
-    }
-    
-    setIsSubmitting(true);
-    
-    // Create new resource object
-    const newResource = {
-      url,
-      title,
-      description,
-      tags,
-      date: new Date().toISOString(),
-      comment,
-    };
-    
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    
-    onSubmit(newResource);
-    
-    // Reset form
-    setUrl("");
-    setTitle("");
-    setDescription("");
-    setTags([]);
-    setComment("");
-    setIsSubmitting(false);
-    onClose();
+    toast.promise(
+      pollShareStatus(task, {
+        maxPolls: 5,
+        interval: 3000,
+      }),
+      {
+        loading: 'Processing resource...please check status later',
+        success: 'Resource processing completed!',
+        error: (err) => {
+          if (err.message === 'failed') return 'Resource processing failed.';
+          if (err.message === 'timeout')
+            return 'Resource processing timed out.';
+          if (err.name === 'AbortError')
+            return 'Request timed out after 5 seconds.';
+          return 'An unexpected error occurred.';
+        },
+        finally: () => {
+          reset();
+        },
+      }
+    );
   };
 
   return (
-    <Card className="w-full max-w-2xl mx-auto animate-in fade-in-50 slide-in-from-bottom-8 duration-300">
-      <CardHeader>
-        <CardTitle className="text-2xl">Share a Resource</CardTitle>
-        <CardDescription>
-          Help the developer community by sharing valuable resources you've found
-        </CardDescription>
-      </CardHeader>
-      <form onSubmit={handleSubmit}>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="url">Resource URL <span className="text-destructive">*</span></Label>
-            <div className="relative">
-              <LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                id="url"
-                type="text"
-                placeholder="https://example.com/resource"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                className="pl-10"
-                required
+    <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">
+          <CardHeader>
+            <CardTitle className="text-2xl">Share a Resource</CardTitle>
+            <CardDescription>
+              Share a valuable developer resource. Our AI will analyze it and
+              add relevant details.
+            </CardDescription>
+            <hr className="my-4 border-muted" />
+          </CardHeader>
+          <form onSubmit={handleSubmit(processForm)}>
+            <CardContent className="space-y-6">
+              {/* URL Field */}
+              <FormField
+                control={control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem className="space-y-2">
+                    <Label htmlFor="url">
+                      Resource URL <span className="text-destructive">*</span>
+                    </Label>
+                    <div className="relative">
+                      <LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                      <FormControl>
+                        <Input
+                          id="url"
+                          type="text"
+                          placeholder="https://example.com/resource"
+                          {...field}
+                          className="pl-10 focus:ring-2 focus:ring-primary/30 hover:border-primary transition-all duration-200"
+                        />
+                      </FormControl>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </div>
-            {urlError && <p className="text-sm text-destructive">{urlError}</p>}
-          </div>
-          
-          <div className="space-y-2">
-            <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
-            <Input
-              id="title"
-              type="text"
-              placeholder="Resource title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className="space-y-2">
-            <Label htmlFor="comment">Your Comment <span className="text-destructive">*</span></Label>
-            <Textarea
-              id="comment"
-              placeholder="Share your thoughts, experience, or recommendation about this resource (e.g. I read this docs and I learn a lot... very recommend for beginner to React!)"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              rows={3}
-              required
-            />
-          </div>
-          
-          <div className="space-y-2">
-            <Label htmlFor="tags">Tags</Label>
-            <div className="flex items-center space-x-2">
-              <Input
-                id="tags"
-                type="text"
-                placeholder="Add tags (e.g., React, TypeScript)"
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={handleKeyDown}
+
+              {/* Comment Field */}
+              <FormField
+                control={control}
+                name="comment"
+                render={({ field }) => (
+                  <FormItem className="space-y-2">
+                    <Label
+                      htmlFor="comment"
+                      className="flex items-center gap-2"
+                    >
+                      <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                      Your Comment
+                    </Label>
+                    <FormControl>
+                      <Textarea
+                        id="comment"
+                        placeholder="Share your thoughts, experience, or recommendation about this resource (e.g. I read this docs and I learn a lot... very recommend for beginner to React!)"
+                        rows={3}
+                        {...field}
+                        className="focus:ring-2 focus:ring-primary/30 hover:border-primary transition-all duration-200"
+                      />
+                    </FormControl>
+                    <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
+                      <span>
+                        Let others know why you recommend this resource.
+                      </span>
+                      <span>{commentValue?.length || 0}/200</span>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <Button 
-                type="button" 
-                size="icon" 
-                variant="outline" 
-                onClick={handleAddTag}
+            </CardContent>
+
+            <CardFooter className="flex flex-col sm:flex-row sm:justify-between gap-2 mt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => router.push('/')}
+                className="w-full sm:w-auto"
+              >
+                Cancel
+              </Button>
+              <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"
               >
-                <Plus className="h-4 w-4" />
+                {isSubmitting ? (
+                  <>
+                    <div className="h-4 w-4 mr-2 rounded-full border-2 border-current border-t-transparent animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  <>Share Resource</>
+                )}
               </Button>
-            </div>
-            <div className="flex flex-wrap gap-2 mt-2">
-              {tags.map((tag) => (
-                <Badge key={tag} variant="secondary" className="pl-2 pr-1 py-1">
-                  {tag}
-                  <Button 
-                    variant="ghost" 
-                    size="icon" 
-                    className="h-4 w-4 ml-1 hover:bg-destructive/20" 
-                    onClick={() => removeTag(tag)}
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
-                </Badge>
-              ))}
-            </div>
-          </div>
-        </CardContent>
-        <CardFooter className="flex justify-between">
-          <Button 
-            type="button" 
-            variant="outline" 
-            onClick={onClose}
-          >
-            Cancel
-          </Button>
-          <Button 
-            type="submit" 
-            disabled={isSubmitting || !url.trim() || !title.trim()}
-          >
-            {isSubmitting ? (
-              <>
-                <div className="h-4 w-4 mr-2 rounded-full border-2 border-current border-t-transparent animate-spin" />
-                Submitting...
-              </>
-            ) : (
-              "Share Resource"
-            )}
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Form>
   );
-}
\ No newline at end of file
+};
diff --git a/dev-share-ui/components/magicui/particles.tsx b/dev-share-ui/components/magicui/particles.tsx
new file mode 100644
index 0000000..ffba741
--- /dev/null
+++ b/dev-share-ui/components/magicui/particles.tsx
@@ -0,0 +1,313 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, {
+  ComponentPropsWithoutRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+interface MousePosition {
+  x: number;
+  y: number;
+}
+
+function MousePosition(): MousePosition {
+  const [mousePosition, setMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY });
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return mousePosition;
+}
+
+interface ParticlesProps extends ComponentPropsWithoutRef<"div"> {
+  className?: string;
+  quantity?: number;
+  staticity?: number;
+  ease?: number;
+  size?: number;
+  refresh?: boolean;
+  color?: string;
+  vx?: number;
+  vy?: number;
+}
+
+function hexToRgb(hex: string): number[] {
+  hex = hex.replace("#", "");
+
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+
+  const hexInt = parseInt(hex, 16);
+  const red = (hexInt >> 16) & 255;
+  const green = (hexInt >> 8) & 255;
+  const blue = hexInt & 255;
+  return [red, green, blue];
+}
+
+type Circle = {
+  x: number;
+  y: number;
+  translateX: number;
+  translateY: number;
+  size: number;
+  alpha: number;
+  targetAlpha: number;
+  dx: number;
+  dy: number;
+  magnetism: number;
+};
+
+export const Particles: React.FC<ParticlesProps> = ({
+  className = "",
+  quantity = 100,
+  staticity = 50,
+  ease = 50,
+  size = 0.4,
+  refresh = false,
+  color = "#ffffff",
+  vx = 0,
+  vy = 0,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const canvasContainerRef = useRef<HTMLDivElement>(null);
+  const context = useRef<CanvasRenderingContext2D | null>(null);
+  const circles = useRef<Circle[]>([]);
+  const mousePosition = MousePosition();
+  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+  const rafID = useRef<number | null>(null);
+  const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      context.current = canvasRef.current.getContext("2d");
+    }
+    initCanvas();
+    animate();
+
+    const handleResize = () => {
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current);
+      }
+      resizeTimeout.current = setTimeout(() => {
+        initCanvas();
+      }, 200);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      if (rafID.current != null) {
+        window.cancelAnimationFrame(rafID.current);
+      }
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [color]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [mousePosition.x, mousePosition.y]);
+
+  useEffect(() => {
+    initCanvas();
+  }, [refresh]);
+
+  const initCanvas = () => {
+    resizeCanvas();
+    drawParticles();
+  };
+
+  const onMouseMove = () => {
+    if (canvasRef.current) {
+      const rect = canvasRef.current.getBoundingClientRect();
+      const { w, h } = canvasSize.current;
+      const x = mousePosition.x - rect.left - w / 2;
+      const y = mousePosition.y - rect.top - h / 2;
+      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+      if (inside) {
+        mouse.current.x = x;
+        mouse.current.y = y;
+      }
+    }
+  };
+
+  const resizeCanvas = () => {
+    if (canvasContainerRef.current && canvasRef.current && context.current) {
+      canvasSize.current.w = canvasContainerRef.current.offsetWidth;
+      canvasSize.current.h = canvasContainerRef.current.offsetHeight;
+
+      canvasRef.current.width = canvasSize.current.w * dpr;
+      canvasRef.current.height = canvasSize.current.h * dpr;
+      canvasRef.current.style.width = `${canvasSize.current.w}px`;
+      canvasRef.current.style.height = `${canvasSize.current.h}px`;
+      context.current.scale(dpr, dpr);
+
+      // Clear existing particles and create new ones with exact quantity
+      circles.current = [];
+      for (let i = 0; i < quantity; i++) {
+        const circle = circleParams();
+        drawCircle(circle);
+      }
+    }
+  };
+
+  const circleParams = (): Circle => {
+    const x = Math.floor(Math.random() * canvasSize.current.w);
+    const y = Math.floor(Math.random() * canvasSize.current.h);
+    const translateX = 0;
+    const translateY = 0;
+    const pSize = Math.floor(Math.random() * 2) + size;
+    const alpha = 0;
+    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+    const dx = (Math.random() - 0.5) * 0.1;
+    const dy = (Math.random() - 0.5) * 0.1;
+    const magnetism = 0.1 + Math.random() * 4;
+    return {
+      x,
+      y,
+      translateX,
+      translateY,
+      size: pSize,
+      alpha,
+      targetAlpha,
+      dx,
+      dy,
+      magnetism,
+    };
+  };
+
+  const rgb = hexToRgb(color);
+
+  const drawCircle = (circle: Circle, update = false) => {
+    if (context.current) {
+      const { x, y, translateX, translateY, size, alpha } = circle;
+      context.current.translate(translateX, translateY);
+      context.current.beginPath();
+      context.current.arc(x, y, size, 0, 2 * Math.PI);
+      context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;
+      context.current.fill();
+      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      if (!update) {
+        circles.current.push(circle);
+      }
+    }
+  };
+
+  const clearContext = () => {
+    if (context.current) {
+      context.current.clearRect(
+        0,
+        0,
+        canvasSize.current.w,
+        canvasSize.current.h,
+      );
+    }
+  };
+
+  const drawParticles = () => {
+    clearContext();
+    const particleCount = quantity;
+    for (let i = 0; i < particleCount; i++) {
+      const circle = circleParams();
+      drawCircle(circle);
+    }
+  };
+
+  const remapValue = (
+    value: number,
+    start1: number,
+    end1: number,
+    start2: number,
+    end2: number,
+  ): number => {
+    const remapped =
+      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+    return remapped > 0 ? remapped : 0;
+  };
+
+  const animate = () => {
+    clearContext();
+    circles.current.forEach((circle: Circle, i: number) => {
+      // Handle the alpha value
+      const edge = [
+        circle.x + circle.translateX - circle.size, // distance from left edge
+        canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
+        circle.y + circle.translateY - circle.size, // distance from top edge
+        canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
+      ];
+      const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+      const remapClosestEdge = parseFloat(
+        remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
+      );
+      if (remapClosestEdge > 1) {
+        circle.alpha += 0.02;
+        if (circle.alpha > circle.targetAlpha) {
+          circle.alpha = circle.targetAlpha;
+        }
+      } else {
+        circle.alpha = circle.targetAlpha * remapClosestEdge;
+      }
+      circle.x += circle.dx + vx;
+      circle.y += circle.dy + vy;
+      circle.translateX +=
+        (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
+        ease;
+      circle.translateY +=
+        (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
+        ease;
+
+      drawCircle(circle, true);
+
+      // circle gets out of the canvas
+      if (
+        circle.x < -circle.size ||
+        circle.x > canvasSize.current.w + circle.size ||
+        circle.y < -circle.size ||
+        circle.y > canvasSize.current.h + circle.size
+      ) {
+        // remove the circle from the array
+        circles.current.splice(i, 1);
+        // create a new circle
+        const newCircle = circleParams();
+        drawCircle(newCircle);
+      }
+    });
+    rafID.current = window.requestAnimationFrame(animate);
+  };
+
+  return (
+    <div
+      className={cn("pointer-events-none", className)}
+      ref={canvasContainerRef}
+      aria-hidden="true"
+      {...props}
+    >
+      <canvas ref={canvasRef} className="size-full" />
+    </div>
+  );
+};
diff --git a/dev-share-ui/components/ui/tooltip.tsx b/dev-share-ui/components/ui/tooltip.tsx
index e015b75..e1ae87b 100644
--- a/dev-share-ui/components/ui/tooltip.tsx
+++ b/dev-share-ui/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
       className
     )}
     {...props}
   />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/dev-share-ui/lib/schemas.ts b/dev-share-ui/lib/schemas.ts
new file mode 100644
index 0000000..4832aea
--- /dev/null
+++ b/dev-share-ui/lib/schemas.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const ShareResourceFormSchema = z.object({
+  comment: z.string(),
+  url: z
+    .string()
+    .url('Please enter a valid URL (including http:// or https://)')
+    .refine((val) => /^https?:\/\//.test(val), {
+      message: 'URL must start with http:// or https://',
+    }),
+});
diff --git a/dev-share-ui/package-lock.json b/dev-share-ui/package-lock.json
index cd47866..29de740 100644
--- a/dev-share-ui/package-lock.json
+++ b/dev-share-ui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "nextjs",
       "version": "0.1.0",
       "dependencies": {
+        "@foxeian/react-read-more": "^1.1.5",
         "@hookform/resolvers": "^3.9.0",
         "@next/swc-wasm-nodejs": "13.5.1",
         "@radix-ui/react-accordion": "^1.2.0",
@@ -29,14 +30,14 @@
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-slider": "^1.2.0",
+        "@radix-ui/react-slider": "^1.3.5",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-toggle-group": "^1.1.0",
-        "@radix-ui/react-tooltip": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.2.7",
         "@types/node": "20.6.2",
         "@types/react": "18.2.22",
         "@types/react-dom": "18.2.7",
@@ -64,6 +65,7 @@
         "tailwindcss": "3.3.3",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "5.2.2",
+        "use-debounce": "^10.0.5",
         "vaul": "^0.9.9",
         "zod": "^3.23.8"
       }
@@ -176,6 +178,16 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@foxeian/react-read-more": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@foxeian/react-read-more/-/react-read-more-1.1.5.tgz",
+      "integrity": "sha512-syffqjMtNVvyzHa+tHBScET+sWKzPlnB5nLB0vttg/1awqWEFRLTs8NkSNr2/dbiFJ2CAeiG8+0uZ2REQLBejA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 17.0.0",
+        "react-dom": ">= 17.0.0"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -1461,21 +1473,128 @@
       }
     },
     "node_modules/@radix-ui/react-slider": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
-      "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.5.tgz",
+      "integrity": "sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
       "dependencies": {
-        "@radix-ui/number": "1.1.0",
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-collection": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0",
-        "@radix-ui/react-use-previous": "1.1.0",
-        "@radix-ui/react-use-size": "1.1.0"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1492,6 +1611,91 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -1666,22 +1870,207 @@
       }
     },
     "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz",
-      "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
+      "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.1",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.2",
-        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
-        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "@radix-ui/react-visually-hidden": "1.1.0"
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1698,6 +2087,179 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1729,6 +2291,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-escape-keydown": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
@@ -6825,6 +7420,18 @@
         }
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.5.tgz",
+      "integrity": "sha512-Q76E3lnIV+4YT9AHcrHEHYmAd9LKwUAbPXDm7FlqVGDHiSOhX3RDjT8dm0AxbJup6WgOb1YEcKyCr11kBJR5KQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
diff --git a/dev-share-ui/package.json b/dev-share-ui/package.json
index a0806d1..a4ef2f6 100644
--- a/dev-share-ui/package.json
+++ b/dev-share-ui/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@foxeian/react-read-more": "^1.1.5",
     "@hookform/resolvers": "^3.9.0",
     "@next/swc-wasm-nodejs": "13.5.1",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -30,14 +31,14 @@
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@types/node": "20.6.2",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
@@ -65,6 +66,7 @@
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2",
+    "use-debounce": "^10.0.5",
     "vaul": "^0.9.9",
     "zod": "^3.23.8"
   }
diff --git a/dev-share-ui/services/search-service.tsx b/dev-share-ui/services/search-service.tsx
index 6b8b65e..cee37d1 100644
--- a/dev-share-ui/services/search-service.tsx
+++ b/dev-share-ui/services/search-service.tsx
@@ -1,65 +1,67 @@
-import { Resource,VectorSearchResultDTO } from "@/lib/types";
+import { Resource, VectorSearchResultDTO } from '@/lib/types';
 
 const topRelative = 6;
 
 export async function searchResources(query: string): Promise<Resource[]> {
-  const result = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL_WITH_API}/search`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      text: query,
-      topRelatives: topRelative
-    }),
-  });
+  const result = await fetch(
+    `${process.env.NEXT_PUBLIC_API_BASE_URL_WITH_API}/search`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        text: query,
+        topRelatives: topRelative,
+      }),
+    }
+  );
 
   if (!result.ok) throw new Error(`Search failed (${result.status})`);
 
   const responseJson = await result.json();
   const dtos: VectorSearchResultDTO[] = responseJson.result;
 
-  return dtos.map(dto => ({
+  return dtos.map((dto) => ({
     id: crypto.randomUUID(),
     title: dto.title,
     description: dto.content,
     url: dto.url,
-    imageUrl: "",
+    imageUrl: '',
     tags: [],
     likes: 0,
     date: new Date().toISOString(),
-    comment: "",
+    comment: '',
     isLiked: false,
     isBookmarked: false,
     recommended: false,
-    authorName: "Unknown",
-    authorAvatar: "https://avatar.iran.liara.run/public/boy",
+    authorName: `User`,
+    authorAvatar: 'https://avatar.iran.liara.run/public/boy',
     linkClicks: 0,
     createdAt: new Date().toISOString(),
   }));
 }
 
-
-
-
 export async function handleGlobalSearch(): Promise<Resource[]> {
   return [
     {
-      id: "ai-1",
-      title: "Awesome React Libraries (AI Search)",
-      description: "Curated list of trending React libraries and tools, generated by SuperPro AI global search.",
-      url: "https://github.com/ai/react-libraries",
-      imageUrl: "",
-      tags: ["React", "AI", "Trending"],
+      id: 'ai-1',
+      title: 'Awesome React Libraries (AI Search)',
+      description:
+        'Curated list of trending React libraries and tools, generated by SuperPro AI global search.',
+      url: 'https://github.com/ai/react-libraries',
+      imageUrl: '',
+      tags: ['React', 'AI', 'Trending'],
       likes: 0,
       date: new Date().toISOString(),
       isLiked: false,
       isBookmarked: false,
       recommended: false,
-      authorName: "SuperPro AI",
-      authorAvatar: "https://api.dicebear.com/7.x/bottts/svg?seed=ai",
+      authorName: 'SuperPro AI',
+      authorAvatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=ai',
       linkClicks: 0,
       createdAt: new Date().toISOString(),
-      comment: "This list was generated by SuperPro AI global search. Enjoy exploring the latest in React!",
-      isAIGenerated: true
-    }
+      comment:
+        'This list was generated by SuperPro AI global search. Enjoy exploring the latest in React!',
+      isAIGenerated: true,
+    },
   ];
-}
\ No newline at end of file
+}
diff --git a/dev-share-ui/services/share-service.tsx b/dev-share-ui/services/share-service.tsx
index f018569..065dd65 100644
--- a/dev-share-ui/services/share-service.tsx
+++ b/dev-share-ui/services/share-service.tsx
@@ -1,28 +1,33 @@
-export async function submitSharedResource(url: string, comment: string): Promise<string> {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 6000);
-  
-    try {
-      const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL_WITH_API}/share`, {
-        method: "POST",
+export async function submitSharedResource(
+  url: string,
+  comment: string
+): Promise<string> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 6000);
+
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL_WITH_API}/share`,
+      {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({ url: url, insight: comment }),
         signal: controller.signal,
-      });
-  
-      clearTimeout(timeoutId);
-  
-      if (!res.ok) {
-        throw new Error("Share request failed");
       }
-  
-      const data = await res.json();
-      return data.taskId;
-    } catch (err) {
-      clearTimeout(timeoutId);
-      throw err;
+    );
+
+    clearTimeout(timeoutId);
+
+    if (!res.ok) {
+      throw new Error('Share request failed');
     }
+
+    const data = await res.json();
+    return data.taskId;
+  } catch (err) {
+    clearTimeout(timeoutId);
+    throw err;
   }
-  
+}