diff --git a/mobile/openapi/lib/api/timeline_api.dart b/mobile/openapi/lib/api/timeline_api.dart
index 8c94e09bf5..0396250c7d 100644
--- a/mobile/openapi/lib/api/timeline_api.dart
+++ b/mobile/openapi/lib/api/timeline_api.dart
@@ -44,7 +44,15 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<Response> getTimeBucketWithHttpInfo(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  ///
+  /// * [double] x1:
+  ///
+  /// * [double] x2:
+  ///
+  /// * [double] y1:
+  ///
+  /// * [double] y2:
+  Future<Response> getTimeBucketWithHttpInfo(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, double? x1, double? x2, double? y1, double? y2, }) async {
     // ignore: prefer_const_declarations
     final path = r'/timeline/bucket';
 
@@ -90,6 +98,18 @@ class TimelineApi {
     if (withStacked != null) {
       queryParams.addAll(_queryParams('', 'withStacked', withStacked));
     }
+    if (x1 != null) {
+      queryParams.addAll(_queryParams('', 'x1', x1));
+    }
+    if (x2 != null) {
+      queryParams.addAll(_queryParams('', 'x2', x2));
+    }
+    if (y1 != null) {
+      queryParams.addAll(_queryParams('', 'y1', y1));
+    }
+    if (y2 != null) {
+      queryParams.addAll(_queryParams('', 'y2', y2));
+    }
 
     const contentTypes = <String>[];
 
@@ -132,8 +152,16 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<List<AssetResponseDto>?> getTimeBucket(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketWithHttpInfo(size, timeBucket,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
+  ///
+  /// * [double] x1:
+  ///
+  /// * [double] x2:
+  ///
+  /// * [double] y1:
+  ///
+  /// * [double] y2:
+  Future<List<AssetResponseDto>?> getTimeBucket(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, double? x1, double? x2, double? y1, double? y2, }) async {
+    final response = await getTimeBucketWithHttpInfo(size, timeBucket,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, x1: x1, x2: x2, y1: y1, y2: y2, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -176,7 +204,15 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<Response> getTimeBucketsWithHttpInfo(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  ///
+  /// * [double] x1:
+  ///
+  /// * [double] x2:
+  ///
+  /// * [double] y1:
+  ///
+  /// * [double] y2:
+  Future<Response> getTimeBucketsWithHttpInfo(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, double? x1, double? x2, double? y1, double? y2, }) async {
     // ignore: prefer_const_declarations
     final path = r'/timeline/buckets';
 
@@ -221,6 +257,18 @@ class TimelineApi {
     if (withStacked != null) {
       queryParams.addAll(_queryParams('', 'withStacked', withStacked));
     }
+    if (x1 != null) {
+      queryParams.addAll(_queryParams('', 'x1', x1));
+    }
+    if (x2 != null) {
+      queryParams.addAll(_queryParams('', 'x2', x2));
+    }
+    if (y1 != null) {
+      queryParams.addAll(_queryParams('', 'y1', y1));
+    }
+    if (y2 != null) {
+      queryParams.addAll(_queryParams('', 'y2', y2));
+    }
 
     const contentTypes = <String>[];
 
@@ -261,8 +309,16 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<List<TimeBucketResponseDto>?> getTimeBuckets(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketsWithHttpInfo(size,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
+  ///
+  /// * [double] x1:
+  ///
+  /// * [double] x2:
+  ///
+  /// * [double] y1:
+  ///
+  /// * [double] y2:
+  Future<List<TimeBucketResponseDto>?> getTimeBuckets(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, double? x1, double? x2, double? y1, double? y2, }) async {
+    final response = await getTimeBucketsWithHttpInfo(size,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, x1: x1, x2: x2, y1: y1, y2: y2, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
diff --git a/open-api/immich-openapi-specs.json b/open-api/immich-openapi-specs.json
index b80bb52a11..278f08c485 100644
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@@ -6632,6 +6632,50 @@
             "schema": {
               "type": "boolean"
             }
+          },
+          {
+            "name": "x1",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -180,
+              "maximum": 180,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "x2",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -180,
+              "maximum": 180,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "y1",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -90,
+              "maximum": 90,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "y2",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -90,
+              "maximum": 90,
+              "format": "double",
+              "type": "number"
+            }
           }
         ],
         "responses": {
@@ -6768,6 +6812,50 @@
             "schema": {
               "type": "boolean"
             }
+          },
+          {
+            "name": "x1",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -180,
+              "maximum": 180,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "x2",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -180,
+              "maximum": 180,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "y1",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -90,
+              "maximum": 90,
+              "format": "double",
+              "type": "number"
+            }
+          },
+          {
+            "name": "y2",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": -90,
+              "maximum": 90,
+              "format": "double",
+              "type": "number"
+            }
           }
         ],
         "responses": {
diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts
index 7cf4d48eda..e7eb876d7d 100644
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -2986,7 +2986,7 @@ export function tagAssets({ id, bulkIdsDto }: {
         body: bulkIdsDto
     })));
 }
-export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, timeBucket, userId, withPartners, withStacked }: {
+export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, timeBucket, userId, withPartners, withStacked, x1, x2, y1, y2 }: {
     albumId?: string;
     isArchived?: boolean;
     isFavorite?: boolean;
@@ -3000,6 +3000,10 @@ export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key,
     userId?: string;
     withPartners?: boolean;
     withStacked?: boolean;
+    x1?: number;
+    x2?: number;
+    y1?: number;
+    y2?: number;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
@@ -3017,12 +3021,16 @@ export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key,
         timeBucket,
         userId,
         withPartners,
-        withStacked
+        withStacked,
+        x1,
+        x2,
+        y1,
+        y2
     }))}`, {
         ...opts
     }));
 }
-export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, userId, withPartners, withStacked }: {
+export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, userId, withPartners, withStacked, x1, x2, y1, y2 }: {
     albumId?: string;
     isArchived?: boolean;
     isFavorite?: boolean;
@@ -3035,6 +3043,10 @@ export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key
     userId?: string;
     withPartners?: boolean;
     withStacked?: boolean;
+    x1?: number;
+    x2?: number;
+    y1?: number;
+    y2?: number;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
@@ -3051,7 +3063,11 @@ export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key
         tagId,
         userId,
         withPartners,
-        withStacked
+        withStacked,
+        x1,
+        x2,
+        y1,
+        y2
     }))}`, {
         ...opts
     }));
diff --git a/server/src/dtos/time-bucket.dto.ts b/server/src/dtos/time-bucket.dto.ts
index dd7a01df35..fcc1c32fbe 100644
--- a/server/src/dtos/time-bucket.dto.ts
+++ b/server/src/dtos/time-bucket.dto.ts
@@ -1,5 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsEnum, IsNotEmpty, IsString } from 'class-validator';
+import { Type } from 'class-transformer';
+import { IsEnum, IsNotEmpty, IsNumber, IsString, Max, Min } from 'class-validator';
 import { AssetOrder } from 'src/enum';
 import { TimeBucketSize } from 'src/interfaces/asset.interface';
 import { Optional, ValidateBoolean, ValidateUUID } from 'src/validation';
@@ -41,6 +42,38 @@ export class TimeBucketDto {
   @Optional()
   @ApiProperty({ enum: AssetOrder, enumName: 'AssetOrder' })
   order?: AssetOrder;
+
+  @Optional()
+  @IsNumber()
+  @Min(-180)
+  @Max(180)
+  @Type(() => Number)
+  @ApiProperty({ type: 'number', format: 'double' })
+  x1?: number;
+
+  @Optional()
+  @IsNumber()
+  @Min(-90)
+  @Max(90)
+  @Type(() => Number)
+  @ApiProperty({ type: 'number', format: 'double' })
+  y1?: number;
+
+  @Optional()
+  @IsNumber()
+  @Min(-180)
+  @Max(180)
+  @Type(() => Number)
+  @ApiProperty({ type: 'number', format: 'double' })
+  x2?: number;
+
+  @Optional()
+  @IsNumber()
+  @Min(-90)
+  @Max(90)
+  @Type(() => Number)
+  @ApiProperty({ type: 'number', format: 'double' })
+  y2?: number;
 }
 
 export class TimeBucketAssetDto extends TimeBucketDto {
diff --git a/server/src/interfaces/asset.interface.ts b/server/src/interfaces/asset.interface.ts
index 9f7213de82..c8671e96d8 100644
--- a/server/src/interfaces/asset.interface.ts
+++ b/server/src/interfaces/asset.interface.ts
@@ -57,6 +57,10 @@ export interface AssetBuilderOptions {
   withStacked?: boolean;
   exifInfo?: boolean;
   assetType?: AssetType;
+  x1?: number;
+  x2?: number;
+  y1?: number;
+  y2?: number;
 }
 
 export interface TimeBucketOptions extends AssetBuilderOptions {
diff --git a/server/src/queries/asset.repository.sql b/server/src/queries/asset.repository.sql
index da5ec1d4d1..befcff9316 100644
--- a/server/src/queries/asset.repository.sql
+++ b/server/src/queries/asset.repository.sql
@@ -694,7 +694,13 @@ FROM
   LEFT JOIN "assets" "stackedAssets" ON "stackedAssets"."stackId" = "stack"."id"
   AND ("stackedAssets"."deletedAt" IS NULL)
 WHERE
-  ("asset"."isVisible" = true)
+  (
+    "asset"."isVisible" = true
+    AND "exifInfo"."longitude" > $1
+    AND "exifInfo"."longitude" < $2
+    AND "exifInfo"."latitude" > $3
+    AND "exifInfo"."latitude" < $4
+  )
   AND ("asset"."deletedAt" IS NULL)
 GROUP BY
   (
diff --git a/server/src/repositories/asset.repository.ts b/server/src/repositories/asset.repository.ts
index 059a05f9e7..329e504faa 100644
--- a/server/src/repositories/asset.repository.ts
+++ b/server/src/repositories/asset.repository.ts
@@ -633,7 +633,7 @@ export class AssetRepository implements IAssetRepository {
     return builder.orderBy('RANDOM()').limit(count).getMany();
   }
 
-  @GenerateSql({ params: [{ size: TimeBucketSize.MONTH }] })
+  @GenerateSql({ params: [{ size: TimeBucketSize.MONTH, x1: 1, x2: 2, y1: 2, y2: 1 }] })
   getTimeBuckets(options: TimeBucketOptions): Promise<TimeBucketItem[]> {
     const truncated = dateTrunc(options);
     return this.getBuilder(options)
@@ -789,6 +789,34 @@ export class AssetRepository implements IAssetRepository {
       );
     }
 
+    if (options.x1 && options.x2 && options.y1 && options.y2) {
+      /**
+       /* the API already makes sure that -180 < x1, x2 < 180
+       /* the first case is when you search an asset with the International Date Line (x1 is on the west side, x2 on the east)
+       */
+      if (options.x1 > options.x2) {
+        builder.andWhere(
+          '(exifInfo.longitude > :x1 OR exifInfo.longitude < :x2) AND exifInfo.latitude > :y2 AND exifInfo.latitude < :y1',
+          {
+            x1: options.x1,
+            x2: options.x2,
+            y1: options.y1,
+            y2: options.y2,
+          },
+        );
+      } else {
+        builder.andWhere(
+          'exifInfo.longitude > :x1 AND exifInfo.longitude < :x2 AND exifInfo.latitude > :y2 AND exifInfo.latitude < :y1',
+          {
+            x1: options.x1,
+            x2: options.x2,
+            y1: options.y1,
+            y2: options.y2,
+          },
+        );
+      }
+    }
+
     return builder;
   }
 
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 205eb26699..c4bfefacbb 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -197,8 +197,8 @@
             <a
               class="w-[90px]"
               href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
-                ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
-                : AppRoute.PHOTOS}"
+                ? `${encodeURIComponent(`${AppRoute.ALBUMS}/${currentAlbum?.id}`)}`
+                : encodeURIComponent(AppRoute.PHOTOS)}"
               on:focus={() => ($boundingBoxesArray = people[index].faces)}
               on:blur={() => ($boundingBoxesArray = [])}
               on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index 21f48e42eb..d90264e600 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -42,7 +42,7 @@
   use:focusOutside={{ onFocusOut: () => (showVerticalDots = false) }}
 >
   <a
-    href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={AppRoute.PEOPLE}"
+    href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={encodeURIComponent(AppRoute.PEOPLE)}"
     draggable="false"
     on:focus={() => (showVerticalDots = true)}
   >
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 5bca13b060..60883f973a 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -14,6 +14,7 @@
   export let description: string | undefined = undefined;
   export let scrollbar = true;
   export let admin = false;
+  export let showCustomSidebar: boolean = false;
 
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
@@ -34,7 +35,9 @@
     {#if admin}
       <AdminSideBar />
     {:else}
-      <SideBar />
+      <SideBar {showCustomSidebar}>
+        <slot name="customSidebar" slot="customSidebar" />
+      </SideBar>
     {/if}
   </slot>
 
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index d769d8a559..f355c9a8cc 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -4,17 +4,16 @@
 
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { Theme } from '$lib/constants';
+  import { AppRoute, AssetGridOptionsValues, QueryParameter, Theme } from '$lib/constants';
   import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
   import { getAssetThumbnailUrl, getKey, handlePromiseError } from '$lib/utils';
   import { getMapStyle, MapTheme, type MapMarkerResponseDto } from '@immich/sdk';
   import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
-  import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
+  import { mdiArrowDown, mdiArrowUp, mdiCog, mdiMap, mdiMapMarker, mdiOpenInNew } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
   import maplibregl from 'maplibre-gl';
-  import { createEventDispatcher } from 'svelte';
-  import { t } from 'svelte-i18n';
+  import { createEventDispatcher, onMount } from 'svelte';
   import {
     AttributionControl,
     Control,
@@ -30,6 +29,11 @@
     ScaleControl,
     type Map,
   } from 'svelte-maplibre';
+  import { t } from 'svelte-i18n';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
 
   export let mapMarkers: MapMarkerResponseDto[];
   export let showSettingsModal: boolean | undefined = undefined;
@@ -39,6 +43,19 @@
   export let simplified = false;
   export let clickable = false;
   export let useLocationPin = false;
+
+  // if you want to have the assetGrid with the map
+  export let showAssetGrid = false;
+
+  // to open the assetGrid on pageLoad
+  export let isAssetGridOpenedOnInit = false;
+
+  onMount(() => {
+    if (isAssetGridOpenedOnInit) {
+      handleOpenAssetGird();
+    }
+  });
+
   export function addClipMapMarker(lng: number, lat: number) {
     if (map) {
       if (marker) {
@@ -56,6 +73,34 @@
   let map: maplibregl.Map;
   let marker: maplibregl.Marker | null = null;
 
+  let x1: number | undefined = undefined;
+  let x2: number | undefined = undefined;
+  let y1: number | undefined = undefined;
+  let y2: number | undefined = undefined;
+  let currentAssets: MapMarkerResponseDto[] = [];
+  let previousUrl: string | undefined = undefined;
+  let isAssetGridOpened: boolean = false;
+  let numberOfAssets: number | undefined = undefined;
+
+  let timelineStore: AssetStore | undefined = undefined;
+  const timelineInteractionStore = createAssetInteractionStore();
+
+  $: {
+    let url = `${AppRoute.PHOTOS}?${QueryParameter.COORDINATESX1}=${x1}&${QueryParameter.COORDINATESX2}=${x2}&${QueryParameter.COORDINATESY1}=${y1}&${QueryParameter.COORDINATESY2}=${y2}&${QueryParameter.PREVIOUS_ROUTE}=${encodeURIComponent(`${AppRoute.MAP}?${QueryParameter.IS_TIMELINE_OPENED}=${isAssetGridOpened}${location.hash}`)}`;
+    let options: string[] = [];
+    if ($mapSettings.withPartners) {
+      options.push(AssetGridOptionsValues.withPartners);
+    }
+    if ($mapSettings.onlyFavorites) {
+      options.push(AssetGridOptionsValues.onlyFavorites);
+    }
+    if (options.length > 0) {
+      url += `&${QueryParameter.ASSET_GRID_OPTIONS}=${options.join(',')}`;
+    }
+
+    previousUrl = url;
+  }
+
   $: style = (() =>
     getMapStyle({
       theme: ($mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT) as unknown as MapTheme,
@@ -125,6 +170,84 @@
       country: featurePoint.properties.country,
     };
   };
+
+  const isAssetinBounds = (mapMarker: MapMarkerResponseDto, x1: number, x2: number, y1: number, y2: number) => {
+    // if x1 is before the international date line, and x2 after it, you want to check if the asset is after x1 OR after x2
+    const isLonWithinBounds =
+      x1 > x2 ? mapMarker.lon >= x1 || mapMarker.lon <= x2 : mapMarker.lon >= x1 && mapMarker.lon <= x2;
+    const isLatWithinBounds = mapMarker.lat >= y2 && mapMarker.lat <= y1;
+
+    return isLonWithinBounds && isLatWithinBounds;
+  };
+
+  const changeBounds = () => {
+    if (!showAssetGrid) {
+      return;
+    }
+    if (map) {
+      const bounds = map.getBounds();
+
+      let lng_e: number, lng_w: number, lat_e: number, lat_w: number;
+
+      /*
+       /*
+       /* longitude and latitude can be >180 and <180 with maplibre
+       /* that part fixes it to always have longitude coordinates -180 < x1, x2 < 180
+       /*
+       */
+      if (Math.abs(bounds._ne.lng) + Math.abs(bounds._sw.lng) > 360) {
+        lng_e = -180;
+        lng_w = 180;
+      } else if (Math.abs(bounds._sw.lng) > 180) {
+        lng_e = bounds._sw.lng + 360;
+        lng_w = bounds._ne.lng;
+      } else if (Math.abs(bounds._ne.lng) > 180) {
+        lng_e = bounds._sw.lng;
+        lng_w = bounds._ne.lng - 360;
+      } else {
+        lng_e = bounds._sw.lng;
+        lng_w = bounds._ne.lng;
+      }
+
+      lat_e = bounds._ne.lat;
+      lat_w = bounds._sw.lat;
+
+      // TODO: get the number of assets from the server?
+      let assetsInBounds = mapMarkers.filter((mapMarker) => isAssetinBounds(mapMarker, lng_e, lng_w, lat_e, lat_w));
+      numberOfAssets = assetsInBounds.length;
+
+      [x1, x2, y1, y2] = [lng_e, lng_w, lat_e, lat_w];
+
+      // refresh only if the assets displayed on screen has changed to avoid refresh the AssetGrid when nothing has changed on screen
+      if (currentAssets.length === 0 || assetsInBounds.toString() !== currentAssets.toString()) {
+        newGrid();
+        currentAssets = assetsInBounds;
+      }
+    }
+  };
+
+  const newGrid = () => {
+    // TODO: missing includeArchived and withSharedAlbums
+    const isFavorite = $mapSettings.onlyFavorites ? true : undefined;
+    timelineStore = new AssetStore({
+      isArchived: false,
+      withPartners: $mapSettings.withPartners,
+      isFavorite,
+      x1,
+      x2,
+      y1,
+      y2,
+    });
+  };
+
+  const handleOpenAssetGird = () => {
+    isAssetGridOpened = !isAssetGridOpened;
+
+    if (isAssetGridOpened) {
+      changeBounds();
+      newGrid();
+    }
+  };
 </script>
 
 {#await style then style}
@@ -140,6 +263,7 @@
     on:load={(event) => event.detail.setMaxZoom(18)}
     on:load={(event) => event.detail.on('click', handleMapClick)}
     bind:map
+    on:moveend={changeBounds}
   >
     <NavigationControl position="top-left" showCompass={!simplified} />
 
@@ -222,6 +346,51 @@
         {/if}
       </MarkerLayer>
     </GeoJSON>
+
+    {#if showAssetGrid && !$mapSettings.withSharedAlbums && !$mapSettings.includeArchived}
+      <div
+        class="absolute transition ease-in-out inset-x-0 bottom-0 px-2 rounded-t-lg rounded-x-lg z-50 {isAssetGridOpened
+          ? 'h-[50%] bg-immich-bg dark:bg-immich-dark-bg border-t-2 border-x-2 dark:border-immich-dark-gray'
+          : ''}"
+      >
+        <div class="grid grid-cols-3 gap-4 py-2 w-full content-start dark:text-immich-dark-primary">
+          <div>
+            {#if isAssetGridOpened}
+              <div
+                title={$t('number_of_assets')}
+                class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray text-center h-8 w-8 p-2 rounded-full"
+              >
+                {numberOfAssets}
+              </div>
+            {/if}
+          </div>
+          <div class=" text-white text-center">
+            <Button class="h-14 w-14 p-2" rounded="full" size="tiny" on:click={handleOpenAssetGird}>
+              <Icon path={isAssetGridOpened ? mdiArrowDown : mdiArrowUp} size="36" />
+            </Button>
+          </div>
+          <div class="text-right">
+            {#if isAssetGridOpened && numberOfAssets && previousUrl}
+              <a href={previousUrl}>
+                <Button class="h-8 w-8 p-2 " rounded="full" size="tiny" on:click={handleOpenAssetGird}>
+                  <Icon path={mdiOpenInNew} size="12" />
+                </Button>
+              </a>
+            {/if}
+          </div>
+        </div>
+        {#if isAssetGridOpened && timelineStore}
+          {#key timelineStore}
+            <AssetGrid
+              enableRouting={false}
+              isSelectionMode={false}
+              assetStore={timelineStore}
+              assetInteractionStore={timelineInteractionStore}
+            />
+          {/key}
+        {/if}
+      </div>
+    {/if}
   </MapLibre>
   <style>
     .location-pin {
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
new file mode 100644
index 0000000000..6b788bcc79
--- /dev/null
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiInformationOutline } from '@mdi/js';
+
+  export let title: string;
+  export let icon: string;
+  export let flippedLogo = false;
+  export let isSelected = false;
+  export let onClick: (() => void) | undefined = undefined;
+  export let moreInformation: boolean;
+
+  let showMoreInformation = false;
+</script>
+
+<button
+  type="button"
+  draggable="false"
+  aria-current={isSelected ? 'page' : undefined}
+  class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
+    {isSelected
+    ? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
+    : ''}
+		pl-5 group-hover:sm:px-5 md:px-5
+  "
+  on:click={onClick}
+>
+  <div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
+    <Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
+    <span class="text-sm font-medium">{title}</span>
+  </div>
+
+  <div
+    class="h-0 overflow-hidden transition-[height] delay-1000 duration-100 sm:group-hover:h-auto group-hover:sm:overflow-visible md:h-auto md:overflow-visible"
+  >
+    {#if moreInformation}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="relative flex cursor-default select-none justify-center"
+        on:mouseenter={() => (showMoreInformation = true)}
+        on:mouseleave={() => (showMoreInformation = false)}
+      >
+        <div class="p-1 text-gray-600 hover:cursor-help dark:text-gray-400">
+          <Icon path={mdiInformationOutline} />
+        </div>
+
+        {#if showMoreInformation}
+          <div class="absolute right-6 top-0">
+            <div
+              class="flex place-content-center place-items-center whitespace-nowrap rounded-3xl border bg-immich-bg px-6 py-3 text-xs text-immich-fg shadow-lg dark:border-immich-dark-gray dark:bg-gray-600 dark:text-immich-dark-fg"
+              class:hidden={!showMoreInformation}
+              transition:fade={{ duration: 200 }}
+            >
+              <slot name="moreInformation" />
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</button>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-link.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
index 4590b12255..dd4df53fcf 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiInformationOutline } from '@mdi/js';
   import { resolveRoute } from '$app/paths';
   import { page } from '$app/stores';
+  import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 
   export let title: string;
   export let routeId: string;
@@ -12,7 +10,6 @@
   export let isSelected = false;
   export let preloadData = true;
 
-  let showMoreInformation = false;
   $: routePath = resolveRoute(routeId, {});
   $: isSelected = ($page.route.id?.match(/^\/(admin|\(user\))\/[^/]*/) || [])[0] === routeId;
 </script>
@@ -22,44 +19,8 @@
   data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
   draggable="false"
   aria-current={isSelected ? 'page' : undefined}
-  class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
-    {isSelected
-    ? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
-    : ''}
-		pl-5 group-hover:sm:px-5 md:px-5
-  "
 >
-  <div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
-    <Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
-    <span class="text-sm font-medium">{title}</span>
-  </div>
-
-  <div
-    class="h-0 overflow-hidden transition-[height] delay-1000 duration-100 sm:group-hover:h-auto group-hover:sm:overflow-visible md:h-auto md:overflow-visible"
-  >
-    {#if $$slots.moreInformation}
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        class="relative flex cursor-default select-none justify-center"
-        on:mouseenter={() => (showMoreInformation = true)}
-        on:mouseleave={() => (showMoreInformation = false)}
-      >
-        <div class="p-1 text-gray-600 hover:cursor-help dark:text-gray-400">
-          <Icon path={mdiInformationOutline} />
-        </div>
-
-        {#if showMoreInformation}
-          <div class="absolute right-6 top-0">
-            <div
-              class="flex place-content-center place-items-center whitespace-nowrap rounded-3xl border bg-immich-bg px-6 py-3 text-xs text-immich-fg shadow-lg dark:border-immich-dark-gray dark:bg-gray-600 dark:text-immich-dark-fg"
-              class:hidden={!showMoreInformation}
-              transition:fade={{ duration: 200 }}
-            >
-              <slot name="moreInformation" />
-            </div>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
+  <SideBarButton {title} {icon} {flippedLogo} {isSelected} moreInformation={$$slots.moreInformation}>
+    <slot name="moreInformation" slot="moreInformation" />
+  </SideBarButton>
 </a>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index fab7c6ed6d..053a2622c1 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -38,113 +38,119 @@
   let isSharingSelected: boolean;
   let isTrashSelected: boolean;
   let isUtilitiesSelected: boolean;
+
+  export let showCustomSidebar: boolean = false;
 </script>
 
 <SideBarSection>
   <nav aria-label={$t('primary')}>
-    <SideBarLink
-      title={$t('photos')}
-      routeId="/(user)/photos"
-      bind:isSelected={isPhotosSelected}
-      icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
-    >
-      <svelte:fragment slot="moreInformation">
-        <MoreInformationAssets assetStats={{ isArchived: false }} />
-      </svelte:fragment>
-    </SideBarLink>
-
-    {#if $featureFlags.search}
-      <SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
-    {/if}
-
-    {#if $featureFlags.map}
+    {#if !showCustomSidebar}
       <SideBarLink
-        title={$t('map')}
-        routeId="/(user)/map"
-        bind:isSelected={isMapSelected}
-        icon={isMapSelected ? mdiMap : mdiMapOutline}
-      />
-    {/if}
-
-    {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
-      <SideBarLink
-        title={$t('people')}
-        routeId="/(user)/people"
-        bind:isSelected={isPeopleSelected}
-        icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
-      />
-    {/if}
-
-    <SideBarLink
-      title={$t('sharing')}
-      routeId="/(user)/sharing"
-      icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
-      bind:isSelected={isSharingSelected}
-    >
-      <svelte:fragment slot="moreInformation">
-        <MoreInformationAlbums albumType="shared" />
-      </svelte:fragment>
-    </SideBarLink>
-
-    <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
-      <p class="hidden p-6 group-hover:sm:block md:block">{$t('library').toUpperCase()}</p>
-      <hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
-    </div>
-
-    <SideBarLink
-      title={$t('favorites')}
-      routeId="/(user)/favorites"
-      icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
-      bind:isSelected={isFavoritesSelected}
-    >
-      <svelte:fragment slot="moreInformation">
-        <MoreInformationAssets assetStats={{ isFavorite: true }} />
-      </svelte:fragment>
-    </SideBarLink>
-
-    <SideBarLink title={$t('albums')} routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
-      <svelte:fragment slot="moreInformation">
-        <MoreInformationAlbums albumType="owned" />
-      </svelte:fragment>
-    </SideBarLink>
-
-    {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
-      <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
-    {/if}
-
-    {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
-      <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
-    {/if}
-
-    <SideBarLink
-      title={$t('utilities')}
-      routeId="/(user)/utilities"
-      bind:isSelected={isUtilitiesSelected}
-      icon={isUtilitiesSelected ? mdiToolbox : mdiToolboxOutline}
-    ></SideBarLink>
-
-    <SideBarLink
-      title={$t('archive')}
-      routeId="/(user)/archive"
-      bind:isSelected={isArchiveSelected}
-      icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
-    >
-      <svelte:fragment slot="moreInformation">
-        <MoreInformationAssets assetStats={{ isArchived: true }} />
-      </svelte:fragment>
-    </SideBarLink>
-
-    {#if $featureFlags.trash}
-      <SideBarLink
-        title={$t('trash')}
-        routeId="/(user)/trash"
-        bind:isSelected={isTrashSelected}
-        icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
+        title={$t('photos')}
+        routeId="/(user)/photos"
+        bind:isSelected={isPhotosSelected}
+        icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
       >
         <svelte:fragment slot="moreInformation">
-          <MoreInformationAssets assetStats={{ isTrashed: true }} />
+          <MoreInformationAssets assetStats={{ isArchived: false }} />
         </svelte:fragment>
       </SideBarLink>
+
+      {#if $featureFlags.search}
+        <SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
+      {/if}
+
+      {#if $featureFlags.map}
+        <SideBarLink
+          title={$t('map')}
+          routeId="/(user)/map"
+          bind:isSelected={isMapSelected}
+          icon={isMapSelected ? mdiMap : mdiMapOutline}
+        />
+      {/if}
+
+      {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
+        <SideBarLink
+          title={$t('people')}
+          routeId="/(user)/people"
+          bind:isSelected={isPeopleSelected}
+          icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
+        />
+      {/if}
+
+      <SideBarLink
+        title={$t('sharing')}
+        routeId="/(user)/sharing"
+        icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
+        bind:isSelected={isSharingSelected}
+      >
+        <svelte:fragment slot="moreInformation">
+          <MoreInformationAlbums albumType="shared" />
+        </svelte:fragment>
+      </SideBarLink>
+
+      <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
+        <p class="hidden p-6 group-hover:sm:block md:block">{$t('library').toUpperCase()}</p>
+        <hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
+      </div>
+
+      <SideBarLink
+        title={$t('favorites')}
+        routeId="/(user)/favorites"
+        icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
+        bind:isSelected={isFavoritesSelected}
+      >
+        <svelte:fragment slot="moreInformation">
+          <MoreInformationAssets assetStats={{ isFavorite: true }} />
+        </svelte:fragment>
+      </SideBarLink>
+
+      <SideBarLink title={$t('albums')} routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
+        <svelte:fragment slot="moreInformation">
+          <MoreInformationAlbums albumType="owned" />
+        </svelte:fragment>
+      </SideBarLink>
+
+      {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
+        <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
+      {/if}
+
+      {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
+        <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
+      {/if}
+
+      <SideBarLink
+        title={$t('utilities')}
+        routeId="/(user)/utilities"
+        bind:isSelected={isUtilitiesSelected}
+        icon={isUtilitiesSelected ? mdiToolbox : mdiToolboxOutline}
+      ></SideBarLink>
+
+      <SideBarLink
+        title={$t('archive')}
+        routeId="/(user)/archive"
+        bind:isSelected={isArchiveSelected}
+        icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
+      >
+        <svelte:fragment slot="moreInformation">
+          <MoreInformationAssets assetStats={{ isArchived: true }} />
+        </svelte:fragment>
+      </SideBarLink>
+
+      {#if $featureFlags.trash}
+        <SideBarLink
+          title={$t('trash')}
+          routeId="/(user)/trash"
+          bind:isSelected={isTrashSelected}
+          icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
+        >
+          <svelte:fragment slot="moreInformation">
+            <MoreInformationAssets assetStats={{ isTrashed: true }} />
+          </svelte:fragment>
+        </SideBarLink>
+      {/if}
+    {:else}
+      <slot name="customSidebar" />
     {/if}
   </nav>
 
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 05011680dc..0cb418d291 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -69,10 +69,51 @@ export const dateFormats = {
   },
 };
 
+interface Coordinates {
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}
+
+export enum AssetGridOptionsValues {
+  onlyFavorites = 'onlyFavorites',
+  withPartners = 'withPartners',
+}
+
+export interface AssetGridOptions {
+  onlyFavorites: boolean;
+  withPartners: boolean;
+}
+
+export interface IQueryParameter {
+  previousRoute?: string;
+  coordinates?: Coordinates;
+  assetGridOptions?: AssetGridOptions;
+}
+
+export const createAssetGridOptionsFromArray = (enumArray: string[]): AssetGridOptions => {
+  const defaultValues: AssetGridOptions = {} as AssetGridOptions;
+
+  for (const key of Object.keys(AssetGridOptionsValues)) {
+    defaultValues[key as keyof AssetGridOptions] = false;
+  }
+
+  for (const enumValue of Object.values(AssetGridOptionsValues)) {
+    if (enumArray.includes(enumValue)) {
+      defaultValues[enumValue as keyof AssetGridOptions] = true;
+    }
+  }
+
+  return defaultValues;
+};
+
 export enum QueryParameter {
   ACTION = 'action',
   ASSET_INDEX = 'assetIndex',
+  ASSET_GRID_OPTIONS = 'assetGridOptions',
   IS_OPEN = 'isOpen',
+  IS_TIMELINE_OPENED = 'isTimelineOpened',
   MEMORY_INDEX = 'memoryIndex',
   ONBOARDING_STEP = 'step',
   OPEN_SETTING = 'openSetting',
@@ -82,6 +123,10 @@ export enum QueryParameter {
   SMART_SEARCH = 'smartSearch',
   PAGE = 'page',
   PATH = 'path',
+  COORDINATESX1 = 'coordinatesx1',
+  COORDINATESX2 = 'coordinatesx2',
+  COORDINATESY1 = 'coordinatesy1',
+  COORDINATESY2 = 'coordinatesY2',
 }
 
 export enum OpenSettingQueryParameterValue {
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index dbd6f32fde..d943197a1f 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -758,6 +758,7 @@
   "include_archived": "Include archived",
   "include_shared_albums": "Include shared albums",
   "include_shared_partner_assets": "Include shared partner assets",
+  "include_timeline": "Include timeline",
   "individual_share": "Individual share",
   "info": "Info",
   "interval": {
@@ -872,6 +873,7 @@
   "notification_toggle_setting_description": "Enable email notifications",
   "notifications": "Notifications",
   "notifications_setting_description": "Manage notifications",
+  "number_of_assets": "Number of assets",
   "oauth": "OAuth",
   "offline": "Offline",
   "offline_paths": "Offline paths",
diff --git a/web/src/lib/i18n/fr.json b/web/src/lib/i18n/fr.json
index c9fe916c03..29d4ef0ca1 100644
--- a/web/src/lib/i18n/fr.json
+++ b/web/src/lib/i18n/fr.json
@@ -792,6 +792,7 @@
   "include_archived": "Inclure les archives",
   "include_shared_albums": "Inclure les albums partagés",
   "include_shared_partner_assets": "Inclure les médias partagés du partenaire",
+  "include_timeline": "Inclure la chronologie",
   "individual_share": "Partage individuel",
   "info": "Information",
   "interval": {
@@ -931,6 +932,7 @@
   "notification_toggle_setting_description": "Activer les notifications par courriel",
   "notifications": "Notifications",
   "notifications_setting_description": "Gérer les notifications",
+  "number_of_assets": "Nombre de médias",
   "oauth": "OAuth",
   "offline": "Hors ligne",
   "offline_paths": "Chemins hors ligne",
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 395d9796f4..8b9b6ab8f8 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -336,3 +336,13 @@ export const suggestDuplicateByFileSize = (assets: AssetResponseDto[]): AssetRes
 
 // eslint-disable-next-line unicorn/prefer-code-point
 export const decodeBase64 = (data: string) => Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+
+export const parseNumberOrUndefined = (value: string | null): number | undefined => {
+  return value !== null && !Number.isNaN(Number(value)) ? Number(value) : undefined;
+};
+
+export const checkEnumInArray = <T extends Record<string, string>>(enumArray: string[], enumType: T): boolean => {
+  const enumValues = Object.values(enumType) as string[];
+
+  return enumArray.some((value) => enumValues.includes(value));
+};
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 0ea0ed18bb..4f12c44bdd 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -113,7 +113,14 @@
 {#if $featureFlags.loaded && $featureFlags.map}
   <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
-      <Map hash bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
+      <Map
+        hash
+        showAssetGrid
+        bind:mapMarkers
+        bind:showSettingsModal
+        isAssetGridOpenedOnInit={data.isTimelineOpened}
+        on:selected={(event) => onViewAssets(event.detail)}
+      />
     </div>
   </UserPageLayout>
   <Portal target="body">
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
index 490e1430e6..887e60ca43 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,15 +1,18 @@
+import { QueryParameter } from '$lib/constants';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params }) => {
+export const load = (async ({ params, url }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
   const $t = await getFormatter();
 
+  const isTimelineOpened = url.searchParams.get(QueryParameter.IS_TIMELINE_OPENED) === 'true';
   return {
     asset,
+    isTimelineOpened,
     meta: {
       title: $t('map'),
     },
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index f1a2674e24..0463d89045 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -194,7 +194,7 @@
 
   const handleMergePeople = async (detail: PersonResponseDto) => {
     await goto(
-      `${AppRoute.PEOPLE}/${detail.id}?${QueryParameter.ACTION}=${ActionQueryParameterValue.MERGE}&${QueryParameter.PREVIOUS_ROUTE}=${AppRoute.PEOPLE}`,
+      `${AppRoute.PEOPLE}/${detail.id}?${QueryParameter.ACTION}=${ActionQueryParameterValue.MERGE}&${QueryParameter.PREVIOUS_ROUTE}=${encodeURIComponent(AppRoute.PEOPLE)}`,
     );
   };
 
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index daa5821e85..4ed1e86fcf 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -116,10 +116,10 @@
   onMount(() => {
     const action = $page.url.searchParams.get(QueryParameter.ACTION);
     const getPreviousRoute = $page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE);
-    if (getPreviousRoute && !isExternalUrl(getPreviousRoute)) {
-      previousRoute = getPreviousRoute;
+    if (getPreviousRoute && !isExternalUrl(decodeURIComponent(getPreviousRoute))) {
+      previousRoute = decodeURIComponent(getPreviousRoute);
     }
-    if (action == 'merge') {
+    if (action === 'merge') {
       viewMode = ViewMode.MERGE_PEOPLE;
     }
 
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index a1131ecfbb..a7fcf7f681 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -18,19 +18,39 @@
   import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import { AssetAction } from '$lib/constants';
+  import { AssetAction, QueryParameter } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets.store';
+  import { mdiArrowLeft, mdiClose, mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { preferences, user } from '$lib/stores/user.store';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
-  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import type { PageData } from './$types';
+  import SideBarLink from '$lib/components/shared-components/side-bar/side-bar-link.svelte';
+  import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
+
+  export let data: PageData;
+  $: options = data.options;
+
+  $: x1 = options.coordinates ? options.coordinates.x1 : undefined;
+  $: x2 = options.coordinates ? options.coordinates.x2 : undefined;
+  $: y1 = options.coordinates ? options.coordinates.y1 : undefined;
+  $: y2 = options.coordinates ? options.coordinates.y2 : undefined;
+
+  // TODO: when getTimebuckets support withArchived
+  const isArchived = false;
+  const withStacked = undefined;
+  $: withPartners = options.assetGridOptions ? options.assetGridOptions.withPartners : true;
+  $: isFavorite = options.assetGridOptions?.onlyFavorites ? true : undefined;
+  $: showCustomSidebar = options.previousRoute !== undefined || options.coordinates !== undefined;
 
   let { isViewing: showAssetViewer } = assetViewingStore;
-  const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
+  $: assetStore = new AssetStore({ isArchived, withStacked, withPartners, isFavorite, x1, x2, y1, y2 });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
@@ -63,6 +83,24 @@
   onDestroy(() => {
     assetStore.destroy();
   });
+  const closePreviousRoute = async () => {
+    const newUrl = new URL($page.url);
+    if (options.previousRoute) {
+      newUrl.searchParams.delete(QueryParameter.PREVIOUS_ROUTE);
+    }
+    if (options.coordinates) {
+      newUrl.searchParams.delete(QueryParameter.COORDINATESX1);
+      newUrl.searchParams.delete(QueryParameter.COORDINATESX2);
+      newUrl.searchParams.delete(QueryParameter.COORDINATESY1);
+      newUrl.searchParams.delete(QueryParameter.COORDINATESY2);
+    }
+    if (options.assetGridOptions) {
+      newUrl.searchParams.delete(QueryParameter.ASSET_GRID_OPTIONS);
+    }
+
+    options = {};
+    await goto(newUrl);
+  };
 </script>
 
 {#if $isMultiSelectState}
@@ -103,18 +141,30 @@
   </AssetSelectControlBar>
 {/if}
 
-<UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
-  <AssetGrid
-    enableRouting={true}
-    {assetStore}
-    {assetInteractionStore}
-    removeAction={AssetAction.ARCHIVE}
-    on:escape={handleEscape}
-    withStacked
-  >
-    {#if $preferences.memories.enabled}
-      <MemoryLane />
+<UserPageLayout {showCustomSidebar} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
+  <slot slot="customSidebar">
+    {#if options.previousRoute}
+      <a href={options.previousRoute}>
+        <SideBarLink title={$t('previous')} routeId={`/(user)${options.previousRoute}`} icon={mdiArrowLeft} />
+      </a>
     {/if}
-    <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} slot="empty" />
-  </AssetGrid>
+    {#if options.previousRoute !== undefined || options.coordinates !== undefined}
+      <SideBarButton title={$t('close')} icon={mdiClose} moreInformation={false} onClick={closePreviousRoute} />
+    {/if}
+  </slot>
+  {#key options}
+    <AssetGrid
+      enableRouting={true}
+      {assetStore}
+      {assetInteractionStore}
+      removeAction={AssetAction.ARCHIVE}
+      on:escape={handleEscape}
+      withStacked
+    >
+      {#if $preferences.memories.enabled}
+        <MemoryLane />
+      {/if}
+      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} slot="empty" />
+    </AssetGrid>
+  {/key}
 </UserPageLayout>
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts b/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
index 6e9384f853..6c94871ae7 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
@@ -1,17 +1,49 @@
+import {
+  AssetGridOptionsValues,
+  createAssetGridOptionsFromArray,
+  QueryParameter,
+  type IQueryParameter,
+} from '$lib/constants';
+import { checkEnumInArray, parseNumberOrUndefined } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { getAssetInfoFromParam, isExternalUrl } from '$lib/utils/navigation';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params }) => {
+export const load = (async ({ params, url }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
   const $t = await getFormatter();
+  const options: IQueryParameter = {};
+
+  const getPreviousRoute = url.searchParams.get(QueryParameter.PREVIOUS_ROUTE);
+  if (getPreviousRoute && !isExternalUrl(decodeURIComponent(getPreviousRoute))) {
+    options.previousRoute = decodeURIComponent(getPreviousRoute);
+  }
+
+  const assetGridOptionss = url.searchParams.get(QueryParameter.ASSET_GRID_OPTIONS)?.split(',');
+  if (assetGridOptionss && checkEnumInArray(assetGridOptionss, AssetGridOptionsValues)) {
+    options.assetGridOptions = createAssetGridOptionsFromArray(assetGridOptionss);
+  }
+
+  const x1 = parseNumberOrUndefined(url.searchParams.get(QueryParameter.COORDINATESX1));
+  const x2 = parseNumberOrUndefined(url.searchParams.get(QueryParameter.COORDINATESX2));
+  const y1 = parseNumberOrUndefined(url.searchParams.get(QueryParameter.COORDINATESY1));
+  const y2 = parseNumberOrUndefined(url.searchParams.get(QueryParameter.COORDINATESY2));
+  if (x1 && x2 && y1 && y2) {
+    options.coordinates = {
+      x1,
+      x2,
+      y1,
+      y2,
+    };
+  }
 
   return {
     asset,
     meta: {
       title: $t('photos'),
     },
+    options,
   };
 }) satisfies PageLoad;