diff --git a/surfsense_web/app/dashboard/api-key/api-key-client.tsx b/surfsense_web/app/dashboard/api-key/api-key-client.tsx
index ba6b972..97a36d8 100644
--- a/surfsense_web/app/dashboard/api-key/api-key-client.tsx
+++ b/surfsense_web/app/dashboard/api-key/api-key-client.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import React from "react";
-import { useRouter } from "next/navigation";
-import { ArrowLeft } from "lucide-react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { motion, AnimatePresence } from "framer-motion";
 import { IconCheck, IconCopy, IconKey } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useApiKey } from "@/hooks/use-api-key";
 
diff --git a/surfsense_web/app/dashboard/api-key/client-wrapper.tsx b/surfsense_web/app/dashboard/api-key/client-wrapper.tsx
index 63bd700..4397005 100644
--- a/surfsense_web/app/dashboard/api-key/client-wrapper.tsx
+++ b/surfsense_web/app/dashboard/api-key/client-wrapper.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 
 // Loading component with animation
 const LoadingComponent = () => (
diff --git a/surfsense_web/app/dashboard/api-key/page.tsx b/surfsense_web/app/dashboard/api-key/page.tsx
index adfc6c3..26e0560 100644
--- a/surfsense_web/app/dashboard/api-key/page.tsx
+++ b/surfsense_web/app/dashboard/api-key/page.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+"use client";
+
 import ClientWrapper from "./client-wrapper";
 
 export default function ApiKeyPage() {
diff --git a/surfsense_web/app/dashboard/layout.tsx b/surfsense_web/app/dashboard/layout.tsx
index 18cdf4d..41a269d 100644
--- a/surfsense_web/app/dashboard/layout.tsx
+++ b/surfsense_web/app/dashboard/layout.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { useLLMPreferences } from "@/hooks/use-llm-configs";
 import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useLLMPreferences } from "@/hooks/use-llm-configs";
 
 interface DashboardLayoutProps {
 	children: React.ReactNode;
diff --git a/surfsense_web/app/dashboard/page.tsx b/surfsense_web/app/dashboard/page.tsx
index 3cab679..8e0e291 100644
--- a/surfsense_web/app/dashboard/page.tsx
+++ b/surfsense_web/app/dashboard/page.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { motion, type Variants } from "framer-motion";
+import { AlertCircle, Loader2, Plus, Search, Trash2 } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
-import { motion } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { Plus, Search, Trash2, AlertCircle, Loader2 } from "lucide-react";
-import { Tilt } from "@/components/ui/tilt";
-import { Spotlight } from "@/components/ui/spotlight";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { Logo } from "@/components/Logo";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
 import { UserDropdown } from "@/components/UserDropdown";
-import { toast } from "sonner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -22,7 +22,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -31,9 +31,10 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Spotlight } from "@/components/ui/spotlight";
+import { Tilt } from "@/components/ui/tilt";
 import { useSearchSpaces } from "@/hooks/use-search-spaces";
 import { apiClient } from "@/lib/api";
-import { useRouter } from "next/navigation";
 
 interface User {
 	id: string;
@@ -131,7 +132,7 @@ const ErrorScreen = ({ message }: { message: string }) => {
 
 const DashboardPage = () => {
 	// Animation variants
-	const containerVariants = {
+	const containerVariants: Variants = {
 		hidden: { opacity: 0 },
 		visible: {
 			opacity: 1,
@@ -141,7 +142,7 @@ const DashboardPage = () => {
 		},
 	};
 
-	const itemVariants = {
+	const itemVariants: Variants = {
 		hidden: { y: 20, opacity: 0 },
 		visible: {
 			y: 0,
@@ -154,7 +155,6 @@ const DashboardPage = () => {
 		},
 	};
 
-	const router = useRouter();
 	const { searchSpaces, loading, error, refreshSearchSpaces } = useSearchSpaces();
 
 	// User state management
@@ -264,6 +264,7 @@ const DashboardPage = () => {
 
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 						{searchSpaces &&
+							searchSpaces.length > 0 &&
 							searchSpaces.map((space) => (
 								<Link href={`/dashboard/${space.id}/documents`} key={space.id}>
 									<motion.div key={space.id} variants={itemVariants} className="aspect-[4/3]">
@@ -288,14 +289,16 @@ const DashboardPage = () => {
 											/>
 											<div className="flex flex-col h-full overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50">
 												<div className="relative h-32 w-full overflow-hidden">
-													<img
+													<Image
 														src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
 														alt={space.name}
 														className="h-full w-full object-cover grayscale duration-700 group-hover:grayscale-0"
+														width={248}
+														height={248}
 													/>
 													<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
 													<div className="absolute top-2 right-2">
-														<div onClick={(e) => e.preventDefault()}>
+														<div>
 															<AlertDialog>
 																<AlertDialogTrigger asChild>
 																	<Button
diff --git a/surfsense_web/app/dashboard/searchspaces/page.tsx b/surfsense_web/app/dashboard/searchspaces/page.tsx
index 059779d..b1f2f39 100644
--- a/surfsense_web/app/dashboard/searchspaces/page.tsx
+++ b/surfsense_web/app/dashboard/searchspaces/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { toast } from "sonner";
-import { SearchSpaceForm } from "@/components/search-space-form";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { SearchSpaceForm } from "@/components/search-space-form";
 export default function SearchSpacesPage() {
 	const router = useRouter();
 	const handleCreateSearchSpace = async (data: { name: string; description: string }) => {
@@ -34,7 +34,7 @@ export default function SearchSpacesPage() {
 			router.push(`/dashboard`);
 
 			return result;
-		} catch (error: any) {
+		} catch (error) {
 			console.error("Error creating search space:", error);
 			throw error;
 		}
diff --git a/surfsense_web/next.config.ts b/surfsense_web/next.config.ts
index 7aedf7d..329667f 100644
--- a/surfsense_web/next.config.ts
+++ b/surfsense_web/next.config.ts
@@ -1,5 +1,5 @@
-import type { NextConfig } from "next";
 import { createMDX } from "fumadocs-mdx/next";
+import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
 	typescript: {
@@ -8,6 +8,14 @@ const nextConfig: NextConfig = {
 	eslint: {
 		ignoreDuringBuilds: true,
 	},
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "images.unsplash.com",
+			},
+		],
+	},
 };
 
 // Wrap the config with createMDX