diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
index b92a9539b..b4be1df71 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
@@ -1,414 +1,16 @@
 "use client";
 
-import {
-	IconBrandWindows,
-	IconBrandZoom,
-	IconChevronDown,
-	IconChevronRight,
-} from "@tabler/icons-react";
-import { AnimatePresence, motion, type Variants } from "motion/react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-// Define the Connector type
-interface Connector {
-	id: string;
-	title: string;
-	description: string;
-	icon: React.ReactNode;
-	status: "available" | "coming-soon" | "connected";
-}
-
-interface ConnectorCategory {
-	id: string;
-	title: string;
-	connectors: Connector[];
-}
-
-// Define connector categories and their connectors
-const connectorCategories: ConnectorCategory[] = [
-	{
-		id: "search-engines",
-		title: "search_engines",
-		connectors: [
-			{
-				id: "tavily-api",
-				title: "Tavily API",
-				description: "tavily_desc",
-				icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "searxng",
-				title: "SearxNG",
-				description: "searxng_desc",
-				icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "linkup-api",
-				title: "Linkup API",
-				description: "linkup_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "elasticsearch-connector",
-				title: "Elasticsearch",
-				description: "elasticsearch_desc",
-				icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "baidu-search-api",
-				title: "Baidu Search",
-				description: "baidu_desc",
-				icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "team-chats",
-		title: "team_chats",
-		connectors: [
-			{
-				id: "slack-connector",
-				title: "Slack",
-				description: "slack_desc",
-				icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "ms-teams",
-				title: "Microsoft Teams",
-				description: "teams_desc",
-				icon: <IconBrandWindows className="h-6 w-6" />,
-				status: "coming-soon",
-			},
-			{
-				id: "discord-connector",
-				title: "Discord",
-				description: "discord_desc",
-				icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "project-management",
-		title: "project_management",
-		connectors: [
-			{
-				id: "linear-connector",
-				title: "Linear",
-				description: "linear_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "jira-connector",
-				title: "Jira",
-				description: "jira_desc",
-				icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "clickup-connector",
-				title: "ClickUp",
-				description: "clickup_desc",
-				icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "knowledge-bases",
-		title: "knowledge_bases",
-		connectors: [
-			{
-				id: "notion-connector",
-				title: "Notion",
-				description: "notion_desc",
-				icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "github-connector",
-				title: "GitHub",
-				description: "github_desc",
-				icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "confluence-connector",
-				title: "Confluence",
-				description: "confluence_desc",
-				icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "airtable-connector",
-				title: "Airtable",
-				description: "airtable_desc",
-				icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "luma-connector",
-				title: "Luma",
-				description: "luma_desc",
-				icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "communication",
-		title: "communication",
-		connectors: [
-			{
-				id: "google-calendar-connector",
-				title: "Google Calendar",
-				description: "calendar_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "google-gmail-connector",
-				title: "Gmail",
-				description: "gmail_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "zoom",
-				title: "Zoom",
-				description: "zoom_desc",
-				icon: <IconBrandZoom className="h-6 w-6" />,
-				status: "coming-soon",
-			},
-		],
-	},
-];
-
-// Animation variants
-const fadeIn = {
-	hidden: { opacity: 0 },
-	visible: { opacity: 1, transition: { duration: 0.4 } },
-};
-
-const staggerContainer = {
-	hidden: { opacity: 0 },
-	visible: {
-		opacity: 1,
-		transition: {
-			staggerChildren: 0.1,
-		},
-	},
-};
-
-const cardVariants: Variants = {
-	hidden: { opacity: 0, y: 20 },
-	visible: {
-		opacity: 1,
-		y: 0,
-		transition: {
-			type: "spring",
-			stiffness: 260,
-			damping: 20,
-		},
-	},
-	hover: {
-		scale: 1.02,
-		boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-		transition: {
-			type: "spring",
-			stiffness: 400,
-			damping: 10,
-		},
-	},
-};
-
-export default function ConnectorsPage() {
-	const t = useTranslations("add_connector");
+export default function AddConnectorRedirect() {
 	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [expandedCategories, setExpandedCategories] = useState<string[]>([
-		"search-engines",
-		"knowledge-bases",
-		"project-management",
-		"team-chats",
-		"communication",
-	]);
+	const router = useRouter();
+	const search_space_id = params.search_space_id as string;
 
-	const toggleCategory = (categoryId: string) => {
-		setExpandedCategories((prev) =>
-			prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]
-		);
-	};
+	useEffect(() => {
+		router.replace(`/dashboard/${search_space_id}/sources/add?tab=connectors`);
+	}, [search_space_id, router]);
 
-	return (
-		<div className="container mx-auto py-12 max-w-6xl">
-			<motion.div
-				initial={{ opacity: 0, y: 30 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{
-					duration: 0.6,
-					ease: [0.22, 1, 0.36, 1],
-				}}
-				className="mb-12 text-center"
-			>
-				<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
-					{t("title")}
-				</h1>
-				<p className="text-muted-foreground mt-3 text-lg max-w-2xl mx-auto">{t("subtitle")}</p>
-			</motion.div>
-
-			<motion.div
-				className="space-y-8"
-				initial="hidden"
-				animate="visible"
-				variants={staggerContainer}
-			>
-				{connectorCategories.map((category) => (
-					<motion.div
-						key={category.id}
-						variants={fadeIn}
-						className="rounded-lg border bg-card text-card-foreground shadow-sm"
-					>
-						<Collapsible
-							open={expandedCategories.includes(category.id)}
-							onOpenChange={() => toggleCategory(category.id)}
-							className="w-full"
-						>
-							<div className="flex items-center justify-between space-x-4 p-4">
-								<h3 className="text-xl font-semibold">{t(category.title)}</h3>
-								<CollapsibleTrigger asChild>
-									<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
-										<motion.div
-											animate={{
-												rotate: expandedCategories.includes(category.id) ? 180 : 0,
-											}}
-											transition={{ duration: 0.3, ease: "easeInOut" }}
-										>
-											<IconChevronDown className="h-5 w-5" />
-										</motion.div>
-										<span className="sr-only">Toggle</span>
-									</Button>
-								</CollapsibleTrigger>
-							</div>
-
-							<CollapsibleContent>
-								<AnimatePresence>
-									<motion.div
-										className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 p-4"
-										variants={staggerContainer}
-										initial="hidden"
-										animate="visible"
-										exit="hidden"
-									>
-										{category.connectors.map((connector) => (
-											<motion.div
-												key={connector.id}
-												variants={cardVariants}
-												whileHover="hover"
-												className="col-span-1"
-											>
-												<Card className="h-full flex flex-col overflow-hidden border-transparent transition-all duration-200 hover:border-primary/50">
-													<CardHeader className="flex-row items-center gap-4 pb-2">
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
-															<motion.div
-																whileHover={{ rotate: 5, scale: 1.1 }}
-																className="text-primary"
-															>
-																{connector.icon}
-															</motion.div>
-														</div>
-														<div>
-															<div className="flex items-center gap-2">
-																<h3 className="font-medium">{connector.title}</h3>
-																{connector.status === "coming-soon" && (
-																	<Badge
-																		variant="outline"
-																		className="text-xs bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-800"
-																	>
-																		{t("coming_soon")}
-																	</Badge>
-																)}
-																{connector.status === "connected" && (
-																	<Badge
-																		variant="outline"
-																		className="text-xs bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800"
-																	>
-																		{t("connected")}
-																	</Badge>
-																)}
-															</div>
-														</div>
-													</CardHeader>
-
-													<CardContent className="pb-4">
-														<p className="text-sm text-muted-foreground">
-															{t(connector.description)}
-														</p>
-													</CardContent>
-
-													<CardFooter className="mt-auto pt-2">
-														{connector.status === "available" && (
-															<Link
-																href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-																className="w-full"
-															>
-																<Button variant="default" className="w-full group">
-																	<span>{t("connect")}</span>
-																	<motion.div
-																		className="ml-1"
-																		initial={{ x: 0 }}
-																		whileHover={{ x: 3 }}
-																		transition={{
-																			type: "spring",
-																			stiffness: 400,
-																			damping: 10,
-																		}}
-																	>
-																		<IconChevronRight className="h-4 w-4" />
-																	</motion.div>
-																</Button>
-															</Link>
-														)}
-														{connector.status === "coming-soon" && (
-															<Button variant="outline" disabled className="w-full opacity-70">
-																{t("coming_soon")}
-															</Button>
-														)}
-														{connector.status === "connected" && (
-															<Button
-																variant="outline"
-																className="w-full border-green-500 text-green-600 hover:bg-green-50 dark:hover:bg-green-950"
-															>
-																{t("manage")}
-															</Button>
-														)}
-													</CardFooter>
-												</Card>
-											</motion.div>
-										))}
-									</motion.div>
-								</AnimatePresence>
-							</CollapsibleContent>
-						</Collapsible>
-					</motion.div>
-				))}
-			</motion.div>
-		</div>
-	);
+	return null;
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
index 6f6dfcc24..2c3220524 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
@@ -1,580 +1,16 @@
 "use client";
 
-import { CheckCircle2, FileType, Info, Tag, Upload, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { toast } from "sonner";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-import { Separator } from "@/components/ui/separator";
+import { useEffect } from "react";
 
-// Grid pattern component inspired by Aceternity UI
-function GridPattern() {
-	const columns = 41;
-	const rows = 11;
-	return (
-		<div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
-			{Array.from({ length: rows }).map((_, row) =>
-				Array.from({ length: columns }).map((_, col) => {
-					const index = row * columns + col;
-					return (
-						<div
-							key={`${col}-${row}`}
-							className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${
-								index % 2 === 0
-									? "bg-gray-50 dark:bg-neutral-950"
-									: "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
-							}`}
-						/>
-					);
-				})
-			)}
-		</div>
-	);
-}
-
-export default function FileUploader() {
-	const t = useTranslations("upload_documents");
+export default function UploadDocumentsRedirect() {
 	const params = useParams();
+	const router = useRouter();
 	const search_space_id = params.search_space_id as string;
 
-	const [files, setFiles] = useState<File[]>([]);
-	const [isUploading, setIsUploading] = useState(false);
-	const [uploadProgress, setUploadProgress] = useState(0);
-	const router = useRouter();
+	useEffect(() => {
+		router.replace(`/dashboard/${search_space_id}/sources/add?tab=documents`);
+	}, [search_space_id, router]);
 
-	// Audio files are always supported (using whisper)
-	const audioFileTypes = {
-		"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
-		"audio/mp4": [".mp4", ".m4a"],
-		"audio/wav": [".wav"],
-		"audio/webm": [".webm"],
-		"text/markdown": [".md", ".markdown"],
-		"text/plain": [".txt"],
-	};
-
-	// Conditionally set accepted file types based on ETL service
-	const getAcceptedFileTypes = () => {
-		const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE;
-
-		if (etlService === "LLAMACLOUD") {
-			return {
-				// LlamaCloud supported file types
-				"application/pdf": [".pdf"],
-				"application/msword": [".doc"],
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
-				"application/msword-template": [".dot"],
-				"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
-				"application/vnd.ms-powerpoint": [".ppt"],
-				"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"application/vnd.ms-powerpoint.template": [".pot"],
-				"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/vnd.ms-excel": [".xls"],
-				"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
-				"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
-				"application/vnd.ms-excel.workspace": [".xlw"],
-				"application/rtf": [".rtf"],
-				"application/xml": [".xml"],
-				"application/epub+zip": [".epub"],
-				"application/vnd.apple.keynote": [".key"],
-				"application/vnd.apple.pages": [".pages"],
-				"application/vnd.apple.numbers": [".numbers"],
-				"application/vnd.wordperfect": [".wpd"],
-				"application/vnd.oasis.opendocument.text": [".odt"],
-				"application/vnd.oasis.opendocument.presentation": [".odp"],
-				"application/vnd.oasis.opendocument.graphics": [".odg"],
-				"application/vnd.oasis.opendocument.spreadsheet": [".ods"],
-				"application/vnd.oasis.opendocument.formula": [".fods"],
-				"text/csv": [".csv"],
-				"text/tab-separated-values": [".tsv"],
-				"text/html": [".html", ".htm", ".web"],
-				"image/jpeg": [".jpg", ".jpeg"],
-				"image/png": [".png"],
-				"image/gif": [".gif"],
-				"image/bmp": [".bmp"],
-				"image/svg+xml": [".svg"],
-				"image/tiff": [".tiff"],
-				"image/webp": [".webp"],
-				"application/dbase": [".dbf"],
-				"application/vnd.lotus-1-2-3": [".123"],
-				"text/x-web-markdown": [
-					".602",
-					".abw",
-					".cgm",
-					".cwk",
-					".hwp",
-					".lwp",
-					".mw",
-					".mcw",
-					".pbd",
-					".sda",
-					".sdd",
-					".sdp",
-					".sdw",
-					".sgl",
-					".sti",
-					".sxi",
-					".sxw",
-					".stw",
-					".sxg",
-					".uof",
-					".uop",
-					".uot",
-					".vor",
-					".wps",
-					".zabw",
-				],
-				"text/x-spreadsheet": [
-					".dif",
-					".sylk",
-					".slk",
-					".prn",
-					".et",
-					".uos1",
-					".uos2",
-					".wk1",
-					".wk2",
-					".wk3",
-					".wk4",
-					".wks",
-					".wq1",
-					".wq2",
-					".wb1",
-					".wb2",
-					".wb3",
-					".qpw",
-					".xlr",
-					".eth",
-				],
-				// Audio files (always supported)
-				...audioFileTypes,
-			};
-		} else if (etlService === "DOCLING") {
-			return {
-				// Docling supported file types
-				"application/pdf": [".pdf"],
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"text/asciidoc": [".adoc", ".asciidoc"],
-				"text/html": [".html", ".htm", ".xhtml"],
-				"text/csv": [".csv"],
-				"image/png": [".png"],
-				"image/jpeg": [".jpg", ".jpeg"],
-				"image/tiff": [".tiff", ".tif"],
-				"image/bmp": [".bmp"],
-				"image/webp": [".webp"],
-				// Audio files (always supported)
-				...audioFileTypes,
-			};
-		} else {
-			return {
-				// Unstructured supported file types
-				"image/bmp": [".bmp"],
-				"text/csv": [".csv"],
-				"application/msword": [".doc"],
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"message/rfc822": [".eml"],
-				"application/epub+zip": [".epub"],
-				"image/heic": [".heic"],
-				"text/html": [".html"],
-				"image/jpeg": [".jpeg", ".jpg"],
-				"image/png": [".png"],
-				"application/vnd.ms-outlook": [".msg"],
-				"application/vnd.oasis.opendocument.text": [".odt"],
-				"text/x-org": [".org"],
-				"application/pkcs7-signature": [".p7s"],
-				"application/pdf": [".pdf"],
-				"application/vnd.ms-powerpoint": [".ppt"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"text/x-rst": [".rst"],
-				"application/rtf": [".rtf"],
-				"image/tiff": [".tiff"],
-				"text/tab-separated-values": [".tsv"],
-				"application/vnd.ms-excel": [".xls"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/xml": [".xml"],
-				// Audio files (always supported)
-				...audioFileTypes,
-			};
-		}
-	};
-
-	const acceptedFileTypes = getAcceptedFileTypes();
-	const supportedExtensions = Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort();
-
-	const onDrop = useCallback((acceptedFiles: File[]) => {
-		setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
-	}, []);
-
-	const { getRootProps, getInputProps, isDragActive } = useDropzone({
-		onDrop,
-		accept: acceptedFileTypes,
-		maxSize: 50 * 1024 * 1024, // 50MB
-		noClick: false, // Ensure clicking is enabled
-		noKeyboard: false, // Ensure keyboard navigation is enabled
-	});
-
-	const removeFile = (index: number) => {
-		setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
-	};
-
-	const formatFileSize = (bytes: number) => {
-		if (bytes === 0) return "0 Bytes";
-		const k = 1024;
-		const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-	};
-
-	const handleUpload = async () => {
-		setIsUploading(true);
-		setUploadProgress(0);
-
-		const formData = new FormData();
-		files.forEach((file) => {
-			formData.append("files", file);
-		});
-
-		formData.append("search_space_id", search_space_id);
-
-		try {
-			// Simulate progress for better UX
-			const progressInterval = setInterval(() => {
-				setUploadProgress((prev) => {
-					if (prev >= 90) return prev;
-					return prev + Math.random() * 10;
-				});
-			}, 200);
-
-			const response = await fetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/fileupload`,
-				{
-					method: "POST",
-					headers: {
-						Authorization: `Bearer ${window.localStorage.getItem("surfsense_bearer_token")}`,
-					},
-					body: formData,
-				}
-			);
-
-			clearInterval(progressInterval);
-			setUploadProgress(100);
-
-			if (!response.ok) {
-				throw new Error("Upload failed");
-			}
-
-			await response.json();
-
-			toast(t("upload_initiated"), {
-				description: t("upload_initiated_desc"),
-			});
-
-			router.push(`/dashboard/${search_space_id}/documents`);
-		} catch (error: any) {
-			setIsUploading(false);
-			setUploadProgress(0);
-			toast(t("upload_error"), {
-				description: `${t("upload_error_desc")}: ${error.message}`,
-			});
-		}
-	};
-
-	const getTotalFileSize = () => {
-		return files.reduce((total, file) => total + file.size, 0);
-	};
-
-	const containerVariants = {
-		hidden: { opacity: 0, y: 20 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			transition: {
-				duration: 0.5,
-				when: "beforeChildren",
-				staggerChildren: 0.1,
-			},
-		},
-	};
-
-	const itemVariants = {
-		hidden: { opacity: 0, y: 10 },
-		visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
-	};
-
-	const fileItemVariants = {
-		hidden: { opacity: 0, x: -20 },
-		visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
-		exit: { opacity: 0, x: 20, transition: { duration: 0.2 } },
-	};
-
-	return (
-		<div className="grow flex items-center justify-center p-4 md:p-8">
-			<motion.div
-				className="w-full max-w-4xl mx-auto space-y-6"
-				initial="hidden"
-				animate="visible"
-				variants={containerVariants}
-			>
-				{/* Header Card */}
-				<motion.div variants={itemVariants}>
-					<Card>
-						<CardHeader>
-							<CardTitle className="flex items-center gap-2">
-								<Upload className="h-5 w-5" />
-								{t("title")}
-							</CardTitle>
-							<CardDescription>{t("subtitle")}</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<Alert>
-								<Info className="h-4 w-4" />
-								<AlertDescription>{t("file_size_limit")}</AlertDescription>
-							</Alert>
-						</CardContent>
-					</Card>
-				</motion.div>
-
-				{/* Upload Area Card */}
-				<motion.div variants={itemVariants}>
-					<Card className="relative overflow-hidden">
-						{/* Grid background pattern */}
-						<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-30">
-							<GridPattern />
-						</div>
-
-						<CardContent className="p-10 relative z-10">
-							<div
-								{...getRootProps()}
-								className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-muted-foreground/25 rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
-							>
-								<input {...getInputProps()} className="hidden" />
-
-								{isDragActive ? (
-									<motion.div
-										initial={{ opacity: 0, scale: 0.8 }}
-										animate={{ opacity: 1, scale: 1 }}
-										className="flex flex-col items-center gap-4"
-									>
-										<Upload className="h-12 w-12 text-primary" />
-										<p className="text-lg font-medium text-primary">{t("drop_files")}</p>
-									</motion.div>
-								) : (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										className="flex flex-col items-center gap-4"
-									>
-										<Upload className="h-12 w-12 text-muted-foreground" />
-										<div className="text-center">
-											<p className="text-lg font-medium">{t("drag_drop")}</p>
-											<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
-										</div>
-									</motion.div>
-								)}
-
-								{/* Fallback button for better accessibility */}
-								<div className="mt-4">
-									<Button
-										variant="outline"
-										size="sm"
-										onClick={(e) => {
-											e.stopPropagation();
-											const input = document.querySelector(
-												'input[type="file"]'
-											) as HTMLInputElement;
-											if (input) input.click();
-										}}
-									>
-										{t("browse_files")}
-									</Button>
-								</div>
-							</div>
-						</CardContent>
-					</Card>
-				</motion.div>
-
-				{/* File List Card */}
-				<AnimatePresence mode="wait">
-					{files.length > 0 && (
-						<motion.div
-							variants={itemVariants}
-							initial={{ opacity: 0, height: 0 }}
-							animate={{ opacity: 1, height: "auto" }}
-							exit={{ opacity: 0, height: 0 }}
-							transition={{ duration: 0.3 }}
-						>
-							<Card>
-								<CardHeader>
-									<div className="flex items-center justify-between">
-										<div>
-											<CardTitle>{t("selected_files", { count: files.length })}</CardTitle>
-											<CardDescription>
-												{t("total_size")}: {formatFileSize(getTotalFileSize())}
-											</CardDescription>
-										</div>
-										<Button
-											variant="outline"
-											size="sm"
-											onClick={() => setFiles([])}
-											disabled={isUploading}
-										>
-											{t("clear_all")}
-										</Button>
-									</div>
-								</CardHeader>
-								<CardContent>
-									<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
-										<AnimatePresence>
-											{files.map((file, index) => (
-												<motion.div
-													key={`${file.name}-${index}`}
-													variants={fileItemVariants}
-													initial="hidden"
-													animate="visible"
-													exit="exit"
-													className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
-												>
-													<div className="flex items-center gap-3 flex-1 min-w-0">
-														<div className="flex-shrink-0">
-															<FileType className="h-5 w-5 text-muted-foreground" />
-														</div>
-														<div className="flex-1 min-w-0">
-															<p className="font-medium truncate">{file.name}</p>
-															<div className="flex items-center gap-2 mt-1">
-																<Badge variant="secondary" className="text-xs">
-																	{formatFileSize(file.size)}
-																</Badge>
-																<Badge variant="outline" className="text-xs">
-																	{file.type || "Unknown type"}
-																</Badge>
-															</div>
-														</div>
-													</div>
-													<div className="flex items-center gap-2">
-														<Button
-															variant="ghost"
-															size="icon"
-															onClick={() => removeFile(index)}
-															disabled={isUploading}
-															className="h-8 w-8"
-														>
-															<X className="h-4 w-4" />
-														</Button>
-													</div>
-												</motion.div>
-											))}
-										</AnimatePresence>
-									</div>
-
-									{isUploading && (
-										<motion.div
-											initial={{ opacity: 0, y: 10 }}
-											animate={{ opacity: 1, y: 0 }}
-											className="mt-6 space-y-3"
-										>
-											<Separator />
-											<div className="space-y-2">
-												<div className="flex items-center justify-between text-sm">
-													<span>{t("uploading_files")}</span>
-													<span>{Math.round(uploadProgress)}%</span>
-												</div>
-												<Progress value={uploadProgress} className="h-2" />
-											</div>
-										</motion.div>
-									)}
-
-									<motion.div
-										className="mt-6"
-										initial={{ opacity: 0, y: 10 }}
-										animate={{ opacity: 1, y: 0 }}
-										transition={{ delay: 0.2 }}
-									>
-										<Button
-											className="w-full py-6 text-base font-medium"
-											onClick={handleUpload}
-											disabled={isUploading || files.length === 0}
-										>
-											{isUploading ? (
-												<motion.div
-													className="flex items-center gap-2"
-													initial={{ opacity: 0 }}
-													animate={{ opacity: 1 }}
-												>
-													<motion.div
-														animate={{ rotate: 360 }}
-														transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-													>
-														<Upload className="h-5 w-5" />
-													</motion.div>
-													<span>{t("uploading")}</span>
-												</motion.div>
-											) : (
-												<motion.div
-													className="flex items-center gap-2"
-													whileHover={{ scale: 1.02 }}
-													whileTap={{ scale: 0.98 }}
-												>
-													<CheckCircle2 className="h-5 w-5" />
-													<span>{t("upload_button", { count: files.length })}</span>
-												</motion.div>
-											)}
-										</Button>
-									</motion.div>
-								</CardContent>
-							</Card>
-						</motion.div>
-					)}
-				</AnimatePresence>
-
-				{/* Supported File Types Card */}
-				<motion.div variants={itemVariants}>
-					<Card>
-						<CardHeader>
-							<CardTitle className="flex items-center gap-2">
-								<Tag className="h-5 w-5" />
-								{t("supported_file_types")}
-							</CardTitle>
-							<CardDescription>{t("file_types_desc")}</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<div className="flex flex-wrap gap-2">
-								{supportedExtensions.map((ext) => (
-									<Badge key={ext} variant="outline" className="text-xs">
-										{ext}
-									</Badge>
-								))}
-							</div>
-						</CardContent>
-					</Card>
-				</motion.div>
-			</motion.div>
-
-			<style jsx global>{`
-                .custom-scrollbar::-webkit-scrollbar {
-                    width: 6px;
-                }
-                .custom-scrollbar::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .custom-scrollbar::-webkit-scrollbar-thumb {
-                    background-color: rgba(var(--muted-foreground), 0.3);
-                    border-radius: 20px;
-                }
-                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-                    background-color: rgba(var(--muted-foreground), 0.5);
-                }
-            `}</style>
-		</div>
-	);
+	return null;
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
index d2469a0a2..4e39ab39c 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
@@ -1,302 +1,16 @@
 "use client";
 
-import { IconBrandYoutube } from "@tabler/icons-react";
-import { type Tag, TagInput } from "emblor";
-import { Loader2 } from "lucide-react";
-import { motion, type Variants } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+import { useEffect } from "react";
 
-// YouTube video ID validation regex
-const youtubeRegex =
-	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
-
-export default function YouTubeVideoAdder() {
-	const t = useTranslations("add_youtube");
+export default function YouTubeRedirect() {
 	const params = useParams();
 	const router = useRouter();
 	const search_space_id = params.search_space_id as string;
 
-	const [videoTags, setVideoTags] = useState<Tag[]>([]);
-	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [error, setError] = useState<string | null>(null);
+	useEffect(() => {
+		router.replace(`/dashboard/${search_space_id}/sources/add?tab=youtube`);
+	}, [search_space_id, router]);
 
-	// Function to validate a YouTube URL
-	const isValidYoutubeUrl = (url: string): boolean => {
-		return youtubeRegex.test(url);
-	};
-
-	// Function to extract video ID from URL
-	const extractVideoId = (url: string): string | null => {
-		const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
-		return match ? match[1] : null;
-	};
-
-	// Function to handle video URL submission
-	const handleSubmit = async () => {
-		// Validate that we have at least one video URL
-		if (videoTags.length === 0) {
-			setError(t("error_no_video"));
-			return;
-		}
-
-		// Validate all URLs
-		const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
-		if (invalidUrls.length > 0) {
-			setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
-			return;
-		}
-
-		setError(null);
-		setIsSubmitting(true);
-
-		try {
-			toast(t("processing_toast"), {
-				description: t("processing_toast_desc"),
-			});
-
-			// Extract URLs from tags
-			const videoUrls = videoTags.map((tag) => tag.text);
-
-			// Make API call to backend
-			const response = await fetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`,
-				{
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
-					},
-					body: JSON.stringify({
-						document_type: "YOUTUBE_VIDEO",
-						content: videoUrls,
-						search_space_id: parseInt(search_space_id),
-					}),
-				}
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to process YouTube videos");
-			}
-
-			await response.json();
-
-			toast(t("success_toast"), {
-				description: t("success_toast_desc"),
-			});
-
-			// Redirect to documents page
-			router.push(`/dashboard/${search_space_id}/documents`);
-		} catch (error: any) {
-			setError(error.message || t("error_generic"));
-			toast(t("error_toast"), {
-				description: `${t("error_toast_desc")}: ${error.message}`,
-			});
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	// Function to add a new video URL tag
-	const handleAddTag = (text: string) => {
-		// Basic URL validation
-		if (!isValidYoutubeUrl(text)) {
-			toast(t("invalid_url_toast"), {
-				description: t("invalid_url_toast_desc"),
-			});
-			return;
-		}
-
-		// Check for duplicates
-		if (videoTags.some((tag) => tag.text === text)) {
-			toast(t("duplicate_url_toast"), {
-				description: t("duplicate_url_toast_desc"),
-			});
-			return;
-		}
-
-		// Add the new tag
-		const newTag: Tag = {
-			id: Date.now().toString(),
-			text: text,
-		};
-
-		setVideoTags([...videoTags, newTag]);
-	};
-
-	// Animation variants
-	const containerVariants: Variants = {
-		hidden: { opacity: 0 },
-		visible: {
-			opacity: 1,
-			transition: {
-				staggerChildren: 0.1,
-			},
-		},
-	};
-
-	const itemVariants: Variants = {
-		hidden: { y: 20, opacity: 0 },
-		visible: {
-			y: 0,
-			opacity: 1,
-			transition: {
-				type: "spring",
-				stiffness: 300,
-				damping: 24,
-			},
-		},
-	};
-
-	return (
-		<div className="container mx-auto py-8">
-			<motion.div initial="hidden" animate="visible" variants={containerVariants}>
-				<Card className="max-w-2xl mx-auto">
-					<motion.div variants={itemVariants}>
-						<CardHeader>
-							<CardTitle className="flex items-center gap-2">
-								<IconBrandYoutube className="h-5 w-5" />
-								{t("title")}
-							</CardTitle>
-							<CardDescription>{t("subtitle")}</CardDescription>
-						</CardHeader>
-					</motion.div>
-
-					<motion.div variants={itemVariants}>
-						<CardContent>
-							<div className="space-y-4">
-								<div className="space-y-2">
-									<Label htmlFor="video-input">{t("label")}</Label>
-									<TagInput
-										id="video-input"
-										tags={videoTags}
-										setTags={setVideoTags}
-										placeholder={t("placeholder")}
-										onAddTag={handleAddTag}
-										styleClasses={{
-											inlineTagsContainer:
-												"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
-											input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
-											tag: {
-												body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
-												closeButton:
-													"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
-											},
-										}}
-										activeTagIndex={activeTagIndex}
-										setActiveTagIndex={setActiveTagIndex}
-									/>
-									<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
-								</div>
-
-								{error && (
-									<motion.div
-										className="text-sm text-red-500 mt-2"
-										initial={{ opacity: 0, scale: 0.9 }}
-										animate={{ opacity: 1, scale: 1 }}
-										transition={{ type: "spring", stiffness: 500, damping: 30 }}
-									>
-										{error}
-									</motion.div>
-								)}
-
-								<motion.div variants={itemVariants} className="bg-muted/50 rounded-lg p-4 text-sm">
-									<h4 className="font-medium mb-2">{t("tips_title")}</h4>
-									<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
-										<li>{t("tip_1")}</li>
-										<li>{t("tip_2")}</li>
-										<li>{t("tip_3")}</li>
-										<li>{t("tip_4")}</li>
-									</ul>
-								</motion.div>
-
-								{videoTags.length > 0 && (
-									<motion.div variants={itemVariants} className="mt-4 space-y-2">
-										<h4 className="font-medium">{t("preview")}:</h4>
-										<div className="grid grid-cols-1 gap-3">
-											{videoTags.map((tag, index) => {
-												const videoId = extractVideoId(tag.text);
-												return videoId ? (
-													<motion.div
-														key={tag.id}
-														initial={{ opacity: 0, y: 10 }}
-														animate={{ opacity: 1, y: 0 }}
-														transition={{ delay: index * 0.1 }}
-														className="relative aspect-video rounded-lg overflow-hidden border"
-													>
-														<iframe
-															width="100%"
-															height="100%"
-															src={`https://www.youtube.com/embed/${videoId}`}
-															title="YouTube video player"
-															allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-															allowFullScreen
-														></iframe>
-													</motion.div>
-												) : null;
-											})}
-										</div>
-									</motion.div>
-								)}
-							</div>
-						</CardContent>
-					</motion.div>
-
-					<motion.div variants={itemVariants}>
-						<CardFooter className="flex justify-between">
-							<Button
-								variant="outline"
-								onClick={() => router.push(`/dashboard/${search_space_id}/documents`)}
-							>
-								{t("cancel")}
-							</Button>
-							<Button
-								onClick={handleSubmit}
-								disabled={isSubmitting || videoTags.length === 0}
-								className="relative overflow-hidden"
-							>
-								{isSubmitting ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										{t("processing")}
-									</>
-								) : (
-									<>
-										<motion.span
-											initial={{ x: -5, opacity: 0 }}
-											animate={{ x: 0, opacity: 1 }}
-											transition={{ delay: 0.2 }}
-											className="mr-2"
-										>
-											<IconBrandYoutube className="h-4 w-4" />
-										</motion.span>
-										{t("submit")}
-									</>
-								)}
-								<motion.div
-									className="absolute inset-0 bg-primary/10"
-									initial={{ x: "-100%" }}
-									animate={isSubmitting ? { x: "0%" } : { x: "-100%" }}
-									transition={{ duration: 0.5, ease: "easeInOut" }}
-								/>
-							</Button>
-						</CardFooter>
-					</motion.div>
-				</Card>
-			</motion.div>
-		</div>
-	);
+	return null;
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
index 5cd9d5ad2..558220305 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
@@ -41,37 +41,18 @@ export default function DashboardLayout({
 		},
 
 		{
-			title: "Documents",
+			title: "Sources",
 			url: "#",
-			icon: "FileStack",
+			icon: "Database",
 			items: [
 				{
-					title: "Upload Documents",
-					url: `/dashboard/${search_space_id}/documents/upload`,
-				},
-				// {
-				//   title: "Add Webpages",
-				//   url: `/dashboard/${search_space_id}/documents/webpage`,
-				// },
-				{
-					title: "Add Youtube Videos",
-					url: `/dashboard/${search_space_id}/documents/youtube`,
+					title: "Add Sources",
+					url: `/dashboard/${search_space_id}/sources/add`,
 				},
 				{
 					title: "Manage Documents",
 					url: `/dashboard/${search_space_id}/documents`,
 				},
-			],
-		},
-		{
-			title: "Connectors",
-			url: `#`,
-			icon: "Cable",
-			items: [
-				{
-					title: "Add Connector",
-					url: `/dashboard/${search_space_id}/connectors/add`,
-				},
 				{
 					title: "Manage Connectors",
 					url: `/dashboard/${search_space_id}/connectors`,
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
new file mode 100644
index 000000000..5172a0fa8
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { IconBrandYoutube } from "@tabler/icons-react";
+import { Cable, Database, Upload } from "lucide-react";
+import { motion } from "motion/react";
+import { useParams, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
+import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
+import { YouTubeTab } from "@/components/sources/YouTubeTab";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function AddSourcesPage() {
+	const params = useParams();
+	const searchParams = useSearchParams();
+	const search_space_id = params.search_space_id as string;
+	const [activeTab, setActiveTab] = useState("documents");
+
+	// Handle tab from query parameter
+	useEffect(() => {
+		const tabParam = searchParams.get("tab");
+		if (tabParam && ["documents", "youtube", "connectors"].includes(tabParam)) {
+			setActiveTab(tabParam);
+		}
+	}, [searchParams]);
+
+	return (
+		<div className="container mx-auto py-8 px-4">
+			<motion.div
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+				className="space-y-6"
+			>
+				{/* Header */}
+				<div className="text-center space-y-2">
+					<h1 className="text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
+						<Database className="h-8 w-8" />
+						Add Sources
+					</h1>
+					<p className="text-muted-foreground text-lg">Add your sources to your search space</p>
+				</div>
+
+				{/* Tabs */}
+				<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
+						<TabsTrigger value="documents" className="flex items-center gap-2">
+							<Upload className="h-4 w-4" />
+							Documents
+						</TabsTrigger>
+						<TabsTrigger value="youtube" className="flex items-center gap-2">
+							<IconBrandYoutube className="h-4 w-4" />
+							YouTube
+						</TabsTrigger>
+						<TabsTrigger value="connectors" className="flex items-center gap-2">
+							<Cable className="h-4 w-4" />
+							Connectors
+						</TabsTrigger>
+					</TabsList>
+
+					<div className="mt-8">
+						<TabsContent value="documents" className="space-y-6">
+							<DocumentUploadTab searchSpaceId={search_space_id} />
+						</TabsContent>
+
+						<TabsContent value="youtube" className="space-y-6">
+							<YouTubeTab searchSpaceId={search_space_id} />
+						</TabsContent>
+
+						<TabsContent value="connectors" className="space-y-6">
+							<ConnectorsTab searchSpaceId={search_space_id} />
+						</TabsContent>
+					</div>
+				</Tabs>
+			</motion.div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index db8d5981b..dd23a4f28 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -46,6 +46,7 @@ export function DashboardBreadcrumb() {
 					researcher: t("researcher"),
 					documents: t("documents"),
 					connectors: t("connectors"),
+					sources: "Sources",
 					podcasts: t("podcasts"),
 					logs: t("logs"),
 					chats: t("chats"),
@@ -59,6 +60,21 @@ export function DashboardBreadcrumb() {
 					const subSection = segments[3];
 					let subSectionLabel = subSection.charAt(0).toUpperCase() + subSection.slice(1);
 
+					// Handle sources sub-sections
+					if (section === "sources") {
+						const sourceLabels: Record<string, string> = {
+							add: "Add Sources",
+						};
+
+						const sourceLabel = sourceLabels[subSection] || subSectionLabel;
+						breadcrumbs.push({
+							label: "Sources",
+							href: `/dashboard/${segments[1]}/sources`,
+						});
+						breadcrumbs.push({ label: sourceLabel });
+						return breadcrumbs;
+					}
+
 					// Handle documents sub-sections
 					if (section === "documents") {
 						const documentLabels: Record<string, string> = {
diff --git a/surfsense_web/components/sidebar/app-sidebar.tsx b/surfsense_web/components/sidebar/app-sidebar.tsx
index 7883ab1e2..2fc99d262 100644
--- a/surfsense_web/components/sidebar/app-sidebar.tsx
+++ b/surfsense_web/components/sidebar/app-sidebar.tsx
@@ -4,6 +4,7 @@ import {
 	AlertCircle,
 	BookOpen,
 	Cable,
+	Database,
 	ExternalLink,
 	FileStack,
 	FileText,
@@ -40,6 +41,7 @@ import {
 export const iconMap: Record<string, LucideIcon> = {
 	BookOpen,
 	Cable,
+	Database,
 	FileStack,
 	Undo2,
 	MessageCircleMore,
@@ -69,54 +71,24 @@ const defaultData = {
 			items: [],
 		},
 		{
-			title: "Documents",
+			title: "Sources",
 			url: "#",
-			icon: "FileStack",
+			icon: "Database",
 			items: [
 				{
-					title: "Upload Documents",
+					title: "Add Sources",
 					url: "#",
 				},
-				// {
-				//   title: "Add Webpages",
-				//   url: "#",
-				// },
 				{
 					title: "Manage Documents",
 					url: "#",
 				},
-			],
-		},
-		{
-			title: "Connectors",
-			url: "#",
-			icon: "Cable",
-			items: [
-				{
-					title: "Add Connector",
-					url: "#",
-				},
 				{
 					title: "Manage Connectors",
 					url: "#",
 				},
 			],
 		},
-		{
-			title: "Research Synthesizer's",
-			url: "#",
-			icon: "SquareLibrary",
-			items: [
-				{
-					title: "Podcast Creator",
-					url: "#",
-				},
-				{
-					title: "Presentation Creator",
-					url: "#",
-				},
-			],
-		},
 	],
 	navSecondary: [
 		{
diff --git a/surfsense_web/components/sidebar/nav-main.tsx b/surfsense_web/components/sidebar/nav-main.tsx
index caea766b3..27d6d9fb7 100644
--- a/surfsense_web/components/sidebar/nav-main.tsx
+++ b/surfsense_web/components/sidebar/nav-main.tsx
@@ -36,13 +36,9 @@ export function NavMain({ items }: { items: NavItem[] }) {
 		const titleMap: Record<string, string> = {
 			Researcher: "researcher",
 			"Manage LLMs": "manage_llms",
-			Documents: "documents",
-			"Upload Documents": "upload_documents",
-			"Add Webpages": "add_webpages",
-			"Add Youtube Videos": "add_youtube",
+			Sources: "sources",
+			"Add Sources": "add_sources",
 			"Manage Documents": "manage_documents",
-			Connectors: "connectors",
-			"Add Connector": "add_connector",
 			"Manage Connectors": "manage_connectors",
 			Podcasts: "podcasts",
 			Logs: "logs",
diff --git a/surfsense_web/components/sources/ConnectorsTab.tsx b/surfsense_web/components/sources/ConnectorsTab.tsx
new file mode 100644
index 000000000..b8d3486f6
--- /dev/null
+++ b/surfsense_web/components/sources/ConnectorsTab.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { AnimatePresence, motion, type Variants } from "motion/react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { connectorCategories } from "./connector-data";
+
+interface ConnectorsTabProps {
+	searchSpaceId: string;
+}
+
+export function ConnectorsTab({ searchSpaceId }: ConnectorsTabProps) {
+	const t = useTranslations("add_connector");
+	const [expandedCategories, setExpandedCategories] = useState<string[]>([
+		"search-engines",
+		"knowledge-bases",
+		"project-management",
+		"team-chats",
+		"communication",
+	]);
+
+	const toggleCategory = (categoryId: string) => {
+		setExpandedCategories((prev) =>
+			prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]
+		);
+	};
+
+	const cardVariants: Variants = {
+		hidden: { opacity: 0, y: 20 },
+		visible: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				type: "spring",
+				stiffness: 260,
+				damping: 20,
+			},
+		},
+		hover: {
+			scale: 1.02,
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 10,
+			},
+		},
+	};
+
+	const staggerContainer = {
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: {
+				staggerChildren: 0.1,
+			},
+		},
+	};
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.3 }}
+			className="space-y-6"
+		>
+			{connectorCategories.map((category) => (
+				<div key={category.id} className="rounded-lg border bg-card text-card-foreground shadow-sm">
+					<Collapsible
+						open={expandedCategories.includes(category.id)}
+						onOpenChange={() => toggleCategory(category.id)}
+						className="w-full"
+					>
+						<div className="flex items-center justify-between space-x-4 p-4">
+							<h3 className="text-xl font-semibold">{t(category.title)}</h3>
+							<CollapsibleTrigger asChild>
+								<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
+									<motion.div
+										animate={{
+											rotate: expandedCategories.includes(category.id) ? 180 : 0,
+										}}
+										transition={{ duration: 0.3, ease: "easeInOut" }}
+									>
+										<IconChevronDown className="h-5 w-5" />
+									</motion.div>
+									<span className="sr-only">Toggle</span>
+								</Button>
+							</CollapsibleTrigger>
+						</div>
+
+						<CollapsibleContent>
+							<AnimatePresence>
+								<motion.div
+									className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 p-4"
+									variants={staggerContainer}
+									initial="hidden"
+									animate="visible"
+									exit="hidden"
+								>
+									{category.connectors.map((connector) => (
+										<motion.div
+											key={connector.id}
+											variants={cardVariants}
+											whileHover="hover"
+											className="col-span-1"
+										>
+											<Card className="h-full flex flex-col overflow-hidden border-transparent transition-all duration-200 hover:border-primary/50">
+												<CardHeader className="flex-row items-center gap-4 pb-2">
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
+														<motion.div
+															whileHover={{ rotate: 5, scale: 1.1 }}
+															className="text-primary"
+														>
+															{connector.icon}
+														</motion.div>
+													</div>
+													<div>
+														<div className="flex items-center gap-2">
+															<h3 className="font-medium">{connector.title}</h3>
+															{connector.status === "coming-soon" && (
+																<Badge
+																	variant="outline"
+																	className="text-xs bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-800"
+																>
+																	{t("coming_soon")}
+																</Badge>
+															)}
+															{connector.status === "connected" && (
+																<Badge
+																	variant="outline"
+																	className="text-xs bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800"
+																>
+																	{t("connected")}
+																</Badge>
+															)}
+														</div>
+													</div>
+												</CardHeader>
+
+												<CardContent className="pb-4">
+													<p className="text-sm text-muted-foreground">
+														{t(connector.description)}
+													</p>
+												</CardContent>
+
+												<CardFooter className="mt-auto pt-2">
+													{connector.status === "available" && (
+														<Link
+															href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
+															className="w-full"
+														>
+															<Button variant="default" className="w-full group">
+																<span>{t("connect")}</span>
+																<motion.div
+																	className="ml-1"
+																	initial={{ x: 0 }}
+																	whileHover={{ x: 3 }}
+																	transition={{
+																		type: "spring",
+																		stiffness: 400,
+																		damping: 10,
+																	}}
+																>
+																	<IconChevronRight className="h-4 w-4" />
+																</motion.div>
+															</Button>
+														</Link>
+													)}
+													{connector.status === "coming-soon" && (
+														<Button variant="outline" disabled className="w-full opacity-70">
+															{t("coming_soon")}
+														</Button>
+													)}
+													{connector.status === "connected" && (
+														<Button
+															variant="outline"
+															className="w-full border-green-500 text-green-600 hover:bg-green-50 dark:hover:bg-green-950"
+														>
+															{t("manage")}
+														</Button>
+													)}
+												</CardFooter>
+											</Card>
+										</motion.div>
+									))}
+								</motion.div>
+							</AnimatePresence>
+						</CollapsibleContent>
+					</Collapsible>
+				</div>
+			))}
+		</motion.div>
+	);
+}
diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx
new file mode 100644
index 000000000..c9976bb64
--- /dev/null
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@@ -0,0 +1,401 @@
+"use client";
+
+import { CheckCircle2, FileType, Info, Loader2, Tag, Upload, X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { toast } from "sonner";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { GridPattern } from "./GridPattern";
+
+interface DocumentUploadTabProps {
+	searchSpaceId: string;
+}
+
+export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
+	const t = useTranslations("upload_documents");
+	const router = useRouter();
+	const [files, setFiles] = useState<File[]>([]);
+	const [isUploading, setIsUploading] = useState(false);
+	const [uploadProgress, setUploadProgress] = useState(0);
+
+	const audioFileTypes = {
+		"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
+		"audio/mp4": [".mp4", ".m4a"],
+		"audio/wav": [".wav"],
+		"audio/webm": [".webm"],
+		"text/markdown": [".md", ".markdown"],
+		"text/plain": [".txt"],
+	};
+
+	const getAcceptedFileTypes = () => {
+		const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE;
+
+		if (etlService === "LLAMACLOUD") {
+			return {
+				"application/pdf": [".pdf"],
+				"application/msword": [".doc"],
+				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
+				"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
+				"application/msword-template": [".dot"],
+				"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
+				"application/vnd.ms-powerpoint": [".ppt"],
+				"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
+				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
+				"application/vnd.ms-powerpoint.template": [".pot"],
+				"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
+				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+				"application/vnd.ms-excel": [".xls"],
+				"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
+				"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
+				"application/vnd.ms-excel.workspace": [".xlw"],
+				"application/rtf": [".rtf"],
+				"application/xml": [".xml"],
+				"application/epub+zip": [".epub"],
+				"text/csv": [".csv"],
+				"text/tab-separated-values": [".tsv"],
+				"text/html": [".html", ".htm", ".web"],
+				"image/jpeg": [".jpg", ".jpeg"],
+				"image/png": [".png"],
+				"image/gif": [".gif"],
+				"image/bmp": [".bmp"],
+				"image/svg+xml": [".svg"],
+				"image/tiff": [".tiff"],
+				"image/webp": [".webp"],
+				...audioFileTypes,
+			};
+		} else if (etlService === "DOCLING") {
+			return {
+				"application/pdf": [".pdf"],
+				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
+				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
+				"text/asciidoc": [".adoc", ".asciidoc"],
+				"text/html": [".html", ".htm", ".xhtml"],
+				"text/csv": [".csv"],
+				"image/png": [".png"],
+				"image/jpeg": [".jpg", ".jpeg"],
+				"image/tiff": [".tiff", ".tif"],
+				"image/bmp": [".bmp"],
+				"image/webp": [".webp"],
+				...audioFileTypes,
+			};
+		} else {
+			return {
+				"image/bmp": [".bmp"],
+				"text/csv": [".csv"],
+				"application/msword": [".doc"],
+				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
+				"message/rfc822": [".eml"],
+				"application/epub+zip": [".epub"],
+				"image/heic": [".heic"],
+				"text/html": [".html"],
+				"image/jpeg": [".jpeg", ".jpg"],
+				"image/png": [".png"],
+				"application/vnd.ms-outlook": [".msg"],
+				"application/vnd.oasis.opendocument.text": [".odt"],
+				"text/x-org": [".org"],
+				"application/pkcs7-signature": [".p7s"],
+				"application/pdf": [".pdf"],
+				"application/vnd.ms-powerpoint": [".ppt"],
+				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
+				"text/x-rst": [".rst"],
+				"application/rtf": [".rtf"],
+				"image/tiff": [".tiff"],
+				"text/tab-separated-values": [".tsv"],
+				"application/vnd.ms-excel": [".xls"],
+				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+				"application/xml": [".xml"],
+				...audioFileTypes,
+			};
+		}
+	};
+
+	const acceptedFileTypes = getAcceptedFileTypes();
+	const supportedExtensions = Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort();
+
+	const onDrop = useCallback((acceptedFiles: File[]) => {
+		setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
+	}, []);
+
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: acceptedFileTypes,
+		maxSize: 50 * 1024 * 1024,
+		noClick: false,
+		noKeyboard: false,
+	});
+
+	const removeFile = (index: number) => {
+		setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+	};
+
+	const formatFileSize = (bytes: number) => {
+		if (bytes === 0) return "0 Bytes";
+		const k = 1024;
+		const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+	};
+
+	const handleUpload = async () => {
+		setIsUploading(true);
+		setUploadProgress(0);
+
+		const formData = new FormData();
+		files.forEach((file) => {
+			formData.append("files", file);
+		});
+		formData.append("search_space_id", searchSpaceId);
+
+		try {
+			const progressInterval = setInterval(() => {
+				setUploadProgress((prev) => {
+					if (prev >= 90) return prev;
+					return prev + Math.random() * 10;
+				});
+			}, 200);
+
+			const response = await fetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/fileupload`,
+				{
+					method: "POST",
+					headers: {
+						Authorization: `Bearer ${window.localStorage.getItem("surfsense_bearer_token")}`,
+					},
+					body: formData,
+				}
+			);
+
+			clearInterval(progressInterval);
+			setUploadProgress(100);
+
+			if (!response.ok) {
+				throw new Error("Upload failed");
+			}
+
+			await response.json();
+
+			toast(t("upload_initiated"), {
+				description: t("upload_initiated_desc"),
+			});
+
+			router.push(`/dashboard/${searchSpaceId}/documents`);
+		} catch (error: any) {
+			setIsUploading(false);
+			setUploadProgress(0);
+			toast(t("upload_error"), {
+				description: `${t("upload_error_desc")}: ${error.message}`,
+			});
+		}
+	};
+
+	const getTotalFileSize = () => {
+		return files.reduce((total, file) => total + file.size, 0);
+	};
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.3 }}
+			className="space-y-6 max-w-4xl mx-auto"
+		>
+			<Alert>
+				<Info className="h-4 w-4" />
+				<AlertDescription>{t("file_size_limit")}</AlertDescription>
+			</Alert>
+
+			<Card className="relative overflow-hidden">
+				<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-30">
+					<GridPattern />
+				</div>
+
+				<CardContent className="p-10 relative z-10">
+					<div
+						{...getRootProps()}
+						className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-muted-foreground/25 rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
+					>
+						<input {...getInputProps()} className="hidden" />
+
+						{isDragActive ? (
+							<motion.div
+								initial={{ opacity: 0, scale: 0.8 }}
+								animate={{ opacity: 1, scale: 1 }}
+								className="flex flex-col items-center gap-4"
+							>
+								<Upload className="h-12 w-12 text-primary" />
+								<p className="text-lg font-medium text-primary">{t("drop_files")}</p>
+							</motion.div>
+						) : (
+							<motion.div
+								initial={{ opacity: 0 }}
+								animate={{ opacity: 1 }}
+								className="flex flex-col items-center gap-4"
+							>
+								<Upload className="h-12 w-12 text-muted-foreground" />
+								<div className="text-center">
+									<p className="text-lg font-medium">{t("drag_drop")}</p>
+									<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
+								</div>
+							</motion.div>
+						)}
+
+						<div className="mt-4">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={(e) => {
+									e.stopPropagation();
+									const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+									if (input) input.click();
+								}}
+							>
+								{t("browse_files")}
+							</Button>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+
+			<AnimatePresence mode="wait">
+				{files.length > 0 && (
+					<motion.div
+						initial={{ opacity: 0, height: 0 }}
+						animate={{ opacity: 1, height: "auto" }}
+						exit={{ opacity: 0, height: 0 }}
+						transition={{ duration: 0.3 }}
+					>
+						<Card>
+							<CardHeader>
+								<div className="flex items-center justify-between">
+									<div>
+										<CardTitle>{t("selected_files", { count: files.length })}</CardTitle>
+										<CardDescription>
+											{t("total_size")}: {formatFileSize(getTotalFileSize())}
+										</CardDescription>
+									</div>
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() => setFiles([])}
+										disabled={isUploading}
+									>
+										{t("clear_all")}
+									</Button>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<div className="space-y-3 max-h-[400px] overflow-y-auto">
+									<AnimatePresence>
+										{files.map((file, index) => (
+											<motion.div
+												key={`${file.name}-${index}`}
+												initial={{ opacity: 0, x: -20 }}
+												animate={{ opacity: 1, x: 0 }}
+												exit={{ opacity: 0, x: 20 }}
+												className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+											>
+												<div className="flex items-center gap-3 flex-1 min-w-0">
+													<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+													<div className="flex-1 min-w-0">
+														<p className="font-medium truncate">{file.name}</p>
+														<div className="flex items-center gap-2 mt-1">
+															<Badge variant="secondary" className="text-xs">
+																{formatFileSize(file.size)}
+															</Badge>
+															<Badge variant="outline" className="text-xs">
+																{file.type || "Unknown type"}
+															</Badge>
+														</div>
+													</div>
+												</div>
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() => removeFile(index)}
+													disabled={isUploading}
+													className="h-8 w-8"
+												>
+													<X className="h-4 w-4" />
+												</Button>
+											</motion.div>
+										))}
+									</AnimatePresence>
+								</div>
+
+								{isUploading && (
+									<motion.div
+										initial={{ opacity: 0, y: 10 }}
+										animate={{ opacity: 1, y: 0 }}
+										className="mt-6 space-y-3"
+									>
+										<Separator />
+										<div className="space-y-2">
+											<div className="flex items-center justify-between text-sm">
+												<span>{t("uploading_files")}</span>
+												<span>{Math.round(uploadProgress)}%</span>
+											</div>
+											<Progress value={uploadProgress} className="h-2" />
+										</div>
+									</motion.div>
+								)}
+
+								<motion.div
+									className="mt-6"
+									initial={{ opacity: 0, y: 10 }}
+									animate={{ opacity: 1, y: 0 }}
+								>
+									<Button
+										className="w-full py-6 text-base font-medium"
+										onClick={handleUpload}
+										disabled={isUploading || files.length === 0}
+									>
+										{isUploading ? (
+											<span className="flex items-center gap-2">
+												<Loader2 className="h-5 w-5 animate-spin" />
+												{t("uploading")}
+											</span>
+										) : (
+											<span className="flex items-center gap-2">
+												<CheckCircle2 className="h-5 w-5" />
+												{t("upload_button", { count: files.length })}
+											</span>
+										)}
+									</Button>
+								</motion.div>
+							</CardContent>
+						</Card>
+					</motion.div>
+				)}
+			</AnimatePresence>
+
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<Tag className="h-5 w-5" />
+						{t("supported_file_types")}
+					</CardTitle>
+					<CardDescription>{t("file_types_desc")}</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="flex flex-wrap gap-2">
+						{supportedExtensions.map((ext) => (
+							<Badge key={ext} variant="outline" className="text-xs">
+								{ext}
+							</Badge>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		</motion.div>
+	);
+}
diff --git a/surfsense_web/components/sources/GridPattern.tsx b/surfsense_web/components/sources/GridPattern.tsx
new file mode 100644
index 000000000..3f12ad13f
--- /dev/null
+++ b/surfsense_web/components/sources/GridPattern.tsx
@@ -0,0 +1,23 @@
+export function GridPattern() {
+	const columns = 41;
+	const rows = 11;
+	return (
+		<div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
+			{Array.from({ length: rows }).map((_, row) =>
+				Array.from({ length: columns }).map((_, col) => {
+					const index = row * columns + col;
+					return (
+						<div
+							key={`${col}-${row}`}
+							className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${
+								index % 2 === 0
+									? "bg-gray-50 dark:bg-neutral-950"
+									: "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
+							}`}
+						/>
+					);
+				})
+			)}
+		</div>
+	);
+}
diff --git a/surfsense_web/components/sources/YouTubeTab.tsx b/surfsense_web/components/sources/YouTubeTab.tsx
new file mode 100644
index 000000000..717a4266d
--- /dev/null
+++ b/surfsense_web/components/sources/YouTubeTab.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import { IconBrandYoutube } from "@tabler/icons-react";
+import { TagInput, type Tag as TagType } from "emblor";
+import { Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+
+const youtubeRegex =
+	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
+
+interface YouTubeTabProps {
+	searchSpaceId: string;
+}
+
+export function YouTubeTab({ searchSpaceId }: YouTubeTabProps) {
+	const t = useTranslations("add_youtube");
+	const router = useRouter();
+	const [videoTags, setVideoTags] = useState<TagType[]>([]);
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const isValidYoutubeUrl = (url: string): boolean => {
+		return youtubeRegex.test(url);
+	};
+
+	const extractVideoId = (url: string): string | null => {
+		const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+		return match ? match[1] : null;
+	};
+
+	const handleSubmit = async () => {
+		if (videoTags.length === 0) {
+			setError(t("error_no_video"));
+			return;
+		}
+
+		const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
+		if (invalidUrls.length > 0) {
+			setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
+			return;
+		}
+
+		setError(null);
+		setIsSubmitting(true);
+
+		try {
+			toast(t("processing_toast"), {
+				description: t("processing_toast_desc"),
+			});
+
+			const videoUrls = videoTags.map((tag) => tag.text);
+
+			const response = await fetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`,
+				{
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
+					},
+					body: JSON.stringify({
+						document_type: "YOUTUBE_VIDEO",
+						content: videoUrls,
+						search_space_id: parseInt(searchSpaceId),
+					}),
+				}
+			);
+
+			if (!response.ok) {
+				throw new Error("Failed to process YouTube videos");
+			}
+
+			await response.json();
+
+			toast(t("success_toast"), {
+				description: t("success_toast_desc"),
+			});
+
+			router.push(`/dashboard/${searchSpaceId}/documents`);
+		} catch (error: any) {
+			setError(error.message || t("error_generic"));
+			toast(t("error_toast"), {
+				description: `${t("error_toast_desc")}: ${error.message}`,
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const handleAddTag = (text: string) => {
+		if (!isValidYoutubeUrl(text)) {
+			toast(t("invalid_url_toast"), {
+				description: t("invalid_url_toast_desc"),
+			});
+			return;
+		}
+
+		if (videoTags.some((tag) => tag.text === text)) {
+			toast(t("duplicate_url_toast"), {
+				description: t("duplicate_url_toast_desc"),
+			});
+			return;
+		}
+
+		const newTag: TagType = {
+			id: Date.now().toString(),
+			text: text,
+		};
+
+		setVideoTags([...videoTags, newTag]);
+	};
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.3 }}
+			className="max-w-2xl mx-auto space-y-6"
+		>
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<IconBrandYoutube className="h-5 w-5" />
+						{t("title")}
+					</CardTitle>
+					<CardDescription>{t("subtitle")}</CardDescription>
+				</CardHeader>
+
+				<CardContent>
+					<div className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="video-input">{t("label")}</Label>
+							<TagInput
+								id="video-input"
+								tags={videoTags}
+								setTags={setVideoTags}
+								placeholder={t("placeholder")}
+								onAddTag={handleAddTag}
+								styleClasses={{
+									inlineTagsContainer:
+										"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
+									input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
+									tag: {
+										body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
+										closeButton:
+											"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
+									},
+								}}
+								activeTagIndex={activeTagIndex}
+								setActiveTagIndex={setActiveTagIndex}
+							/>
+							<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
+						</div>
+
+						{error && (
+							<motion.div
+								className="text-sm text-red-500 mt-2"
+								initial={{ opacity: 0, scale: 0.9 }}
+								animate={{ opacity: 1, scale: 1 }}
+							>
+								{error}
+							</motion.div>
+						)}
+
+						<div className="bg-muted/50 rounded-lg p-4 text-sm">
+							<h4 className="font-medium mb-2">{t("tips_title")}</h4>
+							<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
+								<li>{t("tip_1")}</li>
+								<li>{t("tip_2")}</li>
+								<li>{t("tip_3")}</li>
+								<li>{t("tip_4")}</li>
+							</ul>
+						</div>
+
+						{videoTags.length > 0 && (
+							<div className="mt-4 space-y-2">
+								<h4 className="font-medium">{t("preview")}:</h4>
+								<div className="grid grid-cols-1 gap-3">
+									{videoTags.map((tag, index) => {
+										const videoId = extractVideoId(tag.text);
+										return videoId ? (
+											<motion.div
+												key={tag.id}
+												initial={{ opacity: 0, y: 10 }}
+												animate={{ opacity: 1, y: 0 }}
+												transition={{ delay: index * 0.1 }}
+												className="relative aspect-video rounded-lg overflow-hidden border"
+											>
+												<iframe
+													width="100%"
+													height="100%"
+													src={`https://www.youtube.com/embed/${videoId}`}
+													title="YouTube video player"
+													allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+													allowFullScreen
+												/>
+											</motion.div>
+										) : null;
+									})}
+								</div>
+							</div>
+						)}
+					</div>
+				</CardContent>
+
+				<CardFooter className="flex justify-between">
+					<Button
+						variant="outline"
+						onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
+					>
+						{t("cancel")}
+					</Button>
+					<Button
+						onClick={handleSubmit}
+						disabled={isSubmitting || videoTags.length === 0}
+						className="relative overflow-hidden"
+					>
+						{isSubmitting ? (
+							<>
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								{t("processing")}
+							</>
+						) : (
+							<>
+								<IconBrandYoutube className="mr-2 h-4 w-4" />
+								{t("submit")}
+							</>
+						)}
+					</Button>
+				</CardFooter>
+			</Card>
+		</motion.div>
+	);
+}
diff --git a/surfsense_web/components/sources/connector-data.tsx b/surfsense_web/components/sources/connector-data.tsx
new file mode 100644
index 000000000..7f8f6bdf3
--- /dev/null
+++ b/surfsense_web/components/sources/connector-data.tsx
@@ -0,0 +1,170 @@
+import { IconBrandWindows, IconBrandZoom } from "@tabler/icons-react";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { ConnectorCategory } from "./types";
+
+export const connectorCategories: ConnectorCategory[] = [
+	{
+		id: "search-engines",
+		title: "search_engines",
+		connectors: [
+			{
+				id: "tavily-api",
+				title: "Tavily API",
+				description: "tavily_desc",
+				icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "searxng",
+				title: "SearxNG",
+				description: "searxng_desc",
+				icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "linkup-api",
+				title: "Linkup API",
+				description: "linkup_desc",
+				icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "elasticsearch-connector",
+				title: "Elasticsearch",
+				description: "elasticsearch_desc",
+				icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "baidu-search-api",
+				title: "Baidu Search",
+				description: "baidu_desc",
+				icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
+				status: "available",
+			},
+		],
+	},
+	{
+		id: "team-chats",
+		title: "team_chats",
+		connectors: [
+			{
+				id: "slack-connector",
+				title: "Slack",
+				description: "slack_desc",
+				icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "ms-teams",
+				title: "Microsoft Teams",
+				description: "teams_desc",
+				icon: <IconBrandWindows className="h-6 w-6" />,
+				status: "coming-soon",
+			},
+			{
+				id: "discord-connector",
+				title: "Discord",
+				description: "discord_desc",
+				icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+		],
+	},
+	{
+		id: "project-management",
+		title: "project_management",
+		connectors: [
+			{
+				id: "linear-connector",
+				title: "Linear",
+				description: "linear_desc",
+				icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "jira-connector",
+				title: "Jira",
+				description: "jira_desc",
+				icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "clickup-connector",
+				title: "ClickUp",
+				description: "clickup_desc",
+				icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+		],
+	},
+	{
+		id: "knowledge-bases",
+		title: "knowledge_bases",
+		connectors: [
+			{
+				id: "notion-connector",
+				title: "Notion",
+				description: "notion_desc",
+				icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "github-connector",
+				title: "GitHub",
+				description: "github_desc",
+				icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "confluence-connector",
+				title: "Confluence",
+				description: "confluence_desc",
+				icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "airtable-connector",
+				title: "Airtable",
+				description: "airtable_desc",
+				icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "luma-connector",
+				title: "Luma",
+				description: "luma_desc",
+				icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+		],
+	},
+	{
+		id: "communication",
+		title: "communication",
+		connectors: [
+			{
+				id: "google-calendar-connector",
+				title: "Google Calendar",
+				description: "calendar_desc",
+				icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "google-gmail-connector",
+				title: "Gmail",
+				description: "gmail_desc",
+				icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
+				status: "available",
+			},
+			{
+				id: "zoom",
+				title: "Zoom",
+				description: "zoom_desc",
+				icon: <IconBrandZoom className="h-6 w-6" />,
+				status: "coming-soon",
+			},
+		],
+	},
+];
diff --git a/surfsense_web/components/sources/types.ts b/surfsense_web/components/sources/types.ts
new file mode 100644
index 000000000..230af7503
--- /dev/null
+++ b/surfsense_web/components/sources/types.ts
@@ -0,0 +1,13 @@
+export interface Connector {
+	id: string;
+	title: string;
+	description: string;
+	icon: React.ReactNode;
+	status: "available" | "coming-soon" | "connected";
+}
+
+export interface ConnectorCategory {
+	id: string;
+	title: string;
+	connectors: Connector[];
+}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index bd88f1001..30519dc95 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -134,6 +134,8 @@
 		"platform": "Platform",
 		"researcher": "Researcher",
 		"manage_llms": "Manage LLMs",
+		"sources": "Sources",
+		"add_sources": "Add Sources",
 		"documents": "Documents",
 		"upload_documents": "Upload Documents",
 		"add_webpages": "Add Webpages",
diff --git a/surfsense_web/messages/zh.json b/surfsense_web/messages/zh.json
index cf47a0906..c9747b069 100644
--- a/surfsense_web/messages/zh.json
+++ b/surfsense_web/messages/zh.json
@@ -134,6 +134,8 @@
 		"platform": "平台",
 		"researcher": "AI 研究",
 		"manage_llms": "管理 LLM",
+		"sources": "数据源",
+		"add_sources": "添加数据源",
 		"documents": "文档",
 		"upload_documents": "上传文档",
 		"add_webpages": "添加网页",