diff --git a/.hintrc b/.hintrc
new file mode 100644
index 000000000..4b404dec7
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "connector": {
+    "name": "local"
+  },
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000..6e4b50ada
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ],
+  "unwantedRecommendations": [
+    "ms-edgedevtools.vscode-edge-devtools"
+  ]
+}
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index d57fbde75..4efb48fd3 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -16,6 +16,18 @@
     "no-warning-comments": [
       "error",
       { "terms": ["todo", "fixme"], "location": "anywhere" }
+    ],
+    // Allow style prop for CSS variables, but keep dangerouslySetInnerHTML forbidden
+    "react/forbid-dom-props": [
+      "error",
+      {
+        "forbid": [
+          {
+            "propName": "dangerouslySetInnerHTML",
+            "message": "Use safe alternatives instead of dangerouslySetInnerHTML"
+          }
+        ]
+      }
     ]
   }
 }
diff --git a/frontend/.hintrc b/frontend/.hintrc
new file mode 100644
index 000000000..4b404dec7
--- /dev/null
+++ b/frontend/.hintrc
@@ -0,0 +1,8 @@
+{
+  "connector": {
+    "name": "local"
+  },
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
new file mode 100644
index 000000000..3d24979e6
--- /dev/null
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "css.lint.validProperties": [
+    "--sidebar-width",
+    "--sidebar-width-icon"
+  ],
+  "css.validate": false,
+  "webhint.enable": false,
+  "edge-devtools-network.enable": false
+}
diff --git a/frontend/TYPESCRIPT_SETUP.md b/frontend/TYPESCRIPT_SETUP.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 47073989b..a925bf665 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "PictoPy",
+  "name": "pictopy-frontend",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "PictoPy",
+      "name": "pictopy-frontend",
       "version": "1.0.0",
       "dependencies": {
         "@radix-ui/react-aspect-ratio": "^1.1.7",
diff --git a/frontend/package.json b/frontend/package.json
index b9a7f6ac3..5fa34d462 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "PictoPy",
+  "name": "pictopy-frontend",
   "private": true,
   "version": "1.0.0",
   "type": "module",
@@ -14,7 +14,8 @@
     "lint:check": "eslint --max-warnings 0 --config .eslintrc.json .",
     "lint:fix": "eslint --max-warnings 0 --config .eslintrc.json . --fix",
     "format:fix": "prettier --write \"**/*.{ts,tsx,json}\"",
-    "format:check": "prettier --check \"**/*.{ts,tsx,json}\""
+    "format:check": "prettier --check \"**/*.{ts,tsx,json}\"",
+    "type-check": "tsc --noEmit"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/frontend/src/api/api-functions/albums.ts b/frontend/src/api/api-functions/albums.ts
new file mode 100644
index 000000000..757b95a95
--- /dev/null
+++ b/frontend/src/api/api-functions/albums.ts
@@ -0,0 +1,154 @@
+import { APIResponse } from '@/types/API';
+import { albumsEndpoints } from '../apiEndpoints';
+import { apiClient } from '../axiosConfig';
+
+export interface Album {
+  album_id: string;
+  album_name: string;
+  description: string;
+  is_hidden: boolean;
+}
+
+export interface CreateAlbumRequest {
+  name: string;
+  description?: string;
+  is_hidden: boolean;
+  password?: string;
+}
+
+export interface UpdateAlbumRequest {
+  name: string;
+  description?: string;
+  is_hidden: boolean;
+  current_password?: string;
+  password?: string;
+}
+
+export interface GetAlbumImagesRequest {
+  password?: string;
+}
+
+export interface ImageIdsRequest {
+  image_ids: string[];
+}
+
+export interface GetAlbumsResponse extends APIResponse {
+  albums: Album[];
+}
+
+export interface CreateAlbumResponse extends APIResponse {
+  album_id: string;
+}
+
+export interface GetAlbumResponse extends APIResponse {
+  data: Album;
+}
+
+export interface GetAlbumImagesResponse extends APIResponse {
+  image_ids: string[];
+}
+
+// Get all albums
+export const fetchAllAlbums = async (
+  showHidden = false,
+): Promise<GetAlbumsResponse> => {
+  const response = await apiClient.get<GetAlbumsResponse>(
+    `${albumsEndpoints.getAllAlbums}?show_hidden=${showHidden}`,
+  );
+  return response.data;
+};
+
+// Create a new album
+export const createAlbum = async (
+  albumData: CreateAlbumRequest,
+): Promise<CreateAlbumResponse> => {
+  const response = await apiClient.post<CreateAlbumResponse>(
+    albumsEndpoints.createAlbum,
+    albumData,
+  );
+  return response.data;
+};
+
+// Get specific album details
+export const fetchAlbum = async (
+  albumId: string,
+): Promise<GetAlbumResponse> => {
+  const response = await apiClient.get<GetAlbumResponse>(
+    albumsEndpoints.getAlbum(albumId),
+  );
+  return response.data;
+};
+
+// Update album
+export const updateAlbum = async (
+  albumId: string,
+  albumData: UpdateAlbumRequest,
+): Promise<APIResponse> => {
+  const response = await apiClient.put<APIResponse>(
+    albumsEndpoints.updateAlbum(albumId),
+    albumData,
+  );
+  return response.data;
+};
+
+// Delete album
+export const deleteAlbum = async (albumId: string): Promise<APIResponse> => {
+  const response = await apiClient.delete<APIResponse>(
+    albumsEndpoints.deleteAlbum(albumId),
+  );
+  return response.data;
+};
+
+// Get album images
+export const fetchAlbumImages = async (
+  albumId: string,
+  password?: string,
+): Promise<GetAlbumImagesResponse> => {
+  const requestBody: GetAlbumImagesRequest = {};
+  if (password) {
+    requestBody.password = password;
+  }
+
+  const response = await apiClient.post<GetAlbumImagesResponse>(
+    albumsEndpoints.getAlbumImages(albumId),
+    requestBody,
+  );
+  return response.data;
+};
+
+// Add images to album
+export const addImagesToAlbum = async (
+  albumId: string,
+  imageIds: string[],
+): Promise<APIResponse> => {
+  const requestBody: ImageIdsRequest = { image_ids: imageIds };
+  const response = await apiClient.post<APIResponse>(
+    albumsEndpoints.addImagesToAlbum(albumId),
+    requestBody,
+  );
+  return response.data;
+};
+
+// Remove image from album
+export const removeImageFromAlbum = async (
+  albumId: string,
+  imageId: string,
+): Promise<APIResponse> => {
+  const response = await apiClient.delete<APIResponse>(
+    albumsEndpoints.removeImageFromAlbum(albumId, imageId),
+  );
+  return response.data;
+};
+
+// Remove multiple images from album
+export const removeImagesFromAlbum = async (
+  albumId: string,
+  imageIds: string[],
+): Promise<APIResponse> => {
+  const requestBody: ImageIdsRequest = { image_ids: imageIds };
+  const response = await apiClient.delete<APIResponse>(
+    albumsEndpoints.removeImagesFromAlbum(albumId),
+    { data: requestBody },
+  );
+  return response.data;
+};
diff --git a/frontend/src/api/api-functions/index.ts b/frontend/src/api/api-functions/index.ts
index 5d6f2fa8c..9d22fae87 100644
--- a/frontend/src/api/api-functions/index.ts
+++ b/frontend/src/api/api-functions/index.ts
@@ -1,6 +1,7 @@
 // Export all API functions
+export * from './albums';
 export * from './face_clusters';
-export * from './images';
 export * from './folders';
-export * from './user_preferences';
 export * from './health';
+export * from './images';
+export * from './user_preferences';
diff --git a/frontend/src/api/apiEndpoints.ts b/frontend/src/api/apiEndpoints.ts
index 805fc2010..d92e99a8c 100644
--- a/frontend/src/api/apiEndpoints.ts
+++ b/frontend/src/api/apiEndpoints.ts
@@ -23,6 +23,19 @@ export const userPreferencesEndpoints = {
   updateUserPreferences: '/user-preferences/',
 };
 
+export const albumsEndpoints = {
+  getAllAlbums: '/albums/',
+  createAlbum: '/albums/',
+  getAlbum: (albumId: string) => `/albums/${albumId}`,
+  updateAlbum: (albumId: string) => `/albums/${albumId}`,
+  deleteAlbum: (albumId: string) => `/albums/${albumId}`,
+  getAlbumImages: (albumId: string) => `/albums/${albumId}/images/get`,
+  addImagesToAlbum: (albumId: string) => `/albums/${albumId}/images`,
+  removeImageFromAlbum: (albumId: string, imageId: string) =>
+    `/albums/${albumId}/images/${imageId}`,
+  removeImagesFromAlbum: (albumId: string) => `/albums/${albumId}/images`,
+};
+
 export const healthEndpoints = {
   healthCheck: '/health',
 };
diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts
index 7252274a6..2e44652fe 100644
--- a/frontend/src/app/store.ts
+++ b/frontend/src/app/store.ts
@@ -1,11 +1,12 @@
-import { configureStore } from '@reduxjs/toolkit';
+import albumReducer from '@/features/albumSlice';
+import faceClustersReducer from '@/features/faceClustersSlice';
+import folderReducer from '@/features/folderSlice';
+import imageReducer from '@/features/imageSlice';
+import infoDialogReducer from '@/features/infoDialogSlice';
 import loaderReducer from '@/features/loaderSlice';
 import onboardingReducer from '@/features/onboardingSlice';
 import searchReducer from '@/features/searchSlice';
-import imageReducer from '@/features/imageSlice';
-import faceClustersReducer from '@/features/faceClustersSlice';
-import infoDialogReducer from '@/features/infoDialogSlice';
-import folderReducer from '@/features/folderSlice';
+import { configureStore } from '@reduxjs/toolkit';
 
 export const store = configureStore({
   reducer: {
@@ -16,6 +17,7 @@ export const store = configureStore({
     infoDialog: infoDialogReducer,
     folders: folderReducer,
     search: searchReducer,
+    albums: albumReducer,
   },
 });
 // Infer the `RootState` and `AppDispatch` types from the store itself
diff --git a/frontend/src/components/Album/AddToAlbumDialog.tsx b/frontend/src/components/Album/AddToAlbumDialog.tsx
new file mode 100644
index 000000000..c1dad8dea
--- /dev/null
+++ b/frontend/src/components/Album/AddToAlbumDialog.tsx
@@ -0,0 +1,253 @@
+import { addImagesToAlbum, fetchAllAlbums } from '@/api/api-functions/albums';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
+import { Eye, EyeOff, Lock, Search } from 'lucide-react';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+interface AddToAlbumDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedImageIds: string[];
+  onImagesAdded?: () => void;
+}
+
+export function AddToAlbumDialog({
+  open,
+  onOpenChange,
+  selectedImageIds,
+  onImagesAdded,
+}: AddToAlbumDialogProps) {
+  const dispatch = useDispatch();
+  const [localAlbums, setLocalAlbums] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedAlbumId, setSelectedAlbumId] = useState<string | null>(null);
+  const [showHidden, setShowHidden] = useState(false);
+
+  // Fetch albums
+  const {
+    data: albumsData,
+    isLoading,
+    isSuccess,
+  } = usePictoQuery({
+    queryKey: ['albums', showHidden],
+    queryFn: () => fetchAllAlbums(showHidden),
+    enabled: open,
+  });
+
+  // Add images to album mutation
+  const addToAlbumMutation = usePictoMutation({
+    mutationFn: ({
+      albumId,
+      imageIds,
+    }: {
+      albumId: string;
+      imageIds: string[];
+    }) => addImagesToAlbum(albumId, imageIds),
+    onSuccess: (data: any) => {
+      if (data.success) {
+        // Resolve album name before any state mutations
+        const selectedAlbum = localAlbums.find(
+          (album: any) => album.album_id === selectedAlbumId,
+        );
+        const albumName = selectedAlbum?.album_name ?? 'selected album';
+
+        dispatch(
+          showInfoDialog({
+            title: 'Success',
+            message: `Added ${selectedImageIds.length} photo${
+              selectedImageIds.length > 1 ? 's' : ''
+            } to "${albumName}"`,
+            variant: 'info',
+          }),
+        );
+
+        onImagesAdded?.();
+        handleClose();
+      }
+    },
+    onError: () => {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to add photos to album. Please try again.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
+
+  // Use mutation feedback
+  useMutationFeedback(addToAlbumMutation, {
+    loadingMessage: 'Adding photos to album...',
+    showSuccess: false, // We handle success manually
+    showError: false, // We handle errors manually
+    errorTitle: 'Failed to Add Photos',
+  });
+
+  // Update local state when albums are fetched
+  useEffect(() => {
+    if (isSuccess && albumsData?.success) {
+      setLocalAlbums(albumsData.albums);
+    }
+  }, [isSuccess, albumsData]);
+
+  // Filter albums based on search term
+  const filteredAlbums = localAlbums.filter(
+    (album: any) =>
+      album.album_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      album.description.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const handleClose = () => {
+    setSelectedAlbumId(null);
+    setSearchTerm('');
+    onOpenChange(false);
+  };
+
+  const handleAddToAlbum = () => {
+    if (!selectedAlbumId) return;
+
+    addToAlbumMutation.mutate({
+      albumId: selectedAlbumId,
+      imageIds: selectedImageIds,
+    });
+  };
+
+  const handleToggleShowHidden = () => {
+    setShowHidden(!showHidden);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] w-[95vw] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Add to Album</DialogTitle>
+          <DialogDescription>
+            Add {selectedImageIds.length} selected photo
+            {selectedImageIds.length > 1 ? 's' : ''} to an existing album.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Search and filters */}
+          <div className="space-y-2">
+            <div className="relative">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                placeholder="Search albums..."
+                value={searchTerm}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setSearchTerm(e.target.value)
+                }
+                className="pl-9"
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleToggleShowHidden}
+                className="gap-2"
+              >
+                {showHidden ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+                {showHidden ? 'Hide Hidden Albums' : 'Show Hidden Albums'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Albums list */}
+          <div className="space-y-2">
+            <Label>Select Album</Label>
+            <ScrollArea className="h-60">
+              <div className="space-y-2 pr-4">
+                {isLoading ? (
+                  <div className="flex items-center justify-center py-8">
+                    <p className="text-muted-foreground">Loading albums...</p>
+                  </div>
+                ) : filteredAlbums.length === 0 ? (
+                  <div className="flex items-center justify-center py-8">
+                    <p className="text-muted-foreground">
+                      {searchTerm
+                        ? 'No albums found matching your search.'
+                        : 'No albums available.'}
+                    </p>
+                  </div>
+                ) : (
+                  filteredAlbums.map((album: any) => (
+                    <Card
+                      key={album.album_id}
+                      className={`hover:bg-muted/50 cursor-pointer transition-colors ${
+                        selectedAlbumId === album.album_id
+                          ? 'bg-primary/10 ring-primary ring-2'
+                          : ''
+                      }`}
+                      onClick={() => setSelectedAlbumId(album.album_id)}
+                    >
+                      <CardContent className="p-3">
+                        <div className="flex items-center justify-between">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <h3 className="font-medium">
+                                {album.album_name}
+                              </h3>
+                              {album.is_hidden && (
+                                <Lock className="text-muted-foreground h-4 w-4" />
+                              )}
+                            </div>
+                            {album.description && (
+                              <p className="text-muted-foreground mt-1 text-sm">
+                                {album.description}
+                              </p>
+                            )}
+                          </div>
+                          {album.is_hidden && (
+                            <Badge variant="secondary" className="ml-2">
+                              Hidden
+                            </Badge>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleAddToAlbum}
+            disabled={!selectedAlbumId || addToAlbumMutation.isPending}
+          >
+            Add to Album
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Album/AlbumDetail.tsx b/frontend/src/components/Album/AlbumDetail.tsx
new file mode 100644
index 000000000..78cc58d59
--- /dev/null
+++ b/frontend/src/components/Album/AlbumDetail.tsx
@@ -0,0 +1,515 @@
+import { DeleteAlbumDialog } from '@/components/Album/DeleteAlbumDialog';
+import { EditAlbumDialog } from '@/components/Album/EditAlbumDialog';
+import { ImageCard } from '@/components/Media/ImageCard';
+import { MediaView } from '@/components/Media/MediaView';
+import { SelectionToolbar } from '@/components/Media/SelectionToolbar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import {
+  Album as AlbumType,
+  fetchAlbum,
+  fetchAlbumImages,
+  removeImagesFromAlbum,
+} from '@/api/api-functions/albums';
+import { fetchAllImages } from '@/api/api-functions/images';
+import {
+  selectIsSelectionMode,
+  selectSelectedImageIds,
+} from '@/features/albumSelectors';
+import {
+  clearSelectedImages,
+  enableSelectionMode,
+  setSelectedAlbum,
+} from '@/features/albumSlice';
+import { selectIsImageViewOpen } from '@/features/imageSelectors';
+import { setImages } from '@/features/imageSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { hideLoader, showLoader } from '@/features/loaderSlice';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { Image } from '@/types/Media';
+import {
+  ArrowLeft,
+  CheckSquare,
+  Edit3,
+  Lock,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+
+export function AlbumDetail() {
+  const { albumId } = useParams<{ albumId: string }>();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const [album, setAlbum] = useState<AlbumType | null>(null);
+  const [albumImages, setAlbumImages] = useState<Image[]>([]);
+  const [password, setPassword] = useState('');
+  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const isSelectionMode = useSelector(selectIsSelectionMode);
+  const selectedImageIds = useSelector(selectSelectedImageIds);
+  const isImageViewOpen = useSelector(selectIsImageViewOpen);
+
+  // Mutation for removing images from album
+  const removeImagesMutation = usePictoMutation({
+    mutationFn: ({
+      albumId,
+      imageIds,
+    }: {
+      albumId: string;
+      imageIds: string[];
+    }) => removeImagesFromAlbum(albumId, imageIds),
+    onSuccess: (data: any) => {
+      if (data.success) {
+        dispatch(
+          showInfoDialog({
+            title: 'Success',
+            message: `Removed ${selectedImageIds.length} photo${
+              selectedImageIds.length > 1 ? 's' : ''
+            } from album`,
+            variant: 'info',
+          }),
+        );
+
+        // Update local state by filtering out removed images
+        const updatedImages = albumImages.filter(
+          (img) => !selectedImageIds.includes(img.id),
+        );
+        setAlbumImages(updatedImages);
+        dispatch(setImages(updatedImages));
+
+        // Clear selection
+        dispatch(clearSelectedImages());
+      }
+    },
+    onError: () => {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to remove photos from album. Please try again.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
+
+  // Use mutation feedback for loading states
+  useMutationFeedback(removeImagesMutation, {
+    loadingMessage: 'Removing photos from album...',
+    showSuccess: false, // We handle success manually
+    errorTitle: 'Failed to Remove Photos',
+  });
+
+  // Fetch album details
+  const {
+    data: albumData,
+    isLoading: isAlbumLoading,
+    isSuccess: isAlbumSuccess,
+    isError: isAlbumError,
+  } = usePictoQuery({
+    queryKey: ['album', albumId],
+    queryFn: () =>
+      albumId ? fetchAlbum(albumId) : Promise.reject('No album ID'),
+    enabled: !!albumId,
+  });
+
+  // Fetch album images
+  const {
+    data: imageIdsData,
+    isLoading: isImagesLoading,
+    isSuccess: isImagesSuccess,
+    isError: isImagesError,
+  } = usePictoQuery({
+    queryKey: ['album-images', albumId, password],
+    queryFn: () =>
+      albumId
+        ? fetchAlbumImages(albumId, password || undefined)
+        : Promise.reject('No album ID'),
+    enabled: !!albumId && !!album && (!album.is_hidden || Boolean(password)),
+  });
+
+  // Fetch all images to get full image details
+  const { data: allImagesData } = usePictoQuery({
+    queryKey: ['images'],
+    queryFn: fetchAllImages,
+  });
+
+  // Handle loading states
+  useEffect(() => {
+    if (isAlbumLoading || isImagesLoading) {
+      dispatch(showLoader('Loading album...'));
+    } else {
+      dispatch(hideLoader());
+    }
+  }, [isAlbumLoading, isImagesLoading, dispatch]);
+
+  // Handle album data
+  useEffect(() => {
+    if (isAlbumSuccess && albumData?.success) {
+      setAlbum(albumData.data);
+      dispatch(setSelectedAlbum(albumData.data));
+
+      // Check if album is hidden and we don't have password
+      if (albumData.data.is_hidden && !password) {
+        setShowPasswordDialog(true);
+      }
+    } else if (isAlbumError) {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to load album. Please try again.',
+          variant: 'error',
+        }),
+      );
+    }
+  }, [isAlbumSuccess, isAlbumError, albumData, password, dispatch]);
+
+  // Handle image IDs data
+  useEffect(() => {
+    if (isImagesSuccess && imageIdsData?.success && allImagesData?.data) {
+      const imageIds = imageIdsData.image_ids;
+      const allImagesArray = allImagesData.data as Image[];
+
+      // Filter images that are in this album
+      const filteredImages = allImagesArray.filter((image) =>
+        imageIds.includes(image.id),
+      );
+
+      setAlbumImages(filteredImages);
+      dispatch(setImages(filteredImages));
+    }
+  }, [isImagesSuccess, imageIdsData, allImagesData, dispatch]);
+
+  // Handle failed password attempts for hidden albums
+  useEffect(() => {
+    // Check if query failed or returned unsuccessful response
+    if (
+      isImagesError ||
+      (isImagesSuccess && imageIdsData && !imageIdsData.success)
+    ) {
+      // Only handle this for hidden albums with a password attempt
+      if (album?.is_hidden && password) {
+        // Clear the incorrect password
+        setPassword('');
+
+        // Clear any existing images from UI
+        setAlbumImages([]);
+        dispatch(setImages([]));
+
+        // Show password dialog again for retry
+        setShowPasswordDialog(true);
+
+        // Show error notification
+        dispatch(
+          showInfoDialog({
+            title: 'Invalid Password',
+            message: 'The password you entered is incorrect. Please try again.',
+            variant: 'error',
+          }),
+        );
+      }
+    }
+  }, [isImagesError, isImagesSuccess, imageIdsData, album, password, dispatch]);
+
+  const handleBack = () => {
+    navigate('/albums');
+  };
+
+  const handleEnterSelectionMode = () => {
+    dispatch(enableSelectionMode());
+  };
+
+  const handleEditAlbum = () => {
+    setShowEditDialog(true);
+  };
+
+  const handleDeleteAlbum = () => {
+    setShowDeleteDialog(true);
+  };
+
+  const handleAlbumUpdated = () => {
+    // Album will be refetched via React Query
+    console.log('Album updated successfully');
+  };
+
+  const handleAlbumDeleted = () => {
+    // Navigate back to albums list after deletion
+    navigate('/albums');
+  };
+
+  const handleRemoveFromAlbum = () => {
+    if (!albumId || selectedImageIds.length === 0) return;
+
+    removeImagesMutation.mutate({
+      albumId,
+      imageIds: selectedImageIds,
+    });
+  };
+
+  const handlePasswordSubmit = (submittedPassword: string) => {
+    setPassword(submittedPassword);
+    setShowPasswordDialog(false);
+  };
+
+  const handleCloseMediaView = () => {
+    // MediaView handles closing via Redux
+  };
+
+  if (!album) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-center">
+          <h2 className="mb-2 text-xl font-semibold">Loading...</h2>
+          <p className="text-muted-foreground">
+            Please wait while we load the album.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="mb-4 flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Albums
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex-1">
+            <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+              <h1 className="text-2xl font-bold">{album.album_name}</h1>
+              {album.is_hidden && (
+                <Lock className="text-muted-foreground h-5 w-5" />
+              )}
+              <div className="flex gap-2">
+                {album.is_hidden && <Badge variant="secondary">Hidden</Badge>}
+                <Badge variant="outline">
+                  {albumImages.length} photo
+                  {albumImages.length !== 1 ? 's' : ''}
+                </Badge>
+              </div>
+            </div>
+            {album.description && (
+              <p className="text-muted-foreground">{album.description}</p>
+            )}
+          </div>
+
+          <div className="flex flex-shrink-0 items-center gap-2">
+            {!isSelectionMode && albumImages.length > 0 && (
+              <Button
+                onClick={handleEnterSelectionMode}
+                variant="outline"
+                className="gap-2"
+              >
+                <CheckSquare className="h-4 w-4" />
+                Select Photos
+              </Button>
+            )}
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2">
+                  <MoreHorizontal className="h-4 w-4" />
+                  Options
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleEditAlbum}>
+                  <Edit3 className="mr-2 h-4 w-4" />
+                  Edit Album
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={handleDeleteAlbum}
+                  className="text-red-600"
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete Album
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+
+      {/* Empty state */}
+      {albumImages.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <div className="text-center">
+            <h2 className="mb-2 text-xl font-semibold">
+              No photos in this album
+            </h2>
+            <p className="text-muted-foreground mb-4">
+              Add photos to this album from your photo collection.
+            </p>
+            <Button className="gap-2">
+              <Plus className="h-4 w-4" />
+              Add Photos
+            </Button>
+          </div>
+        </div>
+      ) : (
+        /* Image Grid */
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+          {albumImages.map((image: any, index: number) => (
+            <ImageCard
+              key={image.id}
+              image={image}
+              imageIndex={index}
+              className="w-full"
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Selection Toolbar */}
+      {isSelectionMode && (
+        <SelectionToolbar
+          onDownload={() => console.log('Download:', selectedImageIds)}
+          onShare={() => console.log('Share:', selectedImageIds)}
+          onRemoveFromAlbum={handleRemoveFromAlbum}
+          showAlbumActions={false}
+          showRemoveFromAlbum={true}
+        />
+      )}
+
+      {/* Media Viewer Modal */}
+      {isImageViewOpen && (
+        <MediaView images={albumImages} onClose={handleCloseMediaView} />
+      )}
+
+      {/* Password Dialog for Hidden Albums */}
+      <PasswordDialog
+        open={showPasswordDialog}
+        onOpenChange={setShowPasswordDialog}
+        onPasswordSubmit={handlePasswordSubmit}
+        albumName={album?.album_name || 'Album'}
+      />
+
+      {/* Edit Album Dialog */}
+      {albumId && (
+        <EditAlbumDialog
+          open={showEditDialog}
+          onOpenChange={setShowEditDialog}
+          albumId={albumId}
+          onAlbumUpdated={handleAlbumUpdated}
+        />
+      )}
+
+      {/* Delete Album Dialog */}
+      {albumId && album && (
+        <DeleteAlbumDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          albumId={albumId}
+          albumName={album.album_name}
+          onAlbumDeleted={handleAlbumDeleted}
+        />
+      )}
+    </div>
+  );
+}
+
+// Password Dialog Component
+interface PasswordDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onPasswordSubmit: (password: string) => void;
+  albumName: string;
+}
+
+function PasswordDialog({
+  open,
+  onOpenChange,
+  onPasswordSubmit,
+  albumName,
+}: PasswordDialogProps) {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    if (!password.trim()) {
+      setError('Password is required');
+      return;
+    }
+    onPasswordSubmit(password);
+    setPassword('');
+    setError('');
+  };
+
+  const handleCancel = () => {
+    setPassword('');
+    setError('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Enter Album Password</DialogTitle>
+          <DialogDescription>
+            This album is password protected. Please enter the password to view
+            "{albumName}".
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="album-password">Password</Label>
+            <Input
+              id="album-password"
+              type="password"
+              placeholder="Enter album password"
+              value={password}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                setPassword(e.target.value)
+              }
+              className={error ? 'border-red-500' : ''}
+            />
+            {error && <p className="text-sm text-red-600">{error}</p>}
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type="submit">Access Album</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Album/AlbumList.tsx b/frontend/src/components/Album/AlbumList.tsx
new file mode 100644
index 000000000..051ed2925
--- /dev/null
+++ b/frontend/src/components/Album/AlbumList.tsx
@@ -0,0 +1,217 @@
+import { fetchAllAlbums } from '@/api/api-functions/albums';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { selectAlbums } from '@/features/albumSelectors';
+import { setAlbums } from '@/features/albumSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { hideLoader, showLoader } from '@/features/loaderSlice';
+import { usePictoQuery } from '@/hooks/useQueryExtension';
+import {
+  Edit3,
+  Eye,
+  EyeOff,
+  FolderOpen,
+  Lock,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+interface AlbumListProps {
+  onCreateAlbum?: () => void;
+  onEditAlbum?: (albumId: string) => void;
+  onDeleteAlbum?: (albumId: string, albumName: string) => void;
+}
+
+export function AlbumList({
+  onCreateAlbum,
+  onEditAlbum,
+  onDeleteAlbum,
+}: AlbumListProps) {
+  const dispatch = useDispatch();
+  const albums = useSelector(selectAlbums);
+  const [showHidden, setShowHidden] = React.useState(false);
+
+  // Fetch albums
+  const { data, isLoading, isSuccess, isError } = usePictoQuery({
+    queryKey: ['albums', showHidden],
+    queryFn: () => fetchAllAlbums(showHidden),
+  });
+
+  // Handle loading states
+  React.useEffect(() => {
+    if (isLoading) {
+      dispatch(showLoader('Loading albums...'));
+    } else if (isError) {
+      dispatch(hideLoader());
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to load albums. Please try again later.',
+          variant: 'error',
+        }),
+      );
+    } else if (isSuccess && data?.success) {
+      dispatch(setAlbums(data.albums));
+      dispatch(hideLoader());
+    }
+  }, [data, isSuccess, isError, isLoading, dispatch]);
+
+  const handleToggleShowHidden = () => {
+    setShowHidden(!showHidden);
+  };
+
+  if (albums.length === 0 && !isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12">
+        <FolderOpen className="text-muted-foreground mb-4 h-16 w-16" />
+        <h2 className="mb-2 text-xl font-semibold">No albums yet</h2>
+        <p className="text-muted-foreground mb-6 max-w-md text-center">
+          Create your first album to organize your photos into collections.
+        </p>
+        <Button onClick={onCreateAlbum} className="gap-2">
+          <Plus className="h-4 w-4" />
+          Create Album
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Albums</h1>
+          <p className="text-muted-foreground">
+            {albums.length} album{albums.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleToggleShowHidden}
+            className="gap-2"
+          >
+            {showHidden ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+            {showHidden ? 'Hide Hidden' : 'Show Hidden'}
+          </Button>
+          <Button onClick={onCreateAlbum} className="gap-2">
+            <Plus className="h-4 w-4" />
+            New Album
+          </Button>
+        </div>
+      </div>
+
+      {/* Album Grid */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {albums.map((album: any) => (
+          <Card
+            key={album.album_id}
+            className="group transition-shadow hover:shadow-md"
+          >
+            <CardHeader>
+              <div className="flex items-start justify-between">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <CardTitle className="truncate">
+                      {album.album_name}
+                    </CardTitle>
+                    {album.is_hidden && (
+                      <Lock className="text-muted-foreground h-4 w-4 flex-shrink-0" />
+                    )}
+                  </div>
+                  {album.description && (
+                    <CardDescription className="mt-1 line-clamp-2">
+                      {album.description}
+                    </CardDescription>
+                  )}
+                </div>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
+                    >
+                      <MoreHorizontal className="h-4 w-4" />
+                      <span className="sr-only">Album options</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      onClick={() => onEditAlbum?.(album.album_id)}
+                    >
+                      <Edit3 className="mr-2 h-4 w-4" />
+                      Edit Album
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() =>
+                        onDeleteAlbum?.(album.album_id, album.album_name)
+                      }
+                      className="text-red-600"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete Album
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardHeader>
+
+            <CardContent>
+              {/* Album preview placeholder */}
+              <div className="bg-muted mb-3 flex aspect-square items-center justify-center rounded-lg">
+                <FolderOpen className="text-muted-foreground h-8 w-8" />
+              </div>
+
+              {/* Album badges */}
+              <div className="flex items-center gap-2">
+                {album.is_hidden && (
+                  <Badge variant="secondary" className="text-xs">
+                    Hidden
+                  </Badge>
+                )}
+                {/* Photo count badge */}
+                <Badge variant="outline" className="text-xs">
+                  0 photos
+                </Badge>
+              </div>
+            </CardContent>
+
+            <CardFooter>
+              <Link to={`/albums/${album.album_id}`} className="w-full">
+                <Button variant="outline" className="w-full">
+                  View Album
+                </Button>
+              </Link>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Album/CreateAlbumDialog.tsx b/frontend/src/components/Album/CreateAlbumDialog.tsx
new file mode 100644
index 000000000..c710c03c3
--- /dev/null
+++ b/frontend/src/components/Album/CreateAlbumDialog.tsx
@@ -0,0 +1,235 @@
+import { createAlbum, CreateAlbumRequest } from '@/api/api-functions/albums';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { addAlbum } from '@/features/albumSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { usePictoMutation } from '@/hooks/useQueryExtension';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+interface CreateAlbumDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedImageIds?: string[];
+  onAlbumCreated?: (albumId: string) => void;
+}
+
+export function CreateAlbumDialog({
+  open,
+  onOpenChange,
+  selectedImageIds = [],
+  onAlbumCreated,
+}: CreateAlbumDialogProps) {
+  const dispatch = useDispatch();
+  const [albumName, setAlbumName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [isHidden, setIsHidden] = React.useState(false);
+  const [password, setPassword] = React.useState('');
+  const [errors, setErrors] = React.useState<Record<string, string>>({});
+
+  const createAlbumMutation = usePictoMutation({
+    mutationFn: (data: CreateAlbumRequest) => createAlbum(data),
+    onSuccess: (data: any) => {
+      if (data.success) {
+        // Add album to Redux store
+        dispatch(
+          addAlbum({
+            album_id: data.album_id,
+            album_name: albumName,
+            description: description,
+            is_hidden: isHidden,
+          }),
+        );
+
+        // Show success message
+        dispatch(
+          showInfoDialog({
+            title: 'Success',
+            message: `Album "${albumName}" created successfully!`,
+            variant: 'info',
+          }),
+        );
+
+        // Call callback with album ID
+        onAlbumCreated?.(data.album_id);
+
+        // Reset form and close dialog
+        resetForm();
+        onOpenChange(false);
+      }
+    },
+    onError: (_error: any) => {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to create album. Please try again.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
+
+  // Use mutation feedback hook
+  useMutationFeedback(createAlbumMutation, {
+    loadingMessage: 'Creating album...',
+    showSuccess: false, // We handle success manually above
+    showError: false, // We handle errors manually above
+    errorTitle: 'Failed to Create Album',
+  });
+
+  const resetForm = () => {
+    setAlbumName('');
+    setDescription('');
+    setIsHidden(false);
+    setPassword('');
+    setErrors({});
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!albumName.trim()) {
+      newErrors.albumName = 'Album name is required';
+    }
+
+    if (isHidden && !password.trim()) {
+      newErrors.password = 'Password is required for hidden albums';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    const albumData: CreateAlbumRequest = {
+      name: albumName.trim(),
+      description: description.trim(),
+      is_hidden: isHidden,
+      password: isHidden ? password : undefined,
+    };
+
+    createAlbumMutation.mutate(albumData);
+  };
+
+  const handleCancel = () => {
+    resetForm();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] w-[95vw] overflow-y-auto sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New Album</DialogTitle>
+          <DialogDescription>
+            {selectedImageIds.length > 0
+              ? `Create a new album with ${selectedImageIds.length} selected photo${
+                  selectedImageIds.length > 1 ? 's' : ''
+                }.`
+              : 'Create a new album to organize your photos.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Album Name */}
+          <div className="space-y-2">
+            <Label htmlFor="album-name">Album Name</Label>
+            <Input
+              id="album-name"
+              placeholder="Enter album name"
+              value={albumName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setAlbumName(e.target.value)
+              }
+              className={errors.albumName ? 'border-red-500' : ''}
+            />
+            {errors.albumName && (
+              <p className="text-sm text-red-600">{errors.albumName}</p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label htmlFor="description">Description (Optional)</Label>
+            <Textarea
+              id="description"
+              placeholder="Enter album description"
+              value={description}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setDescription(e.target.value)
+              }
+              rows={3}
+            />
+          </div>
+
+          {/* Hidden Album Toggle */}
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <Label htmlFor="hidden-album">Hidden Album</Label>
+              <p className="text-muted-foreground text-sm">
+                Hidden albums require a password to view
+              </p>
+            </div>
+            <Switch
+              id="hidden-album"
+              checked={isHidden}
+              onCheckedChange={setIsHidden}
+            />
+          </div>
+
+          {/* Password (only if hidden) */}
+          {isHidden && (
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter album password"
+                value={password}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setPassword(e.target.value)
+                }
+                className={errors.password ? 'border-red-500' : ''}
+              />
+              {errors.password && (
+                <p className="text-sm text-red-600">{errors.password}</p>
+              )}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              disabled={createAlbumMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={createAlbumMutation.isPending}>
+              Create Album
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Album/DeleteAlbumDialog.tsx b/frontend/src/components/Album/DeleteAlbumDialog.tsx
new file mode 100644
index 000000000..b1ae13c4d
--- /dev/null
+++ b/frontend/src/components/Album/DeleteAlbumDialog.tsx
@@ -0,0 +1,169 @@
+import { deleteAlbum, fetchAlbum } from '@/api/api-functions/albums';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { removeAlbum } from '@/features/albumSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+
+interface DeleteAlbumDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  albumId: string;
+  albumName: string;
+  onAlbumDeleted?: () => void;
+}
+
+export function DeleteAlbumDialog({
+  open,
+  onOpenChange,
+  albumId,
+  albumName,
+  onAlbumDeleted,
+}: DeleteAlbumDialogProps) {
+  const dispatch = useDispatch();
+  const [confirmText, setConfirmText] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  // Fetch album details to check if it's hidden
+  const { data: albumData } = usePictoQuery({
+    queryKey: ['album', albumId],
+    queryFn: () => fetchAlbum(albumId),
+    enabled: open && !!albumId,
+  });
+
+  const deleteAlbumMutation = usePictoMutation({
+    mutationFn: () => deleteAlbum(albumId),
+    onSuccess: (_data: any) => {
+      // Remove album from Redux store
+      dispatch(removeAlbum(albumId));
+
+      // Show success message
+      dispatch(
+        showInfoDialog({
+          title: 'Success',
+          message: `Album "${albumName}" has been deleted.`,
+          variant: 'info',
+        }),
+      );
+
+      // Call callback
+      onAlbumDeleted?.();
+
+      // Close dialog
+      handleClose();
+    },
+    onError: (_error: any) => {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message: 'Failed to delete album. Please try again.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
+
+  // Use mutation feedback hook
+  useMutationFeedback(deleteAlbumMutation, {
+    loadingMessage: 'Deleting album...',
+    showSuccess: false, // We handle success manually above
+    showError: false, // We handle errors manually above
+    errorTitle: 'Failed to Delete Album',
+  });
+
+  const handleClose = () => {
+    setConfirmText('');
+    setError('');
+    onOpenChange(false);
+  };
+
+  const handleDelete = () => {
+    // Validate confirmation text
+    if (confirmText !== albumName) {
+      setError(
+        'Album name does not match. Please type the exact album name to confirm.',
+      );
+      return;
+    }
+
+    setError('');
+    deleteAlbumMutation.mutate(undefined);
+  };
+
+  const isDeleteDisabled =
+    confirmText !== albumName || deleteAlbumMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[95vw] sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete Album</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete the album{' '}
+            <span className="text-foreground font-semibold">"{albumName}"</span>
+            {albumData?.data?.is_hidden && (
+              <span className="mt-2 block text-yellow-600 dark:text-yellow-500">
+                Warning: This is a hidden album.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="confirm-album-name">
+              Type <span className="font-semibold">{albumName}</span> to
+              confirm:
+            </Label>
+            <Input
+              id="confirm-album-name"
+              placeholder="Enter album name"
+              value={confirmText}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setConfirmText(e.target.value);
+                setError('');
+              }}
+              onKeyDown={(e: any) => {
+                if (e.key === 'Enter' && !isDeleteDisabled) {
+                  handleDelete();
+                }
+              }}
+              className={error ? 'border-red-500' : ''}
+              disabled={deleteAlbumMutation.isPending}
+            />
+            {error && <p className="text-sm text-red-600">{error}</p>}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={deleteAlbumMutation.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleteDisabled}
+          >
+            {deleteAlbumMutation.isPending ? 'Deleting...' : 'Delete Album'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Album/EditAlbumDialog.tsx b/frontend/src/components/Album/EditAlbumDialog.tsx
new file mode 100644
index 000000000..e7d4e5846
--- /dev/null
+++ b/frontend/src/components/Album/EditAlbumDialog.tsx
@@ -0,0 +1,310 @@
+import {
+  fetchAlbum,
+  updateAlbum,
+  UpdateAlbumRequest,
+} from '@/api/api-functions/albums';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { updateAlbum as updateAlbumInStore } from '@/features/albumSlice';
+import { showInfoDialog } from '@/features/infoDialogSlice';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+interface EditAlbumDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  albumId: string;
+  onAlbumUpdated?: () => void;
+}
+
+export function EditAlbumDialog({
+  open,
+  onOpenChange,
+  albumId,
+  onAlbumUpdated,
+}: EditAlbumDialogProps) {
+  const dispatch = useDispatch();
+  const [albumName, setAlbumName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [isHidden, setIsHidden] = React.useState(false);
+  const [currentPassword, setCurrentPassword] = React.useState('');
+  const [newPassword, setNewPassword] = React.useState('');
+  const [errors, setErrors] = React.useState<Record<string, string>>({});
+  const [isInitialized, setIsInitialized] = React.useState(false);
+
+  // Fetch album details
+  const { data: albumData, isLoading } = usePictoQuery({
+    queryKey: ['album', albumId],
+    queryFn: () => fetchAlbum(albumId),
+    enabled: open && !!albumId,
+  });
+
+  // Initialize form when album data loads
+  React.useEffect(() => {
+    if (albumData?.data && !isInitialized) {
+      setAlbumName(albumData.data.album_name);
+      setDescription(albumData.data.description || '');
+      setIsHidden(albumData.data.is_hidden);
+      setIsInitialized(true);
+    }
+  }, [albumData, isInitialized]);
+
+  // Reset form when dialog closes
+  React.useEffect(() => {
+    if (!open) {
+      setIsInitialized(false);
+      setCurrentPassword('');
+      setNewPassword('');
+      setErrors({});
+    }
+  }, [open]);
+
+  const updateAlbumMutation = usePictoMutation({
+    mutationFn: (data: UpdateAlbumRequest) => updateAlbum(albumId, data),
+    onSuccess: (_data: any) => {
+      // Update album in Redux store
+      dispatch(
+        updateAlbumInStore({
+          albumId: albumId,
+          updates: {
+            album_name: albumName,
+            description: description,
+            is_hidden: isHidden,
+          },
+        }),
+      );
+
+      // Show success message
+      dispatch(
+        showInfoDialog({
+          title: 'Success',
+          message: `Album "${albumName}" updated successfully!`,
+          variant: 'info',
+        }),
+      );
+
+      // Call callback
+      onAlbumUpdated?.();
+
+      // Close dialog
+      onOpenChange(false);
+    },
+    onError: (_error: any) => {
+      dispatch(
+        showInfoDialog({
+          title: 'Error',
+          message:
+            'Failed to update album. Please check your password and try again.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
+
+  // Use mutation feedback hook
+  useMutationFeedback(updateAlbumMutation, {
+    loadingMessage: 'Updating album...',
+    showSuccess: false, // We handle success manually above
+    showError: false, // We handle errors manually above
+    errorTitle: 'Failed to Update Album',
+  });
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!albumName.trim()) {
+      newErrors.albumName = 'Album name is required';
+    }
+
+    // If album was hidden, require current password
+    if (albumData?.data?.is_hidden && !currentPassword.trim()) {
+      newErrors.currentPassword =
+        'Current password is required for hidden albums';
+    }
+
+    // If making album hidden (or it was already hidden), need a password
+    if (isHidden && !newPassword.trim() && !albumData?.data?.is_hidden) {
+      newErrors.newPassword = 'Password is required for hidden albums';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    const albumUpdateData: UpdateAlbumRequest = {
+      name: albumName.trim(),
+      description: description.trim(),
+      is_hidden: isHidden,
+    };
+
+    // Add current password if album was hidden
+    if (albumData?.data?.is_hidden) {
+      albumUpdateData.current_password = currentPassword;
+    }
+
+    // Add new password if setting hidden or changing password
+    if (isHidden && newPassword.trim()) {
+      albumUpdateData.password = newPassword;
+    }
+
+    updateAlbumMutation.mutate(albumUpdateData);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] w-[95vw] overflow-y-auto sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Album</DialogTitle>
+          <DialogDescription>
+            Update album details and settings.
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="py-8 text-center">
+            <p className="text-muted-foreground">Loading album details...</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Album Name */}
+            <div className="space-y-2">
+              <Label htmlFor="edit-album-name">Album Name</Label>
+              <Input
+                id="edit-album-name"
+                placeholder="Enter album name"
+                value={albumName}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setAlbumName(e.target.value)
+                }
+                className={errors.albumName ? 'border-red-500' : ''}
+              />
+              {errors.albumName && (
+                <p className="text-sm text-red-600">{errors.albumName}</p>
+              )}
+            </div>
+
+            {/* Description */}
+            <div className="space-y-2">
+              <Label htmlFor="edit-description">Description (Optional)</Label>
+              <Textarea
+                id="edit-description"
+                placeholder="Enter album description"
+                value={description}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setDescription(e.target.value)
+                }
+                rows={3}
+              />
+            </div>
+
+            {/* Hidden Album Toggle */}
+            <div className="flex items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <Label htmlFor="edit-hidden-album">Hidden Album</Label>
+                <p className="text-muted-foreground text-sm">
+                  Hidden albums require a password to view
+                </p>
+              </div>
+              <Switch
+                id="edit-hidden-album"
+                checked={isHidden}
+                onCheckedChange={setIsHidden}
+              />
+            </div>
+
+            {/* Current Password (only if album was hidden) */}
+            {albumData?.data?.is_hidden && (
+              <div className="space-y-2">
+                <Label htmlFor="current-password">Current Password</Label>
+                <Input
+                  id="current-password"
+                  type="password"
+                  placeholder="Enter current password"
+                  value={currentPassword}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setCurrentPassword(e.target.value)
+                  }
+                  className={errors.currentPassword ? 'border-red-500' : ''}
+                />
+                {errors.currentPassword && (
+                  <p className="text-sm text-red-600">
+                    {errors.currentPassword}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* New Password (only if hidden) */}
+            {isHidden && (
+              <div className="space-y-2">
+                <Label htmlFor="new-password">
+                  {albumData?.data?.is_hidden
+                    ? 'New Password (leave blank to keep current)'
+                    : 'Password'}
+                </Label>
+                <Input
+                  id="new-password"
+                  type="password"
+                  placeholder={
+                    albumData?.data?.is_hidden
+                      ? 'Enter new password (optional)'
+                      : 'Enter album password'
+                  }
+                  value={newPassword}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setNewPassword(e.target.value)
+                  }
+                  className={errors.newPassword ? 'border-red-500' : ''}
+                />
+                {errors.newPassword && (
+                  <p className="text-sm text-red-600">{errors.newPassword}</p>
+                )}
+              </div>
+            )}
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleCancel}
+                disabled={updateAlbumMutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={updateAlbumMutation.isPending || isLoading}
+              >
+                Update Album
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Album/index.ts b/frontend/src/components/Album/index.ts
new file mode 100644
index 000000000..1065044eb
--- /dev/null
+++ b/frontend/src/components/Album/index.ts
@@ -0,0 +1,4 @@
+export { AddToAlbumDialog } from './AddToAlbumDialog';
+export { AlbumDetail } from './AlbumDetail';
+export { AlbumList } from './AlbumList';
+export { CreateAlbumDialog } from './CreateAlbumDialog';
diff --git a/frontend/src/components/Media/ImageCard.tsx b/frontend/src/components/Media/ImageCard.tsx
index 9059a6509..97bd73c3e 100644
--- a/frontend/src/components/Media/ImageCard.tsx
+++ b/frontend/src/components/Media/ImageCard.tsx
@@ -1,13 +1,18 @@
 import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Button } from '@/components/ui/button';
+import {
+  selectIsImageSelected,
+  selectIsSelectionMode,
+} from '@/features/albumSelectors';
+import { toggleImageSelection } from '@/features/albumSlice';
+import { setCurrentViewIndex } from '@/features/imageSlice';
 import { cn } from '@/lib/utils';
-import { Check, Heart, Share2 } from 'lucide-react';
-import { useState, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
 import { Image } from '@/types/Media';
-import { ImageTags } from './ImageTags';
-import { setCurrentViewIndex } from '@/features/imageSlice';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import { Check, Heart, Share2 } from 'lucide-react';
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ImageTags } from './ImageTags';
 
 interface ImageCardProps {
   image: Image;
@@ -25,21 +30,34 @@ export function ImageCard({
   showTags = true,
 }: ImageCardProps) {
   const dispatch = useDispatch();
-  const [isFavorite, setIsFavorite] = useState(false);
-  const [isImageHovered, setIsImageHovered] = useState(false);
+  const [isFavorite, setIsFavorite] = React.useState(false);
+  const [isImageHovered, setIsImageHovered] = React.useState(false);
+
+  // Selection mode state from Redux
+  const isSelectionMode = useSelector(selectIsSelectionMode);
+  const isImageSelected = useSelector(selectIsImageSelected(image.id));
 
   // Default to empty array if no tags are provided
   const tags = image.tags || [];
 
-  const handleImageClick = useCallback(() => {
-    dispatch(setCurrentViewIndex(imageIndex));
-  }, [dispatch, imageIndex]);
+  const handleImageClick = React.useCallback(() => {
+    if (isSelectionMode) {
+      // In selection mode, toggle selection
+      dispatch(toggleImageSelection(image.id));
+    } else {
+      // Normal mode, open image view
+      dispatch(setCurrentViewIndex(imageIndex));
+    }
+  }, [dispatch, imageIndex, isSelectionMode, image.id]);
+
+  // Use selection state from Redux when in selection mode, otherwise use prop
+  const actuallySelected = isSelectionMode ? isImageSelected : isSelected;
 
   return (
     <div
       className={cn(
         'group bg-card cursor-pointer overflow-hidden rounded-lg border transition-all hover:shadow-md',
-        isSelected ? 'ring-2 ring-[#4088fa]' : '',
+        actuallySelected ? 'ring-2 ring-[#4088fa]' : '',
         className,
       )}
       onMouseEnter={() => setIsImageHovered(true)}
@@ -48,7 +66,7 @@ export function ImageCard({
     >
       <div className="relative">
         {/* Selection tick mark */}
-        {isSelected && (
+        {actuallySelected && (
           <div className="absolute top-2 right-2 z-10 rounded-full bg-[#4088fa] p-1">
             <Check className="h-4 w-4 text-white" />
           </div>
@@ -62,7 +80,7 @@ export function ImageCard({
             alt={'Sample Title'}
             className={cn(
               'h-full w-full object-cover transition-transform group-hover:scale-105',
-              isSelected ? 'opacity-95' : '',
+              actuallySelected ? 'opacity-95' : '',
             )}
           />
           {/* Dark overlay on hover */}
@@ -74,7 +92,7 @@ export function ImageCard({
               variant="ghost"
               size="icon"
               className="rounded-full bg-white/20 text-white hover:!bg-white/40 hover:!text-white"
-              onClick={(e) => {
+              onClick={(e: React.MouseEvent) => {
                 e.stopPropagation();
                 setIsFavorite(!isFavorite);
               }}
@@ -91,7 +109,7 @@ export function ImageCard({
               variant="ghost"
               size="icon"
               className="rounded-full bg-white/20 text-white hover:!bg-white/40 hover:!text-white"
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: React.MouseEvent) => e.stopPropagation()}
             >
               <Share2 className="h-5 w-5" />
               <span className="sr-only">Share</span>
diff --git a/frontend/src/components/Media/SelectionToolbar.tsx b/frontend/src/components/Media/SelectionToolbar.tsx
new file mode 100644
index 000000000..6bf1102f6
--- /dev/null
+++ b/frontend/src/components/Media/SelectionToolbar.tsx
@@ -0,0 +1,179 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  selectSelectedImageCount,
+  selectSelectedImageIds,
+} from '@/features/albumSelectors';
+import {
+  clearSelectedImages,
+  disableSelectionMode,
+  selectAllImages,
+} from '@/features/albumSlice';
+import { selectImages } from '@/features/imageSelectors';
+import { Image } from '@/types/Media';
+import {
+  CheckSquare,
+  Download,
+  FolderPlus,
+  RotateCcw,
+  Share2,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useDispatch, useSelector } from 'react-redux';
+
+interface SelectionToolbarProps {
+  onAddToAlbum?: () => void;
+  onCreateNewAlbum?: () => void;
+  onRemoveFromAlbum?: () => void;
+  onDownload?: () => void;
+  onShare?: () => void;
+  onDelete?: () => void;
+  showAlbumActions?: boolean;
+  showRemoveFromAlbum?: boolean;
+}
+
+export function SelectionToolbar({
+  onAddToAlbum,
+  onCreateNewAlbum,
+  onRemoveFromAlbum,
+  onDownload,
+  onShare,
+  onDelete,
+  showAlbumActions = true,
+  showRemoveFromAlbum = false,
+}: SelectionToolbarProps) {
+  const dispatch = useDispatch();
+  const selectedCount = useSelector(selectSelectedImageCount);
+  const selectedImageIds = useSelector(selectSelectedImageIds);
+  const allImages = useSelector(selectImages);
+
+  const handleClose = () => {
+    dispatch(disableSelectionMode());
+  };
+
+  const handleClearSelection = () => {
+    dispatch(clearSelectedImages());
+  };
+
+  const handleSelectAll = () => {
+    const allImageIds = allImages.map((image: Image) => image.id);
+    dispatch(selectAllImages(allImageIds));
+  };
+
+  const isAllSelected =
+    selectedImageIds.length === allImages.length && allImages.length > 0;
+
+  return (
+    <Card className="fixed bottom-4 left-1/2 z-50 flex max-w-[95vw] -translate-x-1/2 transform items-center gap-2 overflow-x-auto p-3 shadow-lg">
+      {/* Selection count */}
+      <Badge variant="secondary" className="px-3 py-1">
+        {selectedCount} selected
+      </Badge>
+
+      {/* Select all / Clear selection */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={isAllSelected ? handleClearSelection : handleSelectAll}
+        className="gap-2"
+      >
+        {isAllSelected ? (
+          <>
+            <RotateCcw className="h-4 w-4" />
+            Clear All
+          </>
+        ) : (
+          <>
+            <CheckSquare className="h-4 w-4" />
+            Select All
+          </>
+        )}
+      </Button>
+
+      {/* Divider */}
+      <div className="bg-border h-6 w-px" />
+
+      {/* Album actions */}
+      {showAlbumActions && (
+        <>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onAddToAlbum}
+            className="gap-2"
+            disabled={selectedCount === 0}
+          >
+            <FolderPlus className="h-4 w-4" />
+            Add to Album
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onCreateNewAlbum}
+            className="gap-2"
+            disabled={selectedCount === 0}
+          >
+            <FolderPlus className="h-4 w-4" />
+            New Album
+          </Button>
+        </>
+      )}
+
+      {/* Remove from album (only show in album view) */}
+      {showRemoveFromAlbum && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRemoveFromAlbum}
+          className="gap-2"
+          disabled={selectedCount === 0}
+        >
+          <Trash2 className="h-4 w-4" />
+          Remove from Album
+        </Button>
+      )}
+
+      {/* Other actions */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onDownload}
+        className="gap-2"
+        disabled={selectedCount === 0}
+      >
+        <Download className="h-4 w-4" />
+        Download
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onShare}
+        className="gap-2"
+        disabled={selectedCount === 0}
+      >
+        <Share2 className="h-4 w-4" />
+        Share
+      </Button>
+
+      {/* Delete */}
+      <Button
+        variant="destructive"
+        size="sm"
+        onClick={onDelete}
+        className="gap-2"
+        disabled={selectedCount === 0}
+      >
+        <Trash2 className="h-4 w-4" />
+        Delete
+      </Button>
+
+      {/* Close button */}
+      <Button variant="ghost" size="sm" onClick={handleClose} className="ml-2">
+        <X className="h-4 w-4" />
+      </Button>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/Navigation/Sidebar/AppSidebar.tsx b/frontend/src/components/Navigation/Sidebar/AppSidebar.tsx
index a80fd2620..d60b638fd 100644
--- a/frontend/src/components/Navigation/Sidebar/AppSidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar/AppSidebar.tsx
@@ -8,16 +8,9 @@ import {
   SidebarMenuItem,
   SidebarSeparator,
 } from '@/components/ui/sidebar';
-import {
-  Bolt,
-  Home,
-  Sparkles,
-  Video,
-  BookImage,
-  ClockFading,
-} from 'lucide-react';
-import { useLocation, Link } from 'react-router';
 import { ROUTES } from '@/constants/routes';
+import { Bolt, BookImage, Clock, Home, Sparkles, Video } from 'lucide-react';
+import { Link, useLocation } from 'react-router';
 
 export function AppSidebar() {
   const location = useLocation();
@@ -40,7 +33,7 @@ export function AppSidebar() {
     { name: 'AI Tagging', path: `/${ROUTES.AI}`, icon: Sparkles },
     { name: 'Videos', path: `/${ROUTES.VIDEOS}`, icon: Video },
     { name: 'Albums', path: `/${ROUTES.ALBUMS}`, icon: BookImage },
-    { name: 'Memories', path: `/${ROUTES.MEMORIES}`, icon: ClockFading },
+    { name: 'Memories', path: `/${ROUTES.MEMORIES}`, icon: Clock },
     { name: 'Settings', path: `/${ROUTES.SETTINGS}`, icon: Bolt },
   ];
 
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index c5744f166..d13ef68c3 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import { X } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -69,7 +69,7 @@ function DialogContent({
             data-slot="dialog-close"
             className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
-            <XIcon />
+            <X />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index ce8fb65a0..aa43b69aa 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -98,7 +98,7 @@ function DropdownMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <Check className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -133,7 +133,7 @@ function DropdownMenuRadioItem({
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+          <Circle className="size-2 fill-current" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -215,7 +215,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <ChevronRight className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
   );
 }
@@ -238,18 +238,18 @@ function DropdownMenuSubContent({
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 };
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
index 44555dea0..1b0784980 100644
--- a/frontend/src/components/ui/pagination.tsx
+++ b/frontend/src/components/ui/pagination.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
 import {
   ChevronLeftIcon,
-  ChevronRightIcon,
+  ChevronRight,
   MoreHorizontalIcon,
 } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -94,7 +94,7 @@ function PaginationNext({
       {...props}
     >
       <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
+      <ChevronRight />
     </PaginationLink>
   );
 }
@@ -119,9 +119,9 @@ function PaginationEllipsis({
 export {
   Pagination,
   PaginationContent,
-  PaginationLink,
+  PaginationEllipsis,
   PaginationItem,
-  PaginationPrevious,
+  PaginationLink,
   PaginationNext,
-  PaginationEllipsis,
+  PaginationPrevious,
 };
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
index a90ec5fdf..b89c33b51 100644
--- a/frontend/src/components/ui/radio-group.tsx
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { CircleIcon } from 'lucide-react';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -34,7 +34,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="relative flex items-center justify-center"
       >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        <Circle className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index 33a9c797b..fe13c53f1 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import { X } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -71,7 +71,7 @@ function SheetContent({
       >
         {children}
         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
+          <X className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
@@ -127,11 +127,11 @@ function SheetDescription({
 
 export {
   Sheet,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
+  SheetDescription,
   SheetFooter,
+  SheetHeader,
   SheetTitle,
-  SheetDescription,
+  SheetTrigger,
 };
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 68c8085a7..a3a843580 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, VariantProps } from 'class-variance-authority';
-import { PanelLeftIcon } from 'lucide-react';
+import { PanelLeft } from 'lucide-react';
+import * as React from 'react';
 
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
@@ -22,6 +20,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -271,7 +271,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <PanelLeft />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 0bedf571f..f22043af0 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -6,6 +6,7 @@ export const ROUTES = {
   VIDEOS: 'videos',
   SETTINGS: 'settings',
   ALBUMS: 'albums',
+  ALBUM_DETAIL: 'albums/:albumId',
   MEMORIES: 'memories',
   PERSON: 'person/:clusterId',
 };
diff --git a/frontend/src/features/albumSelectors.ts b/frontend/src/features/albumSelectors.ts
new file mode 100644
index 000000000..5ad5d8f30
--- /dev/null
+++ b/frontend/src/features/albumSelectors.ts
@@ -0,0 +1,19 @@
+import { RootState } from '@/app/store';
+
+// Album selectors
+export const selectAlbums = (state: RootState) => state.albums.albums;
+export const selectSelectedAlbum = (state: RootState) => state.albums.selectedAlbum;
+export const selectTotalAlbums = (state: RootState) => state.albums.totalAlbums;
+export const selectAlbumsError = (state: RootState) => state.albums.error;
+
+// Selection mode selectors
+export const selectIsSelectionMode = (state: RootState) => state.albums.isSelectionMode;
+export const selectSelectedImageIds = (state: RootState) => state.albums.selectedImageIds;
+export const selectSelectedImageCount = (state: RootState) => state.albums.selectedImageIds.length;
+
+// Helper selectors
+export const selectIsImageSelected = (imageId: string) => (state: RootState) =>
+  state.albums.selectedImageIds.includes(imageId);
+
+export const selectHasSelectedImages = (state: RootState) =>
+  state.albums.selectedImageIds.length > 0;
\ No newline at end of file
diff --git a/frontend/src/features/albumSlice.ts b/frontend/src/features/albumSlice.ts
new file mode 100644
index 000000000..0b514dab1
--- /dev/null
+++ b/frontend/src/features/albumSlice.ts
@@ -0,0 +1,135 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface Album {
+  album_id: string;
+  album_name: string;
+  description: string;
+  is_hidden: boolean;
+}
+
+interface AlbumState {
+  albums: Album[];
+  selectedAlbum: Album | null;
+  selectedImageIds: string[];
+  isSelectionMode: boolean;
+  totalAlbums: number;
+  error: string | null;
+}
+
+const initialState: AlbumState = {
+  albums: [],
+  selectedAlbum: null,
+  selectedImageIds: [],
+  isSelectionMode: false,
+  totalAlbums: 0,
+  error: null,
+};
+
+const albumSlice = createSlice({
+  name: 'albums',
+  initialState,
+  reducers: {
+    setAlbums(state, action: PayloadAction<Album[]>) {
+      state.albums = action.payload;
+      state.totalAlbums = action.payload.length;
+      state.error = null;
+    },
+    addAlbum(state, action: PayloadAction<Album>) {
+      state.albums.push(action.payload);
+      state.totalAlbums = state.albums.length;
+    },
+    updateAlbum(
+      state,
+      action: PayloadAction<{ albumId: string; updates: Partial<Album> }>,
+    ) {
+      const { albumId, updates } = action.payload;
+      const albumIndex = state.albums.findIndex(
+        (album) => album.album_id === albumId,
+      );
+      if (albumIndex !== -1) {
+        state.albums[albumIndex] = { ...state.albums[albumIndex], ...updates };
+        if (state.selectedAlbum?.album_id === albumId) {
+          state.selectedAlbum = { ...state.selectedAlbum, ...updates };
+        }
+      }
+    },
+    removeAlbum(state, action: PayloadAction<string>) {
+      const albumId = action.payload;
+      const albumIndex = state.albums.findIndex(
+        (album) => album.album_id === albumId,
+      );
+      if (albumIndex !== -1) {
+        state.albums.splice(albumIndex, 1);
+        state.totalAlbums = state.albums.length;
+      }
+      // Clear selected album if it was deleted
+      if (state.selectedAlbum?.album_id === albumId) {
+        state.selectedAlbum = null;
+      }
+    },
+    setSelectedAlbum(state, action: PayloadAction<Album | null>) {
+      state.selectedAlbum = action.payload;
+    },
+    // Selection mode actions
+    enableSelectionMode(state) {
+      state.isSelectionMode = true;
+    },
+    disableSelectionMode(state) {
+      state.isSelectionMode = false;
+      state.selectedImageIds = [];
+    },
+    toggleImageSelection(state, action: PayloadAction<string>) {
+      const imageId = action.payload;
+      const index = state.selectedImageIds.indexOf(imageId);
+      if (index === -1) {
+        state.selectedImageIds.push(imageId);
+      } else {
+        state.selectedImageIds.splice(index, 1);
+      }
+    },
+    selectImage(state, action: PayloadAction<string>) {
+      const imageId = action.payload;
+      if (!state.selectedImageIds.includes(imageId)) {
+        state.selectedImageIds.push(imageId);
+      }
+    },
+    deselectImage(state, action: PayloadAction<string>) {
+      const imageId = action.payload;
+      const index = state.selectedImageIds.indexOf(imageId);
+      if (index !== -1) {
+        state.selectedImageIds.splice(index, 1);
+      }
+    },
+    selectAllImages(state, action: PayloadAction<string[]>) {
+      state.selectedImageIds = action.payload;
+    },
+    clearSelectedImages(state) {
+      state.selectedImageIds = [];
+    },
+    setError(state, action: PayloadAction<string | null>) {
+      state.error = action.payload;
+    },
+    clearError(state) {
+      state.error = null;
+    },
+  },
+});
+
+export const {
+  setAlbums,
+  addAlbum,
+  updateAlbum,
+  removeAlbum,
+  setSelectedAlbum,
+  enableSelectionMode,
+  disableSelectionMode,
+  toggleImageSelection,
+  selectImage,
+  deselectImage,
+  selectAllImages,
+  clearSelectedImages,
+  setError,
+  clearError,
+} = albumSlice.actions;
+
+export default albumSlice.reducer;
diff --git a/frontend/src/pages/Album/Album.tsx b/frontend/src/pages/Album/Album.tsx
index 58bda40cb..121c0b879 100644
--- a/frontend/src/pages/Album/Album.tsx
+++ b/frontend/src/pages/Album/Album.tsx
@@ -1,5 +1,82 @@
+import { AlbumList } from '@/components/Album/AlbumList';
+import { CreateAlbumDialog } from '@/components/Album/CreateAlbumDialog';
+import { DeleteAlbumDialog } from '@/components/Album/DeleteAlbumDialog';
+import { EditAlbumDialog } from '@/components/Album/EditAlbumDialog';
+import * as React from 'react';
+
 function Album() {
-  return <></>;
+  const [showCreateDialog, setShowCreateDialog] = React.useState(false);
+  const [showEditDialog, setShowEditDialog] = React.useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
+  const [selectedAlbumId, setSelectedAlbumId] = React.useState<string | null>(
+    null,
+  );
+  const [selectedAlbumName, setSelectedAlbumName] = React.useState<string>('');
+
+  const handleCreateAlbum = () => {
+    setShowCreateDialog(true);
+  };
+
+  const handleEditAlbum = (albumId: string) => {
+    setSelectedAlbumId(albumId);
+    setShowEditDialog(true);
+  };
+
+  const handleDeleteAlbum = (albumId: string, albumName: string) => {
+    setSelectedAlbumId(albumId);
+    setSelectedAlbumName(albumName);
+    setShowDeleteDialog(true);
+  };
+
+  const handleAlbumCreated = (albumId: string) => {
+    console.log('Album created:', albumId);
+    // Optionally navigate to the new album or refresh the list
+  };
+
+  const handleAlbumUpdated = () => {
+    console.log('Album updated');
+    // List will automatically refresh via Redux store update
+  };
+
+  const handleAlbumDeleted = () => {
+    console.log('Album deleted');
+    // List will automatically refresh via Redux store update
+  };
+
+  return (
+    <div className="p-6">
+      <AlbumList
+        onCreateAlbum={handleCreateAlbum}
+        onEditAlbum={handleEditAlbum}
+        onDeleteAlbum={handleDeleteAlbum}
+      />
+
+      <CreateAlbumDialog
+        open={showCreateDialog}
+        onOpenChange={setShowCreateDialog}
+        onAlbumCreated={handleAlbumCreated}
+      />
+
+      {selectedAlbumId && (
+        <>
+          <EditAlbumDialog
+            open={showEditDialog}
+            onOpenChange={setShowEditDialog}
+            albumId={selectedAlbumId}
+            onAlbumUpdated={handleAlbumUpdated}
+          />
+
+          <DeleteAlbumDialog
+            open={showDeleteDialog}
+            onOpenChange={setShowDeleteDialog}
+            albumId={selectedAlbumId}
+            albumName={selectedAlbumName}
+            onAlbumDeleted={handleAlbumDeleted}
+          />
+        </>
+      )}
+    </div>
+  );
 }
 
 export default Album;
diff --git a/frontend/src/pages/Home/Home.tsx b/frontend/src/pages/Home/Home.tsx
index 7ba860849..ba631ba9a 100644
--- a/frontend/src/pages/Home/Home.tsx
+++ b/frontend/src/pages/Home/Home.tsx
@@ -1,21 +1,72 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { fetchAllImages } from '@/api/api-functions';
+import { addImagesToAlbum } from '@/api/api-functions/albums';
+import { RootState } from '@/app/store';
+import { AddToAlbumDialog } from '@/components/Album/AddToAlbumDialog';
+import { CreateAlbumDialog } from '@/components/Album/CreateAlbumDialog';
 import { ImageCard } from '@/components/Media/ImageCard';
 import { MediaView } from '@/components/Media/MediaView';
-import { Image } from '@/types/Media';
-import { setImages } from '@/features/imageSlice';
-import { showLoader, hideLoader } from '@/features/loaderSlice';
+import { SelectionToolbar } from '@/components/Media/SelectionToolbar';
+import { Button } from '@/components/ui/button';
+import {
+  selectIsSelectionMode,
+  selectSelectedImageIds,
+} from '@/features/albumSelectors';
+import {
+  disableSelectionMode,
+  enableSelectionMode,
+} from '@/features/albumSlice';
 import { selectImages, selectIsImageViewOpen } from '@/features/imageSelectors';
-import { usePictoQuery } from '@/hooks/useQueryExtension';
-import { fetchAllImages } from '@/api/api-functions';
-import { RootState } from '@/app/store';
+import { setImages } from '@/features/imageSlice';
 import { showInfoDialog } from '@/features/infoDialogSlice';
+import { hideLoader, showLoader } from '@/features/loaderSlice';
+import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
+import { Image } from '@/types/Media';
+import { CheckSquare } from 'lucide-react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 export const Home = () => {
   const dispatch = useDispatch();
+  const [showCreateAlbumDialog, setShowCreateAlbumDialog] =
+    React.useState(false);
+  const [showAddToAlbumDialog, setShowAddToAlbumDialog] = React.useState(false);
 
   const isImageViewOpen = useSelector(selectIsImageViewOpen);
   const images = useSelector(selectImages);
+  const isSelectionMode = useSelector(selectIsSelectionMode);
+  const selectedImageIds = useSelector(selectSelectedImageIds);
+
+  // Mutation for adding images to album after creation
+  const addImagesToAlbumMutation = usePictoMutation({
+    mutationFn: ({
+      albumId,
+      imageIds,
+    }: {
+      albumId: string;
+      imageIds: string[];
+    }) => addImagesToAlbum(albumId, imageIds),
+    onSuccess: () => {
+      dispatch(disableSelectionMode());
+      dispatch(
+        showInfoDialog({
+          title: 'Success',
+          message: 'Album created and photos added successfully!',
+          variant: 'info',
+        }),
+      );
+    },
+    onError: () => {
+      dispatch(disableSelectionMode());
+      dispatch(
+        showInfoDialog({
+          title: 'Warning',
+          message:
+            'Album was created but failed to add selected photos. You can add them manually.',
+          variant: 'error',
+        }),
+      );
+    },
+  });
 
   const searchState = useSelector((state: RootState) => state.search);
   const isSearchActive = searchState.active;
@@ -28,7 +79,7 @@ export const Home = () => {
   });
 
   // Handle fetching lifecycle
-  useEffect(() => {
+  React.useEffect(() => {
     if (!isSearchActive) {
       if (isLoading) {
         dispatch(showLoader('Loading images'));
@@ -55,6 +106,36 @@ export const Home = () => {
 
   const displayImages = isSearchActive ? searchResults : images;
 
+  const handleEnterSelectionMode = () => {
+    dispatch(enableSelectionMode());
+  };
+
+  const handleAddToAlbum = () => {
+    setShowAddToAlbumDialog(true);
+  };
+
+  const handleCreateNewAlbum = () => {
+    setShowCreateAlbumDialog(true);
+  };
+
+  const handleAlbumCreated = (albumId: string) => {
+    console.log('Album created with ID:', albumId);
+
+    // If there are selected images, add them to the newly created album
+    if (selectedImageIds.length > 0) {
+      addImagesToAlbumMutation.mutate({ albumId, imageIds: selectedImageIds });
+    } else {
+      // No images selected, just clear selection mode
+      dispatch(disableSelectionMode());
+    }
+  };
+
+  const handleImagesAddedToAlbum = () => {
+    console.log('Images added to album');
+    // Clear selection after adding to album
+    dispatch(disableSelectionMode());
+  };
+
   const title =
     isSearchActive && searchResults.length > 0
       ? `Face Search Results (${searchResults.length} found)`
@@ -62,11 +143,24 @@ export const Home = () => {
 
   return (
     <div className="p-6">
-      <h1 className="mb-6 text-2xl font-bold">{title}</h1>
+      {/* Header with title and selection button */}
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{title}</h1>
+        {!isSelectionMode && !isSearchActive && displayImages.length > 0 && (
+          <Button
+            onClick={handleEnterSelectionMode}
+            variant="outline"
+            className="gap-2"
+          >
+            <CheckSquare className="h-4 w-4" />
+            Select Photos
+          </Button>
+        )}
+      </div>
 
       {/* Image Grid */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-        {displayImages.map((image, index) => (
+        {displayImages.map((image: any, index: number) => (
           <ImageCard
             key={image.id}
             image={image}
@@ -76,6 +170,32 @@ export const Home = () => {
         ))}
       </div>
 
+      {/* Selection Toolbar */}
+      {isSelectionMode && (
+        <SelectionToolbar
+          onAddToAlbum={handleAddToAlbum}
+          onCreateNewAlbum={handleCreateNewAlbum}
+          onDownload={() => console.log('Download:', selectedImageIds)}
+          onShare={() => console.log('Share:', selectedImageIds)}
+          onDelete={() => console.log('Delete:', selectedImageIds)}
+        />
+      )}
+
+      {/* Album Dialogs */}
+      <CreateAlbumDialog
+        open={showCreateAlbumDialog}
+        onOpenChange={setShowCreateAlbumDialog}
+        selectedImageIds={selectedImageIds}
+        onAlbumCreated={handleAlbumCreated}
+      />
+
+      <AddToAlbumDialog
+        open={showAddToAlbumDialog}
+        onOpenChange={setShowAddToAlbumDialog}
+        selectedImageIds={selectedImageIds}
+        onImagesAdded={handleImagesAddedToAlbum}
+      />
+
       {/* Media Viewer Modal */}
       {isImageViewOpen && (
         <MediaView images={displayImages} onClose={handleCloseMediaView} />
diff --git a/frontend/src/pages/__tests__/allPages.test.tsx b/frontend/src/pages/__tests__/allPages.test.tsx
index 2f1e2d241..30cc5f850 100644
--- a/frontend/src/pages/__tests__/allPages.test.tsx
+++ b/frontend/src/pages/__tests__/allPages.test.tsx
@@ -1,16 +1,23 @@
-import { render } from '@testing-library/react';
+import { store } from '@/app/store';
+import QueryClientProviders from '@/config/QueryClientProvider';
+import { ROUTES } from '@/constants/routes';
+import { ThemeProvider } from '@/contexts/ThemeContext';
 import { AITagging } from '@/pages/AITagging/AITagging';
-import Album from '../Album/Album';
 import { Home } from '@/pages/Home/Home';
+import { render } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router';
+import Album from '../Album/Album';
 import Memories from '../Memories/Memories';
 import Settings from '../SettingsPage/Settings';
 import Videos from '../VideosPage/Videos';
-import { ROUTES } from '@/constants/routes';
-import QueryClientProviders from '@/config/QueryClientProvider';
-import { BrowserRouter } from 'react-router';
-import { ThemeProvider } from '@/contexts/ThemeContext';
-import { Provider } from 'react-redux';
-import { store } from '@/app/store';
+
+// Wrapper component using proper JSX syntax for React 19 + react-router compatibility
+const RouterWrapper = ({ children }: { children: ReactNode }) => {
+  return <MemoryRouter>{children}</MemoryRouter>;
+};
+
 beforeAll(() => {
   window.matchMedia =
     window.matchMedia ||
@@ -39,9 +46,9 @@ describe('Page rendering tests', () => {
         <Provider store={store}>
           <ThemeProvider>
             <QueryClientProviders>
-              <BrowserRouter>
+              <RouterWrapper>
                 <Component />
-              </BrowserRouter>
+              </RouterWrapper>
             </QueryClientProviders>
           </ThemeProvider>
         </Provider>,
diff --git a/frontend/src/routes/AppRoutes.tsx b/frontend/src/routes/AppRoutes.tsx
index e79a9cf90..815674f3c 100644
--- a/frontend/src/routes/AppRoutes.tsx
+++ b/frontend/src/routes/AppRoutes.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
-import { Routes, Route } from 'react-router';
+import { AlbumDetail } from '@/components/Album/AlbumDetail';
 import { ROUTES } from '@/constants/routes';
 import Layout from '@/layout/layout';
-import { InitialSteps } from '@/pages/InitialSteps/InitialSteps';
-import Settings from '@/pages/SettingsPage/Settings';
-import { Home } from '@/pages/Home/Home';
 import { AITagging } from '@/pages/AITagging/AITagging';
-import { PersonImages } from '@/pages/PersonImages/PersonImages';
+import Album from '@/pages/Album/Album';
 import { ComingSoon } from '@/pages/ComingSoon/ComingSoon';
+import { Home } from '@/pages/Home/Home';
+import { InitialSteps } from '@/pages/InitialSteps/InitialSteps';
+import { PersonImages } from '@/pages/PersonImages/PersonImages';
+import Settings from '@/pages/SettingsPage/Settings';
+import { Route, Routes } from 'react-router';
 
-export const AppRoutes: React.FC = () => {
+export const AppRoutes = () => {
   return (
     <Routes>
       <Route index element={<InitialSteps />} />
@@ -18,7 +19,8 @@ export const AppRoutes: React.FC = () => {
         <Route path={ROUTES.VIDEOS} element={<ComingSoon />} />
         <Route path={ROUTES.SETTINGS} element={<Settings />} />
         <Route path={ROUTES.AI} element={<AITagging />} />
-        <Route path={ROUTES.ALBUMS} element={<ComingSoon />} />
+        <Route path={ROUTES.ALBUMS} element={<Album />} />
+        <Route path={ROUTES.ALBUM_DETAIL} element={<AlbumDetail />} />
         <Route path={ROUTES.MEMORIES} element={<ComingSoon />} />
         <Route path={ROUTES.PERSON} element={<PersonImages />} />
       </Route>
diff --git a/frontend/src/types/declarations.d.ts b/frontend/src/types/declarations.d.ts
new file mode 100644
index 000000000..9089b2558
--- /dev/null
+++ b/frontend/src/types/declarations.d.ts
@@ -0,0 +1,8 @@
+// Tauri API declarations
+declare module '@tauri-apps/api/core' {
+  export function convertFileSrc(filePath: string, protocol?: string): string;
+  export function invoke(
+    cmd: string,
+    args?: Record<string, unknown>,
+  ): Promise<any>;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 32cfa71fc..c8630dcfd 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -6,6 +6,7 @@
     "module": "ESNext",
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -20,6 +21,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
 
     /* Type checking */
     "baseUrl": ".",
@@ -27,6 +29,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "jest.setup.ts"],
+  "include": ["src", "jest.setup.ts", "src/types/**/*"],
+  "exclude": ["src/types/react.d.ts", "src/types/global.d.ts", "node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }