diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab218eca..f1630ae0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -73,6 +73,7 @@
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
+        "baseline-browser-mapping": "^2.9.11",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-react-app": "^7.0.1",
@@ -6588,9 +6589,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.20",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz",
-      "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==",
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/frontend/package.json b/frontend/package.json
index 0a53f1b8..147467cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -88,6 +88,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
+    "baseline-browser-mapping": "^2.9.11",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
diff --git a/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx b/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx
index db4b029f..8c327aca 100644
--- a/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx
+++ b/frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Folder, Trash2, Check } from 'lucide-react';
+import { Folder, Trash2, Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { useState } from 'react';
 
 import { Switch } from '@/components/ui/switch';
 import { Button } from '@/components/ui/button';
@@ -25,6 +26,8 @@ const FolderManagementCard: React.FC = () => {
     deleteFolderPending,
   } = useFolderOperations();
 
+  const [isExpanded, setIsExpanded] = useState(true);
+
   const taggingStatus = useSelector(
     (state: RootState) => state.folders.taggingStatus,
   );
@@ -34,103 +37,124 @@ const FolderManagementCard: React.FC = () => {
       icon={Folder}
       title="Folder Management"
       description="Configure your photo library folders and AI settings"
+      action={
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </Button>
+      }
     >
-      {folders.length > 0 ? (
-        <div className="space-y-3">
-          {folders.map((folder: FolderDetails, index: number) => (
-            <div
-              key={index}
-              className="group border-border bg-background/50 relative rounded-lg border p-4 transition-all hover:border-gray-300 hover:shadow-sm dark:hover:border-gray-600"
-            >
-              <div className="flex items-center justify-between">
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-3">
-                    <Folder className="h-4 w-4 flex-shrink-0 text-gray-500 dark:text-gray-400" />
-                    <span className="text-foreground truncate">
-                      {folder.folder_path}
-                    </span>
-                  </div>
-                </div>
+      {isExpanded && (
+        <div className="animate-in fade-in slide-in-from-top-2 duration-200">
+          {folders.length > 0 ? (
+            <div className="space-y-3">
+              {folders.map((folder: FolderDetails, index: number) => (
+                <div
+                  key={index}
+                  className="group border-border bg-background/50 relative rounded-lg border p-4 transition-all hover:border-gray-300 hover:shadow-sm dark:hover:border-gray-600"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-3">
+                        <Folder className="h-4 w-4 flex-shrink-0 text-gray-500 dark:text-gray-400" />
+                        <span className="text-foreground truncate">
+                          {folder.folder_path}
+                        </span>
+                      </div>
+                    </div>
 
-                <div className="ml-4 flex items-center gap-4">
-                  <div className="flex items-center gap-3">
-                    <span className="text-muted-foreground text-sm">
-                      AI Tagging
-                    </span>
-                    <Switch
-                      className="cursor-pointer"
-                      checked={folder.AI_Tagging}
-                      onCheckedChange={() => toggleAITagging(folder)}
-                      disabled={
-                        enableAITaggingPending || disableAITaggingPending
-                      }
-                    />
-                  </div>
-
-                  <Button
-                    onClick={() => deleteFolder(folder.folder_id)}
-                    variant="outline"
-                    size="sm"
-                    className="h-8 w-8 cursor-pointer text-gray-500 hover:border-red-300 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
-                    disabled={deleteFolderPending}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
+                    <div className="ml-4 flex items-center gap-4">
+                      <div className="flex items-center gap-3">
+                        <span className="text-muted-foreground text-sm">
+                          AI Tagging
+                        </span>
+                        <Switch
+                          className="cursor-pointer"
+                          checked={folder.AI_Tagging}
+                          onCheckedChange={() => toggleAITagging(folder)}
+                          disabled={
+                            enableAITaggingPending || disableAITaggingPending
+                          }
+                        />
+                      </div>
 
-              {folder.AI_Tagging && (
-                <div className="mt-3">
-                  <div className="text-muted-foreground mb-1 flex items-center justify-between text-xs">
-                    <span>AI Tagging Progress</span>
-                    <span
-                      className={
-                        (taggingStatus[folder.folder_id]?.tagging_percentage ??
-                          0) >= 100
-                          ? 'flex items-center gap-1 text-green-500'
-                          : 'text-muted-foreground'
-                      }
-                    >
-                      {(taggingStatus[folder.folder_id]?.tagging_percentage ??
-                        0) >= 100 && <Check className="h-3 w-3" />}
-                      {Math.round(
-                        taggingStatus[folder.folder_id]?.tagging_percentage ??
-                          0,
-                      )}
-                      %
-                    </span>
+                      <Button
+                        onClick={() => deleteFolder(folder.folder_id)}
+                        variant="outline"
+                        size="sm"
+                        className="h-8 w-8 cursor-pointer text-gray-500 hover:border-red-300 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
+                        disabled={deleteFolderPending}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
                   </div>
-                  <Progress
-                    value={
-                      taggingStatus[folder.folder_id]?.tagging_percentage ?? 0
-                    }
-                    indicatorClassName={
-                      (taggingStatus[folder.folder_id]?.tagging_percentage ??
-                        0) >= 100
-                        ? 'bg-green-500'
-                        : 'bg-blue-500'
-                    }
-                  />
+
+                  {folder.AI_Tagging && (
+                    <div className="mt-3">
+                      <div className="text-muted-foreground mb-1 flex items-center justify-between text-xs">
+                        <span>AI Tagging Progress</span>
+                        <span
+                          className={
+                            (taggingStatus[folder.folder_id]
+                              ?.tagging_percentage ?? 0) >= 100
+                              ? 'flex items-center gap-1 text-green-500'
+                              : 'text-muted-foreground'
+                          }
+                        >
+                          {(taggingStatus[folder.folder_id]
+                            ?.tagging_percentage ?? 0) >= 100 && (
+                            <Check className="h-3 w-3" />
+                          )}
+                          {Math.round(
+                            taggingStatus[folder.folder_id]
+                              ?.tagging_percentage ?? 0,
+                          )}
+                          %
+                        </span>
+                      </div>
+                      <Progress
+                        value={
+                          taggingStatus[folder.folder_id]?.tagging_percentage ??
+                          0
+                        }
+                        indicatorClassName={
+                          (taggingStatus[folder.folder_id]
+                            ?.tagging_percentage ?? 0) >= 100
+                            ? 'bg-green-500'
+                            : 'bg-blue-500'
+                        }
+                      />
+                    </div>
+                  )}
                 </div>
-              )}
+              ))}
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="py-8 text-center">
-          <Folder className="mx-auto mb-3 h-12 w-12 text-gray-400" />
-          <h3 className="text-foreground mb-1 text-lg font-medium">
-            No folders configured
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            Add your first photo library folder to get started
-          </p>
+          ) : (
+            <div className="py-8 text-center">
+              <Folder className="mx-auto mb-3 h-12 w-12 text-gray-400" />
+              <h3 className="text-foreground mb-1 text-lg font-medium">
+                No folders configured
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                Add your first photo library folder to get started
+              </p>
+            </div>
+          )}
+
+          <div className="border-border mt-6 border-t pt-6">
+            <FolderPicker />
+          </div>
         </div>
       )}
-
-      <div className="border-border mt-6 border-t pt-6">
-        <FolderPicker />
-      </div>
     </SettingsCard>
   );
 };
diff --git a/frontend/src/pages/SettingsPage/components/SettingsCard.tsx b/frontend/src/pages/SettingsPage/components/SettingsCard.tsx
index 183be138..0d7b8d1b 100644
--- a/frontend/src/pages/SettingsPage/components/SettingsCard.tsx
+++ b/frontend/src/pages/SettingsPage/components/SettingsCard.tsx
@@ -14,6 +14,10 @@ interface SettingsCardProps {
    * Card description
    */
   description?: string;
+  /**
+   * Optional action element to display in the header
+   */
+  action?: React.ReactNode;
   /**
    * Card content
    */
@@ -27,6 +31,7 @@ const SettingsCard: React.FC<SettingsCardProps> = ({
   icon: Icon,
   title,
   description,
+  action,
   children,
 }) => {
   return (
@@ -39,6 +44,7 @@ const SettingsCard: React.FC<SettingsCardProps> = ({
             <p className="text-muted-foreground text-sm">{description}</p>
           )}
         </div>
+        {action && <div className="ml-auto">{action}</div>}
       </div>
       {children}
     </div>