diff --git a/backend/.gitignore b/backend/.gitignore
index 2cb1d8440..7714e655a 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -5,6 +5,13 @@ __pycache__/
 *.py[cod]
 *$py.class
 
+
+
+.sync-env/
+venv/
+.env/
+
+
 # Distribution / packaging
 .Python
 build/
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1e1ddd5f..ab218ecaf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14476,20 +14476,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts
index 7252274a6..293167259 100644
--- a/frontend/src/app/store.ts
+++ b/frontend/src/app/store.ts
@@ -7,6 +7,8 @@ import faceClustersReducer from '@/features/faceClustersSlice';
 import infoDialogReducer from '@/features/infoDialogSlice';
 import folderReducer from '@/features/folderSlice';
 
+import viewModeReducer from "@/features/viewModeSlice";
+
 export const store = configureStore({
   reducer: {
     loader: loaderReducer,
@@ -16,6 +18,8 @@ export const store = configureStore({
     infoDialog: infoDialogReducer,
     folders: folderReducer,
     search: searchReducer,
+
+    viewMode: viewModeReducer
   },
 });
 // Infer the `RootState` and `AppDispatch` types from the store itself
diff --git a/frontend/src/components/GalleryView.tsx b/frontend/src/components/GalleryView.tsx
new file mode 100644
index 000000000..d3290a642
--- /dev/null
+++ b/frontend/src/components/GalleryView.tsx
@@ -0,0 +1,312 @@
+// src/components/GalleryView.tsx
+
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { RootState } from '@/app/store';
+import { ChronologicalGallery, MonthMarker } from '@/components/Media/ChronologicalGallery';
+import type { Image as MediaImage } from '@/types/Media';
+import { setCurrentViewIndex } from '@/features/imageSlice';
+import { selectIsImageViewOpen } from '@/features/imageSelectors';
+import { MediaView } from '@/components/Media/MediaView';
+import { Button } from '@/components/ui/button';
+import { Heart, Share2 } from 'lucide-react';
+import { useToggleFav } from '@/hooks/useToggleFav';
+
+/**
+ * This component is tolerant of different Image shapes:
+ * - offline/tauri style: thumbnailPath, path, name, metadata
+ * - online style: url, filename, date
+ *
+ * It will try to prefer thumbnailPath -> url -> path.
+ */
+
+type AnyImage = Partial<MediaImage> & {
+  id: string | number;
+  thumbnailPath?: string;
+  path?: string;
+  url?: string;
+  filename?: string;
+  name?: string;
+  metadata?: Record<string, any>;
+  date?: string;
+};
+
+interface Props {
+  images: AnyImage[];
+  title: string;
+  scrollableRef: React.RefObject<HTMLDivElement | null>;
+  onMonthOffsetsChange: (v: MonthMarker[] | any) => void;
+}
+
+const toTauriUrl = (p?: string) => {
+  if (!p) return undefined;
+  try {
+    const fixed = p.replace(/\\/g, '/');
+    return convertFileSrc(fixed);
+  } catch {
+    // convertFileSrc may throw if not running in Tauri; fallback to raw path
+    return p;
+  }
+};
+
+const getImageSrc = (img: AnyImage) => {
+  // Order of preference:
+  // 1. url (if exists)
+  if (img.url && typeof img.url === 'string') return img.url;
+  // 2. thumbnailPath (tauri local)
+  if (img.thumbnailPath && typeof img.thumbnailPath === 'string') {
+    const v = toTauriUrl(img.thumbnailPath);
+    if (v) return v;
+  }
+  // 3. path (original file path)
+  if (img.path && typeof img.path === 'string') {
+    const v = toTauriUrl(img.path);
+    if (v) return v;
+  }
+  // 4. fallback placeholder
+  return '/placeholder.svg';
+};
+
+export const GalleryView: React.FC<Props> = ({
+  images,
+  title,
+  scrollableRef,
+  onMonthOffsetsChange,
+}) => {
+  const dispatch = useDispatch();
+  const mode = useSelector((s: RootState) => s.viewMode.mode);
+  const isImageViewOpen = useSelector(selectIsImageViewOpen);
+  const { toggleFavourite } = useToggleFav();
+
+  const handleImageClick = useCallback(
+    (index: number) => {
+      dispatch(setCurrentViewIndex(index));
+    },
+    [dispatch],
+  );
+
+  const handleToggleFavourite = useCallback(
+    (img: AnyImage) => {
+      if (img?.id) {
+        toggleFavourite(String(img.id));
+      }
+    },
+    [toggleFavourite],
+  );
+
+  const handleShareImage = useCallback(async (img: AnyImage) => {
+    const shareUrl = img.url || img.path;
+    const shareTitle = img.name || img.filename || 'Image';
+    try {
+      if (typeof navigator !== 'undefined' && navigator.share && shareUrl) {
+        await navigator.share({ title: shareTitle, url: shareUrl });
+      } else if (
+        typeof navigator !== 'undefined' &&
+        navigator.clipboard &&
+        shareUrl
+      ) {
+        await navigator.clipboard.writeText(shareUrl);
+        console.info('Image link copied to clipboard.');
+      } else {
+        console.info('Share is not supported in this environment.');
+      }
+    } catch (err) {
+      console.error('Failed to share image:', err);
+    }
+  }, []);
+
+  const renderActionButtons = (img: AnyImage) => (
+    <div className="absolute inset-0 flex items-center justify-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+      <Button
+        variant="ghost"
+        size="icon"
+        className={`cursor-pointer rounded-full p-2.5 text-white transition-all duration-300 ${
+          img.isFavourite
+            ? 'bg-rose-500/80 hover:bg-rose-600 hover:shadow-lg'
+            : 'bg-black/50 hover:bg-black/70 hover:shadow-lg'
+        }`}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleToggleFavourite(img);
+        }}
+      >
+        <Heart className="h-4 w-4" fill={img.isFavourite ? 'currentColor' : 'none'} />
+        <span className="sr-only">Favourite</span>
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="cursor-pointer rounded-full bg-black/50 text-white hover:bg-black/70"
+        onClick={(e) => {
+          e.stopPropagation();
+          handleShareImage(img);
+        }}
+        title="Share"
+        aria-label="Share"
+      >
+        <Share2 className="h-4 w-4" />
+        <span className="sr-only">Share</span>
+      </Button>
+    </div>
+  );
+
+  // Use chronological gallery (if present) for that mode
+  if (mode === 'chronological') {
+    // ChronologicalGallery exists in your repo; pass-through props
+    return (
+      <ChronologicalGallery
+        images={images as any} // ChronologicalGallery expects your original Image type
+        showTitle={true}
+        title={title}
+        onMonthOffsetsChange={onMonthOffsetsChange}
+        scrollContainerRef={scrollableRef}
+      />
+    );
+  }
+
+  // GRID
+  if (mode === 'grid') {
+    return (
+      <>
+        <div className="p-3 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+          {images.map((img, index) => (
+            <div
+              key={String(img.id)}
+              className="group relative rounded overflow-hidden border dark:border-gray-700 hover:shadow-md transition bg-white dark:bg-gray-900 cursor-pointer"
+              role="button"
+              tabIndex={0}
+              onClick={() => handleImageClick(index)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleImageClick(index);
+                }
+              }}
+            >
+              <div className="relative">
+                <img
+                  src={getImageSrc(img)}
+                  alt={(img.name || img.filename || String(img.id)) as string}
+                  className="w-full h-36 object-cover transition-transform duration-200 group-hover:scale-105"
+                  onError={(e) => {
+                    (e.currentTarget as HTMLImageElement).src = '/placeholder.svg';
+                  }}
+                />
+                <div className="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+                {renderActionButtons(img)}
+              </div>
+            </div>
+          ))}
+        </div>
+        {isImageViewOpen && <MediaView images={images as MediaImage[]} />}
+      </>
+    );
+  }
+
+  // LIST
+  if (mode === 'list') {
+    return (
+      <>
+        <div className="p-3 space-y-3">
+          {images.map((img, index) => (
+            <div
+              key={String(img.id)}
+              className="group flex items-center gap-4 p-2 rounded-md border dark:border-gray-700 bg-white dark:bg-gray-900 cursor-pointer"
+              role="button"
+              tabIndex={0}
+              onClick={() => handleImageClick(index)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleImageClick(index);
+                }
+              }}
+            >
+              <div className="relative w-24 h-24 flex-shrink-0 rounded overflow-hidden bg-gray-100 dark:bg-gray-800">
+                <img
+                  src={getImageSrc(img)}
+                  alt={(img.name || img.filename || '') as string}
+                  className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+                  onError={(e) => {
+                    (e.currentTarget as HTMLImageElement).src = '/placeholder.svg';
+                  }}
+                />
+                <div className="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+                {renderActionButtons(img)}
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="font-medium truncate text-gray-900 dark:text-gray-100">
+                  {img.name || img.filename || String(img.id)}
+                </div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                  {img.date ||
+                    img.metadata?.date ||
+                    img.metadata?.createdAt ||
+                    img.path ||
+                    '—'}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {isImageViewOpen && <MediaView images={images as MediaImage[]} />}
+      </>
+    );
+  }
+
+ // MASONRY
+if (mode === 'masonry') {
+  return (
+    <>
+    <div className="p-3 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4">
+      {images.map((img, index) => (
+        <div
+          key={String(img.id)}
+          className="group break-inside-avoid mb-4 overflow-hidden rounded shadow-sm bg-white dark:bg-gray-900 border dark:border-gray-700 cursor-pointer"
+          role="button"
+          tabIndex={0}
+          onClick={() => handleImageClick(index)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(index);
+            }
+          }}
+        >
+          {/* IMAGE should control the card height fully */}
+          <div className="relative">
+            <img
+              src={getImageSrc(img)}
+              alt={(img.name || img.filename || '') as string}
+              className="w-full h-auto block transition-transform duration-200 group-hover:scale-[1.01]"
+              onError={(e) => {
+                (e.currentTarget as HTMLImageElement).src = '/placeholder.svg';
+              }}
+            />
+            <div className="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+            {renderActionButtons(img)}
+          </div>
+
+          {/* Info section — removed padding above image so card remains exact size */}
+          <div className="px-2 py-1 text-xs flex items-center justify-between text-gray-700 dark:text-gray-200">
+            <div className="truncate">{img.name || img.filename || ''}</div>
+            <div className="text-xs opacity-70">
+              {img.metadata?.date || img.date || ''}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+    {isImageViewOpen && <MediaView images={images as MediaImage[]} />}
+    </>
+  );
+}
+
+
+  return null;
+};
+
+export default GalleryView;
diff --git a/frontend/src/components/ViewModeToggle.tsx b/frontend/src/components/ViewModeToggle.tsx
new file mode 100644
index 000000000..73ba8192f
--- /dev/null
+++ b/frontend/src/components/ViewModeToggle.tsx
@@ -0,0 +1,59 @@
+
+
+// src/components/ViewModeToggle.tsx
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/app/store';
+import { setViewMode, ViewMode } from '@/features/viewModeSlice';
+
+import {
+  Calendar,
+  Grid,
+  List,
+  LayoutGrid,
+} from 'lucide-react'; // ICONS
+
+const modes: { key: ViewMode; icon: React.ReactNode; label: string }[] = [
+  { key: 'chronological', icon: <Calendar size={18} />, label: 'Chronological' },
+  { key: 'grid', icon: <Grid size={18} />, label: 'Grid' },
+  { key: 'list', icon: <List size={18} />, label: 'List' },
+  { key: 'masonry', icon: <LayoutGrid size={18} />, label: 'Masonry' },
+];
+
+export const ViewModeToggle: React.FC = () => {
+  const dispatch = useDispatch();
+  const active = useSelector((s: RootState) => s.viewMode.mode);
+
+  return (
+    <div className="flex items-center gap-2 px-2 py-1">
+      {modes.map((m) => {
+        const isActive = active === m.key;
+
+        return (
+          <button
+            key={m.key}
+            onClick={() => dispatch(setViewMode(m.key))}
+            aria-pressed={isActive}
+            title={m.label}
+            className={`
+              p-2 rounded-md transition-all duration-150
+
+              flex items-center justify-center
+              text-gray-700 dark:text-gray-300
+
+              ${
+                isActive
+                  ? 'bg-blue-600 text-white dark:bg-blue-800'
+                  : 'hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900/40 dark:hover:text-blue-300'
+              }
+            `}
+          >
+            {m.icon}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ViewModeToggle;
diff --git a/frontend/src/features/viewModeSlice.ts b/frontend/src/features/viewModeSlice.ts
new file mode 100644
index 000000000..d3f850d6e
--- /dev/null
+++ b/frontend/src/features/viewModeSlice.ts
@@ -0,0 +1,25 @@
+// src/features/viewModeSlice.ts
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type ViewMode = 'chronological' | 'grid' | 'list' | 'masonry';
+
+interface ViewModeState {
+  mode: ViewMode;
+}
+
+const initialState: ViewModeState = {
+  mode: 'chronological',
+};
+
+const viewModeSlice = createSlice({
+  name: 'viewMode',
+  initialState,
+  reducers: {
+    setViewMode: (state, action: PayloadAction<ViewMode>) => {
+      state.mode = action.payload;
+    },
+  },
+});
+
+export const { setViewMode } = viewModeSlice.actions;
+export default viewModeSlice.reducer;
diff --git a/frontend/src/pages/Home/Home.tsx b/frontend/src/pages/Home/Home.tsx
index 83c9e5c83..eb6a28296 100644
--- a/frontend/src/pages/Home/Home.tsx
+++ b/frontend/src/pages/Home/Home.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  ChronologicalGallery,
+  // ChronologicalGallery,
   MonthMarker,
 } from '@/components/Media/ChronologicalGallery';
 import TimelineScrollbar from '@/components/Timeline/TimelineScrollbar';
@@ -14,6 +14,9 @@ import { RootState } from '@/app/store';
 import { EmptyGalleryState } from '@/components/EmptyStates/EmptyGalleryState';
 import { useMutationFeedback } from '@/hooks/useMutationFeedback';
 
+import { ViewModeToggle } from '@/components/ViewModeToggle';
+import { GalleryView } from '@/components/GalleryView';
+
 export const Home = () => {
   const dispatch = useDispatch();
   const images = useSelector(selectImages);
@@ -28,6 +31,7 @@ export const Home = () => {
     enabled: !isSearchActive,
   });
 
+  //  Keep main branch improvement
   useMutationFeedback(
     { isPending: isLoading, isSuccess, isError, error },
     {
@@ -35,7 +39,7 @@ export const Home = () => {
       showSuccess: false,
       errorTitle: 'Error',
       errorMessage: 'Failed to load images. Please try again later.',
-    },
+    }
   );
 
   useEffect(() => {
@@ -52,25 +56,24 @@ export const Home = () => {
 
   return (
     <div className="relative flex h-full flex-col pr-6">
-      {/* Gallery Section */}
+      <ViewModeToggle />
+
       <div
         ref={scrollableRef}
         className="hide-scrollbar flex-1 overflow-x-hidden overflow-y-auto"
       >
         {images.length > 0 ? (
-          <ChronologicalGallery
-            images={images}
-            showTitle={true}
+          <GalleryView
+            images={images as any}
             title={title}
+            scrollableRef={scrollableRef}
             onMonthOffsetsChange={setMonthMarkers}
-            scrollContainerRef={scrollableRef}
           />
         ) : (
           <EmptyGalleryState />
         )}
       </div>
 
-      {/* Timeline Scrollbar */}
       {monthMarkers.length > 0 && (
         <TimelineScrollbar
           scrollableRef={scrollableRef}
@@ -81,3 +84,5 @@ export const Home = () => {
     </div>
   );
 };
+
+export default Home;