diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 5142905bc..cd79efb74 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -32,7 +32,15 @@ const nextConfig: NextConfig = {
       },
       {
         protocol: "https",
-        hostname: "res.cloudinary.com",
+        hostname: "api.iconify.design",
+      },
+      {
+        protocol: "https",
+        hostname: "api.simplesvg.com",
+      },
+      {
+        protocol: "https",
+        hostname: "api.unisvg.com",
       },
     ],
   },
diff --git a/apps/web/public/landing-page-dark.png b/apps/web/public/landing-page-dark.png
new file mode 100644
index 000000000..1a33bb297
Binary files /dev/null and b/apps/web/public/landing-page-dark.png differ
diff --git a/apps/web/src/app/animation/page.tsx b/apps/web/src/app/animation/page.tsx
new file mode 100644
index 000000000..37be1ef09
--- /dev/null
+++ b/apps/web/src/app/animation/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { InputWithBack } from "@/components/ui/input-with-back";
+import { useState } from "react";
+
+export default function AnimationPage() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="h-dvh flex">
+      <div className="bg-panel p-6 w-[20rem]">
+        <InputWithBack isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
+      </div>
+      <div className="p-6 flex items-end justify-end">
+        <p
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="cursor-pointer hover:opacity-75 transition-opacity"
+        >
+          {isExpanded ? "Collapse" : "Expand"}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 98aec2b90..88deaf0cd 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -1,17 +1,8 @@
 "use client";
 
 import { Button } from "./ui/button";
-import {
-  ChevronDown,
-  ArrowLeft,
-  Download,
-  SquarePen,
-  Trash,
-  Sun,
-} from "lucide-react";
-import { useTimelineStore } from "@/stores/timeline-store";
+import { ChevronDown, ArrowLeft, SquarePen, Trash, Sun } from "lucide-react";
 import { HeaderBase } from "./header-base";
-import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState } from "react";
@@ -28,13 +19,10 @@ import { DeleteProjectDialog } from "./delete-project-dialog";
 import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
-import { usePlaybackStore } from "@/stores/playback-store";
 import { TransitionUpIcon } from "./icons";
 import { PanelPresetSelector } from "./panel-preset-selector";
 
 export function EditorHeader() {
-  const { getTotalDuration } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
   const { activeProject, renameProject, deleteProject } = useProjectStore();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
@@ -124,22 +112,6 @@ export function EditorHeader() {
     </div>
   );
 
-  const centerContent = (
-    <div className="flex items-center gap-2 text-xs">
-      <span className="text-foreground tabular-nums">
-        {formatTimeCode(currentTime, "HH:MM:SS:FF", activeProject?.fps || 30)}
-      </span>
-      <span className="text-foreground/50">/</span>
-      <span className="text-foreground/50 tabular-nums">
-        {formatTimeCode(
-          getTotalDuration(),
-          "HH:MM:SS:FF",
-          activeProject?.fps || 30
-        )}
-      </span>
-    </div>
-  );
-
   const rightContent = (
     <nav className="flex items-center gap-2">
       <PanelPresetSelector />
@@ -160,7 +132,6 @@ export function EditorHeader() {
   return (
     <HeaderBase
       leftContent={leftContent}
-      centerContent={centerContent}
       rightContent={rightContent}
       className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
     />
@@ -177,14 +148,14 @@ function ExportButton() {
 
   return (
     <button
-      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.1rem] py-[0.1rem] cursor-pointer hover:brightness-95 transition-all duration-200"
+      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
       onClick={handleExport}
     >
-            <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.45)]">
+      <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
         <TransitionUpIcon className="z-50" />
         <span className="text-[0.875rem] z-50">Export</span>
         <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
-          <div className="absolute w-[calc(100%-4px)] h-[calc(100%-4px)] top-[0.12rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-lg"></div>
+          <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
         </div>
       </div>
     </button>
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 21df9924a..89b53b64f 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -5,6 +5,7 @@ import { MediaView } from "./views/media";
 import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
 import { SoundsView } from "./views/sounds";
+import { StickersView } from "./views/stickers";
 import { Separator } from "@/components/ui/separator";
 import { SettingsView } from "./views/settings";
 import { Captions } from "./views/captions";
@@ -16,11 +17,7 @@ export function MediaPanel() {
     media: <MediaView />,
     sounds: <SoundsView />,
     text: <TextView />,
-    stickers: (
-      <div className="p-4 text-muted-foreground">
-        Stickers view coming soon...
-      </div>
-    ),
+    stickers: <StickersView />,
     effects: (
       <div className="p-4 text-muted-foreground">
         Effects view coming soon...
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 772ef4aba..0f0ed92d5 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -146,6 +146,7 @@ export function MediaView() {
 
   useEffect(() => {
     let filtered = mediaItems.filter((item) => {
+      if (item.ephemeral) return false;
       if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
         return false;
       }
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
index ed0db8ab0..303eb858e 100644
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Input } from "@/components/ui/input";
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -32,6 +32,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
 
 export function SoundsView() {
   return (
@@ -96,35 +97,30 @@ function SoundEffectsView() {
     null
   );
 
-  // Scroll position persistence
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+    onLoadMore: loadMore,
+    hasMore: hasNextPage,
+    isLoading: isLoadingMore || isSearching,
+  });
 
-  // Load saved sounds and restore scroll position when component mounts
   useEffect(() => {
     loadSavedSounds();
 
     if (scrollAreaRef.current && scrollPosition > 0) {
       const timeoutId = setTimeout(() => {
         scrollAreaRef.current?.scrollTo({ top: scrollPosition });
-      }, 100); // Small delay to ensure content is rendered
+      }, 100);
 
       return () => clearTimeout(timeoutId);
     }
-  }, []); // Only run on mount
+  }, []);
 
-  // Track scroll position changes and handle infinite scroll
-  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+  const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop } = event.currentTarget;
     setScrollPosition(scrollTop);
-
-    // Trigger loadMore when scrolled to within 200px of bottom
-    const nearBottom = scrollTop + clientHeight >= scrollHeight - 200;
-    if (nearBottom && hasNextPage && !isLoadingMore && !isSearching) {
-      loadMore();
-    }
+    handleScroll(event);
   };
-
-  // Use your existing design, just swap the data source
+  
   const displayedSounds = useMemo(() => {
     const sounds = searchQuery ? searchResults : topSoundEffects;
     return sounds;
@@ -199,7 +195,7 @@ function SoundEffectsView() {
         <ScrollArea
           className="flex-1 h-full"
           ref={scrollAreaRef}
-          onScrollCapture={handleScroll}
+          onScrollCapture={handleScrollWithPosition}
         >
           <div className="flex flex-col gap-4">
             {isLoading && !searchQuery && (
diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx
new file mode 100644
index 000000000..937a968e3
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/stickers.tsx
@@ -0,0 +1,618 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useStickersStore } from "@/stores/stickers-store";
+import { useMediaStore } from "@/stores/media-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import {
+  Loader2,
+  Grid3X3,
+  Hash,
+  Smile,
+  Clock,
+  X,
+  Sparkles,
+  ArrowRight,
+  StickerIcon,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import {
+  getIconSvgUrl,
+  buildIconSvgUrl,
+  ICONIFY_HOSTS,
+  POPULAR_COLLECTIONS,
+} from "@/lib/iconify-api";
+import { cn, generateUUID } from "@/lib/utils";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import Image from "next/image";
+import { DraggableMediaItem } from "@/components/ui/draggable-item";
+import { InputWithBack } from "@/components/ui/input-with-back";
+import { StickerCategory } from "@/stores/stickers-store";
+import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+
+export function StickersView() {
+  const { selectedCategory, setSelectedCategory } = useStickersStore();
+
+  return (
+    <div className="h-full flex flex-col">
+      <Tabs
+        value={selectedCategory}
+        onValueChange={(v) => {
+          if (["all", "general", "brands", "emoji"].includes(v)) {
+            setSelectedCategory(v as StickerCategory);
+          }
+        }}
+        className="flex flex-col h-full"
+      >
+        <div className="px-3 pt-4 pb-0">
+          <TabsList>
+            <TabsTrigger value="all" className="gap-1">
+              <Grid3X3 className="h-3 w-3" />
+              All
+            </TabsTrigger>
+            <TabsTrigger value="general" className="gap-1">
+              <Sparkles className="h-3 w-3" />
+              Icons
+            </TabsTrigger>
+            <TabsTrigger value="brands" className="gap-1">
+              <Hash className="h-3 w-3" />
+              Brands
+            </TabsTrigger>
+            <TabsTrigger value="emoji" className="gap-1">
+              <Smile className="h-3 w-3" />
+              Emoji
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <Separator className="my-4" />
+        <TabsContent
+          value="all"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <StickersContentView category="all" />
+        </TabsContent>
+        <TabsContent
+          value="general"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <StickersContentView category="general" />
+        </TabsContent>
+        <TabsContent
+          value="brands"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <StickersContentView category="brands" />
+        </TabsContent>
+        <TabsContent
+          value="emoji"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <StickersContentView category="emoji" />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function StickerGrid({
+  icons,
+  onAdd,
+  addingSticker,
+}: {
+  icons: string[];
+  onAdd: (iconName: string) => void;
+  addingSticker: string | null;
+}) {
+  return (
+    <div
+      className="grid gap-2"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, 112px)",
+      }}
+    >
+      {icons.map((iconName) => (
+        <StickerItem
+          key={iconName}
+          iconName={iconName}
+          onAdd={onAdd}
+          isAdding={addingSticker === iconName}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CollectionGrid({
+  collections,
+  onSelectCollection,
+}: {
+  collections: Array<{
+    prefix: string;
+    name: string;
+    total: number;
+    category?: string;
+  }>;
+  onSelectCollection: (prefix: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-1 gap-2 h-full overflow-hidden">
+      {collections.map((collection) => (
+        <CollectionItem
+          key={collection.prefix}
+          title={collection.name}
+          subtitle={`${collection.total.toLocaleString()} icons${collection.category ? ` • ${collection.category}` : ""}`}
+          onClick={() => onSelectCollection(collection.prefix)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function EmptyView({ message }: { message: string }) {
+  return (
+    <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+      <StickerIcon
+        className="w-10 h-10 text-muted-foreground"
+        strokeWidth={1.5}
+      />
+      <div className="flex flex-col gap-2 text-center">
+        <p className="text-lg font-medium">No stickers found</p>
+        <p className="text-sm text-muted-foreground text-balance">{message}</p>
+      </div>
+    </div>
+  );
+}
+
+function StickersContentView({ category }: { category: StickerCategory }) {
+  const { activeProject } = useProjectStore();
+  const { addMediaAtTime } = useTimelineStore();
+  const { currentTime } = usePlaybackStore();
+  const { addMediaItem } = useMediaStore();
+  const {
+    searchQuery,
+    selectedCollection,
+    viewMode,
+    collections,
+    currentCollection,
+    searchResults,
+    recentStickers,
+    isLoadingCollections,
+    isLoadingCollection,
+    isSearching,
+    setSearchQuery,
+    setSelectedCollection,
+    loadCollections,
+    searchStickers,
+    downloadSticker,
+    clearRecentStickers,
+  } = useStickersStore();
+
+  const [addingSticker, setAddingSticker] = useState<string | null>(null);
+  const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
+  const [collectionsToShow, setCollectionsToShow] = useState(20);
+  const [showCollectionItems, setShowCollectionItems] = useState(false);
+
+  const filteredCollections = useMemo(() => {
+    if (category === "all") {
+      return Object.entries(collections).map(([prefix, collection]) => ({
+        prefix,
+        name: collection.name,
+        total: collection.total,
+        category: collection.category,
+      }));
+    }
+
+    const collectionList =
+      POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
+    if (!collectionList) return [];
+
+    return collectionList
+      .map((c) => {
+        const collection = collections[c.prefix];
+        return collection
+          ? {
+              prefix: c.prefix,
+              name: c.name,
+              total: collection.total,
+            }
+          : null;
+      })
+      .filter(Boolean) as Array<{
+      prefix: string;
+      name: string;
+      total: number;
+    }>;
+  }, [collections, category]);
+
+  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+    onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
+    hasMore: filteredCollections.length > collectionsToShow,
+    isLoading: isLoadingCollections,
+    enabled: viewMode === "browse" && !selectedCollection && category === "all",
+  });
+
+  useEffect(() => {
+    if (Object.keys(collections).length === 0) {
+      loadCollections();
+    }
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (localSearchQuery !== searchQuery) {
+        setSearchQuery(localSearchQuery);
+        if (localSearchQuery.trim()) {
+          searchStickers(localSearchQuery);
+        }
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [localSearchQuery]);
+
+  const handleAddSticker = async (iconName: string) => {
+    if (!activeProject) {
+      toast.error("No active project");
+      return;
+    }
+
+    setAddingSticker(iconName);
+
+    try {
+      const file = await downloadSticker(iconName);
+
+      if (!file) {
+        throw new Error("Failed to download sticker");
+      }
+
+      const mediaItem = {
+        name: iconName.replace(":", "-"),
+        type: "image" as const,
+        file,
+        url: URL.createObjectURL(file),
+        width: 200,
+        height: 200,
+        duration: TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION,
+        ephemeral: false,
+      };
+
+      await addMediaItem(activeProject.id, mediaItem);
+
+      const added = useMediaStore
+        .getState()
+        .mediaItems.find(
+          (m) => m.url === mediaItem.url && m.name === mediaItem.name
+        );
+      if (!added) throw new Error("Sticker not in media store");
+
+      addMediaAtTime(added, currentTime);
+
+      toast.success(`Added "${iconName}" to timeline`);
+    } catch (error) {
+      console.error("Failed to add sticker:", error);
+      toast.error("Failed to add sticker to timeline");
+    } finally {
+      setAddingSticker(null);
+    }
+  };
+
+  const iconsToDisplay = useMemo(() => {
+    if (viewMode === "search" && searchResults) {
+      return searchResults.icons;
+    }
+
+    if (viewMode === "collection" && currentCollection) {
+      const icons: string[] = [];
+
+      if (currentCollection.uncategorized) {
+        icons.push(
+          ...currentCollection.uncategorized.map(
+            (name) => `${currentCollection.prefix}:${name}`
+          )
+        );
+      }
+
+      if (currentCollection.categories) {
+        Object.values(currentCollection.categories).forEach((categoryIcons) => {
+          icons.push(
+            ...categoryIcons.map(
+              (name) => `${currentCollection.prefix}:${name}`
+            )
+          );
+        });
+      }
+
+      return icons.slice(0, 100);
+    }
+
+    return [];
+  }, [viewMode, searchResults, currentCollection]);
+
+  const isInCollection = viewMode === "collection" && !!selectedCollection;
+
+  useEffect(() => {
+    if (isInCollection) {
+      setShowCollectionItems(false);
+      const timer = setTimeout(() => setShowCollectionItems(true), 350);
+      return () => clearTimeout(timer);
+    } else {
+      setShowCollectionItems(false);
+    }
+  }, [isInCollection]);
+
+  return (
+    <div className="flex flex-col gap-5 mt-1 h-full">
+      <div className="space-y-3">
+        <InputWithBack
+          isExpanded={isInCollection}
+          setIsExpanded={(expanded) => {
+            if (!expanded && isInCollection) {
+              setSelectedCollection(null);
+            }
+          }}
+          placeholder="Search icons..."
+          value={localSearchQuery}
+          onChange={setLocalSearchQuery}
+        />
+      </div>
+
+      <div className="relative h-full overflow-hidden">
+        <ScrollArea
+          className="flex-1 h-full"
+          ref={scrollAreaRef}
+          onScrollCapture={handleScroll}
+        >
+          <div className="flex flex-col gap-4 h-full">
+            {recentStickers.length > 0 && viewMode === "browse" && (
+              <div className="h-full">
+                <div className="flex items-center gap-2 mb-2">
+                  <Clock className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">Recent</span>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={clearRecentStickers}
+                          className="ml-auto h-5 w-5 p-0 rounded hover:bg-accent flex items-center justify-center"
+                        >
+                          <X className="h-3 w-3 text-muted-foreground" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Clear recent stickers</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <StickerGrid
+                  icons={recentStickers.slice(0, 12)}
+                  onAdd={handleAddSticker}
+                  addingSticker={addingSticker}
+                />
+              </div>
+            )}
+
+            {viewMode === "collection" && selectedCollection && (
+              <div className="h-full">
+                {isLoadingCollection ? (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : showCollectionItems ? (
+                  <StickerGrid
+                    icons={iconsToDisplay}
+                    onAdd={handleAddSticker}
+                    addingSticker={addingSticker}
+                  />
+                ) : (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {viewMode === "search" && (
+              <div className="h-full">
+                {isSearching ? (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : searchResults?.icons.length ? (
+                  <>
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-sm text-muted-foreground">
+                        {searchResults.total} results
+                      </span>
+                    </div>
+                    <StickerGrid
+                      icons={iconsToDisplay}
+                      onAdd={handleAddSticker}
+                      addingSticker={addingSticker}
+                    />
+                  </>
+                ) : searchQuery ? (
+                  <EmptyView
+                    message={`No stickers found for "${searchQuery}"`}
+                  />
+                ) : null}
+              </div>
+            )}
+
+            {viewMode === "browse" && !selectedCollection && (
+              <div className="space-y-4 h-full">
+                {isLoadingCollections ? (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : (
+                  <>
+                    {category !== "all" && (
+                      <div className="h-full">
+                        <h3 className="text-sm font-medium mb-2">
+                          Popular{" "}
+                          {category === "general"
+                            ? "Icon Sets"
+                            : category === "brands"
+                              ? "Brand Icons"
+                              : "Emoji Sets"}
+                        </h3>
+                        <CollectionGrid
+                          collections={filteredCollections}
+                          onSelectCollection={setSelectedCollection}
+                        />
+                      </div>
+                    )}
+
+                    {category === "all" && filteredCollections.length > 0 && (
+                      <div className="h-full">
+                        <CollectionGrid
+                          collections={filteredCollections.slice(
+                            0,
+                            collectionsToShow
+                          )}
+                          onSelectCollection={setSelectedCollection}
+                        />
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
+
+interface CollectionItemProps {
+  title: string;
+  subtitle: string;
+  onClick: () => void;
+}
+
+function CollectionItem({ title, subtitle, onClick }: CollectionItemProps) {
+  return (
+    <Button
+      variant="outline"
+      className="justify-between h-auto py-2 "
+      onClick={onClick}
+    >
+      <div className="text-left">
+        <p className="font-medium">{title}</p>
+        <p className="text-xs text-muted-foreground">{subtitle}</p>
+      </div>
+      <ArrowRight className="h-4 w-4" />
+    </Button>
+  );
+}
+
+interface StickerItemProps {
+  iconName: string;
+  onAdd: (iconName: string) => void;
+  isAdding?: boolean;
+}
+
+function StickerItem({ iconName, onAdd, isAdding }: StickerItemProps) {
+  const [imageError, setImageError] = useState(false);
+  const [hostIndex, setHostIndex] = useState(0);
+
+  useEffect(() => {
+    setImageError(false);
+    setHostIndex(0);
+  }, [iconName]);
+
+  const displayName = iconName.split(":")[1] || iconName;
+  const collectionPrefix = iconName.split(":")[0];
+
+  const preview = imageError ? (
+    <div className="w-full h-full flex items-center justify-center p-2">
+      <span className="text-xs text-muted-foreground text-center break-all">
+        {displayName}
+      </span>
+    </div>
+  ) : (
+    <div className="w-full h-full p-4 flex items-center justify-center">
+      <Image
+        src={
+          hostIndex === 0
+            ? getIconSvgUrl(iconName, { width: 64, height: 64 })
+            : buildIconSvgUrl(
+                ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
+                iconName,
+                { width: 64, height: 64 }
+              )
+        }
+        alt={displayName}
+        width={64}
+        height={64}
+        className="w-full h-full object-contain"
+        onError={() => {
+          const next = hostIndex + 1;
+          if (next < ICONIFY_HOSTS.length) {
+            setHostIndex(next);
+          } else {
+            setImageError(true);
+          }
+        }}
+        loading="lazy"
+        unoptimized
+      />
+    </div>
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={cn(
+            "relative",
+            isAdding && "opacity-50 pointer-events-none"
+          )}
+        >
+          <DraggableMediaItem
+            name={displayName}
+            preview={preview}
+            dragData={{
+              type: "sticker",
+              iconName: iconName,
+              name: displayName,
+            }}
+            onAddToTimeline={() => onAdd(iconName)}
+            aspectRatio={1}
+            showLabel={false}
+            rounded={true}
+            variant="card"
+            className=""
+            isDraggable={false}
+          />
+          {isAdding && (
+            <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-md z-10">
+              <Loader2 className="h-6 w-6 animate-spin text-white" />
+            </div>
+          )}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div className="space-y-1">
+          <p className="font-medium">{displayName}</p>
+          <p className="text-xs text-muted-foreground">{collectionPrefix}</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 3873ebcae..42c4becc9 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -14,7 +14,7 @@ import { cn } from "@/lib/utils";
 import { formatTimeCode } from "@/lib/time";
 import { EditableTimecode } from "@/components/ui/editable-timecode";
 import { FONT_CLASS_MAP } from "@/lib/font-config";
-import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store";
+import { DEFAULT_CANVAS_SIZE, DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { TextElementDragState } from "@/types/editor";
 import {
   Popover,
@@ -631,7 +631,7 @@ function FullscreenToolbar({
           time={currentTime}
           duration={totalDuration}
           format="HH:MM:SS:FF"
-          fps={activeProject?.fps || 30}
+          fps={activeProject?.fps || DEFAULT_FPS}
           onTimeChange={seek}
           disabled={!hasAnyElements}
           className="text-foreground/90 hover:bg-white/10"
@@ -641,7 +641,7 @@ function FullscreenToolbar({
           {formatTimeCode(
             totalDuration,
             "HH:MM:SS:FF",
-            activeProject?.fps || 30
+            activeProject?.fps || DEFAULT_FPS
           )}
         </span>
       </div>
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index d8261d9bb..284384eb8 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -22,8 +22,8 @@ import {
   ZoomOut,
   Bookmark,
   Eye,
-  MicOff,
-  Mic,
+  VolumeOff,
+  Volume2,
 } from "lucide-react";
 import {
   Tooltip,
@@ -40,9 +40,11 @@ import {
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
+
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { processMediaFiles } from "@/lib/media-processing";
+
 import { toast } from "sonner";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { TimelineTrackContent } from "./timeline-track";
@@ -63,6 +65,8 @@ import {
   snapTimeToFrame,
 } from "@/constants/timeline-constants";
 import { Slider } from "@/components/ui/slider";
+import { formatTimeCode } from "@/lib/time";
+import { EditableTimecode } from "@/components/ui/editable-timecode";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their elements.
@@ -608,11 +612,7 @@ export function Timeline() {
       onMouseEnter={() => setIsInTimeline(true)}
       onMouseLeave={() => setIsInTimeline(false)}
     >
-      <TimelineToolbar
-        zoomLevel={zoomLevel}
-        setZoomLevel={setZoomLevel}
-        seek={seek}
-      />
+      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
 
       {/* Timeline Container */}
       <div
@@ -803,12 +803,12 @@ export function Timeline() {
                     >
                       <div className="flex items-center justify-end flex-1 min-w-0 gap-2">
                         {track.muted ? (
-                          <MicOff
+                          <VolumeOff
                             className="h-4 w-4 text-destructive cursor-pointer"
                             onClick={() => toggleTrackMute(track.id)}
                           />
                         ) : (
-                          <Mic
+                          <Volume2
                             className="h-4 w-4 text-muted-foreground cursor-pointer"
                             onClick={() => toggleTrackMute(track.id)}
                           />
@@ -936,11 +936,9 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
 function TimelineToolbar({
   zoomLevel,
   setZoomLevel,
-  seek,
 }: {
   zoomLevel: number;
   setZoomLevel: (zoom: number) => void;
-  seek: (time: number) => void;
 }) {
   const {
     tracks,
@@ -959,8 +957,8 @@ function TimelineToolbar({
     rippleEditingEnabled,
     toggleRippleEditing,
   } = useTimelineStore();
-  const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
-  const { toggleBookmark, isBookmarked } = useProjectStore();
+  const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
+  const { toggleBookmark, isBookmarked, activeProject } = useProjectStore();
 
   const handleSplitSelected = () => {
     if (selectedElements.length === 0) return;
@@ -1131,11 +1129,22 @@ function TimelineToolbar({
             <TooltipContent>Return to Start (Home / Enter)</TooltipContent>
           </Tooltip>
           <div className="w-px h-6 bg-border mx-1" />
-          <div
-            className="text-xs text-muted-foreground font-mono px-2"
-            style={{ minWidth: "18ch", textAlign: "center" }}
-          >
-            {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+          {/* Time Display */}
+          <div className="flex flex-row items-center justify-center px-2">
+            <EditableTimecode
+              time={currentTime}
+              duration={duration}
+              format="HH:MM:SS:FF"
+              fps={activeProject?.fps ?? DEFAULT_FPS}
+              onTimeChange={seek}
+              className="text-center"
+            />
+            <div className="text-xs text-muted-foreground font-mono px-2">
+              /
+            </div>
+            <div className="text-xs text-muted-foreground font-mono text-center">
+              {formatTimeCode(duration, "HH:MM:SS:FF")}
+            </div>
           </div>
           {tracks.length === 0 && (
             <>
diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index ff4797fb8..5a0377102 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -21,7 +21,7 @@ import {
   snapTimeToFrame,
   TIMELINE_CONSTANTS,
 } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
 
 export function TimelineTrackContent({
@@ -70,7 +70,7 @@ export function TimelineTrackContent({
   ) => {
     // Always apply frame snapping first
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
     let finalTime = snapTimeToFrame(dropTime, projectFps);
 
     // Additionally apply element snapping if enabled
@@ -156,7 +156,7 @@ export function TimelineTrackContent({
 
       // Always apply frame snapping first
       const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
+      const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
       let finalTime = snapTimeToFrame(adjustedTime, projectFps);
       let snapPoint = null;
 
@@ -704,7 +704,7 @@ export function TimelineTrackContent({
     const newStartTime =
       mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
     const snappedTime = snapTimeToFrame(newStartTime, projectFps);
 
     // Calculate drop position relative to tracks
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index bed04a27c..4d68efb28 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -9,7 +9,13 @@ import Image from "next/image";
 export function Header() {
   const leftContent = (
     <Link href="/" className="flex items-center gap-3">
-      <Image src="/logo.svg" alt="OpenCut Logo" className="invert dark:invert-0" width={32} height={32} />
+      <Image
+        src="/logo.svg"
+        alt="OpenCut Logo"
+        className="invert dark:invert-0"
+        width={32}
+        height={32}
+      />
       <span className="text-xl font-medium hidden md:block">OpenCut</span>
     </Link>
   );
@@ -38,7 +44,7 @@ export function Header() {
   );
 
   return (
-    <div className="mx-4 md:mx-0">
+    <div className="sticky top-4 z-50 mx-4 md:mx-0">
       <HeaderBase
         className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
         leftContent={leftContent}
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index d4d121d91..dd6a500ba 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -19,96 +19,7 @@ import {
   DialogTrigger,
 } from "./ui/dialog";
 
-const ShortcutItem = ({
-  shortcut,
-  isRecording,
-  onStartRecording,
-}: {
-  shortcut: KeyboardShortcut;
-  isRecording: boolean;
-  onStartRecording: (shortcut: KeyboardShortcut) => void;
-}) => {
-  // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
-  const displayKeys = shortcut.keys.filter((key: string) => {
-    if (
-      key.includes("Cmd") &&
-      shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
-    )
-      return false;
-
-    return true;
-  });
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        {shortcut.icon && (
-          <div className="text-muted-foreground">{shortcut.icon}</div>
-        )}
-        <span className="text-sm">{shortcut.description}</span>
-      </div>
-      <div className="flex items-center gap-1">
-        {displayKeys.map((key: string, index: number) => (
-          <div key={key} className="flex items-center gap-1">
-            <div className="flex items-center">
-              {key.split("+").map((keyPart: string, partIndex: number) => {
-                const keyId = `${shortcut.id}-${index}-${partIndex}`;
-                return (
-                  <EditableShortcutKey
-                    key={keyId}
-                    isRecording={isRecording}
-                    onStartRecording={() => onStartRecording(shortcut)}
-                  >
-                    {keyPart}
-                  </EditableShortcutKey>
-                );
-              })}
-            </div>
-            {index < displayKeys.length - 1 && (
-              <span className="text-xs text-muted-foreground">or</span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const EditableShortcutKey = ({
-  children,
-  isRecording,
-  onStartRecording,
-}: {
-  children: React.ReactNode;
-  isRecording: boolean;
-  onStartRecording: () => void;
-}) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onStartRecording();
-  };
-
-  return (
-    <Button
-      variant="text"
-      size="sm"
-      className={`inline-flex font-sans text-xs rounded px-2 min-w-6 min-h-6 leading-none items-center justify-center shadow-xs border mr-1 cursor-pointer hover:bg-opacity-80 ${
-        isRecording
-          ? "border-primary bg-primary/10"
-          : "border bg-accent"
-      }`}
-      onClick={handleClick}
-      title={
-        isRecording ? "Press any key combination..." : "Click to edit shortcut"
-      }
-    >
-      {children}
-    </Button>
-  );
-};
-
-export const KeyboardShortcutsHelp = () => {
+export function KeyboardShortcutsHelp() {
   const [open, setOpen] = useState(false);
   const [recordingShortcut, setRecordingShortcut] =
     useState<KeyboardShortcut | null>(null);
@@ -199,8 +110,8 @@ export const KeyboardShortcutsHelp = () => {
           Shortcuts
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-2xl overflow-y-auto">
-        <DialogHeader>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0">
+        <DialogHeader className="flex-shrink-0 p-6 pb-4">
           <DialogTitle className="flex items-center gap-2">
             <Keyboard className="w-5 h-5" />
             Keyboard Shortcuts
@@ -211,40 +122,124 @@ export const KeyboardShortcutsHelp = () => {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-6">
-          {categories.map((category) => (
-            <div key={category} className="flex flex-col gap-1">
-              <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
-                {category}
-              </h3>
-              <div className="space-y-0.5">
-                {shortcuts
-                  .filter((shortcut) => shortcut.category === category)
-                  .map((shortcut) => (
-                    <ShortcutItem
-                      key={shortcut.action}
-                      shortcut={shortcut}
-                      isRecording={
-                        shortcut.action === recordingShortcut?.action
-                      }
-                      onStartRecording={handleStartRecording}
-                    />
-                  ))}
+        <div className="overflow-y-auto flex-grow scrollbar-thin">
+          <div className="space-y-6 p-6">
+            {categories.map((category) => (
+              <div key={category} className="flex flex-col gap-1">
+                <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+                  {category}
+                </h3>
+                <div className="space-y-0.5">
+                  {shortcuts
+                    .filter((shortcut) => shortcut.category === category)
+                    .map((shortcut) => (
+                      <ShortcutItem
+                        key={shortcut.action}
+                        shortcut={shortcut}
+                        isRecording={
+                          shortcut.action === recordingShortcut?.action
+                        }
+                        onStartRecording={handleStartRecording}
+                      />
+                    ))}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
-        <DialogFooter>
-          <Button
-            size="sm"
-            className="mt-4"
-            variant="destructive"
-            onClick={resetToDefaults}
-          >
+        <DialogFooter className="flex-shrink-0 p-6 pt-4">
+          <Button size="sm" variant="destructive" onClick={resetToDefaults}>
             Reset to Default
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
-};
+}
+
+function ShortcutItem({
+  shortcut,
+  isRecording,
+  onStartRecording,
+}: {
+  shortcut: KeyboardShortcut;
+  isRecording: boolean;
+  onStartRecording: (shortcut: KeyboardShortcut) => void;
+}) {
+  // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
+  const displayKeys = shortcut.keys.filter((key: string) => {
+    if (
+      key.includes("Cmd") &&
+      shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
+    )
+      return false;
+
+    return true;
+  });
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        {shortcut.icon && (
+          <div className="text-muted-foreground">{shortcut.icon}</div>
+        )}
+        <span className="text-sm">{shortcut.description}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        {displayKeys.map((key: string, index: number) => (
+          <div key={key} className="flex items-center gap-1">
+            <div className="flex items-center">
+              {key.split("+").map((keyPart: string, partIndex: number) => {
+                const keyId = `${shortcut.id}-${index}-${partIndex}`;
+                return (
+                  <EditableShortcutKey
+                    key={keyId}
+                    isRecording={isRecording}
+                    onStartRecording={() => onStartRecording(shortcut)}
+                  >
+                    {keyPart}
+                  </EditableShortcutKey>
+                );
+              })}
+            </div>
+            {index < displayKeys.length - 1 && (
+              <span className="text-xs text-muted-foreground">or</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function EditableShortcutKey({
+  children,
+  isRecording,
+  onStartRecording,
+}: {
+  children: React.ReactNode;
+  isRecording: boolean;
+  onStartRecording: () => void;
+}) {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onStartRecording();
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className={`font-sans px-2 min-w-6 min-h-6 leading-none mr-1 hover:bg-opacity-80 ${
+        isRecording ? "border-primary bg-primary/10" : "border bg-accent/50"
+      }`}
+      onClick={handleClick}
+      title={
+        isRecording ? "Press any key combination..." : "Click to edit shortcut"
+      }
+    >
+      {children}
+    </Button>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 5558eee0f..9096e415d 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 2316ec28d..ac5aee523 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -52,10 +52,8 @@ const DialogContent = React.forwardRef<
       }}
       {...props}
     >
-      <ScrollArea className="max-h-[75vh]">
-        <div className="p-6 space-y-4">{children}</div>
-      </ScrollArea>
-      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index ff6766fda..92aa677b2 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -25,6 +25,7 @@ export interface DraggableMediaItemProps {
   showLabel?: boolean;
   rounded?: boolean;
   variant?: "card" | "compact";
+  isDraggable?: boolean;
 }
 
 export function DraggableMediaItem({
@@ -39,11 +40,14 @@ export function DraggableMediaItem({
   showLabel = true,
   rounded = true,
   variant = "card",
+  isDraggable = true,
 }: DraggableMediaItemProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const dragRef = useRef<HTMLDivElement>(null);
-  const currentTime = usePlaybackStore((state) => state.currentTime);
+  const currentTime = isDraggable
+    ? usePlaybackStore((state) => state.currentTime)
+    : 0;
 
   const handleAddToTimeline = () => {
     onAddToTimeline?.(currentTime);
@@ -100,11 +104,11 @@ export function DraggableMediaItem({
               className={cn(
                 "bg-panel-accent relative overflow-hidden",
                 rounded && "rounded-md",
-                "[&::-webkit-drag-ghost]:opacity-0" // Webkit-specific ghost hiding
+                isDraggable && "[&::-webkit-drag-ghost]:opacity-0" // Webkit-specific ghost hiding
               )}
-              draggable={true}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
+              draggable={isDraggable}
+              onDragStart={isDraggable ? handleDragStart : undefined}
+              onDragEnd={isDraggable ? handleDragEnd : undefined}
             >
               {preview}
               {!isDragging && (
@@ -132,12 +136,12 @@ export function DraggableMediaItem({
           <div
             className={cn(
               "h-10 flex items-center gap-3 cursor-default w-full",
-              "[&::-webkit-drag-ghost]:opacity-0",
+              isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
               className
             )}
-            draggable={true}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
+            draggable={isDraggable}
+            onDragStart={isDraggable ? handleDragStart : undefined}
+            onDragEnd={isDraggable ? handleDragEnd : undefined}
           >
             <div className="w-6 h-6 flex-shrink-0 rounded overflow-hidden">
               {preview}
@@ -148,7 +152,8 @@ export function DraggableMediaItem({
       )}
 
       {/* Custom drag preview */}
-      {isDragging &&
+      {isDraggable &&
+        isDragging &&
         typeof document !== "undefined" &&
         createPortal(
           <div
@@ -194,7 +199,7 @@ function PlusButton({
     <Button
       size="icon"
       className={cn(
-        "absolute bottom-2 right-2 size-4 bg-background text-foreground",
+        "absolute bottom-2 right-2 size-4 bg-background hover:bg-panel text-foreground",
         className
       )}
       onClick={(e) => {
diff --git a/apps/web/src/components/ui/editable-timecode.tsx b/apps/web/src/components/ui/editable-timecode.tsx
index f6d29f49b..404831f6a 100644
--- a/apps/web/src/components/ui/editable-timecode.tsx
+++ b/apps/web/src/components/ui/editable-timecode.tsx
@@ -2,12 +2,13 @@
 
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/lib/utils";
-import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import { formatTimeCode, parseTimeCode, TimeCode } from "@/lib/time";
+import { DEFAULT_FPS } from "@/stores/project-store";
 
 interface EditableTimecodeProps {
   time: number;
   duration?: number;
-  format?: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
+  format?: TimeCode;
   fps?: number;
   onTimeChange?: (time: number) => void;
   className?: string;
@@ -18,7 +19,7 @@ export function EditableTimecode({
   time,
   duration,
   format = "HH:MM:SS:FF",
-  fps = 30,
+  fps = DEFAULT_FPS,
   onTimeChange,
   className,
   disabled = false,
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
new file mode 100644
index 000000000..ea225c14b
--- /dev/null
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ArrowLeft, Search } from "lucide-react";
+import { motion } from "motion/react";
+import { useState, useEffect } from "react";
+
+interface InputWithBackProps {
+  isExpanded: boolean;
+  setIsExpanded: (isExpanded: boolean) => void;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export function InputWithBack({
+  isExpanded,
+  setIsExpanded,
+  placeholder = "Search anything",
+  value,
+  onChange,
+}: InputWithBackProps) {
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
+  const [buttonOffset, setButtonOffset] = useState(-60);
+
+  const smoothTransition = {
+    duration: 0.35,
+    ease: [0.25, 0.1, 0.25, 1] as const,
+  };
+
+  useEffect(() => {
+    if (containerRef) {
+      const rect = containerRef.getBoundingClientRect();
+      setButtonOffset(-rect.left - 48);
+    }
+  }, [containerRef]);
+
+  return (
+    <div ref={setContainerRef} className="relative w-full">
+      <motion.div
+        className="absolute left-0 top-1/2 -translate-y-1/2 cursor-pointer hover:opacity-75 transition-opacity z-10"
+        initial={{
+          x: isExpanded ? 0 : buttonOffset,
+          opacity: isExpanded ? 1 : 0.5,
+        }}
+        animate={{
+          x: isExpanded ? 0 : buttonOffset,
+          opacity: isExpanded ? 1 : 0.5,
+        }}
+        transition={smoothTransition}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <Button
+          variant="outline"
+          className="!size-9 rounded-full bg-panel-accent"
+        >
+          <ArrowLeft />
+        </Button>
+      </motion.div>
+      <div
+        className="relative flex-1"
+        style={{ marginLeft: "0px", paddingLeft: "0px" }}
+      >
+        <motion.div
+          className="relative"
+          initial={{
+            marginLeft: isExpanded ? 50 : 0,
+          }}
+          animate={{
+            marginLeft: isExpanded ? 50 : 0,
+          }}
+          transition={smoothTransition}
+        >
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={placeholder}
+            className="pl-9 bg-panel-accent w-full"
+            value={value}
+            onChange={(e) => onChange?.(e.target.value)}
+          />
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 65c7660d0..8f195a505 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,10 +1,12 @@
-import * as React from "react";
-import { Eye, EyeOff, X } from "lucide-react";
+"use client";
 
+import { Eye, EyeOff, X } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
+import { forwardRef, ComponentProps } from "react";
+import { useState } from "react";
 
-interface InputProps extends React.ComponentProps<"input"> {
+interface InputProps extends ComponentProps<"input"> {
   showPassword?: boolean;
   onShowPasswordChange?: (show: boolean) => void;
   showClearIcon?: boolean;
@@ -12,7 +14,7 @@ interface InputProps extends React.ComponentProps<"input"> {
   containerClassName?: string;
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       className,
@@ -29,7 +31,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const [isFocused, setIsFocused] = React.useState(false);
+    const [isFocused, setIsFocused] = useState(false);
 
     const isPassword = type === "password";
     const showPasswordToggle = isPassword && onShowPasswordChange;
diff --git a/apps/web/src/hooks/use-editor-actions.ts b/apps/web/src/hooks/use-editor-actions.ts
index bfe9a7b92..81500416d 100644
--- a/apps/web/src/hooks/use-editor-actions.ts
+++ b/apps/web/src/hooks/use-editor-actions.ts
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { useActionHandler } from "@/constants/actions";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { toast } from "sonner";
 
 export function useEditorActions() {
@@ -66,7 +66,7 @@ export function useEditorActions() {
   useActionHandler(
     "frame-step-forward",
     () => {
-      const projectFps = activeProject?.fps || 30;
+      const projectFps = activeProject?.fps || DEFAULT_FPS;
       seek(Math.min(duration, currentTime + 1 / projectFps));
     },
     undefined
@@ -75,7 +75,7 @@ export function useEditorActions() {
   useActionHandler(
     "frame-step-backward",
     () => {
-      const projectFps = activeProject?.fps || 30;
+      const projectFps = activeProject?.fps || DEFAULT_FPS;
       seek(Math.max(0, currentTime - 1 / projectFps));
     },
     undefined
diff --git a/apps/web/src/hooks/use-infinite-scroll.ts b/apps/web/src/hooks/use-infinite-scroll.ts
new file mode 100644
index 000000000..0f8db198b
--- /dev/null
+++ b/apps/web/src/hooks/use-infinite-scroll.ts
@@ -0,0 +1,35 @@
+import { useRef, useCallback } from "react";
+
+interface UseInfiniteScrollOptions {
+  onLoadMore: () => void;
+  hasMore: boolean;
+  isLoading: boolean;
+  threshold?: number;
+  enabled?: boolean;
+}
+
+export function useInfiniteScroll({
+  onLoadMore,
+  hasMore,
+  isLoading,
+  threshold = 200,
+  enabled = true,
+}: UseInfiniteScrollOptions) {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const handleScroll = useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      if (!enabled) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+      const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+
+      if (nearBottom && hasMore && !isLoading) {
+        onLoadMore();
+      }
+    },
+    [onLoadMore, hasMore, isLoading, threshold, enabled]
+  );
+
+  return { scrollAreaRef, handleScroll };
+}
diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index ba13e05a2..2875185c5 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { snapTimeToFrame } from "@/constants/timeline-constants";
 
 interface UseTimelineElementResizeProps {
@@ -113,7 +113,7 @@ export function useTimelineElementResize({
 
     // Get project FPS for frame snapping
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
 
     if (resizing.side === "left") {
       // Left resize - different behavior for media vs text/image elements
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 085872283..97086abbf 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -1,5 +1,5 @@
 import { snapTimeToFrame } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useState, useEffect, useCallback, useRef } from "react";
 
@@ -86,7 +86,7 @@ export function useTimelinePlayhead({
       const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
       // Use frame snapping for playhead scrubbing
       const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
+      const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
       const time = snapTimeToFrame(rawTime, projectFps);
 
       // Debug logging
diff --git a/apps/web/src/lib/iconify-api.ts b/apps/web/src/lib/iconify-api.ts
new file mode 100644
index 000000000..9d1bcb972
--- /dev/null
+++ b/apps/web/src/lib/iconify-api.ts
@@ -0,0 +1,242 @@
+
+export const ICONIFY_HOSTS = [
+  "https://api.iconify.design",
+  "https://api.simplesvg.com",
+  "https://api.unisvg.com",
+];
+
+let currentHost = ICONIFY_HOSTS[0];
+
+async function fetchWithFallback(path: string): Promise<Response> {
+  for (const host of ICONIFY_HOSTS) {
+    try {
+      const response = await fetch(`${host}${path}`, {
+        signal: AbortSignal.timeout(2000),
+      });
+      if (response.ok) {
+        currentHost = host;
+        return response;
+      }
+    } catch (error) {
+      console.warn(`Failed to fetch from ${host}:`, error);
+    }
+  }
+  throw new Error("All API hosts failed");
+}
+
+export interface IconSet {
+  prefix: string;
+  name: string;
+  total: number;
+  author?: {
+    name: string;
+    url?: string;
+  };
+  license?: {
+    title: string;
+    spdx?: string;
+    url?: string;
+  };
+  samples?: string[];
+  category?: string;
+  palette?: boolean;
+}
+
+export interface IconSearchResult {
+  icons: string[];
+  total: number;
+  limit: number;
+  start: number;
+  collections: Record<string, IconSet>;
+}
+
+export interface CollectionInfo {
+  prefix: string;
+  total: number;
+  title?: string;
+  uncategorized?: string[];
+  categories?: Record<string, string[]>;
+  hidden?: string[];
+  aliases?: Record<string, string>;
+}
+
+export async function getCollections(
+  category?: string
+): Promise<Record<string, IconSet>> {
+  try {
+    const response = await fetchWithFallback("/collections?pretty=1");
+    const data = (await response.json()) as Record<string, IconSet>;
+
+    if (category) {
+      const filtered = Object.fromEntries(
+        Object.entries(data).filter(
+          ([_key, info]) => info.category === category
+        )
+      ) as Record<string, IconSet>;
+      return filtered;
+    }
+
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch collections:", error);
+    return {};
+  }
+}
+
+export async function getCollection(
+  prefix: string
+): Promise<CollectionInfo | null> {
+  try {
+    const response = await fetchWithFallback(
+      `/collection?prefix=${prefix}&pretty=1`
+    );
+    return await response.json();
+  } catch (error) {
+    console.error(`Failed to fetch collection ${prefix}:`, error);
+    return null;
+  }
+}
+
+export async function searchIcons(
+  query: string,
+  limit: number = 64,
+  prefixes?: string[],
+  category?: string
+): Promise<IconSearchResult> {
+  const params = new URLSearchParams({
+    query,
+    limit: limit.toString(),
+    pretty: "1",
+  });
+
+  if (prefixes?.length) {
+    params.append("prefixes", prefixes.join(","));
+  }
+
+  if (category) {
+    params.append("category", category);
+  }
+
+  try {
+    const response = await fetchWithFallback(`/search?${params}`);
+    return await response.json();
+  } catch (error) {
+    console.error("Failed to search icons:", error);
+    return {
+      icons: [],
+      total: 0,
+      limit,
+      start: 0,
+      collections: {},
+    };
+  }
+}
+
+export function buildIconSvgUrl(
+  host: string,
+  iconName: string,
+  params?: {
+    color?: string;
+    width?: number;
+    height?: number;
+    flip?: "horizontal" | "vertical" | "horizontal,vertical";
+    rotate?: number | string;
+  }
+): string {
+  const [prefix, name] = iconName.includes(":")
+    ? iconName.split(":")
+    : ["", iconName];
+
+  if (!prefix || !name) {
+    throw new Error('Invalid icon name format. Expected "prefix:name"');
+  }
+
+  const urlParams = new URLSearchParams();
+
+  if (params?.color) {
+    urlParams.append("color", params.color.replace("#", "%23"));
+  }
+
+  if (params?.width) {
+    urlParams.append("width", params.width.toString());
+  }
+
+  if (params?.height) {
+    urlParams.append("height", params.height.toString());
+  }
+
+  if (params?.flip) {
+    urlParams.append("flip", params.flip);
+  }
+
+  if (params?.rotate) {
+    urlParams.append("rotate", params.rotate.toString());
+  }
+
+  const queryString = urlParams.toString();
+  return `${host}/${prefix}/${name}.svg${queryString ? "?" + queryString : ""}`;
+}
+
+export function getIconSvgUrl(
+  iconName: string,
+  params?: Parameters<typeof buildIconSvgUrl>[2]
+): string {
+  return buildIconSvgUrl(currentHost, iconName, params);
+}
+
+export async function downloadSvgAsText(
+  iconName: string,
+  params?: Parameters<typeof getIconSvgUrl>[1]
+): Promise<string> {
+  const url = getIconSvgUrl(iconName, params);
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to download SVG: ${response.statusText}`);
+  }
+  return await response.text();
+}
+
+export function svgToFile(svgText: string, fileName: string): File {
+  const blob = new Blob([svgText], { type: "image/svg+xml" });
+  return new File([blob], fileName, { type: "image/svg+xml" });
+}
+
+export const POPULAR_COLLECTIONS = {
+  general: [
+    { prefix: "mdi", name: "Material Design Icons" },
+    { prefix: "ic", name: "Google Material Icons" },
+    { prefix: "ph", name: "Phosphor" },
+    { prefix: "heroicons", name: "Heroicons" },
+    { prefix: "lucide", name: "Lucide" },
+    { prefix: "tabler", name: "Tabler Icons" },
+    { prefix: "fe", name: "Feather Icons" },
+    { prefix: "bi", name: "Bootstrap Icons" },
+  ],
+  brands: [
+    { prefix: "simple-icons", name: "Simple Icons" },
+    { prefix: "logos", name: "SVG Logos" },
+    { prefix: "skill-icons", name: "Skill Icons" },
+    { prefix: "devicon", name: "Devicon" },
+    { prefix: "fa-brands", name: "Font Awesome Brands" },
+  ],
+  emoji: [
+    { prefix: "noto", name: "Noto Emoji" },
+    { prefix: "twemoji", name: "Twemoji" },
+    { prefix: "fluent-emoji", name: "Fluent Emoji" },
+    { prefix: "fluent-emoji-flat", name: "Fluent Emoji Flat" },
+    { prefix: "emojione", name: "EmojiOne" },
+    { prefix: "openmoji", name: "OpenMoji" },
+  ],
+};
+
+export function getCategoriesFromCollections(
+  collections: Record<string, IconSet>
+): string[] {
+  const categories = new Set<string>();
+  Object.values(collections).forEach((collection) => {
+    if (collection.category) {
+      categories.add(collection.category);
+    }
+  });
+  return Array.from(categories).sort();
+}
diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts
index 00d60c47d..b3376a5f5 100644
--- a/apps/web/src/lib/storage/storage-service.ts
+++ b/apps/web/src/lib/storage/storage-service.ts
@@ -142,6 +142,7 @@ class StorageService {
       width: mediaItem.width,
       height: mediaItem.height,
       duration: mediaItem.duration,
+      ephemeral: mediaItem.ephemeral,
     };
 
     await mediaMetadataAdapter.set(mediaItem.id, metadata);
@@ -161,8 +162,22 @@ class StorageService {
 
     if (!file || !metadata) return null;
 
-    // Create new object URL for the file
-    const url = URL.createObjectURL(file);
+    let url: string;
+    if (metadata.type === "image" && (!file.type || file.type === "")) {
+      try {
+        const text = await file.text();
+        if (text.trim().startsWith("<svg")) {
+          const svgBlob = new Blob([text], { type: "image/svg+xml" });
+          url = URL.createObjectURL(svgBlob);
+        } else {
+          url = URL.createObjectURL(file);
+        }
+      } catch {
+        url = URL.createObjectURL(file);
+      }
+    } else {
+      url = URL.createObjectURL(file);
+    }
 
     return {
       id: metadata.id,
@@ -173,7 +188,7 @@ class StorageService {
       width: metadata.width,
       height: metadata.height,
       duration: metadata.duration,
-      // thumbnailUrl would need to be regenerated or cached separately
+      ephemeral: metadata.ephemeral,
     };
   }
 
diff --git a/apps/web/src/lib/storage/types.ts b/apps/web/src/lib/storage/types.ts
index 127b1690f..8f593867f 100644
--- a/apps/web/src/lib/storage/types.ts
+++ b/apps/web/src/lib/storage/types.ts
@@ -18,6 +18,8 @@ export interface MediaFileData {
   width?: number;
   height?: number;
   duration?: number;
+  ephemeral?: boolean;
+  sourceStickerIconName?: string;
   // File will be stored separately in OPFS
 }
 
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
index f24c59613..20e2ff6d0 100644
--- a/apps/web/src/lib/time.ts
+++ b/apps/web/src/lib/time.ts
@@ -1,10 +1,14 @@
 // Time-related utility functions
 
+import { DEFAULT_FPS } from "@/stores/project-store";
+
+export type TimeCode = "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
+
 // Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)
 export const formatTimeCode = (
   timeInSeconds: number,
-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
-  fps = 30
+  format: TimeCode = "HH:MM:SS:CS",
+  fps = DEFAULT_FPS
 ): string => {
   const hours = Math.floor(timeInSeconds / 3600);
   const minutes = Math.floor((timeInSeconds % 3600) / 60);
@@ -26,8 +30,8 @@ export const formatTimeCode = (
 
 export const parseTimeCode = (
   timeCode: string,
-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
-  fps = 30
+  format: TimeCode = "HH:MM:SS:CS",
+  fps = DEFAULT_FPS
 ): number | null => {
   if (!timeCode || typeof timeCode !== "string") return null;
 
@@ -116,3 +120,18 @@ export const parseTimeCode = (
 
   return null;
 };
+
+export const guessTimeCodeFormat = (timeCode: string): TimeCode | null => {
+  if (!timeCode || typeof timeCode !== "string") return null;
+
+  const numbers = timeCode.split(":");
+
+  if (!numbers.every((n) => !isNaN(Number(n)))) return null;
+
+  if (numbers.length === 2) return "MM:SS";
+  if (numbers.length === 3) return "HH:MM:SS";
+  // todo: how to tell frames apart from cs?
+  if (numbers.length === 4) return "HH:MM:SS:FF";
+
+  return null;
+};
diff --git a/apps/web/src/stores/__tests__/keybindings-store.test.ts b/apps/web/src/stores/__tests__/keybindings-store.test.ts
deleted file mode 100644
index 8aa5b94f6..000000000
--- a/apps/web/src/stores/__tests__/keybindings-store.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useKeybindingsStore } from '../keybindings-store'
-
-describe('Keybindings Store', () => {
-  beforeEach(() => {
-    // Reset store to default state before each test
-    useKeybindingsStore.getState().resetToDefaults()
-  })
-
-  describe('Default Keybindings', () => {
-    it('should include Enter key mapping to goto-start action', () => {
-      const { keybindings } = useKeybindingsStore.getState()
-      expect(keybindings.enter).toBe('goto-start')
-    })
-
-    it('should include Home key mapping to goto-start action', () => {
-      const { keybindings } = useKeybindingsStore.getState()
-      expect(keybindings.home).toBe('goto-start')
-    })
-
-    it('should have both Enter and Home keys for the same action', () => {
-      const { keybindings } = useKeybindingsStore.getState()
-      expect(keybindings.enter).toBe(keybindings.home)
-    })
-  })
-
-  describe('getKeybindingsForAction', () => {
-    it('should return both Enter and Home keys for goto-start action', () => {
-      const { getKeybindingsForAction } = useKeybindingsStore.getState()
-      const keys = getKeybindingsForAction('goto-start')
-      
-      expect(keys).toContain('enter')
-      expect(keys).toContain('home')
-      expect(keys.length).toBeGreaterThanOrEqual(2)
-    })
-  })
-
-  describe('Keyboard Event Parsing', () => {
-    it('should generate correct keybinding string for Enter key', () => {
-      const { getKeybindingString } = useKeybindingsStore.getState()
-      
-      // Mock KeyboardEvent for Enter key
-      const enterEvent = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        code: 'Enter'
-      })
-      
-      const result = getKeybindingString(enterEvent)
-      expect(result).toBe('enter')
-    })
-
-    it('should generate correct keybinding string for Home key', () => {
-      const { getKeybindingString } = useKeybindingsStore.getState()
-      
-      // Mock KeyboardEvent for Home key
-      const homeEvent = new KeyboardEvent('keydown', {
-        key: 'Home',
-        code: 'Home'
-      })
-      
-      const result = getKeybindingString(homeEvent)
-      expect(result).toBe('home')
-    })
-  })
-})
\ No newline at end of file
diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 650c0540a..95676d75a 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -16,6 +16,8 @@ export interface MediaItem {
   width?: number; // For video/image width
   height?: number; // For video/image height
   fps?: number; // For video frame rate
+  // Ephemeral items are used by timeline directly and should not appear in the media library or be persisted
+  ephemeral?: boolean;
   // Text-specific properties
   content?: string; // Text content
   fontSize?: number; // Font size
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index a92cb5307..c2b9cf4af 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import type { PlaybackState, PlaybackControls } from "@/types/playback";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { useProjectStore } from "./project-store";
+import { DEFAULT_FPS, useProjectStore } from "./project-store";
 
 interface PlaybackStore extends PlaybackState, PlaybackControls {
   setDuration: (duration: number) => void;
@@ -37,9 +37,9 @@ const startTimer = (store: () => PlaybackStore) => {
         // When content completes, pause just before the end so we can see the last frame
         const projectFps = useProjectStore.getState().activeProject?.fps;
         if (!projectFps)
-          console.error("Project FPS is not set, assuming 30fps");
+          console.error("Project FPS is not set, assuming " + DEFAULT_FPS + "fps");
 
-        const frameOffset = 1 / (projectFps ?? 30); // Stop 1 frame before end based on project FPS
+        const frameOffset = 1 / (projectFps ?? DEFAULT_FPS); // Stop 1 frame before end based on project FPS
         const stopTime = Math.max(0, effectiveDuration - frameOffset);
 
         state.pause();
@@ -91,7 +91,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
       actualContentDuration > 0 ? actualContentDuration : state.duration;
 
     if (effectiveDuration > 0) {
-      const fps = useProjectStore.getState().activeProject?.fps ?? 30;
+      const fps = useProjectStore.getState().activeProject?.fps ?? DEFAULT_FPS;
       const frameOffset = 1 / fps;
       const endThreshold = Math.max(0, effectiveDuration - frameOffset);
 
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 259533bf9..5ff884187 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -8,6 +8,7 @@ import { generateUUID } from "@/lib/utils";
 import { CanvasSize, CanvasMode } from "@/types/editor";
 
 export const DEFAULT_CANVAS_SIZE: CanvasSize = { width: 1920, height: 1080 };
+export const DEFAULT_FPS = 30;
 
 const DEFAULT_PROJECT: TProject = {
   id: generateUUID(),
@@ -19,7 +20,7 @@ const DEFAULT_PROJECT: TProject = {
   backgroundType: "color",
   blurIntensity: 8,
   bookmarks: [],
-  fps: 30,
+  fps: DEFAULT_FPS,
   canvasSize: DEFAULT_CANVAS_SIZE,
   canvasMode: "preset",
 };
@@ -77,7 +78,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject) return;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     const bookmarks = activeProject.bookmarks || [];
@@ -119,7 +120,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject || !activeProject.bookmarks) return false;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     return activeProject.bookmarks.some(
@@ -132,7 +133,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject || !activeProject.bookmarks) return;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     const updatedBookmarks = activeProject.bookmarks.filter(
diff --git a/apps/web/src/stores/stickers-store.ts b/apps/web/src/stores/stickers-store.ts
new file mode 100644
index 000000000..da8b926bf
--- /dev/null
+++ b/apps/web/src/stores/stickers-store.ts
@@ -0,0 +1,178 @@
+import { create } from "zustand";
+import {
+  getCollections,
+  getCollection,
+  searchIcons,
+  downloadSvgAsText,
+  svgToFile,
+  type IconSet,
+  type CollectionInfo,
+  type IconSearchResult,
+} from "@/lib/iconify-api";
+
+export type StickerCategory = "all" | "general" | "brands" | "emoji";
+
+interface StickersStore {
+  searchQuery: string;
+  selectedCategory: StickerCategory;
+  selectedCollection: string | null;
+  viewMode: "search" | "browse" | "collection";
+
+  collections: Record<string, IconSet>;
+  currentCollection: CollectionInfo | null;
+  searchResults: IconSearchResult | null;
+  recentStickers: string[];
+  isLoadingCollections: boolean;
+  isLoadingCollection: boolean;
+  isSearching: boolean;
+  isDownloading: boolean;
+
+  setSearchQuery: (query: string) => void;
+  setSelectedCategory: (category: StickerCategory) => void;
+  setSelectedCollection: (collection: string | null) => void;
+  setViewMode: (mode: "search" | "browse" | "collection") => void;
+
+  loadCollections: () => Promise<void>;
+  loadCollection: (prefix: string) => Promise<void>;
+  searchStickers: (query: string) => Promise<void>;
+  downloadSticker: (iconName: string) => Promise<File | null>;
+
+  addToRecentStickers: (iconName: string) => void;
+  clearRecentStickers: () => void;
+}
+
+const MAX_RECENT_STICKERS = 50;
+
+export const useStickersStore = create<StickersStore>((set, get) => ({
+  searchQuery: "",
+  selectedCategory: "all",
+  selectedCollection: null,
+  viewMode: "browse",
+
+  collections: {},
+  currentCollection: null,
+  searchResults: null,
+  recentStickers: [],
+
+  isLoadingCollections: false,
+  isLoadingCollection: false,
+  isSearching: false,
+  isDownloading: false,
+
+  setSearchQuery: (query) => set({ searchQuery: query }),
+
+  setSelectedCategory: (category) =>
+    set({
+      selectedCategory: category,
+      viewMode: "browse",
+      selectedCollection: null,
+      currentCollection: null,
+    }),
+
+  setSelectedCollection: (collection) => {
+    set({
+      selectedCollection: collection,
+      viewMode: collection ? "collection" : "browse",
+      currentCollection: null,
+    });
+
+    if (collection) {
+      get().loadCollection(collection);
+    }
+  },
+
+  setViewMode: (mode) => set({ viewMode: mode }),
+
+  loadCollections: async () => {
+    set({ isLoadingCollections: true });
+    try {
+      const collections = await getCollections();
+      set({ collections });
+    } catch (error) {
+      console.error("Failed to load collections:", error);
+    } finally {
+      set({ isLoadingCollections: false });
+    }
+  },
+
+  loadCollection: async (prefix: string) => {
+    set({ isLoadingCollection: true });
+    try {
+      const collection = await getCollection(prefix);
+      set({ currentCollection: collection });
+    } catch (error) {
+      console.error(`Failed to load collection ${prefix}:`, error);
+      set({ currentCollection: null });
+    } finally {
+      set({ isLoadingCollection: false });
+    }
+  },
+
+  searchStickers: async (query: string) => {
+    if (!query.trim()) {
+      set({ searchResults: null, viewMode: "browse" });
+      return;
+    }
+
+    const { selectedCategory } = get();
+
+    set({ isSearching: true, viewMode: "search" });
+    try {
+      let category: string | undefined;
+
+      if (selectedCategory !== "all") {
+        if (selectedCategory === "general") {
+          category = "General";
+        } else if (selectedCategory === "brands") {
+          category = "Brands / Social";
+        } else if (selectedCategory === "emoji") {
+          category = "Emoji";
+        }
+      }
+
+      const results = await searchIcons(query, 100, undefined, category);
+      set({ searchResults: results });
+    } catch (error) {
+      console.error("Search failed:", error);
+      set({ searchResults: null });
+    } finally {
+      set({ isSearching: false });
+    }
+  },
+
+  downloadSticker: async (iconName: string) => {
+    set({ isDownloading: true });
+    try {
+      const svgText = await downloadSvgAsText(iconName, {
+        width: 200,
+        height: 200,
+      });
+
+      const fileName = `${iconName.replace(":", "-")}.svg`;
+      const file = svgToFile(svgText, fileName);
+
+      get().addToRecentStickers(iconName);
+
+      return file;
+    } catch (error) {
+      console.error(`Failed to download sticker ${iconName}:`, error);
+      return null;
+    } finally {
+      set({ isDownloading: false });
+    }
+  },
+
+  addToRecentStickers: (iconName: string) => {
+    set((state) => {
+      const recent = [
+        iconName,
+        ...state.recentStickers.filter((s) => s !== iconName),
+      ];
+      return {
+        recentStickers: recent.slice(0, MAX_RECENT_STICKERS),
+      };
+    });
+  },
+
+  clearRecentStickers: () => set({ recentStickers: [] }),
+}));