diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index 0e1337a4f6..2563d98708 100644
--- a/src/components/events/Events.tsx
+++ b/src/components/events/Events.tsx
@@ -42,7 +42,9 @@ import {
 } from "../../slices/eventSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
-import { showModal } from "../../selectors/eventDetailsSelectors";
+import { showModal as showEventModal } from "../../selectors/eventDetailsSelectors";
+import { showModal as showSeriesModal } from "../../selectors/seriesDetailsSelectors";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -55,7 +57,8 @@ const Events = () => {
 	const dispatch = useAppDispatch();
 
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
-	const displayEventDetailsModal = useAppSelector(state => showModal(state));
+	const displayEventDetailsModal = useAppSelector(state => showEventModal(state));
+	const displaySeriesDetailsModal = useAppSelector(state => showSeriesModal(state));
 
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
@@ -308,14 +311,17 @@ const Events = () => {
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: events })}</h4>
 				</div>
 
-				{/*Include table modal*/}
+				{/*Include table modals*/}
 				{displayEventDetailsModal &&
 					<EventDetailsModal />
 				}
+				{displaySeriesDetailsModal &&
+					<SeriesDetailsModal />
+				}
 
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}
-        <Table templateMap={eventsTemplateMap} />
+				<Table templateMap={eventsTemplateMap} />
 			</MainView>
 			<Footer />
 		</>
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
index 4dcce7f070..dea46b75d3 100644
--- a/src/components/events/Series.tsx
+++ b/src/components/events/Series.tsx
@@ -34,6 +34,8 @@ import {
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
+import { showModal } from "../../selectors/seriesDetailsSelectors";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -51,6 +53,7 @@ const Series = () => {
 
   const user = useAppSelector(state => getUserInformation(state));
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+	const displaySeriesDetailsModal = useAppSelector(state => showModal(state));
 
 	let location = useLocation();
 
@@ -142,11 +145,11 @@ const Series = () => {
 	};
 
 	useHotkeys(
-    availableHotkeys.general.NEW_SERIES.sequence,
-    () => showNewSeriesModal(),
+		availableHotkeys.general.NEW_SERIES.sequence,
+		() => showNewSeriesModal(),
 		{ description: t(availableHotkeys.general.NEW_SERIES.description) ?? undefined },
-    [showNewSeriesModal]
-  );
+		[showNewSeriesModal]
+	);
 
 	return (
 		<>
@@ -234,6 +237,11 @@ const Series = () => {
 					{/* Include table view */}
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
+
+				{displaySeriesDetailsModal &&
+					<SeriesDetailsModal />
+				}
+
 				<Table templateMap={seriesTemplateMap} />
 			</MainView>
 			<Footer />
diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index 0654b63cf2..620d01770a 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -4,19 +4,12 @@ import ConfirmModal from "../../shared/ConfirmModal";
 import EmbeddingCodeModal from "./modals/EmbeddingCodeModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
 import { EventDetailsPage } from "./modals/EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import {
-	fetchSeriesDetailsAcls,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsThemeNames,
-} from "../../../slices/seriesDetailsSlice";
+import { openModal as openSeriesModal } from "../../../slices/seriesDetailsSlice";
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
-import { openModal } from "../../../slices/eventDetailsSlice";
+import { openModal as openEventModal } from "../../../slices/eventDetailsSlice";
 
 /**
  * This component renders the action cells of events in the table view
@@ -30,7 +23,6 @@ const EventActionCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 	const [displayEmbeddingCodeModal, setEmbeddingCodeModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -51,52 +43,30 @@ const EventActionCell = ({
 		setEmbeddingCodeModal(true);
 	};
 
-	const showSeriesDetailsModal = () => {
-		setSeriesDetailsModal(true);
-	};
-
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
 	const onClickSeriesDetails = async () => {
 		if (!!row.series) {
-			await dispatch(fetchSeriesDetailsMetadata(row.series.id));
-			await dispatch(fetchSeriesDetailsAcls(row.series.id));
-			await dispatch(fetchSeriesDetailsFeeds(row.series.id));
-			await dispatch(fetchSeriesDetailsTheme(row.series.id));
-			await dispatch(fetchSeriesDetailsThemeNames());
-
-			showSeriesDetailsModal();
+			await dispatch(openSeriesModal(row.series));
 		}
 	};
 
 	const onClickEventDetails = () => {
-		dispatch(openModal(EventDetailsPage.Metadata, row));
+		dispatch(openEventModal(EventDetailsPage.Metadata, row));
 	};
 
 	const onClickComments = () => {
-		dispatch(openModal(EventDetailsPage.Comments, row));
+		dispatch(openEventModal(EventDetailsPage.Comments, row));
 	};
 
 	const onClickWorkflow = () => {
-		dispatch(openModal(EventDetailsPage.Workflow, row));
+		dispatch(openEventModal(EventDetailsPage.Workflow, row));
 	};
 
 	const onClickAssets = () => {
-		dispatch(openModal(EventDetailsPage.Assets, row));
+		dispatch(openEventModal(EventDetailsPage.Assets, row));
 	};
 
 	return (
 		<>
-			{!!row.series && displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.series.id}
-					seriesTitle={row.series.title}
-				/>
-			)}
-
 			{/* Open event details */}
 			{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
 				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index 6315c17ba8..0b858b70ce 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/src/components/events/partials/SeriesActionsCell.tsx
@@ -1,15 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
-import {
-	fetchSeriesDetailsThemeNames,
-	fetchSeriesDetailsAcls,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsTobira,
-} from "../../../slices/seriesDetailsSlice";
+import { openModal } from "../../../slices/seriesDetailsSlice";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import {
@@ -37,7 +29,6 @@ const SeriesActionsCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
@@ -57,41 +48,18 @@ const SeriesActionsCell = ({
 		dispatch(deleteSeries(id));
 	};
 
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
-	const showSeriesDetailsModal = async () => {
-		await dispatch(fetchSeriesDetailsMetadata(row.id));
-		await dispatch(fetchSeriesDetailsAcls(row.id));
-		await dispatch(fetchSeriesDetailsFeeds(row.id));
-		await dispatch(fetchSeriesDetailsTheme(row.id));
-		await dispatch(fetchSeriesDetailsThemeNames());
-		await dispatch(fetchSeriesDetailsTobira(row.id));
-
-		setSeriesDetailsModal(true);
-	};
-
 	return (
 		<>
 			{/* series details */}
 			{hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
 				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
 					<button
-						onClick={() => showSeriesDetailsModal()}
+						onClick={() => dispatch(openModal(row))}
 						className="button-like-anchor more-series"
 					/>
 				</Tooltip>
 			)}
 
-			{displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.id}
-					seriesTitle={row.title}
-				/>
-			)}
-
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
 				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DELETE")}>
diff --git a/src/components/events/partials/modals/EventDetails.tsx b/src/components/events/partials/modals/EventDetails.tsx
index 7fa1ecbb63..1381741e44 100644
--- a/src/components/events/partials/modals/EventDetails.tsx
+++ b/src/components/events/partials/modals/EventDetails.tsx
@@ -66,12 +66,10 @@ export type AssetTabHierarchy = "entry" | "add-asset" | "asset-attachments" | "a
  */
 const EventDetails = ({
 	eventId,
-	close,
 	policyChanged,
 	setPolicyChanged,
 }: {
 	eventId: string,
-	close?: () => void,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
 }) => {
diff --git a/src/components/events/partials/modals/SeriesDetails.tsx b/src/components/events/partials/modals/SeriesDetails.tsx
index 7f76be77ee..26098b4e7f 100644
--- a/src/components/events/partials/modals/SeriesDetails.tsx
+++ b/src/components/events/partials/modals/SeriesDetails.tsx
@@ -1,12 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import {
+	getModalPage,
 	getSeriesDetailsExtendedMetadata,
 	getSeriesDetailsFeeds,
 	getSeriesDetailsMetadata,
 	getSeriesDetailsTheme,
 	getSeriesDetailsThemeNames,
+	isFetchingFeeds,
+	isFetchingMetadata,
+	isFetchingStatistics,
+	isFetchingThemes,
+	isFetchingTobiraData,
 	getSeriesDetailsTobiraDataError,
 	hasStatistics as seriesHasStatistics,
 } from "../../../../selectors/seriesDetailsSelectors";
@@ -20,10 +26,15 @@ import DetailsMetadataTab from "../ModalTabsAndPages/DetailsMetadataTab";
 import DetailsExtendedMetadataTab from "../ModalTabsAndPages/DetailsExtendedMetadataTab";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
+	setModalPage,
 	fetchSeriesStatistics,
-	setTobiraTabHierarchy,
 	updateExtendedSeriesMetadata,
 	updateSeriesMetadata,
+	fetchSeriesDetailsMetadata,
+	fetchSeriesDetailsTheme,
+	fetchSeriesDetailsThemeNames,
+	fetchSeriesDetailsFeeds,
+	fetchSeriesDetailsTobira,
 } from "../../../../slices/seriesDetailsSlice";
 import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
 
@@ -42,21 +53,30 @@ const SeriesDetails = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
+	const metadataFields = useAppSelector(state => getSeriesDetailsMetadata(state));
 	const extendedMetadata = useAppSelector(state => getSeriesDetailsExtendedMetadata(state));
+	const isLoadingMetadata = useAppSelector(state => isFetchingMetadata(state));
 	const feeds = useAppSelector(state => getSeriesDetailsFeeds(state));
-	const metadataFields = useAppSelector(state => getSeriesDetailsMetadata(state));
+	const isLoadingFeeds = useAppSelector(state => isFetchingFeeds(state));
 	const theme = useAppSelector(state => getSeriesDetailsTheme(state));
 	const themeNames = useAppSelector(state => getSeriesDetailsThemeNames(state));
+	const isLoadingThemes = useAppSelector(state => isFetchingThemes(state));
 	const hasStatistics = useAppSelector(state => seriesHasStatistics(state));
+	const isLoadingStatistics = useAppSelector(state => isFetchingStatistics(state));
 	const tobiraError = useAppSelector(state => getSeriesDetailsTobiraDataError(state));
+	const isLoadingTobiraData = useAppSelector(state => isFetchingTobiraData(state));
 
 	useEffect(() => {
+		dispatch(fetchSeriesDetailsMetadata(seriesId));
 		dispatch(fetchSeriesStatistics(seriesId));
-		dispatch(setTobiraTabHierarchy("main"));
+		dispatch(fetchSeriesDetailsTheme(seriesId));
+		dispatch(fetchSeriesDetailsFeeds(seriesId));
+		dispatch(fetchSeriesDetailsTobira(seriesId));
+		dispatch(fetchSeriesDetailsThemeNames());
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const [page, setPage] = useState(0);
+	const page = useAppSelector(state => getModalPage(state));
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const orgProperties = useAppSelector(state => getOrgProperties(state));
@@ -101,7 +121,7 @@ const SeriesDetails = ({
 	];
 
 	const openTab = (tabNr: number) => {
-		setPage(tabNr);
+		dispatch(setModalPage(tabNr));
 	};
 
 	return (
@@ -126,7 +146,7 @@ const SeriesDetails = ({
 
 			{/* render modal content depending on current page */}
 			<div>
-				{page === 0 && (
+				{page === 0 && !isLoadingMetadata && (
 					<DetailsMetadataTab
 						metadataFields={metadataFields}
 						resourceId={seriesId}
@@ -135,7 +155,7 @@ const SeriesDetails = ({
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
 					/>
 				)}
-				{page === 1 && (
+				{page === 1 && !isLoadingMetadata && (
 					<DetailsExtendedMetadataTab
 						resourceId={seriesId}
 						metadata={extendedMetadata}
@@ -151,26 +171,28 @@ const SeriesDetails = ({
 						setPolicyChanged={setPolicyChanged}
 					/>
 				)}
-				{page === 3 && (
+				{page === 3 && !isLoadingThemes && (
 					<SeriesDetailsThemeTab
 						theme={theme}
 						themeNames={themeNames}
 						seriesId={seriesId}
 					/>
 				)}
-				{page === 4 && (
+				{page === 4 && !isLoadingTobiraData && (
 					<DetailsTobiraTab
 						kind="series"
 						id={seriesId}
 					/>
 				)}
-				{page === 5 && (
+				{page === 5 && !isLoadingStatistics && (
 					<SeriesDetailsStatisticTab
 						seriesId={seriesId}
 						header={tabs[page].tabNameTranslation}
 					/>
 				)}
-				{page === 6 && <SeriesDetailsFeedsTab feeds={feeds} />}
+				{page === 6 && !isLoadingFeeds && (
+					<SeriesDetailsFeedsTab feeds={feeds} />
+				)}
 			</div>
 		</>
 	);
diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
index d89621f03a..73edfd04e6 100644
--- a/src/components/events/partials/modals/SeriesDetailsModal.tsx
+++ b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -3,24 +3,22 @@ import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { getModalSeries } from "../../../../selectors/seriesDetailsSelectors";
+import { setShowModal } from "../../../../slices/seriesDetailsSlice";
 
 /**
  * This component renders the modal for displaying series details
  */
-const SeriesDetailsModal = ({
-	handleClose,
-	seriesTitle,
-	seriesId
-}: {
-	handleClose: () => void
-	seriesTitle: string
-	seriesId: string
-}) => {
+const SeriesDetailsModal = () => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
 
+	const series = useAppSelector(state => getModalSeries(state))!;
+
 	const confirmUnsaved = () => {
 		return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
 	};
@@ -28,7 +26,7 @@ const SeriesDetailsModal = ({
 	const close = () => {
 		if (!policyChanged || confirmUnsaved()) {
 			setPolicyChanged(false);
-			handleClose();
+			dispatch(setShowModal(false));
 		}
 	};
 
@@ -47,12 +45,12 @@ const SeriesDetailsModal = ({
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>
-						{t("EVENTS.SERIES.DETAILS.HEADER", { resourceId: seriesTitle })}
+						{t("EVENTS.SERIES.DETAILS.HEADER", { resourceId: series.title })}
 					</h2>
 				</header>
 
 				<SeriesDetails
-					seriesId={seriesId}
+					seriesId={series.id}
 					policyChanged={policyChanged}
 					setPolicyChanged={(value) => setPolicyChanged(value)}
 				/>
diff --git a/src/selectors/seriesDetailsSelectors.ts b/src/selectors/seriesDetailsSelectors.ts
index b5af556e4d..40f675395f 100644
--- a/src/selectors/seriesDetailsSelectors.ts
+++ b/src/selectors/seriesDetailsSelectors.ts
@@ -3,20 +3,35 @@ import { RootState } from "../store";
 /**
  * This file contains selectors regarding details of a certain series
  */
+
+/* Selectors for the modal */
+export const showModal = (state: RootState) => state.seriesDetails.modal.show;
+export const getModalPage = (state: RootState) => state.seriesDetails.modal.page;
+export const getModalSeries = (state: RootState) => state.seriesDetails.modal.series;
+export const getTobiraTabHierarchy = (state: RootState) =>
+	state.seriesDetails.modal.tobiraTab;
+
 export const getSeriesDetailsMetadata = (state: RootState) => state.seriesDetails.metadata;
 export const getSeriesDetailsExtendedMetadata = (state: RootState) => state.seriesDetails.extendedMetadata;
+export const isFetchingMetadata = (state: RootState) =>
+	state.seriesDetails.statusMetadata === 'loading';
 export const getSeriesDetailsAcl = (state: RootState) => state.seriesDetails.acl;
+
 export const getSeriesDetailsFeeds = (state: RootState) => state.seriesDetails.feeds;
+export const isFetchingFeeds = (state: RootState) => state.seriesDetails.statusFeeds === 'loading';
+
 export const getSeriesDetailsTheme = (state: RootState) => state.seriesDetails.theme;
 export const getSeriesDetailsThemeNames = (state: RootState) =>
 	state.seriesDetails.themeNames;
+export const isFetchingThemes = (state: RootState) =>
+	state.seriesDetails.statusTheme === 'loading';
 
 export const getSeriesDetailsTobiraData = (state: RootState) =>
 	state.seriesDetails.tobiraData;
 export const getSeriesDetailsTobiraDataError = (state: RootState) =>
-	state.seriesDetails.errorTobiraData;
-export const getTobiraTabHierarchy = (state: RootState) =>
-	state.seriesDetails.tobiraTab;
+	state.seriesDetails.errorTobiraData
+export const isFetchingTobiraData = (state: RootState) =>
+	state.seriesDetails.statusTobiraData === 'loading';
 
 /* selectors for statistics */
 export const hasStatistics = (state: RootState) =>
@@ -25,4 +40,4 @@ export const getStatistics = (state: RootState) => state.seriesDetails.statistic
 export const hasStatisticsError = (state: RootState) =>
 	state.seriesDetails.hasStatisticsError;
 export const isFetchingStatistics = (state: RootState) =>
-	state.seriesDetails.fetchingStatisticsInProgress;
+	state.seriesDetails.statusStatistics === 'loading';
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
index 58634eeed4..fad144967d 100644
--- a/src/slices/seriesDetailsSlice.ts
+++ b/src/slices/seriesDetailsSlice.ts
@@ -20,12 +20,12 @@ import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './stati
 import { Ace } from './aclSlice';
 import { TransformedAcl } from './aclDetailsSlice';
 import { MetadataCatalog } from './eventSlice';
-import { TobiraPage } from './seriesSlice';
+import { AppDispatch } from '../store';
+import { PartialSeries, TobiraPage } from './seriesSlice';
 import { TobiraTabHierarchy } from '../components/events/partials/ModalTabsAndPages/DetailsTobiraTab';
 import { TobiraFormProps } from '../components/events/partials/ModalTabsAndPages/NewTobiraPage';
 import { handleTobiraError } from './shared/tobiraErrors';
 
-
 /**
  * This file contains redux reducer for actions affecting the state of a series
  */
@@ -35,6 +35,14 @@ export type Feed = {
 	version: string,
 }
 
+// Contains the navigation logic for the modal
+type SeriesDetailsModal = {
+	show: boolean,
+	page: number,
+	tobiraTab: TobiraTabHierarchy,
+	series: PartialSeries | null,
+}
+
 export type TobiraData = {
 	baseURL: string,
 	hostPages: TobiraPage[],
@@ -57,17 +65,16 @@ type SeriesDetailsState = {
 	errorStatisticsValue: SerializedError | null,
 	statusTobiraData: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	errorTobiraData: SerializedError | null,
-  	metadata: MetadataCatalog,
+	metadata: MetadataCatalog,
 	extendedMetadata: MetadataCatalog[],
 	feeds: Feed[],
 	acl: TransformedAcl[],
 	theme: string,
 	themeNames: { id: string, value: string }[],
-	fetchingStatisticsInProgress: boolean,
 	statistics: Statistics[],
 	hasStatisticsError: boolean,
-	tobiraTab: TobiraTabHierarchy,
 	tobiraData: TobiraData,
+	modal: SeriesDetailsModal,
 }
 
 // Initial state of series details in redux store
@@ -98,14 +105,25 @@ const initialState: SeriesDetailsState = {
 	acl: [],
 	theme: "",
 	themeNames: [],
-	fetchingStatisticsInProgress: false,
 	statistics: [],
 	hasStatisticsError: false,
-	tobiraTab: "main",
 	tobiraData: {
 		baseURL: "",
 		hostPages: [],
 	},
+	modal: {
+		show: false,
+		page: 0,
+		tobiraTab: "main",
+		series: null,
+	},
+};
+
+export const openModal = (series: PartialSeries) => async (dispatch: AppDispatch) => {
+	dispatch(setModalSeries(series));
+	dispatch(setModalPage(0));
+	dispatch(setTobiraTabHierarchy("main"));
+	dispatch(setShowModal(true));
 };
 
 // fetch metadata of certain series from server
@@ -528,6 +546,26 @@ const seriesDetailsSlice = createSlice({
 	name: 'seriesDetails',
 	initialState,
 	reducers: {
+		setShowModal(state, action: PayloadAction<
+			SeriesDetailsState["modal"]["show"]
+		>) {
+			state.modal.show = action.payload;
+		},
+		setModalPage(state, action: PayloadAction<
+			SeriesDetailsState["modal"]["page"]
+		>) {
+			state.modal.page = action.payload;
+		},
+		setTobiraTabHierarchy(state, action: PayloadAction<
+			SeriesDetailsState["modal"]["tobiraTab"]
+		>) {
+			state.modal.tobiraTab = action.payload;
+		},
+		setModalSeries(state, action: PayloadAction<
+			SeriesDetailsState["modal"]["series"]
+		>) {
+			state.modal.series = action.payload;
+		},
 		setSeriesDetailsTheme(state, action: PayloadAction<
 			SeriesDetailsState["theme"]
 		>) {
@@ -553,14 +591,6 @@ const seriesDetailsSlice = createSlice({
 		>) {
 			state.statistics = action.payload;
 		},
-		setTobiraTabHierarchy(state, action: PayloadAction<
-			SeriesDetailsState["tobiraTab"]
-		>) {
-			state.tobiraTab = action.payload;
-		},
-		setDoNothing(state) {
-
-		}
 	},
 	// These are used for thunks
 	extraReducers: builder => {
@@ -683,13 +713,15 @@ const seriesDetailsSlice = createSlice({
 });
 
 export const {
+	setShowModal,
+	setModalPage,
+	setModalSeries,
 	setSeriesDetailsTheme,
 	setSeriesDetailsMetadata,
 	setSeriesDetailsExtendedMetadata,
 	setSeriesStatisticsError,
 	setSeriesStatistics,
 	setTobiraTabHierarchy,
-	setDoNothing,
 } = seriesDetailsSlice.actions;
 
 // Export the slice reducer as the default export
diff --git a/src/slices/seriesSlice.ts b/src/slices/seriesSlice.ts
index e0f528998d..15a0f34133 100644
--- a/src/slices/seriesSlice.ts
+++ b/src/slices/seriesSlice.ts
@@ -35,6 +35,8 @@ export type Series = {
 	title: string,
 }
 
+export type PartialSeries = Pick<Series, "id" | "title">;
+
 type Theme = {
 	description: string,
 	id: string,
diff --git a/src/store.ts b/src/store.ts
index d6973a7233..d7c4ef3b5d 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,5 +1,6 @@
 import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer } from "redux-persist";
 import storage from "redux-persist/lib/storage";
+import urlStorage from "./utils/urlStorage";
 import { UnknownAction, combineReducers } from "redux";
 import tableFilters from "./slices/tableFilterSlice";
 import tableFilterProfiles from "./slices/tableFilterProfilesSlice";
@@ -47,6 +48,8 @@ const usersPersistConfig = { key: "users", storage, whitelist: ["columns"] }
 const groupsPersistConfig = { key: "groups", storage, whitelist: ["columns"] }
 const aclsPersistConfig = { key: "acls", storage, whitelist: ["columns"] }
 const themesPersistConfig = { key: "themes", storage, whitelist: ["columns"] }
+const eventDetailsPersistConfig = { key: "eventDetails", storage: urlStorage, whitelist: ["modal"]}
+const seriesDetailsPersistConfig = { key: "seriesDetails", storage: urlStorage, whitelist: ["modal"]}
 
 // form reducer and all other reducers used in this app
 const reducers = combineReducers({
@@ -66,9 +69,9 @@ const reducers = combineReducers({
 	health,
 	notifications,
 	workflows,
-	eventDetails,
+	eventDetails: persistReducer(eventDetailsPersistConfig, eventDetails),
 	themeDetails,
-	seriesDetails,
+	seriesDetails: persistReducer(seriesDetailsPersistConfig, seriesDetails),
 	recordingDetails,
 	userDetails,
 	groupDetails,
diff --git a/src/utils/urlStorage.ts b/src/utils/urlStorage.ts
new file mode 100644
index 0000000000..59ae66a3d7
--- /dev/null
+++ b/src/utils/urlStorage.ts
@@ -0,0 +1,34 @@
+import { WebStorage } from "redux-persist";
+
+// Custom storage engine for `redux-persist`
+// to store (parts of) the application state in URL parameters.
+// This allows users to share "deep links" to specific parts of the application.
+const storage = {
+	getItem: async (key: string) => withParams(params => params.get(key)),
+	setItem: async (key: string, value: string) => updateParams(params => {
+		params.set(key, value);
+	}),
+	removeItem: async (key: string) => updateParams(params => {
+		params.delete(key);
+	}),
+} satisfies WebStorage;
+export default storage;
+
+// Helper functions to work with URL parameters
+const withParams = <T>(fn: (params: URLSearchParams) => T): T => (
+    fn(
+        new URLSearchParams(window.location.search)
+    )
+);
+const updateParams = (fn: (params: URLSearchParams) => void) => {
+	withParams(params => {
+		fn(params);
+		window.history.pushState(null, "", `${
+            window.location.pathname
+        }?${
+            params.toString()
+        }${
+            window.location.hash
+        }`);
+	});
+};