diff --git a/frontend/src/components/EmptyStates/EmptyGalleryState.tsx b/frontend/src/components/EmptyStates/EmptyGalleryState.tsx
index 881292638..2aa0df323 100644
--- a/frontend/src/components/EmptyStates/EmptyGalleryState.tsx
+++ b/frontend/src/components/EmptyStates/EmptyGalleryState.tsx
@@ -1,6 +1,10 @@
 import { FolderOpen, Image as ImageIcon } from 'lucide-react';
+import { useNavigate } from "react-router";
+import { ROUTES } from '@/constants/routes'; 
 
 export const EmptyGalleryState = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="mb-6 rounded-full bg-gray-100 p-4 dark:bg-gray-800">
@@ -16,7 +20,17 @@ export const EmptyGalleryState = () => {
       <div className="flex flex-col gap-2 text-sm text-gray-400 dark:text-gray-500">
         <div className="flex items-center gap-2">
           <FolderOpen className="h-4 w-4" />
-          <span>Go to Settings to add folders.</span>
+          <span>
+            Go to{" "}
+            <button
+              type="button"
+              onClick={() => navigate(`/${ROUTES.SETTINGS}`)} 
+              className="text-blue-500 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded"
+            >
+              Settings
+            </button>{" "}
+            to add folders.
+          </span>
         </div>
         <div className="flex items-center gap-2">
           <ImageIcon className="h-4 w-4" />