diff --git a/app/Contracts/Http/Requests/HasTimelineAlbum.php b/app/Contracts/Http/Requests/HasTimelineAlbum.php
new file mode 100644
index 00000000000..4bdaef3f9bd
--- /dev/null
+++ b/app/Contracts/Http/Requests/HasTimelineAlbum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Contracts\Http\Requests;
+
+use App\Enum\TimelineAlbumGranularity;
+
+interface HasTimelineAlbum
+{
+	/**
+	 * @return TimelineAlbumGranularity|null
+	 */
+	public function album_timeline(): ?TimelineAlbumGranularity;
+}
diff --git a/app/Contracts/Http/Requests/HasTimelinePhoto.php b/app/Contracts/Http/Requests/HasTimelinePhoto.php
new file mode 100644
index 00000000000..f6eb28a09a2
--- /dev/null
+++ b/app/Contracts/Http/Requests/HasTimelinePhoto.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Contracts\Http\Requests;
+
+use App\Enum\TimelinePhotoGranularity;
+
+interface HasTimelinePhoto
+{
+	/**
+	 * @return TimelinePhotoGranularity|null
+	 */
+	public function photo_timeline(): ?TimelinePhotoGranularity;
+}
diff --git a/app/Contracts/Http/Requests/RequestAttribute.php b/app/Contracts/Http/Requests/RequestAttribute.php
index 88a6c353509..d8edab52231 100644
--- a/app/Contracts/Http/Requests/RequestAttribute.php
+++ b/app/Contracts/Http/Requests/RequestAttribute.php
@@ -47,6 +47,8 @@ class RequestAttribute
 	public const ALBUM_SORTING_COLUMN_ATTRIBUTE = 'album_sorting_column';
 	public const ALBUM_SORTING_ORDER_ATTRIBUTE = 'album_sorting_order';
 	public const ALBUM_PHOTO_LAYOUT = 'photo_layout';
+	public const ALBUM_TIMELINE_ALBUM = 'album_timeline';
+	public const ALBUM_TIMELINE_PHOTO = 'photo_timeline';
 
 	public const PERMISSION_ID = 'perm_id';
 	public const IS_COMPACT_ATTRIBUTE = 'is_compact';
diff --git a/app/Enum/TimelineAlbumGranularity.php b/app/Enum/TimelineAlbumGranularity.php
new file mode 100644
index 00000000000..a89dc6b935a
--- /dev/null
+++ b/app/Enum/TimelineAlbumGranularity.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Enum;
+
+/**
+ * Defines the possible granularities for album timelines.
+ */
+enum TimelineAlbumGranularity: string
+{
+	case DEFAULT = 'default';
+	case DISABLED = 'disabled';
+	case YEAR = 'year';
+	case MONTH = 'month';
+	case DAY = 'day';
+}
diff --git a/app/Enum/TimelinePhotoGranularity.php b/app/Enum/TimelinePhotoGranularity.php
new file mode 100644
index 00000000000..6ddc63ad857
--- /dev/null
+++ b/app/Enum/TimelinePhotoGranularity.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Enum;
+
+/**
+ * Defines the possible granularities for photo timelines.
+ */
+enum TimelinePhotoGranularity: string
+{
+	case DEFAULT = 'default';
+	case DISABLED = 'disabled';
+	case YEAR = 'year';
+	case MONTH = 'month';
+	case DAY = 'day';
+	case HOUR = 'hour';
+}
diff --git a/app/Http/Controllers/Gallery/AlbumController.php b/app/Http/Controllers/Gallery/AlbumController.php
index ad52f7bcab2..0f94f404982 100644
--- a/app/Http/Controllers/Gallery/AlbumController.php
+++ b/app/Http/Controllers/Gallery/AlbumController.php
@@ -112,6 +112,9 @@ public function updateAlbum(UpdateAlbumRequest $request, SetHeader $setHeader):
 		$album->album_sorting = $request->albumSortingCriterion();
 		$album->photo_layout = $request->photoLayout();
 
+		$album->album_timeline = $request->album_timeline();
+		$album->photo_timeline = $request->photo_timeline();
+
 		$album = $setHeader->do(
 			album: $album,
 			is_compact: $request->is_compact(),
@@ -133,6 +136,7 @@ public function updateTagAlbum(UpdateTagAlbumRequest $request): EditableBaseAlbu
 		$album->copyright = $request->copyright();
 		$album->photo_sorting = $request->photoSortingCriterion();
 		$album->photo_layout = $request->photoLayout();
+		$album->photo_timeline = $request->photo_timeline();
 		$album->save();
 
 		return EditableBaseAlbumResource::fromModel($album);
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 46c53d769e5..db7d6cf34a4 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -93,5 +93,6 @@ class Kernel extends HttpKernel
 		'login_required' => \App\Http\Middleware\LoginRequired::class,
 		'cache_control' => \App\Http\Middleware\CacheControl::class,
 		'support' => \LycheeVerify\Http\Middleware\VerifySupporterStatus::class,
+		'config_integrity' => \App\Http\Middleware\ConfigIntegrity::class,
 	];
 }
diff --git a/app/Http/Middleware/ConfigIntegrity.php b/app/Http/Middleware/ConfigIntegrity.php
new file mode 100644
index 00000000000..d2dc312f39a
--- /dev/null
+++ b/app/Http/Middleware/ConfigIntegrity.php
@@ -0,0 +1,47 @@
+<?php
+
+// app/Http/Middleware/CacheControlMiddleware.php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+/**
+ * Small update of the database to avoid sneaky people setting all the levels to 0 and thus skipping some checks...
+ */
+class ConfigIntegrity
+{
+	private const SE_FIELDS = [
+		'default_user_quota',
+		'timeline_photos_granularity',
+		'timeline_albums_granularity',
+		'timeline_left_border_enabled',
+		'timeline_photo_date_format_year',
+		'timeline_photo_date_format_month',
+		'timeline_photo_date_format_day',
+		'timeline_photo_date_format_hour',
+		'timeline_album_date_format_year',
+		'timeline_album_date_format_month',
+		'timeline_album_date_format_day',
+	];
+
+	/**
+	 * Handle an incoming request.
+	 *
+	 * @param \Illuminate\Http\Request                                                                          $request
+	 * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
+	 *
+	 * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
+	 */
+	public function handle(Request $request, \Closure $next)
+	{
+		try {
+			DB::table('configs')->whereIn('key', self::SE_FIELDS)->update(['level' => 1]);
+		} catch (\Exception $e) {
+			// Do nothing: we are not installed yet, so we fail silently.
+		}
+
+		return $next($request);
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Requests/Album/UpdateAlbumRequest.php b/app/Http/Requests/Album/UpdateAlbumRequest.php
index 1a559356c2d..eda155e4968 100644
--- a/app/Http/Requests/Album/UpdateAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateAlbumRequest.php
@@ -11,6 +11,8 @@
 use App\Contracts\Http\Requests\HasPhoto;
 use App\Contracts\Http\Requests\HasPhotoLayout;
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
+use App\Contracts\Http\Requests\HasTimelineAlbum;
+use App\Contracts\Http\Requests\HasTimelinePhoto;
 use App\Contracts\Http\Requests\HasTitle;
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\Contracts\Models\AbstractAlbum;
@@ -22,6 +24,8 @@
 use App\Enum\LicenseType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\HasAlbumSortingCriterionTrait;
 use App\Http\Requests\Traits\HasAlbumTrait;
@@ -33,19 +37,22 @@
 use App\Http\Requests\Traits\HasPhotoLayoutTrait;
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasPhotoTrait;
+use App\Http\Requests\Traits\HasTimelineAlbumTrait;
+use App\Http\Requests\Traits\HasTimelinePhotoTrait;
 use App\Http\Requests\Traits\HasTitleTrait;
 use App\Models\Album;
 use App\Models\Photo;
 use App\Policies\AlbumPolicy;
 use App\Rules\CopyrightRule;
 use App\Rules\DescriptionRule;
+use App\Rules\EnumRequireSupportRule;
 use App\Rules\RandomIDRule;
 use App\Rules\TitleRule;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean, HasPhotoLayout
+class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean, HasPhotoLayout, HasTimelineAlbum, HasTimelinePhoto
 {
 	use HasAlbumTrait;
 	use HasLicenseTrait;
@@ -58,6 +65,8 @@ class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, H
 	use HasAlbumSortingCriterionTrait;
 	use HasCopyrightTrait;
 	use HasPhotoLayoutTrait;
+	use HasTimelineAlbumTrait;
+	use HasTimelinePhotoTrait;
 
 	public function authorize(): bool
 	{
@@ -92,6 +101,8 @@ public function rules(): array
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
 			RequestAttribute::IS_COMPACT_ATTRIBUTE => ['required', 'boolean'],
 			RequestAttribute::HEADER_ID_ATTRIBUTE => ['present', new RandomIDRule(true)],
+			RequestAttribute::ALBUM_TIMELINE_ALBUM => ['present', 'nullable', new Enum(TimelineAlbumGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
+			RequestAttribute::ALBUM_TIMELINE_PHOTO => ['present', 'nullable', new Enum(TimelinePhotoGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
 		];
 	}
 
@@ -129,6 +140,9 @@ protected function processValidatedValues(array $values, array $files): void
 
 		$this->aspectRatio = AspectRatioType::tryFrom($values[RequestAttribute::ALBUM_ASPECT_RATIO_ATTRIBUTE]);
 		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
+		$this->album_timeline = TimelineAlbumGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_ALBUM]);
+		$this->photo_timeline = TimelinePhotoGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_PHOTO]);
+
 		$this->copyright = $values[RequestAttribute::COPYRIGHT_ATTRIBUTE];
 
 		$this->is_compact = static::toBoolean($values[RequestAttribute::IS_COMPACT_ATTRIBUTE]);
diff --git a/app/Http/Requests/Album/UpdateTagAlbumRequest.php b/app/Http/Requests/Album/UpdateTagAlbumRequest.php
index 99a07ca451d..7bcf6550092 100644
--- a/app/Http/Requests/Album/UpdateTagAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateTagAlbumRequest.php
@@ -8,12 +8,14 @@
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
 use App\Contracts\Http\Requests\HasTagAlbum;
 use App\Contracts\Http\Requests\HasTags;
+use App\Contracts\Http\Requests\HasTimelinePhoto;
 use App\Contracts\Http\Requests\HasTitle;
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\ColumnSortingPhotoType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\Authorize\AuthorizeCanEditAlbumTrait;
 use App\Http\Requests\Traits\HasCopyrightTrait;
@@ -22,16 +24,18 @@
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasTagAlbumTrait;
 use App\Http\Requests\Traits\HasTagsTrait;
+use App\Http\Requests\Traits\HasTimelinePhotoTrait;
 use App\Http\Requests\Traits\HasTitleTrait;
 use App\Models\TagAlbum;
 use App\Rules\CopyrightRule;
 use App\Rules\DescriptionRule;
+use App\Rules\EnumRequireSupportRule;
 use App\Rules\RandomIDRule;
 use App\Rules\TitleRule;
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags, HasPhotoLayout
+class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags, HasPhotoLayout, HasTimelinePhoto
 {
 	use HasTagAlbumTrait;
 	use HasTitleTrait;
@@ -40,6 +44,7 @@ class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTi
 	use HasCopyrightTrait;
 	use HasTagsTrait;
 	use HasPhotoLayoutTrait;
+	use HasTimelinePhotoTrait;
 	use AuthorizeCanEditAlbumTrait;
 
 	/**
@@ -60,6 +65,7 @@ public function rules(): array
 			RequestAttribute::TAGS_ATTRIBUTE . '.*' => 'required|string|min:1',
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
 			RequestAttribute::ALBUM_PHOTO_LAYOUT => ['present', 'nullable', new Enum(PhotoLayoutType::class)],
+			RequestAttribute::ALBUM_TIMELINE_PHOTO => ['present', 'nullable', new Enum(TimelinePhotoGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
 		];
 	}
 
@@ -88,6 +94,7 @@ protected function processValidatedValues(array $values, array $files): void
 			new PhotoSortingCriterion($photoColumn->toColumnSortingType(), $photoOrder);
 
 		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
+		$this->photo_timeline = TimelinePhotoGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_PHOTO]);
 		$this->copyright = $values[RequestAttribute::COPYRIGHT_ATTRIBUTE];
 		$this->tags = $values[RequestAttribute::TAGS_ATTRIBUTE];
 	}
diff --git a/app/Http/Requests/Traits/HasTimelineAlbumTrait.php b/app/Http/Requests/Traits/HasTimelineAlbumTrait.php
new file mode 100644
index 00000000000..cf0bfebc476
--- /dev/null
+++ b/app/Http/Requests/Traits/HasTimelineAlbumTrait.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Requests\Traits;
+
+use App\Enum\TimelineAlbumGranularity;
+
+trait HasTimelineAlbumTrait
+{
+	protected ?TimelineAlbumGranularity $album_timeline = null;
+
+	/**
+	 * @return TimelineAlbumGranularity|null
+	 */
+	public function album_timeline(): ?TimelineAlbumGranularity
+	{
+		return $this->album_timeline;
+	}
+}
diff --git a/app/Http/Requests/Traits/HasTimelinePhotoTrait.php b/app/Http/Requests/Traits/HasTimelinePhotoTrait.php
new file mode 100644
index 00000000000..8ce84246e7f
--- /dev/null
+++ b/app/Http/Requests/Traits/HasTimelinePhotoTrait.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Requests\Traits;
+
+use App\Enum\TimelinePhotoGranularity;
+
+trait HasTimelinePhotoTrait
+{
+	protected ?TimelinePhotoGranularity $photo_timeline = null;
+
+	/**
+	 * @return TimelinePhotoGranularity|null
+	 */
+	public function photo_timeline(): ?TimelinePhotoGranularity
+	{
+		return $this->photo_timeline;
+	}
+}
diff --git a/app/Http/Resources/Collections/RootAlbumResource.php b/app/Http/Resources/Collections/RootAlbumResource.php
index 14499ccaf74..fb877003a70 100644
--- a/app/Http/Resources/Collections/RootAlbumResource.php
+++ b/app/Http/Resources/Collections/RootAlbumResource.php
@@ -3,9 +3,13 @@
 namespace App\Http\Resources\Collections;
 
 use App\DTO\TopAlbumDTO;
+use App\Enum\ColumnSortingType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Http\Resources\GalleryConfigs\RootConfig;
 use App\Http\Resources\Models\ThumbAlbumResource;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\RootAlbumRightsResource;
+use App\Models\Configs;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -54,6 +58,9 @@ public function __construct(
 		$this->smart_albums = $smart_albums;
 		$this->tag_albums = $tag_albums;
 		$this->albums = $albums;
+		$sorting = Configs::getValueAsEnum('sorting_albums_col', ColumnSortingType::class);
+		$album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+		$this->albums = TimelineData::setTimeLineDataForAlbums($this->albums, $sorting, $album_granularity);
 		$this->shared_albums = $shared_albums;
 		$this->config = $config;
 		$this->rights = $rights;
diff --git a/app/Http/Resources/Editable/EditableBaseAlbumResource.php b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
index 18c5a563914..8bed48d53e1 100644
--- a/app/Http/Resources/Editable/EditableBaseAlbumResource.php
+++ b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
@@ -7,6 +7,8 @@
 use App\Enum\AspectRatioType;
 use App\Enum\LicenseType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\Album;
 use App\Models\TagAlbum;
 use Spatie\LaravelData\Data;
@@ -26,6 +28,8 @@ class EditableBaseAlbumResource extends Data
 	public ?PhotoLayoutType $photo_layout;
 	public ?string $header_id;
 	public ?string $cover_id;
+	public ?TimelineAlbumGranularity $album_timeline;
+	public ?TimelinePhotoGranularity $photo_timeline;
 	/** @var string[] */
 	public array $tags;
 	public bool $is_model_album;
@@ -43,6 +47,8 @@ public function __construct(Album|TagAlbum $album)
 		$this->header_id = null;
 		$this->cover_id = null;
 		$this->photo_layout = $album->photo_layout;
+		$this->album_timeline = null;
+		$this->photo_timeline = $album->photo_timeline;
 
 		if ($album instanceof Album) {
 			$this->is_model_album = true;
@@ -51,6 +57,7 @@ public function __construct(Album|TagAlbum $album)
 			$this->header_id = $album->header_id;
 			$this->cover_id = $album->cover_id;
 			$this->aspect_ratio = $album->album_thumb_aspect_ratio;
+			$this->album_timeline = $album->album_timeline;
 		}
 
 		if ($album instanceof TagAlbum) {
diff --git a/app/Http/Resources/GalleryConfigs/AlbumConfig.php b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
index ceb7e6b0d22..3ee452fe13c 100644
--- a/app/Http/Resources/GalleryConfigs/AlbumConfig.php
+++ b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
@@ -6,6 +6,9 @@
 use App\Enum\AspectRatioCSSType;
 use App\Enum\AspectRatioType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\Album;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
@@ -18,6 +21,8 @@
 #[TypeScript()]
 class AlbumConfig extends Data
 {
+	use HasTimelineData;
+
 	public bool $is_base_album;
 	public bool $is_model_album;
 	public bool $is_accessible;
@@ -28,6 +33,8 @@ class AlbumConfig extends Data
 	public bool $is_nsfw_warning_visible;
 	public AspectRatioCSSType $album_thumb_css_aspect_ratio;
 	public PhotoLayoutType $photo_layout;
+	public bool $is_album_timeline_enabled = false;
+	public bool $is_photo_timeline_enabled = false;
 
 	public function __construct(AbstractAlbum $album)
 	{
@@ -53,6 +60,24 @@ public function __construct(AbstractAlbum $album)
 		}
 
 		$this->photo_layout = (($album instanceof BaseAlbum) ? $album->photo_layout : null) ?? Configs::getValueAsEnum('layout', PhotoLayoutType::class);
+
+		// Set default values.
+		$this->is_photo_timeline_enabled = Configs::getValueAsBool('timeline_photos_enabled');
+		$this->is_album_timeline_enabled = Configs::getValueAsBool('timeline_albums_enabled');
+
+		if ($album instanceof Album) {
+			$this->is_album_timeline_enabled = $album->album_timeline !== null || $this->is_album_timeline_enabled;
+			$this->is_album_timeline_enabled = $album->album_timeline !== TimelineAlbumGranularity::DISABLED && $this->is_album_timeline_enabled;
+		}
+
+		if ($album instanceof BaseAlbum) {
+			$this->is_photo_timeline_enabled = $album->photo_timeline !== null || $this->is_photo_timeline_enabled;
+			$this->is_photo_timeline_enabled = $album->photo_timeline !== TimelinePhotoGranularity::DISABLED && $this->is_photo_timeline_enabled;
+		}
+
+		// Masking to require login for timeline or allow it to be public.
+		$this->is_photo_timeline_enabled = $this->is_photo_timeline_enabled && (Configs::getValueAsBool('timeline_photos_public') || Auth::check());
+		$this->is_album_timeline_enabled = $this->is_album_timeline_enabled && (Configs::getValueAsBool('timeline_albums_public') || Auth::check());
 	}
 
 	public function setIsMapAccessible(): void
diff --git a/app/Http/Resources/GalleryConfigs/InitConfig.php b/app/Http/Resources/GalleryConfigs/InitConfig.php
index 19e988e9469..e5d539e1773 100644
--- a/app/Http/Resources/GalleryConfigs/InitConfig.php
+++ b/app/Http/Resources/GalleryConfigs/InitConfig.php
@@ -47,6 +47,9 @@ class InitConfig extends Data
 	// Slideshow setting
 	public int $slideshow_timeout;
 
+	// Timeline settings
+	public bool $is_timeline_left_border_visible;
+
 	// Site title & dropbox key if logged in as admin.
 	public string $title;
 	public string $dropbox_api_key;
@@ -91,6 +94,9 @@ public function __construct()
 		// Slideshow settings
 		$this->slideshow_timeout = Configs::getValueAsInt('slideshow_timeout');
 
+		// Timeline settings
+		$this->is_timeline_left_border_visible = Configs::getValueAsBool('timeline_left_border_enabled');
+
 		// Site title & dropbox key if logged in as admin.
 		$this->title = Configs::getValueAsString('site_title');
 		$this->dropbox_api_key = Auth::user()?->may_administrate === true ? Configs::getValueAsString('dropbox_key') : 'disabled';
diff --git a/app/Http/Resources/GalleryConfigs/RootConfig.php b/app/Http/Resources/GalleryConfigs/RootConfig.php
index 7036e0a05a8..832c4870b78 100644
--- a/app/Http/Resources/GalleryConfigs/RootConfig.php
+++ b/app/Http/Resources/GalleryConfigs/RootConfig.php
@@ -5,6 +5,7 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Enum\AspectRatioCSSType;
 use App\Enum\AspectRatioType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Factories\AlbumFactory;
 use App\Models\Configs;
 use App\Models\Photo;
@@ -20,6 +21,8 @@ class RootConfig extends Data
 {
 	public bool $is_map_accessible = false;
 	public bool $is_mod_frame_enabled = false;
+	public bool $is_photo_timeline_enabled = false;
+	public bool $is_album_timeline_enabled = false;
 	public bool $is_search_accessible = false;
 	public bool $show_keybinding_help_button = false;
 	#[LiteralTypeScriptType('App.Enum.AspectRatioType')]
@@ -30,15 +33,29 @@ class RootConfig extends Data
 	public bool $back_button_enabled;
 	public string $back_button_text;
 	public string $back_button_url;
+	public TimelineAlbumGranularity $timeline_album_granularity;
 
 	public function __construct()
 	{
+		$is_logged_in = Auth::check();
 		$count_locations = Photo::whereNotNull('latitude')->whereNotNull('longitude')->count() > 0;
 		$map_display = Configs::getValueAsBool('map_display');
-		$public_display = Auth::check() || Configs::getValueAsBool('map_display_public');
+		$public_display = $is_logged_in || Configs::getValueAsBool('map_display_public');
+
 		$this->is_map_accessible = $count_locations && $map_display && $public_display;
 		$this->is_mod_frame_enabled = $this->checkModFrameEnabled();
-		$this->is_search_accessible = Auth::check() || Configs::getValueAsBool('search_public');
+
+		$timeline_photos_enabled = Configs::getValueAsBool('timeline_photos_enabled');
+		$timeline_photos_public = Configs::getValueAsBool('timeline_photos_public');
+		$this->is_photo_timeline_enabled = $timeline_photos_enabled && ($is_logged_in || $timeline_photos_public);
+
+		$timeline_albums_enabled = Configs::getValueAsBool('timeline_albums_enabled');
+		$timeline_albums_public = Configs::getValueAsBool('timeline_albums_public');
+		$this->is_album_timeline_enabled = $timeline_albums_enabled && ($is_logged_in || $timeline_albums_public);
+		$this->timeline_album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+
+		$this->is_search_accessible = $is_logged_in || Configs::getValueAsBool('search_public');
+
 		$this->album_thumb_css_aspect_ratio = Configs::getValueAsEnum('default_album_thumb_aspect_ratio', AspectRatioType::class)->css();
 		$this->show_keybinding_help_button = Configs::getValueAsBool('show_keybinding_help_button');
 		$this->login_button_position = Configs::getValueAsString('login_button_position');
diff --git a/app/Http/Resources/Models/AlbumResource.php b/app/Http/Resources/Models/AlbumResource.php
index 6f74665edb2..ec6217ea6d9 100644
--- a/app/Http/Resources/Models/AlbumResource.php
+++ b/app/Http/Resources/Models/AlbumResource.php
@@ -2,13 +2,17 @@
 
 namespace App\Http\Resources\Models;
 
+use App\Enum\ColumnSortingType;
 use App\Http\Resources\Editable\EditableBaseAlbumResource;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\Album;
+use App\Models\Configs;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Spatie\LaravelData\Data;
@@ -20,6 +24,7 @@ class AlbumResource extends Data
 {
 	use HasPrepPhotoCollection;
 	use HasHeaderUrl;
+	use HasTimelineData;
 
 	public string $id;
 	public string $title;
@@ -71,7 +76,21 @@ public function __construct(Album $album)
 		$this->has_albums = !$album->isLeaf();
 		$this->albums = $album->relationLoaded('children') ? ThumbAlbumResource::collect($album->children) : null;
 		$this->photos = $album->relationLoaded('photos') ? PhotoResource::collect($album->photos) : null;
-		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = $this->getPhotoTimeline($album->photo_timeline);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
+
+		if ($this->albums->count() > 0) {
+			// setup timeline data
+			$sorting = $album->album_sorting?->column ?? Configs::getValueAsEnum('sorting_albums_col', ColumnSortingType::class);
+			$album_granularity = $this->getAlbumTimeline($album->album_timeline);
+			$this->albums = TimelineData::setTimeLineDataForAlbums($this->albums, $sorting, $album_granularity);
+		}
 
 		// thumb
 		$this->cover_id = $album->cover_id;
diff --git a/app/Http/Resources/Models/PhotoResource.php b/app/Http/Resources/Models/PhotoResource.php
index 086656b9780..e166db5c669 100644
--- a/app/Http/Resources/Models/PhotoResource.php
+++ b/app/Http/Resources/Models/PhotoResource.php
@@ -5,9 +5,11 @@
 use App\Enum\LicenseType;
 use App\Http\Resources\Models\Utils\PreComputedPhotoData;
 use App\Http\Resources\Models\Utils\PreformattedPhotoData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\PhotoRightsResource;
 use App\Models\Configs;
 use App\Models\Photo;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Auth;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -50,6 +52,9 @@ class PhotoResource extends Data
 	public ?string $previous_photo_id;
 	public PreformattedPhotoData $preformatted;
 	public PreComputedPhotoData $precomputed;
+	public ?TimelineData $timeline = null;
+
+	private Carbon $timeline_data_carbon;
 
 	public function __construct(Photo $photo)
 	{
@@ -87,6 +92,8 @@ public function __construct(Photo $photo)
 		$this->previous_photo_id = null;
 		$this->preformatted = new PreformattedPhotoData($photo, $this->size_variants->original);
 		$this->precomputed = new PreComputedPhotoData($photo);
+
+		$this->timeline_data_carbon = $photo->taken_at ?? $photo->created_at;
 	}
 
 	public static function fromModel(Photo $photo): PhotoResource
@@ -99,4 +106,14 @@ private function setLocation(Photo $photo): void
 		$showLocation = Configs::getValueAsBool('location_show') && (Auth::check() || Configs::getValueAsBool('location_show_public'));
 		$this->location = $showLocation ? $photo->location : null;
 	}
+
+	/**
+	 * Accessors to the Carbon instances.
+	 *
+	 * @return Carbon
+	 */
+	public function timeline_date_carbon(): Carbon
+	{
+		return $this->timeline_data_carbon;
+	}
 }
diff --git a/app/Http/Resources/Models/SmartAlbumResource.php b/app/Http/Resources/Models/SmartAlbumResource.php
index e6fd43e7760..2496738434c 100644
--- a/app/Http/Resources/Models/SmartAlbumResource.php
+++ b/app/Http/Resources/Models/SmartAlbumResource.php
@@ -2,11 +2,14 @@
 
 namespace App\Http\Resources\Models;
 
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Models\Configs;
 use App\SmartAlbums\BaseSmartAlbum;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Data;
@@ -36,6 +39,14 @@ public function __construct(BaseSmartAlbum $smartAlbum)
 		/** @phpstan-ignore-next-line */
 		$this->photos = $smartAlbum->relationLoaded('photos') ? PhotoResource::collect($smartAlbum->getPhotos()) : null;
 		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = Configs::getValueAsEnum('timeline_photo_granularity', TimelinePhotoGranularity::class);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
 
 		$this->thumb = ThumbResource::fromModel($smartAlbum->thumb);
 		$this->policy = AlbumProtectionPolicy::ofSmartAlbum($smartAlbum);
diff --git a/app/Http/Resources/Models/TagAlbumResource.php b/app/Http/Resources/Models/TagAlbumResource.php
index 451582b9d16..cfe001fd194 100644
--- a/app/Http/Resources/Models/TagAlbumResource.php
+++ b/app/Http/Resources/Models/TagAlbumResource.php
@@ -5,9 +5,11 @@
 use App\Http\Resources\Editable\EditableBaseAlbumResource;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\TagAlbum;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
@@ -20,6 +22,7 @@ class TagAlbumResource extends Data
 {
 	use HasPrepPhotoCollection;
 	use HasHeaderUrl;
+	use HasTimelineData;
 
 	public string $id;
 	public string $title;
@@ -55,7 +58,14 @@ public function __construct(TagAlbum $tagAlbum)
 
 		// children
 		$this->photos = $tagAlbum->relationLoaded('photos') ? PhotoResource::collect($tagAlbum->photos) : null;
-		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = $this->getPhotoTimeline($tagAlbum->photo_timeline);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
 
 		// thumb
 		$this->thumb = ThumbResource::fromModel($tagAlbum->thumb);
diff --git a/app/Http/Resources/Models/ThumbAlbumResource.php b/app/Http/Resources/Models/ThumbAlbumResource.php
index b95eb7a0433..7992852f209 100644
--- a/app/Http/Resources/Models/ThumbAlbumResource.php
+++ b/app/Http/Resources/Models/ThumbAlbumResource.php
@@ -5,12 +5,14 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Enum\DateOrderingType;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Models\Album;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
 use App\Models\TagAlbum;
 use App\SmartAlbums\BaseSmartAlbum;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Str;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -39,7 +41,12 @@ class ThumbAlbumResource extends Data
 	public ?string $formatted_min_max = null;
 	public ?string $owner = null;
 
+	private Carbon $created_at_carbon;
+	private ?Carbon $min_taken_at_carbon = null;
+	private ?Carbon $max_taken_at_carbon = null;
+
 	public AlbumRightsResource $rights;
+	public ?TimelineData $timeline = null;
 
 	public function __construct(AbstractAlbum $data)
 	{
@@ -53,12 +60,15 @@ public function __construct(AbstractAlbum $data)
 			$policy = AlbumProtectionPolicy::ofSmartAlbum($data);
 		} else {
 			/** @var BaseAlbum $data */
-			$this->max_taken_at = $data->max_taken_at?->format($date_format);
-			$this->min_taken_at = $data->min_taken_at?->format($date_format);
+			$this->min_taken_at_carbon = $data->min_taken_at;
+			$this->max_taken_at_carbon = $data->max_taken_at;
+			$this->max_taken_at = $this->max_taken_at_carbon?->format($date_format);
+			$this->min_taken_at = $this->min_taken_at_carbon?->format($date_format);
 
 			$this->formatMinMaxDate();
 
-			$this->created_at = $data->created_at->format($date_format);
+			$this->created_at_carbon = $data->created_at;
+			$this->created_at = $this->created_at_carbon->format($date_format);
 			$policy = AlbumProtectionPolicy::ofBaseAlbum($data);
 			$this->description = Str::limit($data->description, 100);
 			$this->owner = $data->owner->username;
@@ -103,4 +113,24 @@ private function formatMinMaxDate(): void
 			$this->formatted_min_max = $this->min_taken_at . ' - ' . $this->max_taken_at;
 		}
 	}
+
+	/**
+	 * Accessors to the Carbon instances.
+	 *
+	 * @return Carbon
+	 */
+	public function created_at_carbon(): Carbon
+	{
+		return $this->created_at_carbon;
+	}
+
+	public function min_taken_at_carbon(): ?Carbon
+	{
+		return $this->min_taken_at_carbon;
+	}
+
+	public function max_taken_at_carbon(): ?Carbon
+	{
+		return $this->max_taken_at_carbon;
+	}
 }
diff --git a/app/Http/Resources/Models/Utils/TimelineData.php b/app/Http/Resources/Models/Utils/TimelineData.php
new file mode 100644
index 00000000000..066dddc9c8b
--- /dev/null
+++ b/app/Http/Resources/Models/Utils/TimelineData.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace App\Http\Resources\Models\Utils;
+
+use App\Enum\ColumnSortingType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Exceptions\Internal\LycheeLogicException;
+use App\Http\Resources\Models\PhotoResource;
+use App\Http\Resources\Models\ThumbAlbumResource;
+use App\Models\Configs;
+use Illuminate\Support\Collection;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript()]
+class TimelineData extends Data
+{
+	public function __construct(
+		public string $timeDate,
+		public string $format,
+	) {
+	}
+
+	public static function fromPhoto(PhotoResource $photo, TimelinePhotoGranularity $granularity): self
+	{
+		$timeline_date_format_year = Configs::getValueAsString('timeline_photo_date_format_year');
+		$timeline_date_format_month = Configs::getValueAsString('timeline_photo_date_format_month');
+		$timeline_date_format_day = Configs::getValueAsString('timeline_photo_date_format_day');
+		$timeline_photo_date_format_hour = Configs::getValueAsString('timeline_photo_date_format_hour');
+
+		$format = match ($granularity) {
+			TimelinePhotoGranularity::YEAR => $photo->timeline_date_carbon()->format($timeline_date_format_year),
+			TimelinePhotoGranularity::MONTH => $photo->timeline_date_carbon()->format($timeline_date_format_month),
+			TimelinePhotoGranularity::DAY => $photo->timeline_date_carbon()->format($timeline_date_format_day),
+			TimelinePhotoGranularity::HOUR => $photo->timeline_date_carbon()->format($timeline_photo_date_format_hour),
+			TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED => throw new LycheeLogicException('DEFAULT is not a valid granularity for photos'),
+		};
+
+		$timeDate = match ($granularity) {
+			TimelinePhotoGranularity::YEAR => $photo->timeline_date_carbon()->format('Y'),
+			TimelinePhotoGranularity::MONTH => $photo->timeline_date_carbon()->format('Y-m'),
+			TimelinePhotoGranularity::DAY => $photo->timeline_date_carbon()->format('Y-m-d'),
+			TimelinePhotoGranularity::HOUR => $photo->timeline_date_carbon()->format('Y-m-d H'),
+			TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED => throw new LycheeLogicException('DEFAULT is not a valid granularity for photos'),
+		};
+
+		return new TimelineData(timeDate: $timeDate, format: $format);
+	}
+
+	private static function fromAlbum(ThumbAlbumResource $album, ColumnSortingType $columnSorting, TimelineAlbumGranularity $granularity): ?self
+	{
+		$timeline_date_format_year = Configs::getValueAsString('timeline_album_date_format_year');
+		$timeline_date_format_month = Configs::getValueAsString('timeline_album_date_format_month');
+		$timeline_date_format_day = Configs::getValueAsString('timeline_album_date_format_day');
+		$date = match ($columnSorting) {
+			ColumnSortingType::CREATED_AT => $album->created_at_carbon(),
+			ColumnSortingType::MAX_TAKEN_AT => $album->max_taken_at_carbon(),
+			ColumnSortingType::MIN_TAKEN_AT => $album->min_taken_at_carbon(),
+			default => null,
+		};
+
+		if ($date === null) {
+			return null;
+		}
+
+		$format = match ($granularity) {
+			TimelineAlbumGranularity::YEAR => $date->format($timeline_date_format_year),
+			TimelineAlbumGranularity::MONTH => $date->format($timeline_date_format_month),
+			TimelineAlbumGranularity::DAY => $date->format($timeline_date_format_day),
+			TimelineAlbumGranularity::DEFAULT, TimelineAlbumGranularity::DISABLED => throw new LycheeLogicException('DEFAULT/DISABLED is not a valid granularity for albums'),
+		};
+
+		$timeDate = match ($granularity) {
+			TimelineAlbumGranularity::YEAR => $date->format('Y'),
+			TimelineAlbumGranularity::MONTH => $date->format('Y-m'),
+			TimelineAlbumGranularity::DAY => $date->format('Y-m-d'),
+			TimelineAlbumGranularity::DEFAULT, TimelineAlbumGranularity::DISABLED => throw new LycheeLogicException('DEFAULT/DISABLED is not a valid granularity for albums'),
+		};
+
+		return new TimelineData(timeDate: $timeDate, format: $format);
+	}
+
+	/**
+	 * @param Collection<int,ThumbAlbumResource> $albums
+	 * @param ColumnSortingType                  $columnSorting
+	 * @param TimelineAlbumGranularity           $granularity
+	 *
+	 * @return Collection<int,ThumbAlbumResource>
+	 */
+	public static function setTimeLineDataForAlbums(Collection $albums, ColumnSortingType $columnSorting, TimelineAlbumGranularity $granularity): Collection
+	{
+		return $albums->map(function (ThumbAlbumResource $album) use ($columnSorting, $granularity) {
+			$album->timeline = TimelineData::fromAlbum($album, $columnSorting, $granularity);
+
+			return $album;
+		});
+	}
+
+	/**
+	 * @param Collection<int,PhotoResource> $photos
+	 * @param TimelinePhotoGranularity      $granularity
+	 *
+	 * @return Collection<int,PhotoResource>
+	 */
+	public static function setTimeLineDataForPhotos(Collection $photos, TimelinePhotoGranularity $granularity): Collection
+	{
+		return $photos->map(function (PhotoResource $photo) use ($granularity) {
+			$photo->timeline = TimelineData::fromPhoto($photo, $granularity);
+
+			return $photo;
+		});
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Search/InitResource.php b/app/Http/Resources/Search/InitResource.php
index 685165efee9..767d76e088e 100644
--- a/app/Http/Resources/Search/InitResource.php
+++ b/app/Http/Resources/Search/InitResource.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources\Search;
 
+use App\Enum\PhotoLayoutType;
 use App\Models\Configs;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -13,9 +14,11 @@
 class InitResource extends Data
 {
 	public int $search_minimum_length = 3;
+	public PhotoLayoutType $photo_layout;
 
 	public function __construct()
 	{
 		$this->search_minimum_length = Configs::getValueAsInt('search_minimum_length_required');
+		$this->photo_layout = Configs::getValueAsEnum('search_photos_layout', PhotoLayoutType::class);
 	}
 }
\ No newline at end of file
diff --git a/app/Http/Resources/Traits/HasPrepPhotoCollection.php b/app/Http/Resources/Traits/HasPrepPhotoCollection.php
index 376aab4c7f6..c28ee05bbe3 100644
--- a/app/Http/Resources/Traits/HasPrepPhotoCollection.php
+++ b/app/Http/Resources/Traits/HasPrepPhotoCollection.php
@@ -13,10 +13,6 @@ trait HasPrepPhotoCollection
 {
 	private function prepPhotosCollection(): void
 	{
-		if ($this->photos === null) {
-			return;
-		}
-
 		$previous_photo = null;
 		$this->photos->each(function (PhotoResource &$photo) use (&$previous_photo) {
 			if ($previous_photo !== null) {
diff --git a/app/Http/Resources/Traits/HasTimelineData.php b/app/Http/Resources/Traits/HasTimelineData.php
new file mode 100644
index 00000000000..2d8177105b7
--- /dev/null
+++ b/app/Http/Resources/Traits/HasTimelineData.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources\Traits;
+
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Models\Configs;
+
+trait HasTimelineData
+{
+	private function getAlbumTimeline(?TimelineAlbumGranularity $candidate): TimelineAlbumGranularity
+	{
+		$default_timeline_album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+
+		if ($candidate === TimelineAlbumGranularity::DEFAULT || $candidate === TimelineAlbumGranularity::DISABLED) {
+			return $default_timeline_album_granularity;
+		}
+
+		return $candidate ?? $default_timeline_album_granularity;
+	}
+
+	private function getPhotoTimeline(?TimelinePhotoGranularity $candidate): TimelinePhotoGranularity
+	{
+		$default_timeline_photo_granularity = Configs::getValueAsEnum('timeline_photos_granularity', TimelinePhotoGranularity::class);
+
+		if ($candidate === TimelinePhotoGranularity::DEFAULT || $candidate === TimelinePhotoGranularity::DISABLED) {
+			return $default_timeline_photo_granularity;
+		}
+
+		return $candidate ?? $default_timeline_photo_granularity;
+	}
+}
\ No newline at end of file
diff --git a/app/Models/Album.php b/app/Models/Album.php
index 18d2bddf9d7..269e76fdedb 100644
--- a/app/Models/Album.php
+++ b/app/Models/Album.php
@@ -8,6 +8,7 @@
 use App\Enum\ColumnSortingType;
 use App\Enum\LicenseType;
 use App\Enum\OrderSortingType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Exceptions\ConfigurationKeyMissingException;
 use App\Exceptions\Internal\QueryBuilderException;
 use App\Exceptions\MediaFileOperationException;
@@ -33,25 +34,26 @@
 /**
  * Class Album.
  *
- * @property string                $id
- * @property string|null           $parent_id
- * @property Album|null            $parent
- * @property Collection<int,Album> $children
- * @property int                   $num_children             The number of children.
- * @property Collection<int,Photo> $all_photos
- * @property int                   $num_photos               The number of photos in this album (excluding photos in subalbums).
- * @property LicenseType           $license
- * @property string|null           $cover_id
- * @property Photo|null            $cover
- * @property string|null           $header_id
- * @property Photo|null            $header
- * @property string|null           $track_short_path
- * @property string|null           $track_url
- * @property AspectRatioType|null  $album_thumb_aspect_ratio
- * @property int                   $_lft
- * @property int                   $_rgt
- * @property BaseAlbumImpl         $base_class
- * @property User|null             $owner
+ * @property string                   $id
+ * @property string|null              $parent_id
+ * @property Album|null               $parent
+ * @property Collection<int,Album>    $children
+ * @property int                      $num_children             The number of children.
+ * @property Collection<int,Photo>    $all_photos
+ * @property int                      $num_photos               The number of photos in this album (excluding photos in subalbums).
+ * @property LicenseType              $license
+ * @property string|null              $cover_id
+ * @property Photo|null               $cover
+ * @property string|null              $header_id
+ * @property Photo|null               $header
+ * @property string|null              $track_short_path
+ * @property string|null              $track_url
+ * @property AspectRatioType|null     $album_thumb_aspect_ratio
+ * @property TimelineAlbumGranularity $album_timeline
+ * @property int                      $_lft
+ * @property int                      $_rgt
+ * @property BaseAlbumImpl            $base_class
+ * @property User|null                $owner
  *
  * @method static AlbumBuilder|Album query()                       Begin querying the model.
  * @method static AlbumBuilder|Album with(array|string $relations) Begin querying the model with eager loading.
@@ -148,6 +150,7 @@ class Album extends BaseAlbum implements Node
 	protected $attributes = [
 		'id' => null,
 		'parent_id' => null,
+		'album_timeline' => null,
 		'license' => 'none',
 		'cover_id' => null,
 		'header_id' => null,
@@ -167,6 +170,7 @@ class Album extends BaseAlbum implements Node
 		'num_children' => 'integer',
 		'num_photos' => 'integer',
 		'album_thumb_aspect_ratio' => AspectRatioType::class,
+		'album_timeline' => TimelineAlbumGranularity::class,
 		'_lft' => 'integer',
 		'_rgt' => 'integer',
 	];
@@ -385,6 +389,28 @@ protected function setAlbumThumbAspectRatioAttribute(?AspectRatioType $aspectRat
 		$this->attributes['album_thumb_aspect_ratio'] = $aspectRatio?->value;
 	}
 
+	/**
+	 * Defines accessor for the Album Timeline.
+	 *
+	 * @return TimelineAlbumGranularity|null
+	 */
+	protected function getAlbumTimelineAttribute(): ?TimelineAlbumGranularity
+	{
+		return TimelineAlbumGranularity::tryFrom($this->attributes['album_timeline']);
+	}
+
+	/**
+	 * Defines setter for Album Timeline.
+	 *
+	 * @param TimelineAlbumGranularity|null $album_timeline
+	 *
+	 * @return void
+	 */
+	protected function setAlbumTimelineAttribute(?TimelineAlbumGranularity $album_timeline): void
+	{
+		$this->attributes['album_timeline'] = $album_timeline?->value;
+	}
+
 	/**
 	 * Accessor for the "virtual" attribute {@link Album::$track_url}.
 	 *
diff --git a/app/Models/BaseAlbumImpl.php b/app/Models/BaseAlbumImpl.php
index e81954b43e7..f12714f1703 100644
--- a/app/Models/BaseAlbumImpl.php
+++ b/app/Models/BaseAlbumImpl.php
@@ -9,6 +9,7 @@
 use App\Enum\ColumnSortingType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\Builders\BaseAlbumImplBuilder;
 use App\Models\Extensions\HasAttributesPatch;
 use App\Models\Extensions\HasBidirectionalRelationships;
@@ -96,6 +97,7 @@
  * @property string                           $title
  * @property string|null                      $description
  * @property PhotoLayoutType|null             $photo_layout
+ * @property TimelinePhotoGranularity         $photo_timeline
  * @property int                              $owner_id
  * @property User                             $owner
  * @property bool                             $is_nsfw
@@ -284,4 +286,48 @@ protected function setPhotoSortingAttribute(?PhotoSortingCriterion $sorting): vo
 		$this->attributes['sorting_col'] = $sorting?->column->value;
 		$this->attributes['sorting_order'] = $sorting?->order->value;
 	}
+
+	/**
+	 * Defines accessor for the Aspect Ratio.
+	 *
+	 * @return PhotoLayoutType|null
+	 */
+	protected function getPhotoLayoutAttribute(): ?PhotoLayoutType
+	{
+		return PhotoLayoutType::tryFrom($this->attributes['photo_layout']);
+	}
+
+	/**
+	 * Defines setter for Aspect Ratio.
+	 *
+	 * @param PhotoLayoutType|null $aspectRatio
+	 *
+	 * @return void
+	 */
+	protected function setPhotoLayoutAttribute(?PhotoLayoutType $aspectRatio): void
+	{
+		$this->attributes['photo_layout'] = $aspectRatio?->value;
+	}
+
+	/**
+	 * Defines accessor for the Photo Timeline.
+	 *
+	 * @return TimelinePhotoGranularity|null
+	 */
+	protected function getPhotoTimelineAttribute(): ?TimelinePhotoGranularity
+	{
+		return TimelinePhotoGranularity::tryFrom($this->attributes['photo_timeline']);
+	}
+
+	/**
+	 * Defines setter for Photo Timeline.
+	 *
+	 * @param TimelinePhotoGranularity|null $photo_timeline
+	 *
+	 * @return void
+	 */
+	protected function setPhotoTimelineAttribute(?TimelinePhotoGranularity $photo_timeline): void
+	{
+		$this->attributes['photo_timeline'] = $photo_timeline?->value;
+	}
 }
diff --git a/app/Models/Extensions/BaseAlbum.php b/app/Models/Extensions/BaseAlbum.php
index fda81129de8..c2d7bbe3d9c 100644
--- a/app/Models/Extensions/BaseAlbum.php
+++ b/app/Models/Extensions/BaseAlbum.php
@@ -7,6 +7,7 @@
 use App\Contracts\Models\HasRandomID;
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\AccessPermission;
 use App\Models\BaseAlbumImpl;
 use App\Models\User;
@@ -32,6 +33,7 @@
  * @property bool                             $is_nsfw
  * @property string|null                      $copyright
  * @property PhotoLayoutType|null             $photo_layout
+ * @property TimelinePhotoGranularity         $photo_timeline
  * @property int                              $owner_id
  * @property User                             $owner
  * @property Collection<int,AccessPermission> $access_permissions
diff --git a/app/Rules/EnumRequireSupportRule.php b/app/Rules/EnumRequireSupportRule.php
new file mode 100644
index 00000000000..319518ff93c
--- /dev/null
+++ b/app/Rules/EnumRequireSupportRule.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Rules;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use LycheeVerify\Contract\VerifyInterface;
+
+/**
+ * This rule is designed specifically to avoid path injection.
+ */
+class EnumRequireSupportRule implements ValidationRule
+{
+	/**
+	 * The type of the enum.
+	 *
+	 * @var class-string
+	 */
+	protected $type;
+
+	protected VerifyInterface $verify;
+	/** @var array<int,mixed> This is usually a container of allowed values for backed enum */
+	protected array $expected;
+
+	/**
+	 * Create a new rule instance.
+	 *
+	 * @param class-string     $type
+	 * @param array<int,mixed> $expected
+	 * @param VerifyInterface  $verify
+	 *
+	 * @return void
+	 */
+	public function __construct(mixed $type, array $expected, VerifyInterface $verify)
+	{
+		$this->type = $type;
+		$this->verify = $verify;
+		$this->expected = $expected;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function validate(string $attribute, mixed $value, \Closure $fail): void
+	{
+		if ($value === null || !enum_exists($this->type) || !method_exists($this->type, 'tryFrom')) {
+			return;
+		}
+
+		try {
+			// Enum version
+			$value = $this->type::tryFrom($value);
+
+			if ($value !== null && $this->isDesirable($value)) {
+				return;
+			}
+		} catch (\TypeError) {
+			return;
+		}
+
+		if ($this->verify->is_supporter()) {
+			return;
+		}
+
+		$fail('Error: This functionality is only available in the Supporter Edition of Lychee. See here: https://lycheeorg.github.io/get-supporter-edition/');
+	}
+
+	/**
+	 * Determine if the given case is a valid case based on the only / except values.
+	 *
+	 * @param mixed $value
+	 *
+	 * @return bool
+	 */
+	protected function isDesirable($value)
+	{
+		return in_array(needle: $value, haystack: $this->expected, strict: true);
+	}
+}
diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
index eff5d46e6c0..0ee3ba8fb9f 100644
--- a/resources/js/components/forms/album/AlbumProperties.vue
+++ b/resources/js/components/forms/album/AlbumProperties.vue
@@ -1,5 +1,5 @@
 <template>
-	<Card class="sm:p-4 xl:px-9 max-sm:w-full sm:min-w-[32rem] flex-shrink-0">
+	<Card class="sm:p-4 xl:px-9 max-sm:w-full sm:min-w-[48rem] flex-shrink-0">
 		<template #content>
 			<form>
 				<div class="h-12">
@@ -157,7 +157,7 @@
 							<label for="copyright">{{ $t("lychee.ALBUM_SET_COPYRIGHT") }}</label>
 						</FloatLabel>
 					</div>
-					<div class="h-10 my-2 pt-4">
+					<div class="sm:h-10 my-2 pt-4 flex flex-wrap gap-y-4">
 						<FloatLabel variant="on">
 							<Select
 								id="aspectRatio"
@@ -180,9 +180,31 @@
 							</Select>
 							<label for="aspectRatio">Set album thumbs aspect ratio</label>
 						</FloatLabel>
+						<FloatLabel variant="on">
+							<Select
+								id="albumTimeline"
+								class="w-72 border-none"
+								v-model="albumTimeline"
+								:options="albumTimelineOptions"
+								optionLabel="label"
+								showClear
+							>
+								<template #value="slotProps">
+									<div v-if="slotProps.value" class="flex items-center">
+										<div>{{ $t(slotProps.value.label) }}</div>
+									</div>
+								</template>
+								<template #option="slotProps">
+									<div class="flex items-center">
+										<div>{{ $t(slotProps.option.label) }}</div>
+									</div>
+								</template>
+							</Select>
+							<label for="albumTimeline">Set album timeline mode</label>
+						</FloatLabel>
 					</div>
 				</template>
-				<div class="h-10 my-2 pt-4">
+				<div class="sm:h-10 my-2 pt-4 flex flex-wrap gap-y-4">
 					<FloatLabel variant="on">
 						<Select
 							id="photoLayout"
@@ -205,7 +227,32 @@
 						</Select>
 						<label for="photoLayout">Set photo layout</label>
 					</FloatLabel>
+					<FloatLabel variant="on">
+						<Select
+							id="photoTimeline"
+							class="w-72 border-none"
+							v-model="photoTimeline"
+							:options="photoTimelineOptions"
+							optionLabel="label"
+							showClear
+						>
+							<template #value="slotProps">
+								<div v-if="slotProps.value" class="flex items-center">
+									<div>{{ $t(slotProps.value.label) }}</div>
+								</div>
+							</template>
+							<template #option="slotProps">
+								<div class="flex items-center">
+									<div>{{ $t(slotProps.option.label) }}</div>
+								</div>
+							</template>
+						</Select>
+						<label for="photoTimeline">Set photo timeline mode</label>
+					</FloatLabel>
 				</div>
+
+				<div v-if="is_model_album" class="h-10 my-2 pt-4"></div>
+
 				<div v-if="!is_model_album" class="mb-8 h-10">
 					<FloatLabel variant="on">
 						<AutoComplete
@@ -244,10 +291,14 @@ import {
 	photoLayoutOptions,
 	SelectOption,
 	SelectBuilders,
+	timelinePhotoGranularityOptions,
+	timelineAlbumGranularityOptions,
 } from "@/config/constants";
 import { useToast } from "primevue/usetoast";
 import { trans } from "laravel-vue-i18n";
 import AutoComplete from "primevue/autocomplete";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
 
 type HeaderOption = {
 	id: string;
@@ -255,6 +306,9 @@ type HeaderOption = {
 	thumb?: string | null;
 };
 
+const LycheeState = useLycheeStateStore();
+const { is_se_enabled } = storeToRefs(LycheeState);
+
 const props = defineProps<{
 	editable: App.Http.Resources.Editable.EditableBaseAlbumResource;
 	photos: App.Http.Resources.Models.PhotoResource[];
@@ -270,12 +324,30 @@ const photoSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefine
 const albumSortingColumn = ref<SelectOption<App.Enum.ColumnSortingAlbumType> | undefined>(undefined);
 const albumSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
 const photoLayout = ref<SelectOption<App.Enum.PhotoLayoutType> | undefined>(undefined);
+const photoTimeline = ref<SelectOption<App.Enum.TimelinePhotoGranularity> | undefined>(undefined);
+const albumTimeline = ref<SelectOption<App.Enum.TimelineAlbumGranularity> | undefined>(undefined);
 const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
 const copyright = ref<string | undefined>(undefined);
 const tags = ref<string[]>([]);
 const aspectRatio = ref<SelectOption<App.Enum.AspectRatioType> | undefined>(undefined);
 const header_id = ref<HeaderOption | undefined>(undefined);
 
+const photoTimelineOptions = computed(() => {
+	if (is_se_enabled.value) {
+		return timelinePhotoGranularityOptions;
+	}
+
+	return timelinePhotoGranularityOptions.slice(0, 2);
+});
+
+const albumTimelineOptions = computed(() => {
+	if (is_se_enabled.value) {
+		return timelineAlbumGranularityOptions;
+	}
+
+	return timelineAlbumGranularityOptions.slice(0, 2);
+});
+
 const headersOptions = computed(() => {
 	const list: HeaderOption[] = [
 		{
@@ -321,8 +393,10 @@ function load(editable: App.Http.Resources.Editable.EditableBaseAlbumResource, p
 	albumSortingColumn.value = SelectBuilders.buildAlbumSorting(editable.album_sorting?.column);
 	albumSortingOrder.value = SelectBuilders.buildSortingOrder(editable.album_sorting?.order);
 	photoLayout.value = SelectBuilders.buildPhotoLayout(editable.photo_layout ?? undefined);
-	license.value = SelectBuilders.buildLicense(editable.license);
-	aspectRatio.value = SelectBuilders.buildAspectRatio(editable.aspect_ratio);
+	license.value = SelectBuilders.buildLicense(editable.license ?? undefined);
+	aspectRatio.value = SelectBuilders.buildAspectRatio(editable.aspect_ratio ?? undefined);
+	albumTimeline.value = SelectBuilders.buildTimelineAlbumGranularity(editable.album_timeline ?? undefined);
+	photoTimeline.value = SelectBuilders.buildTimelinePhotoGranularity(editable.photo_timeline ?? undefined);
 	header_id.value = buildHeaderId(editable.header_id, photos);
 	tags.value = editable.tags;
 }
@@ -352,6 +426,8 @@ function saveAlbum() {
 		header_id: header_id.value?.id === "compact" ? null : (header_id.value?.id ?? null),
 		is_compact: header_id.value?.id === "compact",
 		photo_layout: photoLayout.value?.value ?? null,
+		album_timeline: albumTimeline.value?.value ?? null,
+		photo_timeline: photoTimeline.value?.value ?? null,
 	};
 	AlbumService.updateAlbum(data)
 		.then(() => {
@@ -378,6 +454,7 @@ function saveTagAlbum() {
 		photo_sorting_order: photoSortingOrder.value?.value ?? null,
 		copyright: copyright.value ?? null,
 		photo_layout: photoLayout.value?.value ?? null,
+		photo_timeline: photoTimeline.value?.value ?? null,
 	};
 	AlbumService.updateTag(data)
 		.then(() => {
diff --git a/resources/js/components/gallery/AlbumThumbPanel.vue b/resources/js/components/gallery/AlbumThumbPanel.vue
index 2d8395a4f60..1829430f93b 100644
--- a/resources/js/components/gallery/AlbumThumbPanel.vue
+++ b/resources/js/components/gallery/AlbumThumbPanel.vue
@@ -1,29 +1,70 @@
 <template>
-	<Panel :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
+	<Panel v-if="props.isTimeline === false" :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
 		<div class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pt-4">
-			<template v-for="(album, idx) in props.albums">
-				<AlbumThumb
-					@click="maySelect(idx + props.idxShift, $event)"
-					@contextmenu.prevent="menuOpen(idx + props.idxShift, $event)"
-					:album="album"
-					:cover_id="null"
-					:config="props.config"
-					v-if="!album.is_nsfw || are_nsfw_visible"
-					:is-selected="props.selectedAlbums.includes(album.id)"
-				/>
+			<AlbumThumbPanelList
+				:albums="props.albums"
+				:album="props.album"
+				:config="props.config"
+				:idx-shift="props.idxShift"
+				:iter="0"
+				:selected-albums="props.selectedAlbums"
+				@clicked="propagateClicked"
+				@contexted="propagateMenuOpen"
+			/>
+		</div>
+	</Panel>
+	<Panel v-else :header="'Timeline'" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
+		<Timeline v-if="is_timeline_left_border_visible" :value="albumsTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
+			<template #content="slotProps">
+				<div class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8">
+					<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ slotProps.item.header }}</div>
+					<AlbumThumbPanelList
+						:albums="slotProps.item.data"
+						:album="props.album"
+						:config="props.config"
+						:idx-shift="props.idxShift"
+						:iter="slotProps.item.iter"
+						:selected-albums="props.selectedAlbums"
+						@clicked="propagateClicked"
+						@contexted="propagateMenuOpen"
+					/>
+				</div>
+			</template>
+		</Timeline>
+		<div v-else>
+			<template v-for="albumTimeline in albumsTimeLine">
+				<div
+					v-if="albumTimeline.data.filter((a) => !a.is_nsfw || are_nsfw_visible).length > 0"
+					class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8"
+				>
+					<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ albumTimeline.header }}</div>
+					<AlbumThumbPanelList
+						:albums="albumTimeline.data"
+						:album="props.album"
+						:config="props.config"
+						:idx-shift="props.idxShift"
+						:iter="albumTimeline.iter"
+						:selected-albums="props.selectedAlbums"
+						@clicked="propagateClicked"
+						@contexted="propagateMenuOpen"
+					/>
+				</div>
 			</template>
 		</div>
 	</Panel>
 </template>
 <script setup lang="ts">
 import Panel from "primevue/panel";
-import AlbumThumb, { AlbumThumbConfig } from "@/components/gallery/thumbs/AlbumThumb.vue";
+import { AlbumThumbConfig } from "@/components/gallery/thumbs/AlbumThumb.vue";
 import { computed } from "vue";
+import { SplitData, useSplitter } from "@/composables/album/splitter";
+import Timeline from "primevue/timeline";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
+import AlbumThumbPanelList from "./AlbumThumbPanelList.vue";
 
 const lycheeStore = useLycheeStateStore();
-const { are_nsfw_visible } = storeToRefs(lycheeStore);
+const { are_nsfw_visible, is_timeline_left_border_visible } = storeToRefs(lycheeStore);
 
 const props = defineProps<{
 	header: string;
@@ -33,6 +74,7 @@ const props = defineProps<{
 	isAlone: boolean;
 	idxShift: number;
 	selectedAlbums: string[];
+	isTimeline: boolean;
 }>();
 
 // bubble up.
@@ -41,20 +83,24 @@ const emits = defineEmits<{
 	contexted: [idx: number, event: MouseEvent];
 }>();
 
-const maySelect = (idx: number, e: MouseEvent) => {
-	if (props.idxShift < 0) {
-		return;
-	}
+const { spliter } = useSplitter();
+
+const propagateClicked = (idx: number, e: MouseEvent) => {
 	emits("clicked", idx, e);
 };
 
-const menuOpen = (idx: number, e: MouseEvent) => {
-	if (props.idxShift < 0) {
-		return;
-	}
+const propagateMenuOpen = (idx: number, e: MouseEvent) => {
 	emits("contexted", idx, e);
 };
 
+const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>
+	spliter(
+		props.albums as App.Http.Resources.Models.ThumbAlbumResource[],
+		(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.timeDate ?? "",
+		(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.format ?? "Others",
+	),
+);
+
 const headerClass = computed(() => {
 	return props.isAlone ? "hidden" : "";
 });
diff --git a/resources/js/components/gallery/AlbumThumbPanelList.vue b/resources/js/components/gallery/AlbumThumbPanelList.vue
new file mode 100644
index 00000000000..1ed08753e6c
--- /dev/null
+++ b/resources/js/components/gallery/AlbumThumbPanelList.vue
@@ -0,0 +1,50 @@
+<template>
+	<template v-for="(album, idx) in props.albums">
+		<AlbumThumb
+			@click="maySelect(idx + props.iter + props.idxShift, $event)"
+			@contextmenu.prevent="menuOpen(idx + props.iter + props.idxShift, $event)"
+			:album="album"
+			:cover_id="null"
+			:config="props.config"
+			v-if="!album.is_nsfw || are_nsfw_visible"
+			:is-selected="props.selectedAlbums.includes(album.id)"
+		/>
+	</template>
+</template>
+<script setup lang="ts">
+import AlbumThumb, { AlbumThumbConfig } from "@/components/gallery/thumbs/AlbumThumb.vue";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+
+const lycheeStore = useLycheeStateStore();
+const { are_nsfw_visible } = storeToRefs(lycheeStore);
+
+const props = defineProps<{
+	album: App.Http.Resources.Models.AlbumResource | undefined | null;
+	albums: { [key: number]: App.Http.Resources.Models.ThumbAlbumResource };
+	config: AlbumThumbConfig;
+	iter: number;
+	idxShift: number;
+	selectedAlbums: string[];
+}>();
+
+// bubble up.
+const emits = defineEmits<{
+	clicked: [idx: number, event: MouseEvent];
+	contexted: [idx: number, event: MouseEvent];
+}>();
+
+const maySelect = (idx: number, e: MouseEvent) => {
+	if (props.idxShift < 0) {
+		return;
+	}
+	emits("clicked", idx, e);
+};
+
+const menuOpen = (idx: number, e: MouseEvent) => {
+	if (props.idxShift < 0) {
+		return;
+	}
+	emits("contexted", idx, e);
+};
+</script>
diff --git a/resources/js/components/gallery/PhotoThumbPanel.vue b/resources/js/components/gallery/PhotoThumbPanel.vue
index 86e9f0334dd..9739d22fa7b 100644
--- a/resources/js/components/gallery/PhotoThumbPanel.vue
+++ b/resources/js/components/gallery/PhotoThumbPanel.vue
@@ -1,39 +1,54 @@
 <template>
 	<Panel id="lychee_view_content" :header="$t(props.header)" class="w-full border-0">
 		<template #icons>
-			<a class="px-1 cursor-pointer group" @click="(layout = 'square') && activateLayout()" :title="$t('lychee.LAYOUT_SQUARES')">
-				<MiniIcon icon="squares" fill="fill-transparent" :class="squareClass" />
-			</a>
-			<a class="px-1 cursor-pointer group" @click="(layout = 'justified') && activateLayout()" :title="$t('lychee.LAYOUT_JUSTIFIED')">
-				<MiniIcon icon="justified" fill="" :class="justifiedClass" />
-			</a>
-			<a class="px-1 cursor-pointer group" @click="(layout = 'masonry') && activateLayout()" :title="$t('lychee.LAYOUT_MASONRY')">
-				<MiniIcon icon="masonry" fill="fill-transparent" :class="masonryClass" />
-			</a>
-			<a class="px-1 cursor-pointer group" @click="(layout = 'grid') && activateLayout()" :title="$t('lychee.LAYOUT_GRID')">
-				<MiniIcon icon="grid" fill="fill-transparent" :class="gridClass" />
-			</a>
+			<PhotoThumbPanelControl v-model:layout="layout" />
+		</template>
+		<PhotoThumbPanelList
+			v-if="isTimeline === false"
+			:photos="props.photos"
+			:layout="layout"
+			:album="props.album"
+			:galleryConfig="props.galleryConfig"
+			:selectedPhotos="props.selectedPhotos"
+			:iter="0"
+			@clicked="propagateClicked"
+			@contexted="propagateMenuOpen"
+			:isTimeline="isTimeline"
+		/>
+		<template v-else>
+			<Timeline v-if="is_timeline_left_border_visible" :value="photosTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
+				<template #content="slotProps">
+					<div class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8">
+						<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ slotProps.item.header }}</div>
+						<PhotoThumbPanelList
+							:photos="slotProps.item.data"
+							:layout="layout"
+							:album="props.album"
+							:galleryConfig="props.galleryConfig"
+							:selectedPhotos="props.selectedPhotos"
+							:iter="slotProps.item.iter"
+							:isTimeline="isTimeline"
+							@clicked="propagateClicked"
+							@contexted="propagateMenuOpen"
+						/>
+					</div>
+				</template>
+			</Timeline>
 		</template>
-		<div class="relative flex flex-wrap flex-row flex-shrink w-full justify-start align-top" id="photoListing">
-			<template v-for="(photo, idx) in props.photos">
-				<PhotoThumb
-					@click="maySelect(idx, $event)"
-					@contextmenu.prevent="menuOpen(idx, $event)"
-					:is-selected="props.selectedPhotos.includes(photo.id)"
-					:photo="photo"
-					:album="props.album"
-					:is-lazy="idx > 10"
-				/>
-			</template>
-		</div>
 	</Panel>
 </template>
 <script setup lang="ts">
-import { onMounted, onUpdated } from "vue";
+import { computed, ref } from "vue";
 import Panel from "primevue/panel";
-import PhotoThumb from "@/components/gallery/thumbs/PhotoThumb.vue";
-import MiniIcon from "@/components/icons/MiniIcon.vue";
-import { useLayouts } from "@/layouts/PhotoLayout";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import { SplitData, useSplitter } from "@/composables/album/splitter";
+import Timeline from "primevue/timeline";
+import PhotoThumbPanelList from "./PhotoThumbPanelList.vue";
+import PhotoThumbPanelControl from "./PhotoThumbPanelControl.vue";
+
+const lycheeStore = useLycheeStateStore();
+const { is_timeline_left_border_visible } = storeToRefs(lycheeStore);
 
 const props = defineProps<{
 	header: string;
@@ -46,18 +61,33 @@ const props = defineProps<{
 		| undefined;
 	galleryConfig: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig;
 	selectedPhotos: string[];
+	isTimeline: boolean;
 }>();
 
+const layout = ref(props.photoLayout);
+const isTimeline = ref(props.isTimeline);
+
 // bubble up.
 const emits = defineEmits<{
 	clicked: [idx: number, event: MouseEvent];
 	contexted: [idx: number, event: MouseEvent];
 }>();
-const maySelect = (idx: number, e: MouseEvent) => emits("clicked", idx, e);
-const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
 
-// Layouts stuff
-const { activateLayout, layout, squareClass, justifiedClass, masonryClass, gridClass } = useLayouts(props.galleryConfig, props.photoLayout);
-onMounted(() => activateLayout());
-onUpdated(() => activateLayout());
+const propagateClicked = (idx: number, e: MouseEvent) => {
+	emits("clicked", idx, e);
+};
+
+const propagateMenuOpen = (idx: number, e: MouseEvent) => {
+	emits("contexted", idx, e);
+};
+
+const { spliter } = useSplitter();
+
+const photosTimeLine = computed<SplitData<App.Http.Resources.Models.PhotoResource>[]>(() =>
+	spliter(
+		props.photos as App.Http.Resources.Models.PhotoResource[],
+		(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.timeDate ?? "",
+		(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.format ?? "Others",
+	),
+);
 </script>
diff --git a/resources/js/components/gallery/PhotoThumbPanelControl.vue b/resources/js/components/gallery/PhotoThumbPanelControl.vue
new file mode 100644
index 00000000000..99ea1e8e92b
--- /dev/null
+++ b/resources/js/components/gallery/PhotoThumbPanelControl.vue
@@ -0,0 +1,24 @@
+<template>
+	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'square'" :title="$t('lychee.LAYOUT_SQUARES')">
+		<MiniIcon icon="squares" fill="fill-transparent" :class="squareClass" />
+	</a>
+	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'justified'" :title="$t('lychee.LAYOUT_JUSTIFIED')">
+		<MiniIcon icon="justified" fill="" :class="justifiedClass" />
+	</a>
+	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'masonry'" :title="$t('lychee.LAYOUT_MASONRY')">
+		<MiniIcon icon="masonry" fill="fill-transparent" :class="masonryClass" />
+	</a>
+	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'grid'" :title="$t('lychee.LAYOUT_GRID')">
+		<MiniIcon icon="grid" fill="fill-transparent" :class="gridClass" />
+	</a>
+</template>
+<script setup lang="ts">
+import { Ref } from "vue";
+import MiniIcon from "@/components/icons/MiniIcon.vue";
+import { useLayoutClass } from "@/layouts/PhotoLayout";
+
+const layout = defineModel("layout") as Ref<App.Enum.PhotoLayoutType>;
+
+// Layouts stuff
+const { squareClass, justifiedClass, masonryClass, gridClass } = useLayoutClass(layout);
+</script>
diff --git a/resources/js/components/gallery/PhotoThumbPanelList.vue b/resources/js/components/gallery/PhotoThumbPanelList.vue
new file mode 100644
index 00000000000..00321c4f383
--- /dev/null
+++ b/resources/js/components/gallery/PhotoThumbPanelList.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="relative flex flex-wrap flex-row flex-shrink w-full justify-start align-top" :id="'photoListing' + props.iter">
+		<template v-for="(photo, idx) in props.photos">
+			<PhotoThumb
+				@click="maySelect(idx + iter, $event)"
+				@contextmenu.prevent="menuOpen(idx + iter, $event)"
+				:is-selected="props.selectedPhotos.includes(photo.id)"
+				:photo="photo"
+				:album="props.album"
+				:is-lazy="idx + iter > 10"
+			/>
+		</template>
+	</div>
+</template>
+<script setup lang="ts">
+import { useLayouts } from "@/layouts/PhotoLayout";
+import { onMounted, onUpdated, Ref } from "vue";
+import PhotoThumb from "./thumbs/PhotoThumb.vue";
+
+const props = defineProps<{
+	photos: { [key: number]: App.Http.Resources.Models.PhotoResource };
+	album:
+		| App.Http.Resources.Models.AlbumResource
+		| App.Http.Resources.Models.TagAlbumResource
+		| App.Http.Resources.Models.SmartAlbumResource
+		| undefined;
+	galleryConfig: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig;
+	selectedPhotos: string[];
+	iter: number;
+}>();
+
+const layout = defineModel("layout") as Ref<App.Enum.PhotoLayoutType>;
+const isTimeline = defineModel("isTimeline") as Ref<boolean>;
+
+const emits = defineEmits<{
+	clicked: [idx: number, event: MouseEvent];
+	contexted: [idx: number, event: MouseEvent];
+}>();
+const maySelect = (idx: number, e: MouseEvent) => emits("clicked", idx, e);
+const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
+
+// Layouts stuff
+const { activateLayout } = useLayouts(props.galleryConfig, layout, isTimeline, "photoListing" + props.iter);
+onMounted(() => activateLayout());
+onUpdated(() => activateLayout());
+</script>
diff --git a/resources/js/components/settings/AllSettings.vue b/resources/js/components/settings/AllSettings.vue
index 5b7970d3828..db9071b704a 100644
--- a/resources/js/components/settings/AllSettings.vue
+++ b/resources/js/components/settings/AllSettings.vue
@@ -89,9 +89,8 @@
 										@filled="update"
 										@reset="reset"
 									/>
-
 									<SelectOptionsField
-										v-else-if="config.key === 'layout'"
+										v-else-if="config.type === 'square|justified|masonry|grid'"
 										:config="config"
 										:options="photoLayoutOptions"
 										:mapper="SelectBuilders.buildPhotoLayout"
diff --git a/resources/js/composables/album/albumRefresher.ts b/resources/js/composables/album/albumRefresher.ts
index 7e3a9cdb74f..29a84c1233a 100644
--- a/resources/js/composables/album/albumRefresher.ts
+++ b/resources/js/composables/album/albumRefresher.ts
@@ -9,7 +9,6 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 	const tagAlbum = ref<App.Http.Resources.Models.TagAlbumResource | undefined>(undefined);
 	const smartAlbum = ref<App.Http.Resources.Models.SmartAlbumResource | undefined>(undefined);
 	const album = computed(() => modelAlbum.value || tagAlbum.value || smartAlbum.value);
-	const layout = ref<App.Http.Resources.GalleryConfigs.PhotoLayoutConfig | null>(null);
 	const isAlbumConsented = ref(false);
 
 	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
@@ -54,12 +53,6 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 			});
 	}
 
-	function loadLayout(): Promise<void> {
-		return AlbumService.getLayout().then((data) => {
-			layout.value = data.data;
-		});
-	}
-
 	function refresh(): Promise<void> {
 		return loadUser();
 	}
@@ -74,12 +67,10 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 		smartAlbum,
 		album,
 		rights,
-		layout,
 		photos,
 		config,
 		loadUser,
 		loadAlbum,
-		loadLayout,
 		refresh,
 	};
 }
diff --git a/resources/js/composables/album/searchRefresher.ts b/resources/js/composables/album/searchRefresher.ts
index 12c0e859249..1138269739f 100644
--- a/resources/js/composables/album/searchRefresher.ts
+++ b/resources/js/composables/album/searchRefresher.ts
@@ -12,6 +12,7 @@ export function useSearch(albumid: Ref<string>, togglableStore: TogglablesStateS
 	const from = ref(0);
 	const per_page = ref(0);
 	const total = ref(0);
+	const layout = ref<App.Enum.PhotoLayoutType>("square");
 
 	const photoHeader = computed(() => {
 		return trans("lychee.PHOTOS") + " (" + total.value + ")";
@@ -24,6 +25,7 @@ export function useSearch(albumid: Ref<string>, togglableStore: TogglablesStateS
 	function searchInit() {
 		SearchService.init(albumid.value).then((response) => {
 			searchMinimumLengh.value = response.data.search_minimum_length;
+			layout.value = response.data.photo_layout;
 		});
 	}
 
@@ -68,6 +70,7 @@ export function useSearch(albumid: Ref<string>, togglableStore: TogglablesStateS
 	}
 
 	return {
+		layout,
 		albums,
 		photos,
 		noData,
diff --git a/resources/js/composables/contextMenus/contextMenu.ts b/resources/js/composables/contextMenus/contextMenu.ts
index 745ddd3bdfe..acebe9c4679 100644
--- a/resources/js/composables/contextMenus/contextMenu.ts
+++ b/resources/js/composables/contextMenus/contextMenu.ts
@@ -1,19 +1,19 @@
 import { computed, Ref, ref } from "vue";
 
 type Selectors = {
-	config: Ref<App.Http.Resources.GalleryConfigs.AlbumConfig | undefined> | null;
-	album: Ref<
+	config?: Ref<App.Http.Resources.GalleryConfigs.AlbumConfig | undefined>;
+	album?: Ref<
 		| App.Http.Resources.Models.AlbumResource
 		| App.Http.Resources.Models.TagAlbumResource
 		| App.Http.Resources.Models.SmartAlbumResource
 		| undefined
-	> | null;
-	selectedPhotosIdx: Ref<number[]> | undefined;
-	selectedPhoto: Ref<App.Http.Resources.Models.PhotoResource | undefined> | undefined;
-	selectedPhotos: Ref<App.Http.Resources.Models.PhotoResource[]> | undefined;
-	selectedAlbumIdx: Ref<number[]>;
-	selectedAlbum: Ref<App.Http.Resources.Models.ThumbAlbumResource | undefined>;
-	selectedAlbums: Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	>;
+	selectedPhotosIdx?: Ref<number[]>;
+	selectedPhoto?: Ref<App.Http.Resources.Models.PhotoResource | undefined>;
+	selectedPhotos?: Ref<App.Http.Resources.Models.PhotoResource[]>;
+	selectedAlbumIdx?: Ref<number[]>;
+	selectedAlbum?: Ref<App.Http.Resources.Models.ThumbAlbumResource | undefined>;
+	selectedAlbums?: Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
 };
 
 type PhotoCallbacks = {
@@ -73,10 +73,10 @@ export function useContextMenu(selectors: Selectors, photoCallbacks: PhotoCallba
 		if (selectors.selectedPhotos !== undefined && selectors.selectedPhotos.value.length > 1) {
 			menu = photosMenu();
 		}
-		if (selectors.selectedAlbum.value !== undefined) {
+		if (selectors.selectedAlbum !== undefined && selectors.selectedAlbum.value !== undefined) {
 			menu = albumMenu();
 		}
-		if (selectors.selectedAlbums.value.length > 1) {
+		if (selectors.selectedAlbums !== undefined && selectors.selectedAlbums.value.length > 1) {
 			menu = albumsMenu();
 		}
 		return menu.filter((item) => item.access !== false);
diff --git a/resources/js/config/constants.ts b/resources/js/config/constants.ts
index 3786525a288..2d0075fecb5 100644
--- a/resources/js/config/constants.ts
+++ b/resources/js/config/constants.ts
@@ -104,6 +104,23 @@ export const toolsOptions: SelectOption<string>[] = [
 	{ value: "2", label: "discover" },
 ];
 
+export const timelinePhotoGranularityOptions: SelectOption<App.Enum.TimelinePhotoGranularity>[] = [
+	{ value: "default", label: "default" },
+	{ value: "disabled", label: "disabled" },
+	{ value: "year", label: "year" },
+	{ value: "month", label: "month" },
+	{ value: "day", label: "day" },
+	{ value: "hour", label: "hour" },
+];
+
+export const timelineAlbumGranularityOptions: SelectOption<App.Enum.TimelineAlbumGranularity>[] = [
+	{ value: "default", label: "default" },
+	{ value: "disabled", label: "disabled" },
+	{ value: "year", label: "year" },
+	{ value: "month", label: "month" },
+	{ value: "day", label: "day" },
+];
+
 export const SelectBuilders = {
 	buildPhotoSorting(value: string | App.Enum.ColumnSortingType | undefined): SelectOption<App.Enum.ColumnSortingPhotoType> | undefined {
 		return photoSortingColumnsOptions.find((option) => option.value === value) || undefined;
@@ -117,11 +134,11 @@ export const SelectBuilders = {
 		return albumSortingColumnsOptions.find((option) => option.value === value) || undefined;
 	},
 
-	buildAspectRatio(value: string | App.Enum.AspectRatioType | null): SelectOption<App.Enum.AspectRatioType> | undefined {
+	buildAspectRatio(value: string | App.Enum.AspectRatioType | undefined): SelectOption<App.Enum.AspectRatioType> | undefined {
 		return aspectRationOptions.find((option) => option.value === value) || undefined;
 	},
 
-	buildLicense(value: string | App.Enum.LicenseType | null): SelectOption<App.Enum.LicenseType> | undefined {
+	buildLicense(value: string | App.Enum.LicenseType | undefined): SelectOption<App.Enum.LicenseType> | undefined {
 		return licenseOptions.find((option) => option.value === value) || undefined;
 	},
 
@@ -144,4 +161,16 @@ export const SelectBuilders = {
 	buildToolSelection(value: string | undefined): SelectOption<string> | undefined {
 		return toolsOptions.find((option) => option.value === value) || undefined;
 	},
+
+	buildTimelinePhotoGranularity(
+		value: string | App.Enum.TimelinePhotoGranularity | undefined,
+	): SelectOption<App.Enum.TimelinePhotoGranularity> | undefined {
+		return timelinePhotoGranularityOptions.find((option) => option.value === value) || undefined;
+	},
+
+	buildTimelineAlbumGranularity(
+		value: string | App.Enum.TimelineAlbumGranularity | undefined,
+	): SelectOption<App.Enum.TimelineAlbumGranularity> | undefined {
+		return timelineAlbumGranularityOptions.find((option) => option.value === value) || undefined;
+	},
 };
diff --git a/resources/js/layouts/PhotoLayout.ts b/resources/js/layouts/PhotoLayout.ts
index c4eb5f6cf76..756103a6ccd 100644
--- a/resources/js/layouts/PhotoLayout.ts
+++ b/resources/js/layouts/PhotoLayout.ts
@@ -1,20 +1,21 @@
-import { computed, ref } from "vue";
+import { computed, Ref, ref } from "vue";
 import { useSquare } from "./useSquare";
 import { useJustify } from "./useJustify";
 import { useMasonry } from "./useMasonry";
 import { useGrid } from "./useGrid";
+import AlbumService from "@/services/album-service";
 
-export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig, photo_layout: App.Enum.PhotoLayoutType) {
+export function useLayouts(
+	config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig,
+	layout: Ref<App.Enum.PhotoLayoutType>,
+	isTimeline: Ref<boolean>,
+	elemId: string = "photoListing",
+) {
 	const configRef = ref(config);
-	const layout = ref(photo_layout);
-	const BASE = "my-0 w-5 h-5 mr-0 ml-0 transition-all duration-300 group-hover:scale-150 group-hover:stroke-black dark:group-hover:stroke-white ";
-	const squareClass = computed(() => BASE + (layout.value === "square" ? "stroke-primary-400" : "stroke-neutral-400"));
-	const justifiedClass = computed(() => BASE + (layout.value === "justified" ? "fill-primary-400" : "fill-neutral-400"));
-	const masonryClass = computed(() => BASE + (layout.value === "masonry" ? "stroke-primary-400" : "stroke-neutral-400"));
-	const gridClass = computed(() => BASE + (layout.value === "grid" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const elementId = elemId;
 
 	function activateLayout() {
-		const photoListing = document.getElementById("photoListing");
+		const photoListing = document.getElementById(elementId);
 		if (photoListing === null) {
 			return; // Nothing to do
 		}
@@ -24,7 +25,7 @@ export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayout
 				return useSquare(photoListing, configRef.value.photo_layout_square_column_width, configRef.value.photo_layout_gap);
 			case "justified":
 			case "unjustified":
-				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height);
+				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height, isTimeline.value);
 			case "masonry":
 				return useMasonry(photoListing, configRef.value.photo_layout_masonry_column_width, configRef.value.photo_layout_gap);
 			case "grid":
@@ -33,11 +34,38 @@ export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayout
 	}
 
 	return {
-		layout,
+		activateLayout,
+	};
+}
+
+export function useLayoutClass(layout: Ref<App.Enum.PhotoLayoutType>) {
+	const BASE = "my-0 w-5 h-5 mr-0 ml-0 transition-all duration-300 group-hover:scale-150 group-hover:stroke-black dark:group-hover:stroke-white ";
+	const squareClass = computed(() => BASE + (layout.value === "square" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const justifiedClass = computed(() => BASE + (layout.value === "justified" ? "fill-primary-400" : "fill-neutral-400"));
+	const masonryClass = computed(() => BASE + (layout.value === "masonry" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const gridClass = computed(() => BASE + (layout.value === "grid" ? "stroke-primary-400" : "stroke-neutral-400"));
+
+	return {
 		squareClass,
 		justifiedClass,
 		masonryClass,
 		gridClass,
-		activateLayout,
+	};
+}
+
+export function useGetLayoutConfig() {
+	const layoutConfig = ref(null) as Ref<null | App.Http.Resources.GalleryConfigs.PhotoLayoutConfig>;
+	const layout = ref("square") as Ref<App.Enum.PhotoLayoutType>;
+
+	function loadLayoutConfig() {
+		AlbumService.getLayout().then((data) => {
+			layoutConfig.value = data.data;
+		});
+	}
+
+	return {
+		layout,
+		layoutConfig,
+		loadLayoutConfig,
 	};
 }
diff --git a/resources/js/layouts/useJustify.ts b/resources/js/layouts/useJustify.ts
index 27243313349..e59e6a13374 100644
--- a/resources/js/layouts/useJustify.ts
+++ b/resources/js/layouts/useJustify.ts
@@ -1,14 +1,13 @@
 import { ChildNodeWithDataStyle } from "./types";
 import createJustifiedLayout from "justified-layout";
 
-export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320) {
-	const containerWidth = parseInt(getComputedStyle(el).width);
-
-	// const width = el.clientWidth;
-	// const body_width = document.body.scrollWidth;
-	// console.log("containerWidth: " + containerWidth);
-	// console.log("width: " + width)
-	// console.log("body_width: " + body_width);
+export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320, isTimeline: boolean) {
+	const baseElem = document.getElementById("lychee_view_content");
+	if (!baseElem) {
+		return;
+	}
+	const containerDefaultWidth = parseInt(getComputedStyle(baseElem).width) - 86;
+	const containerWidth = isTimeline ? Math.min(parseInt(getComputedStyle(el).width), containerDefaultWidth) : parseInt(getComputedStyle(el).width);
 
 	// @ts-expect-error
 	const justifiedItems: ChildNodeWithDataStyle[] = [...el.childNodes].filter((gridItem) => gridItem.nodeType === 1);
diff --git a/resources/js/lychee.d.ts b/resources/js/lychee.d.ts
index 5173e4fedd0..5417f0ec659 100644
--- a/resources/js/lychee.d.ts
+++ b/resources/js/lychee.d.ts
@@ -91,6 +91,8 @@ declare namespace App.Enum {
 	export type StorageDiskType = "images" | "s3";
 	export type ThumbAlbumSubtitleType = "description" | "takedate" | "creation" | "oldstyle";
 	export type ThumbOverlayVisibilityType = "never" | "always" | "hover";
+	export type TimelineAlbumGranularity = "default" | "disabled" | "year" | "month" | "day";
+	export type TimelinePhotoGranularity = "default" | "disabled" | "year" | "month" | "day" | "hour";
 	export type UpdateStatus = 0 | 1 | 2 | 3;
 	export type VersionChannelType = "release" | "git" | "tag";
 }
@@ -156,6 +158,8 @@ declare namespace App.Http.Resources.Editable {
 		photo_layout: App.Enum.PhotoLayoutType | null;
 		header_id: string | null;
 		cover_id: string | null;
+		album_timeline: App.Enum.TimelineAlbumGranularity | null;
+		photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 		tags: Array<string>;
 		is_model_album: boolean;
 	};
@@ -191,6 +195,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_nsfw_warning_visible: boolean;
 		album_thumb_css_aspect_ratio: App.Enum.AspectRatioCSSType;
 		photo_layout: App.Enum.PhotoLayoutType;
+		is_album_timeline_enabled: boolean;
+		is_photo_timeline_enabled: boolean;
 	};
 	export type FooterConfig = {
 		footer_additional_text: string;
@@ -220,6 +226,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		album_decoration_orientation: App.Enum.AlbumDecorationOrientation;
 		clockwork_url: string | null;
 		slideshow_timeout: number;
+		is_timeline_left_border_visible: boolean;
 		title: string;
 		dropbox_api_key: string;
 		is_se_enabled: boolean;
@@ -252,6 +259,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 	export type RootConfig = {
 		is_map_accessible: boolean;
 		is_mod_frame_enabled: boolean;
+		is_photo_timeline_enabled: boolean;
+		is_album_timeline_enabled: boolean;
 		is_search_accessible: boolean;
 		show_keybinding_help_button: boolean;
 		album_thumb_css_aspect_ratio: App.Enum.AspectRatioType;
@@ -259,6 +268,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		back_button_enabled: boolean;
 		back_button_text: string;
 		back_button_url: string;
+		timeline_album_granularity: App.Enum.TimelineAlbumGranularity;
 	};
 	export type UploadConfig = {
 		upload_processing_limit: number;
@@ -360,6 +370,7 @@ declare namespace App.Http.Resources.Models {
 		previous_photo_id: string | null;
 		preformatted: App.Http.Resources.Models.Utils.PreformattedPhotoData;
 		precomputed: App.Http.Resources.Models.Utils.PreComputedPhotoData;
+		timeline: App.Http.Resources.Models.Utils.TimelineData | null;
 	};
 	export type SizeVariantResource = {
 		type: App.Enum.SizeVariantType;
@@ -426,6 +437,7 @@ declare namespace App.Http.Resources.Models {
 		formatted_min_max: string | null;
 		owner: string | null;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
+		timeline: App.Http.Resources.Models.Utils.TimelineData | null;
 	};
 	export type ThumbResource = {
 		id: string;
@@ -504,6 +516,10 @@ declare namespace App.Http.Resources.Models.Utils {
 		license: string;
 		description: string;
 	};
+	export type TimelineData = {
+		timeDate: string;
+		format: string;
+	};
 	export type UserToken = {
 		token: string;
 	};
@@ -574,6 +590,7 @@ declare namespace App.Http.Resources.Root {
 declare namespace App.Http.Resources.Search {
 	export type InitResource = {
 		search_minimum_length: number;
+		photo_layout: App.Enum.PhotoLayoutType;
 	};
 	export type ResultsResource = {
 		albums: App.Http.Resources.Models.ThumbAlbumResource[] | Array<any>;
diff --git a/resources/js/services/album-service.ts b/resources/js/services/album-service.ts
index 39b520f95ac..46cd1119ce6 100644
--- a/resources/js/services/album-service.ts
+++ b/resources/js/services/album-service.ts
@@ -26,6 +26,8 @@ export type UpdateAbumData = {
 	copyright: string | null;
 	header_id: string | null;
 	is_compact: boolean;
+	album_timeline: App.Enum.TimelineAlbumGranularity | null;
+	photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 };
 
 export type UpdateTagAlbumData = {
@@ -37,6 +39,7 @@ export type UpdateTagAlbumData = {
 	photo_sorting_order: App.Enum.OrderSortingType | null;
 	copyright: string | null;
 	photo_layout: App.Enum.PhotoLayoutType | null;
+	photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 };
 
 export type UpdateProtectionPolicyData = {
diff --git a/resources/js/stores/LycheeState.ts b/resources/js/stores/LycheeState.ts
index 904e3fc18ef..1731584c554 100644
--- a/resources/js/stores/LycheeState.ts
+++ b/resources/js/stores/LycheeState.ts
@@ -41,6 +41,9 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		// menu stuff
 		clockwork_url: "" as null | string,
 
+		// Timeline settings
+		is_timeline_left_border_visible: true,
+
 		// Site title & Dropbox API key
 		title: "lychee.GALLERY",
 		dropbox_api_key: "disabled",
@@ -96,6 +99,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 
 					this.slideshow_timeout = data.slideshow_timeout;
 
+					this.is_timeline_left_border_visible = data.is_timeline_left_border_visible;
+
 					this.title = data.title;
 					this.dropbox_api_key = data.dropbox_api_key;
 
diff --git a/resources/js/style/preset.ts b/resources/js/style/preset.ts
index c76424d6059..b8cc55cb838 100644
--- a/resources/js/style/preset.ts
+++ b/resources/js/style/preset.ts
@@ -473,6 +473,26 @@ const LycheePrimeVueConfig = {
 				},
 			},
 		},
+		timeline: {
+			colorScheme: {
+				dark: {
+					event: {
+						marker: {
+							background: "{surface.800}",
+							border: {
+								color: "{surface.700}",
+							},
+							content: {
+								background: "{primary.600}",
+							},
+						},
+						connector: {
+							color: "{surface.700}",
+						},
+					},
+				},
+			},
+		},
 		paginator: {
 			colorScheme: {
 				light: {
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index d38b204ef70..71c56cf26fa 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -57,17 +57,19 @@
 					@contexted="albumMenuOpen"
 					:idx-shift="0"
 					:selected-albums="selectedAlbumsIds"
+					:is-timeline="config.is_album_timeline_enabled"
 				/>
 				<PhotoThumbPanel
-					v-if="layout !== null && photos !== null && photos.length > 0"
+					v-if="layoutConfig !== null && photos !== null && photos.length > 0"
 					header="lychee.PHOTOS"
 					:photos="photos"
 					:album="album"
-					:gallery-config="layout"
+					:gallery-config="layoutConfig"
 					:photo-layout="config.photo_layout"
 					:selected-photos="selectedPhotosIds"
 					@clicked="photoClick"
 					@contexted="photoMenuOpen"
+					:is-timeline="config.is_photo_timeline_enabled"
 				/>
 				<GalleryFooter v-once />
 			</div>
@@ -209,6 +211,7 @@ import { useTogglablesStateStore } from "@/stores/ModalsState";
 import UploadPanel from "@/components/modals/UploadPanel.vue";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
+import { useGetLayoutConfig } from "@/layouts/PhotoLayout";
 
 const route = useRoute();
 const router = useRouter();
@@ -240,8 +243,10 @@ function toggleSlideShow() {
 	router.push({ name: "photo", params: { albumid: album.value.id, photoid: album.value.photos[0].id } });
 }
 
+const { layoutConfig, loadLayoutConfig } = useGetLayoutConfig();
+
 // Set up Album ID reference. This one is updated at each page change.
-const { isAlbumConsented, isPasswordProtected, user, modelAlbum, album, rights, layout, photos, config, loadLayout, refresh } = useAlbumRefresher(
+const { isAlbumConsented, isPasswordProtected, user, modelAlbum, album, rights, photos, config, refresh } = useAlbumRefresher(
 	albumid,
 	auth,
 	is_login_open,
@@ -369,7 +374,7 @@ function consent() {
 	isAlbumConsented.value = true;
 }
 
-loadLayout();
+loadLayoutConfig();
 
 refresh().then(setScroll);
 
diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
index 671a162a2ac..15d0cfa7b0d 100644
--- a/resources/js/views/gallery-panels/Albums.vue
+++ b/resources/js/views/gallery-panels/Albums.vue
@@ -26,20 +26,23 @@
 			:is-alone="!albums.length"
 			:idx-shift="-1"
 			:selected-albums="[]"
+			:is-timeline="false"
 		/>
-		<AlbumThumbPanel
-			v-if="albums.length > 0"
-			header="lychee.ALBUMS"
-			:album="null"
-			:albums="albums"
-			:user="user"
-			:config="albumPanelConfig"
-			:is-alone="!sharedAlbums.length && !smartAlbums.length"
-			:idx-shift="0"
-			:selected-albums="selectedAlbumsIds"
-			@clicked="albumClick"
-			@contexted="albumMenuOpen"
-		/>
+		<template v-if="albums.length > 0">
+			<AlbumThumbPanel
+				:is-timeline="rootConfig.is_album_timeline_enabled"
+				header="lychee.ALBUMS"
+				:album="null"
+				:albums="albums"
+				:user="user"
+				:config="albumPanelConfig"
+				:is-alone="!sharedAlbums.length && !smartAlbums.length"
+				:idx-shift="0"
+				:selected-albums="selectedAlbumsIds"
+				@clicked="albumClick"
+				@contexted="albumMenuOpen"
+			/>
+		</template>
 		<template v-for="sharedAlbum in sharedAlbums">
 			<AlbumThumbPanel
 				v-if="sharedAlbums.length > 0"
@@ -53,6 +56,7 @@
 				:selected-albums="selectedAlbumsIds"
 				@clicked="albumClick"
 				@contexted="albumMenuOpen"
+				:is-timeline="false"
 			/>
 		</template>
 		<GalleryFooter v-once />
@@ -150,6 +154,7 @@ import UploadPanel from "@/components/modals/UploadPanel.vue";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
+import { EmptyPhotoCallbacks } from "@/utils/Helpers";
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -181,20 +186,6 @@ const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, alb
 const { isDeleteVisible, toggleDelete, isMergeAlbumVisible, toggleMergeAlbum, isMoveVisible, toggleMove, isRenameVisible, toggleRename } =
 	useGalleryModals(togglableStore);
 
-// Unused.
-const photoCallbacks = {
-	star: () => {},
-	unstar: () => {},
-	setAsCover: () => {},
-	setAsHeader: () => {},
-	toggleTag: () => {},
-	toggleRename: () => {},
-	toggleCopyTo: () => {},
-	toggleMove: () => {},
-	toggleDelete: () => {},
-	toggleDownload: () => {},
-};
-
 const albumCallbacks = {
 	setAsCover: () => {},
 	toggleRename: toggleRename,
@@ -208,16 +199,11 @@ const albumCallbacks = {
 
 const { menu, Menu, albumMenuOpen } = useContextMenu(
 	{
-		config: null,
-		album: null,
-		selectedPhoto: undefined,
-		selectedPhotos: undefined,
-		selectedPhotosIdx: undefined,
 		selectedAlbum: selectedAlbum,
 		selectedAlbums: selectedAlbums,
 		selectedAlbumIdx: selectedAlbumsIdx,
 	},
-	photoCallbacks,
+	EmptyPhotoCallbacks,
 	albumCallbacks,
 );
 
diff --git a/resources/js/views/gallery-panels/Search.vue b/resources/js/views/gallery-panels/Search.vue
index 44cad51e9d9..8103ccdabe5 100644
--- a/resources/js/views/gallery-panels/Search.vue
+++ b/resources/js/views/gallery-panels/Search.vue
@@ -53,20 +53,22 @@
 					@contexted="albumMenuOpen"
 					:idx-shift="0"
 					:selected-albums="selectedAlbumsIds"
+					:is-timeline="false"
 				/>
 				<div class="flex justify-center w-full" v-if="photos.length > 0">
 					<Paginator :total-records="total" :rows="per_page" v-model:first="from" @update:first="refresh" :always-show="false" />
 				</div>
 				<PhotoThumbPanel
-					v-if="layout !== null && photos.length > 0"
-					:photo-layout="configForMenu.photo_layout"
+					v-if="layoutConfig !== null && photos.length > 0"
+					:photo-layout="layout"
 					:header="photoHeader"
 					:photos="photos"
 					:album="undefined"
-					:gallery-config="layout"
+					:gallery-config="layoutConfig"
 					:selected-photos="selectedPhotosIds"
 					@clicked="photoClick"
 					@contexted="photoMenuOpen"
+					:is-timeline="configForMenu.is_photo_timeline_enabled"
 				/>
 			</div>
 
@@ -159,6 +161,7 @@ import DeleteDialog from "@/components/forms/gallery-dialogs/DeleteDialog.vue";
 import PhotoService from "@/services/photo-service";
 import AlbumService from "@/services/album-service";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { useGetLayoutConfig } from "@/layouts/PhotoLayout";
 
 const router = useRouter();
 const props = defineProps<{
@@ -182,6 +185,7 @@ const { is_full_screen, search_page, search_term, is_login_open, is_upload_visib
 const { are_nsfw_visible, nsfw_consented } = storeToRefs(lycheeStore);
 const {
 	albums,
+	layout,
 	photos,
 	noData,
 	searchMinimumLengh,
@@ -196,7 +200,8 @@ const {
 	clear,
 	refresh,
 } = useSearch(albumid, togglableStore, search_term, search_page);
-const { album, config, layout, loadAlbum, loadLayout } = useAlbumRefresher(albumid, auth, is_login_open, nsfw_consented);
+const { layoutConfig, loadLayoutConfig } = useGetLayoutConfig();
+const { album, config, loadAlbum } = useAlbumRefresher(albumid, auth, is_login_open, nsfw_consented);
 
 const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(() => {
 	if (config.value !== undefined) {
@@ -213,9 +218,13 @@ const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(()
 		is_nsfw_warning_visible: false,
 		album_thumb_css_aspect_ratio: "aspect-square",
 		photo_layout: "justified",
+		timeline_album_granularity: "year",
+		timeline_photo_granularity: "day",
+		is_album_timeline_enabled: false,
+		is_photo_timeline_enabled: false,
 	};
 });
-const albumForMenu = albumid.value !== "" ? album : null;
+const albumForMenu = albumid.value !== "" ? album : undefined;
 
 const title = computed<string>(() => {
 	if (album.value === undefined) {
@@ -318,7 +327,7 @@ if (albumid.value !== "") {
 }
 
 searchInit();
-loadLayout();
+loadLayoutConfig();
 
 if (togglableStore.isSearchActive) {
 	search(togglableStore.search_term);
diff --git a/routes/api_v1.php b/routes/api_v1.php
index c48f1e63b24..03c522fa8dc 100644
--- a/routes/api_v1.php
+++ b/routes/api_v1.php
@@ -174,7 +174,7 @@
 Route::post('/Settings::setCSS', [AdministrationSettingsController::class, 'setCSS']);
 Route::post('/Settings::setJS', [AdministrationSettingsController::class, 'setJS']);
 Route::post('/Settings::getAll', [AdministrationSettingsController::class, 'getAll']);
-Route::post('/Settings::saveAll', [AdministrationSettingsController::class, 'saveAll']);
+Route::post('/Settings::saveAll', [AdministrationSettingsController::class, 'saveAll'])->middleware(['config_integrity']);
 Route::post('/Settings::setAlbumDecoration', [AdministrationSettingsController::class, 'setAlbumDecoration']);
 Route::post('/Settings::setOverlayType', [AdministrationSettingsController::class, 'setImageOverlayType']);
 Route::post('/Settings::setNSFWVisible', [AdministrationSettingsController::class, 'setNSFWVisible']);
diff --git a/routes/api_v2.php b/routes/api_v2.php
index fb1ad1917af..0dfd606b1cf 100644
--- a/routes/api_v2.php
+++ b/routes/api_v2.php
@@ -186,7 +186,7 @@
  * SETTINGS.
  */
 Route::get('/Settings', [Admin\SettingsController::class, 'getAll']);
-Route::post('/Settings::setConfigs', [Admin\SettingsController::class, 'setConfigs']);
+Route::post('/Settings::setConfigs', [Admin\SettingsController::class, 'setConfigs'])->middleware(['config_integrity']);
 Route::get('/Settings::getLanguages', [Admin\SettingsController::class, 'getLanguages']);
 Route::post('/Settings::setCSS', [Admin\SettingsController::class, 'setCSS']);
 Route::post('/Settings::setJS', [Admin\SettingsController::class, 'setJS']);
diff --git a/tests/Feature_v2/Album/AlbumUpdateTest.php b/tests/Feature_v2/Album/AlbumUpdateTest.php
index 2113ec68b3f..3238fbc821a 100644
--- a/tests/Feature_v2/Album/AlbumUpdateTest.php
+++ b/tests/Feature_v2/Album/AlbumUpdateTest.php
@@ -32,6 +32,8 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertUnauthorized($response);
 
@@ -49,6 +51,8 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertForbidden($response);
 	}
@@ -69,6 +73,8 @@ public function testUpdateAlbumAuthorized(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertOk($response);
 	}
@@ -84,6 +90,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertUnauthorized($response);
 
@@ -96,6 +103,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertForbidden($response);
 	}
@@ -111,6 +119,7 @@ public function testUpdateTagAlbumAuthorized(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertOk($response);