diff --git a/src/components/modals/CreateWebsiteDialog.tsx b/src/components/modals/CreateWebsiteDialog.tsx
index 490d858f..f8eb93f5 100644
--- a/src/components/modals/CreateWebsiteDialog.tsx
+++ b/src/components/modals/CreateWebsiteDialog.tsx
@@ -10,17 +10,14 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
-import { Loader2 } from "lucide-react";
 
 interface CreateWebsiteDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    workspaceId: string;
-    folderId?: string;
-    onNoteCreated?: (noteId: string) => void;
+    onCreate: (url: string, name: string, favicon?: string) => void;
 }
 
 /**
@@ -35,225 +32,156 @@ function isValidUrl(str: string): boolean {
     }
 }
 
+/**
+ * Get the favicon URL for a given website URL using Google's favicon service
+ * Note: We use sz=64 to detect default globe icons (they stay 16x16 while real favicons scale)
+ */
+function getFaviconUrl(websiteUrl: string): string | undefined {
+    try {
+        const url = new URL(websiteUrl.trim());
+        return `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=64`;
+    } catch {
+        return undefined;
+    }
+}
+
+/**
+ * Extract a display name from a URL (domain without www)
+ */
+function getDisplayName(websiteUrl: string): string {
+    try {
+        const url = new URL(websiteUrl.trim());
+        return url.hostname.replace(/^www\./, "");
+    } catch {
+        return "Website";
+    }
+}
+
 export function CreateWebsiteDialog({
     open,
     onOpenChange,
-    workspaceId,
-    folderId,
-    onNoteCreated,
+    onCreate,
 }: CreateWebsiteDialogProps) {
-    const [urlsText, setUrlsText] = useState("");
-    const [isCreating, setIsCreating] = useState(false);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const [url, setUrl] = useState("");
+    const [name, setName] = useState("");
+    const [isValid, setIsValid] = useState(false);
+    const [isLoadingTitle, setIsLoadingTitle] = useState(false);
+    const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-    // Parse and validate URLs from textarea
-    const parseUrls = useCallback(() => {
-        const lines = urlsText.split("\n").map((line) => line.trim()).filter(Boolean);
-        const validUrls: string[] = [];
-        const invalidLines: string[] = [];
+    // Validate URL as user types
+    useEffect(() => {
+        setIsValid(isValidUrl(url));
+    }, [url]);
 
-        for (const line of lines) {
-            if (isValidUrl(line)) {
-                validUrls.push(line);
-            } else {
-                invalidLines.push(line);
-            }
+    // Auto-fill name from domain when a valid URL is entered
+    useEffect(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
         }
 
-        return { validUrls, invalidLines };
-    }, [urlsText]);
-
-    const { validUrls, invalidLines } = parseUrls();
-    const hasValidUrls = validUrls.length > 0;
-
-    const handleSubmit = useCallback(async () => {
-        if (!hasValidUrls || isCreating) return;
-
-        if (invalidLines.length > 0) {
-            toast.warning(`Skipping ${invalidLines.length} invalid URL(s)`);
+        if (isValid && url.trim() && !name.trim()) {
+            debounceTimerRef.current = setTimeout(() => {
+                setName(getDisplayName(url));
+            }, 300);
         }
 
-        // Close dialog immediately for non-blocking UX
-        onOpenChange(false);
-        setUrlsText("");
-
-        // Show loading toast
-        const toastId = toast.loading("Creating note from websites...", {
-            description: `Processing ${validUrls.length} URL${validUrls.length > 1 ? 's' : ''}`,
-        });
-
-        setIsCreating(true);
-
-        try {
-            const response = await fetch("/api/notes/create-from-urls", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    urls: validUrls,
-                    workspaceId,
-                    folderId,
-                }),
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.error || `Request failed with status ${response.status}`);
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
             }
+        };
+    }, [url, isValid]);
 
-            const result = await response.json();
-
-            if (result.success && result.itemId) {
-                if (result.warning) {
-                    toast.warning("Note created with issues", {
-                        id: toastId,
-                        description: result.warning,
-                    });
-                } else {
-                    toast.success("Website note created!", {
-                        id: toastId,
-                        description: "Your note is ready",
-                    });
-                }
-                onNoteCreated?.(result.itemId);
-            } else {
-                throw new Error(result.message || "Failed to create note");
-            }
-        } catch (error) {
-            console.error("Error creating website note:", error);
-            toast.error("Failed to create note from websites", {
-                id: toastId,
-                description: error instanceof Error ? error.message : undefined,
-            });
-        } finally {
-            setIsCreating(false);
+    const handleSubmit = useCallback(() => {
+        if (!isValid || !url.trim()) {
+            toast.error("Please enter a valid website URL");
+            return;
         }
-    }, [validUrls, hasValidUrls, isCreating, invalidLines.length, workspaceId, folderId, onNoteCreated, onOpenChange]);
 
-    const handleKeyDown = useCallback(
-        (e: React.KeyboardEvent) => {
-            // Cmd/Ctrl + Enter to submit
-            if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && hasValidUrls && !isCreating) {
-                e.preventDefault();
-                handleSubmit();
-            } else if (e.key === "Escape") {
-                onOpenChange(false);
-            }
-        },
-        [hasValidUrls, isCreating, handleSubmit, onOpenChange]
-    );
+        const cardName = name.trim() || getDisplayName(url);
+        const favicon = getFaviconUrl(url);
+        onCreate(url.trim(), cardName, favicon);
+
+        // Reset form
+        setUrl("");
+        setName("");
+        onOpenChange(false);
+    }, [url, name, isValid, onCreate, onOpenChange]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && isValid) {
+            e.preventDefault();
+            handleSubmit();
+        } else if (e.key === 'Escape') {
+            onOpenChange(false);
+        }
+    }, [isValid, handleSubmit, onOpenChange]);
 
     // Reset form when dialog opens
     useEffect(() => {
         if (open) {
-            setUrlsText("");
-            setIsCreating(false);
-            // Focus textarea after dialog opens
-            setTimeout(() => textareaRef.current?.focus(), 100);
+            setUrl("");
+            setName("");
+            setIsValid(false);
+            setIsLoadingTitle(false);
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
         }
     }, [open]);
 
-    const handlePaste = useCallback((e: React.ClipboardEvent) => {
-        // Prevent default paste to handle it manually
-        e.preventDefault();
-
-        // Get pasted text
-        let text = e.clipboardData.getData("text");
-
-        // 1. Pre-process to separate mashed URLs (e.g. "http://a.comhttp://b.com")
-        // This adds a space before any http protocol that isn't at the very start
-        text = text.replace(/(?<!^)(https?:\/\/)/g, " $1");
-
-        // 2. Split by whitespace or commas
-        // Filter out empty strings
-        const urls = text.split(/[\s,]+/).filter(Boolean);
-
-        if (urls.length === 0) return;
-
-        // 3. Prepare content to insert
-        let formattedText = urls.join("\n");
-
-        // 4. Handle insertion context
-        const textarea = e.currentTarget as HTMLTextAreaElement;
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-
-        const currentValue = urlsText;
-
-        // If we are appending to a line that has content, prepend a newline
-        // We look at the character before the cursor
-        if (start > 0 && currentValue[start - 1] !== "\n") {
-            formattedText = "\n" + formattedText;
-        }
-
-        const newValue =
-            currentValue.substring(0, start) +
-            formattedText +
-            currentValue.substring(end);
-
-        setUrlsText(newValue);
-
-        // Update cursor position (async to let render happen, though React state update might contest this)
-        // With standard React controlled inputs, we usually just set state. 
-        // We can create a synthetic change event or just let the effect handle it, 
-        // but explicit state setting is cleanest here.
-
-        // Fix cursor position after update
-        setTimeout(() => {
-            if (textareaRef.current) {
-                const newCursorPos = start + formattedText.length;
-                textareaRef.current.selectionStart = textareaRef.current.selectionEnd = newCursorPos;
-            }
-        }, 0);
-    }, [urlsText]);
-
     return (
-        <Dialog open={open} onOpenChange={isCreating ? undefined : onOpenChange}>
-            <DialogContent onKeyDown={handleKeyDown} className="sm:max-w-md max-h-[85vh] flex flex-col">
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent onKeyDown={handleKeyDown}>
                 <DialogHeader>
-                    <DialogTitle>Create Note from Websites</DialogTitle>
+                    <DialogTitle>Embed Website</DialogTitle>
                     <DialogDescription>
-                        Paste one or more website URLs (one per line). A note will be created with content synthesized from these pages.
+                        Enter a website URL to embed it in your workspace.
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
+                <div className="space-y-4 py-4">
                     <div className="space-y-2">
-                        <Label htmlFor="website-urls">Website URLs</Label>
-                        <Textarea
-                            ref={textareaRef}
-                            id="website-urls"
-                            placeholder="https://example.com/page-1&#10;https://example.com/page-2"
-                            value={urlsText}
-                            onChange={(e) => setUrlsText(e.target.value)}
-                            onPaste={handlePaste}
-                            rows={5}
-                            disabled={isCreating}
-                            className="resize-none max-h-[40vh] overflow-y-auto"
+                        <Label htmlFor="website-url">Website URL</Label>
+                        <Input
+                            id="website-url"
+                            type="url"
+                            placeholder="https://example.com"
+                            value={url}
+                            onChange={(e) => setUrl(e.target.value)}
+                            autoFocus
                         />
-                        {urlsText && (
-                            <p className="text-xs text-muted-foreground">
-                                {validUrls.length} valid URL{validUrls.length !== 1 ? "s" : ""}
-                                {invalidLines.length > 0 && (
-                                    <span className="text-yellow-500"> • {invalidLines.length} invalid</span>
-                                )}
+                        {!isValid && url && (
+                            <p className="text-sm text-red-500">
+                                Please enter a valid URL (http:// or https://)
                             </p>
                         )}
                     </div>
+
+                    <div className="space-y-2">
+                        <Label htmlFor="website-name">Card Name</Label>
+                        <Input
+                            id="website-name"
+                            type="text"
+                            placeholder={isValid ? getDisplayName(url) : "Website"}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                        <p className="text-xs text-muted-foreground">
+                            Leave empty to use the domain name
+                        </p>
+                    </div>
                 </div>
 
                 <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isCreating}>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
                         Cancel
                     </Button>
-                    <Button onClick={handleSubmit} disabled={!hasValidUrls || isCreating}>
-                        {isCreating ? (
-                            <>
-                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                Creating...
-                            </>
-                        ) : (
-                            "Create Note"
-                        )}
+                    <Button
+                        onClick={handleSubmit}
+                        disabled={!isValid}
+                    >
+                        Add Website
                     </Button>
                 </DialogFooter>
             </DialogContent>
diff --git a/src/components/workspace-canvas/CardRenderer.tsx b/src/components/workspace-canvas/CardRenderer.tsx
index 077c2858..0076f539 100644
--- a/src/components/workspace-canvas/CardRenderer.tsx
+++ b/src/components/workspace-canvas/CardRenderer.tsx
@@ -108,6 +108,28 @@ export function CardRenderer(props: {
     return <AudioCardContent item={item} />;
   }
 
+  if (item.type === "website") {
+    // Website cards are rendered via WebsitePanelContent in the panel;
+    // this fallback is for generic/modal context
+    const websiteData = item.data as import("@/lib/workspace-state/types").WebsiteData;
+    let hostname = '';
+    try { hostname = new URL(websiteData.url).hostname.replace(/^www\./, ''); } catch {}
+    return (
+      <div className="flex-1 min-h-0 flex flex-col items-center justify-center gap-3 p-8">
+        {websiteData.favicon ? (
+          <img src={websiteData.favicon} alt="" className="size-16 rounded-lg" />
+        ) : (
+          <div className="size-16 rounded-lg bg-muted flex items-center justify-center">
+            <span className="text-2xl font-bold text-muted-foreground">{hostname.charAt(0).toUpperCase()}</span>
+          </div>
+        )}
+        {hostname && (
+          <span className="text-sm text-muted-foreground">{hostname}</span>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="mt-4 p-4 rounded-lg bg-muted/30 text-center">
       <p className="text-sm text-muted-foreground">
diff --git a/src/components/workspace-canvas/ItemPanelContent.tsx b/src/components/workspace-canvas/ItemPanelContent.tsx
index fdccbff2..71a5d753 100644
--- a/src/components/workspace-canvas/ItemPanelContent.tsx
+++ b/src/components/workspace-canvas/ItemPanelContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { X } from "lucide-react";
+import { X, ExternalLink } from "lucide-react";
 import { LuMaximize2, LuMinimize2 } from "react-icons/lu";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import ChatFloatingButton from "@/components/chat/ChatFloatingButton";
@@ -10,6 +10,7 @@ import ItemHeader from "@/components/workspace-canvas/ItemHeader";
 import CardRenderer from "@/components/workspace-canvas/CardRenderer";
 import LazyAppPdfViewer from "@/components/pdf/LazyAppPdfViewer";
 import { YouTubePanelContent } from "@/components/workspace-canvas/YouTubePanelContent";
+import { WebsitePanelContent } from "@/components/workspace-canvas/WebsitePanelContent";
 import { PdfPanelHeader } from "@/components/pdf/PdfPanelHeader";
 import { getCardColorCSS, getCardAccentColor, getWhiteTintedColor } from "@/lib/workspace-state/colors";
 import type { Item, ItemData, PdfData } from "@/lib/workspace-state/types";
@@ -45,6 +46,7 @@ export function ItemPanelContent({
 
     const isPdf = item.type === 'pdf';
     const isYouTube = item.type === 'youtube';
+    const isWebsite = item.type === 'website';
     const pdfData = item.data as PdfData;
 
     // PDF-specific state
@@ -77,6 +79,21 @@ export function ItemPanelContent({
                     />
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
+                    {/* Open Button - only for website cards */}
+                    {isWebsite && (() => {
+                        const websiteData = item.data as import("@/lib/workspace-state/types").WebsiteData;
+                        return (
+                            <button
+                                type="button"
+                                aria-label="Open"
+                                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer"
+                                onClick={() => window.open(websiteData.url, '_blank', 'noopener,noreferrer')}
+                            >
+                                <ExternalLink className="h-4 w-4" />
+                            </button>
+                        );
+                    })()}
+
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <button
@@ -98,22 +115,14 @@ export function ItemPanelContent({
                         </TooltipContent>
                     </Tooltip>
 
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <button
-                                type="button"
-                                aria-label="Close"
-                                title="Close"
-                                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer"
-                                onClick={onClose}
-                            >
-                                <X className="h-4 w-4" />
-                            </button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            Close
-                        </TooltipContent>
-                    </Tooltip>
+                    <button
+                        type="button"
+                        aria-label="Close"
+                        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer"
+                        onClick={onClose}
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
 
 
 
@@ -146,14 +155,14 @@ export function ItemPanelContent({
                 transformOrigin: 'center',
             }}
         >
-            {/* Header - PDF has integrated controls, YouTube and others use standard header.
+            {/* Header - PDF has integrated controls, YouTube/Website and others use standard header.
                 When maximized, the header is integrated into the WorkspaceHeader, so we hide it here. */}
             {!isPdf && !isMaximized && renderStandardHeader()}
 
             {/* Content */}
             <div
-                className={`${isPdf || isYouTube ? "flex-1 flex flex-col min-h-0" : "flex-1 overflow-y-auto modal-scrollable flex flex-col"}`}
-                style={!isPdf && !isYouTube ? {
+                className={`${isPdf || isYouTube || isWebsite ? "flex-1 flex flex-col min-h-0" : "flex-1 overflow-y-auto modal-scrollable flex flex-col"}`}
+                style={!isPdf && !isYouTube && !isWebsite ? {
                     ['--scrollbar-color' as string]: item.color
                         ? getWhiteTintedColor(item.color, 0.7, 0.2)
                         : "rgba(255, 255, 255, 0.2)",
@@ -200,6 +209,11 @@ export function ItemPanelContent({
                         onUpdateItemData={onUpdateItemData}
                         isMaximized={isMaximized}
                     />
+                ) : isWebsite ? (
+                    <WebsitePanelContent
+                        item={item}
+                        isMaximized={isMaximized}
+                    />
                 ) : (
                     <CardRenderer
                         key={item.id}
diff --git a/src/components/workspace-canvas/WebsitePanelContent.tsx b/src/components/workspace-canvas/WebsitePanelContent.tsx
new file mode 100644
index 00000000..32a23a4a
--- /dev/null
+++ b/src/components/workspace-canvas/WebsitePanelContent.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import type { Item, WebsiteData } from "@/lib/workspace-state/types";
+
+interface WebsitePanelContentProps {
+  item: Item;
+  isMaximized?: boolean;
+}
+
+export function WebsitePanelContent({
+  item,
+  isMaximized = false,
+}: WebsitePanelContentProps) {
+  const websiteData = item.data as WebsiteData;
+
+  if (!websiteData.url) {
+    return (
+      <div className="flex-1 min-h-0 flex flex-col items-center justify-center p-6">
+        <div className="rounded-lg p-4 bg-muted/50 border border-border flex items-center justify-center">
+          <span className="text-muted-foreground font-medium">No URL provided</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full flex-1 min-h-0 flex flex-col overflow-hidden bg-white">
+      <iframe
+        src={websiteData.url}
+        title={item.name || "Website"}
+        className="w-full flex-1 min-h-0 border-0"
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+        allow="clipboard-write"
+        referrerPolicy="no-referrer"
+      />
+    </div>
+  );
+}
diff --git a/src/components/workspace-canvas/WorkspaceCard.tsx b/src/components/workspace-canvas/WorkspaceCard.tsx
index caf69cf4..51f4e71a 100644
--- a/src/components/workspace-canvas/WorkspaceCard.tsx
+++ b/src/components/workspace-canvas/WorkspaceCard.tsx
@@ -1,6 +1,6 @@
 import { QuizContent } from "./QuizContent";
 import { ImageCardContent } from "./ImageCardContent";
-import { MoreVertical, Trash2, Palette, CheckCircle2, FolderInput, Copy, X, Pencil, Columns, Link2, PanelRight, SplitSquareHorizontal, Loader2, File, Brain, Mic, AlertCircle } from "lucide-react";
+import { MoreVertical, Trash2, Palette, CheckCircle2, FolderInput, Copy, X, Pencil, Columns, Link2, PanelRight, SplitSquareHorizontal, Loader2, File, Brain, Mic, AlertCircle, Globe } from "lucide-react";
 import { CgNotes } from "react-icons/cg";
 import { PiMouseScrollFill, PiMouseScrollBold } from "react-icons/pi";
 import { useCallback, useState, memo, useRef, useEffect, useMemo } from "react";
@@ -10,7 +10,7 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import ItemHeader from "@/components/workspace-canvas/ItemHeader";
 import { getCardColorCSS, getCardAccentColor, getDistinctCardColor, getIconColorFromCardColor, getIconColorFromCardColorWithOpacity, getLighterCardColor, SWATCHES_COLOR_GROUPS, type CardColor } from "@/lib/workspace-state/colors";
-import type { Item, NoteData, PdfData, FlashcardData, YouTubeData, ImageData } from "@/lib/workspace-state/types";
+import type { Item, NoteData, PdfData, FlashcardData, YouTubeData, ImageData, WebsiteData } from "@/lib/workspace-state/types";
 import { SwatchesPicker, ColorResult } from "react-color";
 import { plainTextToBlocks, type Block } from "@/components/editor/BlockNoteEditor";
 import { serializeBlockNote } from "@/lib/utils/serialize-blocknote";
@@ -757,7 +757,7 @@ function WorkspaceCard({
             )}
 
             {/* Type badge - rect in bottom-left corner (when card is small) */}
-            {(item.type === 'note' || item.type === 'pdf' || item.type === 'quiz' || item.type === 'audio') && !shouldShowPreview && (
+            {(item.type === 'note' || item.type === 'pdf' || item.type === 'quiz' || item.type === 'audio' || item.type === 'website') && !shouldShowPreview && (
               <span
                 className="absolute left-0 bottom-0 z-0 flex items-center gap-1.5 pl-2.5 pr-1.5 py-2 rounded-tr-md rounded-bl-md text-xs font-semibold uppercase tracking-wider w-max pointer-events-none"
                 style={{
@@ -780,6 +780,48 @@ function WorkspaceCard({
                   )
                 ) : item.type === 'quiz' ? (
                   <><Brain className="h-5 w-5 shrink-0" /><span>Quiz</span></>
+                ) : item.type === 'website' ? (
+                  (() => {
+                    const websiteData = item.data as WebsiteData;
+                    const favicon = websiteData.favicon;
+                    let hostname = '';
+                    try { hostname = new URL(websiteData.url).hostname.replace(/^www\./, ''); } catch {}
+                    const fallbackId = `fallback-${item.id}`;
+                    const faviconId = `favicon-${item.id}`;
+                    return (
+                      <>
+                        {favicon && (
+                          <img 
+                            id={faviconId}
+                            src={favicon} 
+                            alt="" 
+                            className="h-5 w-5 shrink-0 rounded" 
+                            onLoad={(e) => {
+                              // Hide default globe icons (they stay 16x16 even with sz=64)
+                              if (e.currentTarget.naturalHeight === 16) {
+                                e.currentTarget.style.display = 'none';
+                                const fallback = document.getElementById(fallbackId);
+                                if (fallback) fallback.style.display = 'flex';
+                              }
+                            }}
+                            onError={(e) => {
+                              e.currentTarget.style.display = 'none';
+                              const fallback = document.getElementById(fallbackId);
+                              if (fallback) fallback.style.display = 'flex';
+                            }}
+                          />
+                        )}
+                        <div 
+                          id={fallbackId}
+                          className="h-5 w-5 shrink-0 flex items-center justify-center" 
+                          style={{ display: favicon ? 'none' : 'flex' }}
+                        >
+                          <Globe className="h-5 w-5 shrink-0" />
+                        </div>
+                        <span>Website</span>
+                      </>
+                    );
+                  })()
                 ) : (
                   <><Mic className="h-5 w-5 shrink-0" /><span>Recording</span></>
                 )}
@@ -1029,6 +1071,7 @@ function WorkspaceCard({
               <ImageCardContent item={item} />
             )}
 
+
             {/* Audio Content - render audio player and transcript */}
             {!isOpenInPanel && item.type === 'audio' && shouldShowPreview && (
               <div className="flex-1 min-h-0 overflow-hidden">
diff --git a/src/components/workspace-canvas/WorkspaceHeader.tsx b/src/components/workspace-canvas/WorkspaceHeader.tsx
index f990b56e..75f79c4c 100644
--- a/src/components/workspace-canvas/WorkspaceHeader.tsx
+++ b/src/components/workspace-canvas/WorkspaceHeader.tsx
@@ -4,7 +4,7 @@ import type React from "react";
 import { useState, useRef, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { Search, X, ChevronDown, ChevronRight, FolderOpen, Plus, Upload, Folder as FolderIcon, Settings, Share2, Play, Brain, File, ImageIcon, Mic, PanelRight, Loader2 } from "lucide-react";
+import { Search, X, ChevronDown, ChevronRight, FolderOpen, Plus, Upload, Folder as FolderIcon, Settings, Share2, Play, Brain, File, ImageIcon, Mic, PanelRight, Loader2, ExternalLink } from "lucide-react";
 import { CgNotes } from "react-icons/cg";
 import { LuBook, LuCalendar, LuPanelLeftOpen } from "react-icons/lu";
 import { PiCardsThreeBold } from "react-icons/pi";
@@ -377,6 +377,12 @@ export function WorkspaceHeader({
     setIsNewMenuOpen(false);
   }, [addItem]);
 
+  const handleWebsiteCreate = useCallback((url: string, name: string, favicon?: string) => {
+    if (!addItem) return;
+    addItem("website", name, { url, favicon }, DEFAULT_CARD_DIMENSIONS.website);
+    setIsNewMenuOpen(false);
+  }, [addItem]);
+
   // Close popover when folder path changes
   useEffect(() => {
     setEllipsisDropdownOpen(false);
@@ -748,6 +754,21 @@ export function WorkspaceHeader({
               <div id="workspace-header-portal" className="flex items-center gap-2" />
             )}
 
+            {/* Open Button - only for website cards */}
+            {activeItems[0]?.type === "website" && (() => {
+              const websiteData = activeItems[0].data as import("@/lib/workspace-state/types").WebsiteData;
+              return (
+                <button
+                  className="h-8 flex items-center justify-center gap-1.5 rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-accent transition-colors cursor-pointer px-2"
+                  aria-label="Open link in new tab"
+                  onClick={() => window.open(websiteData.url, '_blank', 'noopener,noreferrer')}
+                >
+                  <ExternalLink className="h-4 w-4" />
+                  <span className="text-xs font-medium">Open</span>
+                </button>
+              );
+            })()}
+
             {/* Split View Button — transitions from focus to workspace+panel */}
             <button
               className="h-8 flex items-center justify-center gap-1.5 rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-accent transition-colors cursor-pointer px-2"
@@ -771,21 +792,14 @@ export function WorkspaceHeader({
             )}
 
             {/* Close Button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  aria-label="Close"
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-accent transition-colors cursor-pointer"
-                  onClick={() => onCloseActiveItem?.(activeItems[0]?.id)}
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                Close item
-              </TooltipContent>
-            </Tooltip>
+            <button
+              type="button"
+              aria-label="Close"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-accent transition-colors cursor-pointer"
+              onClick={() => onCloseActiveItem?.(activeItems[0]?.id)}
+            >
+              <X className="h-4 w-4" />
+            </button>
 
 
             {setIsChatExpanded ? (
@@ -971,22 +985,11 @@ export function WorkspaceHeader({
         onCreate={handleYouTubeCreate}
       />
       {/* Website Dialog */}
-      {
-        currentWorkspaceId && (
-          <CreateWebsiteDialog
-            open={showWebsiteDialog}
-            onOpenChange={setShowWebsiteDialog}
-            workspaceId={currentWorkspaceId}
-            folderId={activeFolderId || undefined}
-            onNoteCreated={(noteId) => {
-              // Invalidate workspace events cache to trigger refetch
-              void queryClient.invalidateQueries({
-                queryKey: ["workspace", currentWorkspaceId, "events"],
-              });
-            }}
-          />
-        )
-      }
+      <CreateWebsiteDialog
+        open={showWebsiteDialog}
+        onOpenChange={setShowWebsiteDialog}
+        onCreate={handleWebsiteCreate}
+      />
       {/* Upload Dialog (PDF + Image) */}
       {onPDFUpload && (
         <UploadDialog
diff --git a/src/components/workspace-canvas/WorkspaceSection.tsx b/src/components/workspace-canvas/WorkspaceSection.tsx
index 81b564bf..33e3506d 100644
--- a/src/components/workspace-canvas/WorkspaceSection.tsx
+++ b/src/components/workspace-canvas/WorkspaceSection.tsx
@@ -254,6 +254,16 @@ export function WorkspaceSection({
     toast.success("Image added to workspace");
   }, [operations]);
 
+  const handleWebsiteCreate = useCallback((url: string, name: string, favicon?: string) => {
+    if (!operations) return;
+    operations.createItems([{
+      type: 'website',
+      name,
+      initialData: { url, favicon },
+      initialLayout: DEFAULT_CARD_DIMENSIONS.website,
+    }]);
+  }, [operations]);
+
   // Handle smart upload from context menu: try clipboard paste first, then open dialog
   const handleUploadMenuItemClick = useCallback(async () => {
     try {
@@ -794,19 +804,11 @@ export function WorkspaceSection({
       )}
 
       {/* Website Dialog */}
-      {currentWorkspaceId && (
-        <CreateWebsiteDialog
-          open={showWebsiteDialog}
-          onOpenChange={setShowWebsiteDialog}
-          workspaceId={currentWorkspaceId}
-          folderId={activeFolderId || undefined}
-          onNoteCreated={(noteId) => {
-            void queryClient.invalidateQueries({
-              queryKey: ["workspace", currentWorkspaceId, "events"],
-            });
-          }}
-        />
-      )}
+      <CreateWebsiteDialog
+        open={showWebsiteDialog}
+        onOpenChange={setShowWebsiteDialog}
+        onCreate={handleWebsiteCreate}
+      />
       {/* Audio Recorder Dialog */}
       <AudioRecorderDialog
         open={showAudioDialog}
diff --git a/src/components/workspace/SidebarCardList.tsx b/src/components/workspace/SidebarCardList.tsx
index d5da3578..eaa7c79a 100644
--- a/src/components/workspace/SidebarCardList.tsx
+++ b/src/components/workspace/SidebarCardList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { memo, useMemo, useCallback, useState, useEffect, useRef } from "react";
-import { ChevronRight, File, FolderOpen, Folder as FolderIcon, MoreVertical, Trash2, Pencil, FolderInput, Play, Brain, ImageIcon, Mic } from "lucide-react";
+import { ChevronRight, File, FolderOpen, Folder as FolderIcon, MoreVertical, Trash2, Pencil, FolderInput, Play, Brain, ImageIcon, Mic, Globe } from "lucide-react";
 import { CgNotes } from "react-icons/cg";
 import { PiCardsThreeBold } from "react-icons/pi";
 import {
@@ -64,6 +64,8 @@ function getCardTypeIcon(type: CardType) {
             return <ImageIcon className="size-3.5 text-emerald-500" />;
         case "audio":
             return <Mic className="size-3.5 text-orange-400" />;
+        case "website":
+            return <Globe className="size-3.5 text-sky-400" />;
         default:
             return <CgNotes className="size-3.5 text-muted-foreground" />;
     }
diff --git a/src/hooks/workspace/use-workspace-operations.ts b/src/hooks/workspace/use-workspace-operations.ts
index c85fa9c7..2f16fcbd 100644
--- a/src/hooks/workspace/use-workspace-operations.ts
+++ b/src/hooks/workspace/use-workspace-operations.ts
@@ -94,7 +94,7 @@ export function useWorkspaceOperations(
       // Validate type is a valid CardType
       logger.debug("🔧 [CREATE-ITEM] Received type:", type, "typeof:", typeof type, "value:", JSON.stringify(type));
 
-      const validTypes: CardType[] = ["note", "pdf", "flashcard", "folder", "youtube", "image", "audio"];
+      const validTypes: CardType[] = ["note", "pdf", "flashcard", "folder", "youtube", "quiz", "image", "audio", "website"];
       const validType = validTypes.includes(type) ? type : "note";
 
       if (validType !== type) {
@@ -185,7 +185,7 @@ export function useWorkspaceOperations(
       // Create all items
       const createdItems: Item[] = items.map(({ type, name, initialData, initialLayout }) => {
         // Validate type is a valid CardType
-        const validTypes: CardType[] = ["note", "pdf", "flashcard", "folder", "youtube", "image", "audio"];
+        const validTypes: CardType[] = ["note", "pdf", "flashcard", "folder", "youtube", "quiz", "image", "audio", "website"];
         const validType = validTypes.includes(type) ? type : "note";
 
         if (validType !== type) {
diff --git a/src/lib/ai/tools/workspace-search-utils.ts b/src/lib/ai/tools/workspace-search-utils.ts
index 1adddaaf..a62b580e 100644
--- a/src/lib/ai/tools/workspace-search-utils.ts
+++ b/src/lib/ai/tools/workspace-search-utils.ts
@@ -2,7 +2,7 @@
  * Shared utilities for workspace grep and read tools.
  */
 
-import type { Item, NoteData, PdfData, FlashcardData, FlashcardItem, QuizData, AudioData } from "@/lib/workspace-state/types";
+import type { Item, NoteData, PdfData, FlashcardData, FlashcardItem, QuizData, AudioData, WebsiteData } from "@/lib/workspace-state/types";
 import { serializeBlockNote } from "@/lib/utils/serialize-blocknote";
 import { getVirtualPath } from "@/lib/utils/workspace-fs";
 import { type Block } from "@/components/editor/BlockNoteEditor";
@@ -85,6 +85,16 @@ export function extractSearchableText(item: Item, items: Item[]): SearchableText
             }
             return body(parts.join("\n"));
         }
+        case "website": {
+            const data = item.data as WebsiteData;
+            const url = data.url || "";
+            let domain = "";
+            try {
+                domain = new URL(url).hostname.replace(/^www\./, "");
+            } catch {}
+            const content = `URL: ${url}\nDomain: ${domain}`;
+            return body(content);
+        }
         case "image":
         case "youtube":
         case "folder":
diff --git a/src/lib/utils/format-workspace-context.ts b/src/lib/utils/format-workspace-context.ts
index 186aee14..3c84d24e 100644
--- a/src/lib/utils/format-workspace-context.ts
+++ b/src/lib/utils/format-workspace-context.ts
@@ -134,7 +134,7 @@ Use webSearch when: temporal cues ("today", "latest", "current"), real-time data
 Use internal knowledge for: creative writing, coding, general concepts, summarizing provided content.
 If the information is time-sensitive, niche, or uncertain, prefer webSearch.
 
-PDF: Use readWorkspace for PDFs with content (pageStart/pageEnd for page ranges). If content is not yet extracted, you must call processFiles, do not ask the user. IMPORTANT — when to use processFiles for images: Only call processFiles with pdfImageRefs when you encounter image placeholders (e.g. img-0.jpeg, p5-img-0.jpeg) in the output returned by readWorkspace — these are images embedded inside PDFs that you cannot see. Do NOT call processFiles for image file parts attached to the user's message; those images are already visible to you in context.
+PDF: Always try readWorkspace first for workspace PDFs (pageStart/pageEnd for page ranges). If content is not yet extracted, then call processFiles — do not ask the user. IMPORTANT — when to use processFiles for images: Only call processFiles with pdfImageRefs when you encounter image placeholders (e.g. img-0.jpeg, p5-img-0.jpeg) in the output returned by readWorkspace — these are images embedded inside PDFs that you cannot see. Do NOT call processFiles for image file parts attached to the user's message; those images are already visible to you in context.
 When selected card metadata includes (currently viewing) or activePage=N (for PDFs), the user has that item or page open. Prioritize these for ambiguous references ("this", "here", "this page", "what I'm looking at") and tailor responses to that context.
 
 YOUTUBE: If user says "add a video" without a topic, infer from workspace context. Don't ask - just search.
diff --git a/src/lib/workspace-state/grid-layout-helpers.ts b/src/lib/workspace-state/grid-layout-helpers.ts
index 41e23f80..5bb0f7ac 100644
--- a/src/lib/workspace-state/grid-layout-helpers.ts
+++ b/src/lib/workspace-state/grid-layout-helpers.ts
@@ -13,6 +13,7 @@ export const DEFAULT_CARD_DIMENSIONS: Record<CardType, { w: number; h: number }>
   quiz: { w: 2, h: 13 },
   image: { w: 4, h: 10 },
   audio: { w: 2, h: 10 },
+  website: { w: 1, h: 4 },
 };
 
 /**
@@ -97,6 +98,18 @@ export function itemsToLayout(items: Item[], breakpoint: 'lg' | 'xxs' = 'lg'): L
       };
     }
 
+    // Website cards are not resizable - fixed size, draggable only
+    if (item.type === 'website') {
+      return {
+        i: item.id,
+        x: layout?.x ?? 0,
+        y: layout?.y ?? 0,
+        w: layout?.w ?? DEFAULT_CARD_DIMENSIONS[item.type].w,
+        h: layout?.h ?? DEFAULT_CARD_DIMENSIONS[item.type].h,
+        isResizable: false, // Not resizable
+      };
+    }
+
     // Default constraints for other card types
     return {
       i: item.id,
diff --git a/src/lib/workspace-state/item-helpers.ts b/src/lib/workspace-state/item-helpers.ts
index 389ab77d..fbba556b 100644
--- a/src/lib/workspace-state/item-helpers.ts
+++ b/src/lib/workspace-state/item-helpers.ts
@@ -1,4 +1,4 @@
-import type { CardType, ItemData, NoteData, PdfData, FlashcardData, FolderData, YouTubeData, ImageData, AudioData } from "./types";
+import type { CardType, ItemData, NoteData, PdfData, FlashcardData, FolderData, YouTubeData, QuizData, ImageData, AudioData, WebsiteData } from "./types";
 
 /**
  * Generate a unique item ID
@@ -34,8 +34,14 @@ export function defaultDataFor(type: CardType): ItemData {
       return { url: "" } as ImageData;
     case "audio":
       return { fileUrl: "", filename: "", processingStatus: "uploading" } as AudioData;
-    default:
-      return { field1: "" } as NoteData;
+    case "quiz":
+      return { questions: [] } as QuizData;
+    case "website":
+      return { url: "" } as WebsiteData;
+    default: {
+      const exhaustiveCheck: never = type;
+      return exhaustiveCheck;
+    }
   }
 }
 
diff --git a/src/lib/workspace-state/types.ts b/src/lib/workspace-state/types.ts
index 0a1900e5..04d6f3dc 100644
--- a/src/lib/workspace-state/types.ts
+++ b/src/lib/workspace-state/types.ts
@@ -1,6 +1,6 @@
 import type { CardColor } from './colors';
 
-export type CardType = "note" | "pdf" | "flashcard" | "folder" | "youtube" | "quiz" | "image" | "audio";
+export type CardType = "note" | "pdf" | "flashcard" | "folder" | "youtube" | "quiz" | "image" | "audio" | "website";
 
 /**
  * Source attribution for notes created from web search or deep research
@@ -147,7 +147,12 @@ export interface AudioData {
   error?: string;           // Error message if processing failed
 }
 
-export type ItemData = NoteData | PdfData | FlashcardData | FolderData | YouTubeData | QuizData | ImageData | AudioData;
+export interface WebsiteData {
+  url: string;       // The website URL to embed
+  favicon?: string;  // Favicon URL (e.g. from Google's favicon API)
+}
+
+export type ItemData = NoteData | PdfData | FlashcardData | FolderData | YouTubeData | QuizData | ImageData | AudioData | WebsiteData;
 
 // =====================================================
 // FOLDER TYPES (DEPRECATED)