diff --git a/components/app-header.vue b/components/app-header.vue
index e0326aa1..edaf7e97 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -16,16 +16,26 @@ const defaultLinks = computed<
 	if (!project.map.startPage) {
 		return {
 			home: { href: { path: "/" }, label: t("AppHeader.links.home") },
-			data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
-			map: { href: { path: "/map" }, label: t("AppHeader.links.map") },
-			network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
+			data: {
+				href: { path: "/visualization", query: { mode: "table" } },
+				label: t("AppHeader.links.data"),
+			},
+			map: {
+				href: { path: "/visualization", query: { mode: "map" } },
+				label: t("AppHeader.links.map"),
+			},
+			network: {
+				href: { path: "/visualization", query: { mode: "network" } },
+				label: t("AppHeader.links.network"),
+			},
 			team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 		};
 	}
 	return {
-		home: { href: { path: "/" }, label: t("AppHeader.links.home") },
-		data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
-		network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
+		home: {
+			href: { path: "/", query: { mode: "map" } },
+			label: t("AppHeader.links.home"),
+		},
 		team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 	};
 });
diff --git a/components/custom-primary-details-feature.vue b/components/custom-primary-details-feature.vue
index b968753e..0d8c13f7 100644
--- a/components/custom-primary-details-feature.vue
+++ b/components/custom-primary-details-feature.vue
@@ -6,6 +6,7 @@ const t = useTranslations();
 const { getUnprefixedId } = useIdPrefix();
 
 const props = defineProps<{ entity: EntityFeature }>();
+const route = useRoute();
 
 const { data } = useGetBySystemClass(
 	computed(() => {
@@ -80,13 +81,27 @@ const handledRelations: Array<RelationType> = [
 onMounted(() => {
 	emit("handledRelations", handledRelations);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
 	<div class="flex justify-between">
 		<NavLink
 			v-if="previousFeature"
-			:href="{ path: `/entities/${getUnprefixedId(previousFeature['@id'])}` }"
+			:href="{
+				path: `/${getPath()}`,
+				query: { mode: currentMode, selection: getUnprefixedId(previousFeature['@id']) },
+			}"
 			class="flex items-center underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
 		>
 			<ChevronLeftIcon class="size-4" />
@@ -95,7 +110,10 @@ onMounted(() => {
 		</NavLink>
 		<NavLink
 			v-if="nextFeature"
-			:href="{ path: `/entities/${getUnprefixedId(nextFeature['@id'])}` }"
+			:href="{
+				path: `/${getPath()}`,
+				query: { mode: currentMode, selection: getUnprefixedId(nextFeature['@id']) },
+			}"
 			class="flex items-center underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
 		>
 			<span>{{ nextFeature.properties.title }}</span>
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 8bfd9580..24e1027a 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -15,7 +15,6 @@ const router = useRouter();
 const route = useRoute();
 const t = useTranslations();
 
-const currentView = useGetCurrentView();
 const { getUnprefixedId } = useIdPrefix();
 
 const searchFiltersSchema = v.object({
@@ -23,18 +22,31 @@ const searchFiltersSchema = v.object({
 	search: v.fallback(v.string(), ""),
 });
 
-const detailEntityId = computed(() => {
-	return route.params.id as string;
+const entitySelectionSchema = v.object({
+	selection: v.fallback(v.array(v.string()), []),
 });
 
 const searchFilters = computed(() => {
 	return v.parse(searchFiltersSchema, route.query);
 });
 
+type EntitySelection = v.InferOutput<typeof entitySelectionSchema>;
+
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
+function setEntitySelection(query: Partial<EntitySelection>) {
+	void router.push({ query: { mode: route.query.mode, ...query } });
+}
+
+function onChangeEntitySelection(values: EntityFeature) {
+	const temp: EntitySelection = {
+		selection: [getUnprefixedId(values["@id"])],
+	};
+	setEntitySelection(temp);
+}
+
 function setSearchFilters(query: Partial<SearchFilters>) {
-	void router.push({ query });
+	void router.push({ query: { mode: route.query.mode, ...query } });
 }
 
 function onChangeSearchFilters(values: SearchFormData) {
@@ -83,6 +95,13 @@ function togglePolygons() {
 	show.value = !show.value;
 }
 
+const selection = computed(() => {
+	return route.query.selection;
+});
+
+const mode = computed(() => {
+	return route.query.mode;
+});
 /**
  * Reduce size of geojson payload, which has an impact on performance,
  * because `maplibre-gl` will serialize geojson features when sending them to the webworker.
@@ -148,30 +167,32 @@ watch(data, () => {
 });
 
 watchEffect(() => {
-	const entity = entities.value.find((feature) => {
-		const id = getUnprefixedId(feature["@id"]);
-		return id === detailEntityId.value;
-	});
-
-	if (entity) {
-		let coordinates = null;
-
-		if (entity.geometry.type === "GeometryCollection") {
-			coordinates = entity.geometry.geometries.find((g) => {
-				return g.type === "Point";
-			})?.coordinates as [number, number] | undefined;
-		}
-
-		if (entity.geometry.type === "Point") {
-			coordinates = entity.geometry.coordinates as unknown as [number, number];
+	if (mode.value && selection.value) {
+		const entity = entities.value.find((feature) => {
+			const id = getUnprefixedId(feature["@id"]);
+			return id === selection.value;
+		});
+
+		if (entity) {
+			let coordinates = null;
+
+			if (entity.geometry.type === "GeometryCollection") {
+				coordinates = entity.geometry.geometries.find((g) => {
+					return g.type === "Point";
+				})?.coordinates as [number, number] | undefined;
+			}
+
+			if (entity.geometry.type === "Point") {
+				coordinates = entity.geometry.coordinates as unknown as [number, number];
+			}
+
+			popover.value = {
+				coordinates:
+					coordinates ??
+					(turf.center(createFeatureCollection([entity])).geometry.coordinates as [number, number]),
+				entities: [entity],
+			};
 		}
-
-		popover.value = {
-			coordinates:
-				coordinates ??
-				(turf.center(createFeatureCollection([entity])).geometry.coordinates as [number, number]),
-			entities: [entity],
-		};
 	}
 });
 </script>
@@ -248,8 +269,9 @@ watchEffect(() => {
 					>
 						<strong class="font-medium">
 							<NavLink
-								class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-								:href="{ path: `/entities/${entity.properties._id}/${currentView}` }"
+								href="#"
+								class="flex cursor-pointer items-center gap-1 underline decoration-dotted hover:no-underline"
+								@click="onChangeEntitySelection(entity)"
 							>
 								<Component :is="getEntityIcon(entity.systemClass)" class="size-3.5 shrink-0" />
 								{{ entity.properties.title }}
diff --git a/components/data-network-view.vue b/components/data-network-view.vue
index a61386a8..1aab3554 100644
--- a/components/data-network-view.vue
+++ b/components/data-network-view.vue
@@ -10,7 +10,7 @@ const router = useRouter();
 const route = useRoute();
 
 const detailEntityId = computed(() => {
-	return route.params.id as string;
+	return route.query.selection as string;
 });
 
 const searchFiltersSchema = z.object({
@@ -22,7 +22,7 @@ const searchFilters = computed(() => {
 });
 
 function onChangeSearchFilters(values: SearchFormData) {
-	const query = { ...searchFilters.value, ...values };
+	const query = { mode: route.query.mode, ...searchFilters.value, ...values };
 
 	if (values.search === "") {
 		// @ts-expect-error Fix me later please
@@ -33,27 +33,15 @@ function onChangeSearchFilters(values: SearchFormData) {
 }
 
 function onChangeCategory(values: CategoryFormData) {
-	void router.push({ query: { ...searchFilters.value, ...values } });
+	void router.push({ query: { mode: route.query.mode, ...searchFilters.value, ...values } });
 }
 
 const { data, isPending, isPlaceholderData } = useGetNetworkData(
 	// @ts-expect-error Includes custom, per-instance system classes.
 	computed(() => {
 		return {
-			exclude_system_classes: [
-				// TO-DO: Currently there is an issue: filtering by case study and system_class type will return no results
-				"type",
-				"object_location",
-				"reference_system",
-				"file",
-				"source_translation",
-				"source",
-				"bibliography",
-				"external_reference",
-				"administrative_unit",
-				"edition",
-				"type_tools",
-			],
+			// TO-DO: Currently there is an issue: filtering by case study and system_class type will return no results
+			exclude_system_classes: project.network.exclude,
 		};
 	}),
 );
diff --git a/components/data-view.vue b/components/data-view.vue
index b19d68cf..1bd18a13 100644
--- a/components/data-view.vue
+++ b/components/data-view.vue
@@ -53,7 +53,9 @@ const sortingState = computed(() => {
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
 function setSearchFilters(query: Partial<SearchFilters>) {
-	void router.push({ query });
+	void router.push({
+		query: { mode: route.query.mode, selection: route.query.selection, ...query },
+	});
 	document.body.scrollTo(0, 0);
 }
 
@@ -106,7 +108,7 @@ const entities = computed(() => {
 </script>
 
 <template>
-	<div class="relative grid grid-rows-[auto_1fr] gap-4">
+	<div class="container relative grid grid-rows-[auto_1fr] gap-4 p-8">
 		<SearchForm
 			:filter="searchFilters.category"
 			:search="searchFilters.search"
diff --git a/components/entity-details.vue b/components/entity-details.vue
index 68318fe5..4bb79460 100644
--- a/components/entity-details.vue
+++ b/components/entity-details.vue
@@ -6,6 +6,7 @@ import { useIdPrefix } from "@/composables/use-id-prefix";
 const { getUnprefixedId } = useIdPrefix();
 
 const t = useTranslations();
+const route = useRoute();
 
 const props = defineProps<{
 	relations: EntityFeature["relations"];
@@ -33,6 +34,17 @@ const relationsByType = computed(() => {
 		},
 	);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -54,7 +66,13 @@ const relationsByType = computed(() => {
 								<NavLink
 									v-if="relation.relationTo"
 									class="underline decoration-dotted hover:no-underline"
-									:href="{ path: `/entities/${getUnprefixedId(relation.relationTo)}` }"
+									:href="{
+										path: `/${getPath()}`,
+										query: {
+											mode: currentMode,
+											selection: getUnprefixedId(relation.relationTo),
+										},
+									}"
 								>
 									{{ relation.label }}
 								</NavLink>
@@ -68,7 +86,13 @@ const relationsByType = computed(() => {
 									<NavLink
 										v-if="relation.relationTo"
 										class="underline decoration-dotted hover:no-underline"
-										:href="{ path: `/entities/${getUnprefixedId(relation.relationTo)}` }"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: currentMode,
+												selection: getUnprefixedId(relation.relationTo),
+											},
+										}"
 									>
 										{{ relation.label }}
 									</NavLink>
diff --git a/components/entity-preview-link.vue b/components/entity-preview-link.vue
index e95ebdd6..da38739f 100644
--- a/components/entity-preview-link.vue
+++ b/components/entity-preview-link.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const route = useRoute();
 const props = defineProps<{ id: number; entity?: EntityFeature; label?: string }>();
 
 const previewEntity = computed(() => {
@@ -21,6 +22,17 @@ const { data, isPending, isPlaceholderData } = props.entity
 const isLoading = computed(() => {
 	return isPending || isPlaceholderData;
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template v-if="entity || id">
@@ -28,7 +40,10 @@ const isLoading = computed(() => {
 		<HoverCardTrigger as-child>
 			<NavLink
 				class="underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
-				:href="{ path: `/entities/${id}` }"
+				:href="{
+					path: `/${getPath()}`,
+					query: { mode: currentMode, selection: id },
+				}"
 			>
 				<template v-if="label">
 					{{ label }}
diff --git a/components/entity-sidebar.vue b/components/entity-sidebar.vue
index 7c833d2d..23cf8a36 100644
--- a/components/entity-sidebar.vue
+++ b/components/entity-sidebar.vue
@@ -3,7 +3,20 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";
 
 const t = useTranslations();
 
-defineProps<{ entity: EntityFeature }>();
+const props = defineProps<{
+	id: number;
+	noTableSidebar: boolean;
+}>();
+
+const { data } = useGetEntity(
+	computed(() => {
+		return { entityId: props.id };
+	}),
+);
+
+const entity = computed(() => {
+	return data.value?.features[0];
+});
 
 const openState = ref(false);
 
@@ -11,6 +24,15 @@ onMounted(() => {
 	openState.value = true;
 });
 
+watch(
+	() => {
+		return props.id;
+	},
+	() => {
+		openState.value = true;
+	},
+	{ immediate: true, deep: true },
+);
 const handledRelations = ref<Array<RelationType>>([]);
 
 const updateHandledRelations = (relations: Array<RelationType>) => {
@@ -19,30 +41,37 @@ const updateHandledRelations = (relations: Array<RelationType>) => {
 </script>
 
 <template>
-	<details
-		class="group absolute z-10 mb-2 mr-2 h-full w-1/4 translate-x-[-25vw] transition-transform duration-300 open:translate-x-0"
-		:open="openState"
-	>
-		<summary
-			class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2"
+	<div v-if="entity != null && props.id != null">
+		<details
+			:class="
+				props.noTableSidebar
+					? 'group z-10 mb-2 mr-2 h-full translate-x-[-25vw] transition-transform duration-300 open:translate-x-0 absolute w-1/4'
+					: 'group z-10 mb-2 mr-2 h-full translate-x-[-25vw] transition-transform duration-300 open:translate-x-0'
+			"
+			:open="openState"
 		>
-			<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
-			<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
-			<span class="sr-only">{{
-				t("EntityPage.sidebar.toggle", { title: entity.properties.title })
-			}}</span>
-		</summary>
-		<Card class="h-full overflow-y-scroll">
-			<EntityPrimaryDetails :entity="entity" @handled-relations="updateHandledRelations" />
-
-			<slot name="custom-details" />
-			<!-- <component v-if="hasCustomDetails" v-bind:is="entityDetailsDict" bind:entity-data /> -->
-
-			<EntityDetails
-				:handled-relations="handledRelations"
-				:relations="entity.relations"
-				class="mx-4 mt-16"
-			/>
-		</Card>
-	</details>
+			<Card class="relative h-full overflow-y-scroll">
+				<EntityPrimaryDetails :entity="entity" @handled-relations="updateHandledRelations" />
+
+				<slot name="custom-details" />
+				<!-- <component v-if="hasCustomDetails" v-bind:is="entityDetailsDict" bind:entity-data /> -->
+
+				<EntityDetails
+					:handled-relations="handledRelations"
+					:relations="entity.relations"
+					class="mx-4 mt-16"
+				/>
+			</Card>
+			<summary
+				class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2 pl-1 shadow-md"
+				style="top: calc(50% - 40px)"
+			>
+				<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
+				<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
+				<span class="sr-only">{{
+					t("EntityPage.sidebar.toggle", { title: entity.properties.title })
+				}}</span>
+			</summary>
+		</details>
+	</div>
 </template>
diff --git a/components/mode-switch.vue b/components/mode-switch.vue
new file mode 100644
index 00000000..e3eb34b2
--- /dev/null
+++ b/components/mode-switch.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import {
+	CircleOffIcon,
+	MapPinIcon,
+	MapPinOffIcon,
+	RadiusIcon,
+	TablePropertiesIcon,
+} from "lucide-vue-next";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const props = defineProps<{
+	currentMode: string;
+	id: number | null;
+}>();
+
+const t = useTranslations();
+
+const route = useRoute();
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+let hasPlace = ref(true);
+let inNetwork = ref(true);
+
+const { data } = useGetEntity(
+	computed(() => {
+		return { entityId: Number(props.id) };
+	}),
+);
+
+watch(
+	() => {
+		return data;
+	},
+	() => {
+		const entity = data.value?.features[0];
+		if (entity) {
+			entityHasCoordinates(entity);
+			entityInNetwork(entity);
+		}
+	},
+	{ immediate: true, deep: true },
+);
+
+function entityHasCoordinates(entity: EntityFeature) {
+	if (entity.systemClass !== "place") {
+		hasPlace.value = false;
+	}
+	if (entity.systemClass === "place") {
+		hasPlace.value = true;
+	}
+}
+
+function entityInNetwork(entity: EntityFeature) {
+	if (project.network.exclude.includes(entity.systemClass)) {
+		inNetwork.value = false;
+	} else inNetwork.value = true;
+}
+</script>
+
+<template>
+	<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div
+						:class="
+							props.currentMode === 'map'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white' && !hasPlace
+									? 'rounded-md bg-neutral-300 p-4 shadow-md'
+									: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
+						<NavLink
+							v-if="hasPlace"
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: 'map',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<MapPinIcon class="size-6 text-white dark:text-black" />
+						</NavLink>
+						<MapPinOffIcon v-if="!hasPlace" class="size-6 text-white dark:text-black" />
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p v-if="hasPlace">{{ t("EntityPage.map") }}</p>
+					<p v-if="!hasPlace && props.id">{{ t("EntityPage.no-map") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div
+						:class="
+							props.currentMode === 'network'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white' && !inNetwork
+									? 'rounded-md bg-neutral-300 p-4 shadow-md'
+									: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
+						<NavLink
+							v-if="inNetwork"
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: 'network',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<RadiusIcon class="size-6 text-white dark:text-black" />
+						</NavLink>
+						<CircleOffIcon v-if="!inNetwork" class="size-6 text-white dark:text-black" />
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p v-if="inNetwork">{{ t("EntityPage.network") }}</p>
+					<p v-if="!inNetwork">{{ t("EntityPage.no-network") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div
+						:class="
+							props.currentMode === 'table'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
+						<NavLink
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: 'table',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<TablePropertiesIcon class="size-6 text-white dark:text-black" />
+						</NavLink>
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p>{{ t("DataPage.title") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	</div>
+</template>
diff --git a/components/nav-link.vue b/components/nav-link.vue
index 352cf0e9..c1df3413 100644
--- a/components/nav-link.vue
+++ b/components/nav-link.vue
@@ -8,10 +8,37 @@ export interface NavLinkProps
 const props = defineProps<NavLinkProps>();
 
 const localePath = useLocalePath();
+
+const route = useRoute();
+
+const isCurrentPage = computed<boolean>(() => {
+	const href = typeof props.href === "string" ? createURLObject(props.href) : props.href;
+	const path = localePath(href.path ?? "");
+	const query = href.query ?? {};
+
+	const isEqualPathname = path === route.path;
+	const isEqualQuery = query.mode === route.query.mode;
+
+	return isEqualPathname && isEqualQuery;
+});
+
+function createURLObject(href: string): { path: string; query: { mode: string | null } } {
+	const url = new URL(href, "http://temp");
+	return {
+		path: url.pathname,
+		query: {
+			mode: url.searchParams.get("mode"),
+		},
+	};
+}
 </script>
 
 <template>
-	<NuxtLink :href="props.external ? props.href : localePath(props.href)" :external="props.external">
+	<NuxtLink
+		:href="props.external ? props.href : localePath(props.href)"
+		:external="props.external"
+		:aria-current="isCurrentPage ? 'page' : undefined"
+	>
 		<slot />
 	</NuxtLink>
 </template>
diff --git a/components/network.client.vue b/components/network.client.vue
index b14032d4..4bc6157b 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -40,8 +40,8 @@ const context: NetworkContext = {
 
 circular.assign(context.graph);
 
-const locale = useLocale();
 const router = useRouter();
+const route = useRoute();
 
 let hoverTimeOut: ReturnType<typeof setTimeout>;
 
@@ -50,92 +50,98 @@ const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions
 
 const disabledNodeColor = project.colors.disabledNodeColor;
 
-watch(
-	() => {
-		return props.searchNode;
-	},
-	(searchNode) => {
-		context.graph.nodes().forEach((el) => {
-			context.graph.removeNodeAttribute(el, "highlighted");
-		});
-		const query = searchNode?.toLowerCase();
-
-		if (query) {
-			const results = context.graph
-				.nodes()
-				.map((n) => {
-					return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
-				})
-				.filter(({ label }) => {
-					return label.toLowerCase().includes(query);
-				});
-
-			if (results.length >= 1) {
-				state.value.selectedNodes = results;
-				state.value.selectedNodes.forEach((el) => {
-					context.graph.setNodeAttribute(el.id, "highlighted", true);
-				});
-			}
-		}
-		// If the query is empty, then we reset the selectedNode
-		else {
-			state.value.selectedNodes = undefined;
+function setSearchHighlight(searchNode: string) {
+	context.graph.nodes().forEach((el) => {
+		context.graph.removeNodeAttribute(el, "highlighted");
+	});
+	const query = searchNode.toLowerCase();
+
+	if (query) {
+		const results = context.graph
+			.nodes()
+			.map((n) => {
+				return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
+			})
+			.filter(({ label }) => {
+				return label.toLowerCase().includes(query);
+			});
+
+		if (results.length >= 1) {
+			state.value.selectedNodes = results;
+			state.value.selectedNodes.forEach((el) => {
+				context.graph.setNodeAttribute(el.id, "highlighted", true);
+			});
 		}
+	}
+	// If the query is empty, then we reset the selectedNode
+	else {
+		state.value.selectedNodes = undefined;
+	}
 
-		// Refresh rendering
-		// You can directly call `renderer.refresh()`, but if you need performances
-		// you can provide some options to the refresh method.
-		// In this case, we don't touch the graph data so we can skip its reindexation
-		context.renderer?.refresh({
-			skipIndexation: true,
-		});
-	},
-	{ immediate: true },
-);
+	// Refresh rendering
+	// You can directly call `renderer.refresh()`, but if you need performances
+	// you can provide some options to the refresh method.
+	// In this case, we don't touch the graph data so we can skip its reindexation
+	context.renderer?.refresh({
+		skipIndexation: true,
+	});
+}
 
 watch(
 	() => {
 		return props.detailNode;
 	},
 	(detailNode) => {
-		context.graph.nodes().forEach((el) => {
-			context.graph.removeNodeAttribute(el, "highlighted");
-		});
-
 		if (detailNode) {
-			const results = context.graph
-				.nodes()
-				.map((n) => {
-					return { id: n, label: context.graph.getNodeAttribute(n, "id") as string };
-				})
-				.filter(({ id }) => {
-					return id === detailNode;
-				});
-
-			if (results.length === 1) {
-				state.value.selectedNodes = results;
-				state.value.selectedNodes.forEach((el) => {
-					context.graph.setNodeAttribute(el.id, "highlighted", true);
-				});
+			context.graph.nodes().forEach((el) => {
+				context.graph.removeNodeAttribute(el, "highlighted");
+			});
+
+			if (detailNode) {
+				const results = context.graph
+					.nodes()
+					.map((n) => {
+						return { id: n, label: context.graph.getNodeAttribute(n, "id") as string };
+					})
+					.filter(({ id }) => {
+						return id === detailNode;
+					});
+
+				if (results.length === 1) {
+					state.value.selectedNodes = results;
+					state.value.selectedNodes.forEach((el) => {
+						context.graph.setNodeAttribute(el.id, "highlighted", true);
+					});
+				}
+			}
+			// If the query is empty, then we reset the selectedNode
+			else {
+				state.value.selectedNodes = undefined;
 			}
-		}
-		// If the query is empty, then we reset the selectedNode
-		else {
-			state.value.selectedNodes = undefined;
-		}
 
-		// Refresh rendering
-		// You can directly call `renderer.refresh()`, but if you need performances
-		// you can provide some options to the refresh method.
-		// In this case, we don't touch the graph data so we can skip its reindexation
-		context.renderer?.refresh({
-			skipIndexation: true,
-		});
+			// Refresh rendering
+			// You can directly call `renderer.refresh()`, but if you need performances
+			// you can provide some options to the refresh method.
+			// In this case, we don't touch the graph data so we can skip its reindexation
+			context.renderer?.refresh({
+				skipIndexation: true,
+			});
+		}
 	},
-	{ immediate: true },
+	{ immediate: true, deep: true },
 );
 
-const currentView = useGetCurrentView();
+watch(
+	() => {
+		return props.searchNode;
+	},
+	(searchNode) => {
+		if (searchNode) {
+			setSearchHighlight(searchNode);
+		}
+	},
+	{ immediate: true, deep: true },
+);
 
 onMounted(async () => {
 	layout.start();
@@ -155,8 +161,12 @@ onMounted(async () => {
 
 	context.camera = context.renderer.getCamera();
 
+	if (props.searchNode) {
+		setSearchHighlight(props.searchNode);
+	}
+
 	context.renderer.on("clickNode", ({ node }) => {
-		void router.push(`/${locale.value}/entities/${node}/${currentView.value}`);
+		void router.push({ query: { mode: route.query.mode, selection: node } });
 	});
 
 	context.renderer.on("enterNode", ({ node }) => {
diff --git a/components/relation-list-entry.vue b/components/relation-list-entry.vue
index c7f1977f..09e44f70 100644
--- a/components/relation-list-entry.vue
+++ b/components/relation-list-entry.vue
@@ -1,7 +1,19 @@
 <script lang="ts" setup>
 const { getUnprefixedId } = useIdPrefix();
+const route = useRoute();
 
 defineProps<{ relation: NonNullable<EntityFeature["relations"]>[0] }>();
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -14,7 +26,10 @@ defineProps<{ relation: NonNullable<EntityFeature["relations"]>[0] }>();
 			/>
 			<NavLink
 				class="underline decoration-dotted hover:no-underline"
-				:href="{ path: `/entities/${getUnprefixedId(relation.relationTo ?? '')}` }"
+				:href="{
+					path: `/${getPath()}`,
+					query: { mode: currentMode, selection: getUnprefixedId(relation.relationTo ?? '') },
+				}"
 			>
 				{{ relation.label }}
 			</NavLink>
diff --git a/components/search-results-table.vue b/components/search-results-table.vue
index b4d80736..d835f4be 100644
--- a/components/search-results-table.vue
+++ b/components/search-results-table.vue
@@ -40,8 +40,15 @@ const props = defineProps<{
 
 const t = useTranslations();
 const { d } = useI18n();
+const route = useRoute();
 
 const columnHelper = createColumnHelper<EntityFeature>();
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 
 /**
  * Converts a date cell value to a formatted date string.
@@ -124,7 +131,14 @@ const cols = [
 				{
 					class:
 						"underline decoration-dotted transition hover:no-underline focus-visible:no-underline",
-					href: { path: `/entities/${encodeURIComponent(info.row.original.properties._id)}` },
+					href: {
+						path: `/${getPath()}`,
+						query: {
+							...route.query,
+							mode: route.query.mode,
+							selection: encodeURIComponent(info.row.original.properties._id),
+						},
+					},
 				},
 				title,
 			);
diff --git a/components/types-popover.vue b/components/types-popover.vue
index 4e40bef3..d67562f7 100644
--- a/components/types-popover.vue
+++ b/components/types-popover.vue
@@ -6,6 +6,7 @@ type LpType = NonNullable<LinkedPlaceFeature["types"]> extends Array<infer U> ?
 const t = useTranslations();
 
 const { getUnprefixedId } = useIdPrefix();
+const route = useRoute();
 
 const props = defineProps<{ type: LpType }>();
 
@@ -16,6 +17,17 @@ const hierarchy = computed(() => {
 const hiddenHierarchy = computed(() => {
 	return hierarchy.value.slice(1);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -35,7 +47,13 @@ const hiddenHierarchy = computed(() => {
 						<NavLink
 							v-if="hierarchy[0]?.identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(hierarchy[0]?.identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(hierarchy[0]?.identifier),
+								},
+							}"
 						>
 							{{ hierarchy[0].label }}
 						</NavLink>
@@ -58,7 +76,13 @@ const hiddenHierarchy = computed(() => {
 									<NavLink
 										v-if="hierarchyItem.identifier"
 										class="underline decoration-dotted hover:no-underline"
-										:href="{ path: `/entities/${getUnprefixedId(hierarchyItem.identifier)}` }"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: currentMode,
+												selection: getUnprefixedId(hierarchyItem.identifier),
+											},
+										}"
 									>
 										{{ hierarchyItem.label }}
 									</NavLink>
@@ -73,7 +97,13 @@ const hiddenHierarchy = computed(() => {
 						<NavLink
 							v-if="hiddenHierarchy[0].identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(hiddenHierarchy[0].identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(hiddenHierarchy[0].identifier),
+								},
+							}"
 						>
 							{{ hiddenHierarchy[0].label }}
 						</NavLink>
@@ -86,7 +116,13 @@ const hiddenHierarchy = computed(() => {
 						<NavLink
 							v-if="type.identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(type.identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(type.identifier),
+								},
+							}"
 						>
 							{{ type.label }}
 						</NavLink>
diff --git a/config/project.config.ts b/config/project.config.ts
index cdb10e44..18b186b5 100644
--- a/config/project.config.ts
+++ b/config/project.config.ts
@@ -45,6 +45,9 @@ const schema = v.object({
 			};
 		}),
 	),
+	network: v.object({
+		exclude: v.array(v.string()),
+	}),
 	defaultLocale: v.picklist(["de", "en"]),
 	fullscreen: v.boolean(),
 	imprint: v.picklist(["acdh-ch", "custom", "none"]),
diff --git a/content/system-pages/de/index.md b/content/system-pages/de/index.md
index e1b0eb58..3430ae8e 100644
--- a/content/system-pages/de/index.md
+++ b/content/system-pages/de/index.md
@@ -10,9 +10,9 @@ leadIn: >-
   Archäologische Datenbank von Sepulturen
 links:
   - label: Daten anzeigen
-    href: /data
+    href: /visualization?mode=table
   - label: Karte anzeigen
-    href: /map
+    href: /visualization?mode=map
 ---
 
 THANADOS (Die Anthropologische und Archäologische Datenbank von Sepulturen) beschäftigt sich mit der
diff --git a/content/system-pages/en/index.md b/content/system-pages/en/index.md
index f1989bb4..3814f08f 100644
--- a/content/system-pages/en/index.md
+++ b/content/system-pages/en/index.md
@@ -9,9 +9,9 @@ leadIn: >-
   [THANADOS](https://thanados.net/) - The Anthropological and Archaeological Database of Sepultures
 links:
   - label: View data
-    href: /data
+    href: /visualization?mode=table
   - label: View map
-    href: /map
+    href: /visualization?mode=map
 ---
 
 THANADOS (The Anthropological and Archaeological Database of Sepultures) deals with the digital
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index f2f35cfd..ff70bb49 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,63 +1,144 @@
 <script lang="ts" setup>
-import { MapIcon, WaypointsIcon } from "lucide-vue-next";
-import { z } from "zod";
+import { MapPinIcon, RadiusIcon, TablePropertiesIcon } from "lucide-vue-next";
 
-const env = useRuntimeConfig();
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 const t = useTranslations();
 
 const route = useRoute();
 
-definePageMeta({
-	validate(route) {
-		const env = useRuntimeConfig();
-		if (env.public.NUXT_PUBLIC_DATABASE === "disabled") return false;
-
-		const paramsSchema = z.object({
-			id: z.coerce.number().int().positive(),
-		});
-		return paramsSchema.safeParse(route.params).success;
-	},
-});
-
 usePageMetadata({
 	title: t("EntityPage.meta.title"),
 });
 
 const id = computed(() => {
-	return Number(route.params.id as string);
+	if (route.query.selection != null) {
+		return Number(route.query.selection);
+	} else return null;
+});
+
+const currentMode = computed(() => {
+	return route.query.mode as string;
 });
 
-const currentView = useGetCurrentView();
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 </script>
 
 <template>
 	<NuxtLayout name="default">
-		<MainContent class="container relative grid h-full py-8">
+		<div class="absolute right-4 z-20" style="top: calc(50% - 110px)">
+			<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
+			<div v-else>
+				<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'map'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'map',
+											},
+										}"
+									>
+										<MapPinIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("EntityPage.map") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'network'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'network',
+											},
+										}"
+									>
+										<RadiusIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("EntityPage.network") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'table'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'table',
+											},
+										}"
+									>
+										<TablePropertiesIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("DataPage.title") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				</div>
+			</div>
+		</div>
+		<MainContent class="relative h-full">
+			<template v-if="id != null && currentMode !== 'table'">
+				<EntitySidebar :id="id" :no-table-sidebar="true" />
+			</template>
 			<div
-				class="absolute right-4 top-1/2 z-20 rounded-md bg-white/90 p-6 shadow-md dark:bg-neutral-900"
+				class="relative grid h-full grid-cols-[0px_1fr] transition-all delay-150 ease-in-out data-[sidepanel]:grid-cols-[25vw_1fr]"
+				:data-sidepanel="id != null && currentMode === 'table' ? 'true' : undefined"
 			>
-				<NavLink
-					class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-					:href="{ path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}` }"
-				>
-					<MapIcon v-if="currentView === 'network'" class="size-6" />
-					<WaypointsIcon v-else class="size-6" />
-					<span class="sr-only">{{
-						currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
-					}}</span>
-				</NavLink>
+				<div class="grid h-full">
+					<EntitySidebar
+						v-if="id != null && currentMode === 'table'"
+						:id="id"
+						:no-table-sidebar="false"
+					/>
+				</div>
+				<slot />
 			</div>
-			<template v-if="env.public.NUXT_PUBLIC_DATABASE !== 'disabled'">
-				<ErrorBoundary>
-					<DataMapView v-if="currentView === 'map'" />
-					<DataNetworkView v-if="currentView === 'network'" />
-				</ErrorBoundary>
-			</template>
-			<template v-else>
-				<div>{{ t("DataPage.work-in-progress") }}</div>
-			</template>
-			<slot />
 		</MainContent>
 	</NuxtLayout>
 </template>
diff --git a/messages/de/common.json b/messages/de/common.json
index 04271a2c..0ae8456c 100644
--- a/messages/de/common.json
+++ b/messages/de/common.json
@@ -48,10 +48,10 @@
 	},
 	"DataPage": {
 		"meta": {
-			"title": "Daten"
+			"title": "Datenliste"
 		},
 		"search": "Suche",
-		"title": "Daten",
+		"title": "Datenliste",
 		"work-in-progress": "Die Datenbank ist derzeit im Aufbau."
 	},
 	"DataView": {
@@ -75,7 +75,9 @@
 		"network": "Netzwerk-Visualisierung",
 		"sidebar": {
 			"toggle": "Details für {title} umschalten"
-		}
+		},
+		"no-map": "Nicht auf der Karte vorhanden.",
+		"no-network": "Nicht im Netzwerk vorhanden."
 	},
 	"EntitySidebar": {
 		"NextFeature": "Nächste Funktion",
diff --git a/messages/en/common.json b/messages/en/common.json
index 3ef96330..94131613 100644
--- a/messages/en/common.json
+++ b/messages/en/common.json
@@ -48,10 +48,10 @@
 	},
 	"DataPage": {
 		"meta": {
-			"title": "Data"
+			"title": "Datalist"
 		},
 		"search": "Search",
-		"title": "Data",
+		"title": "Datalist",
 		"work-in-progress": "The database is currently work in progress."
 	},
 	"DataView": {
@@ -75,7 +75,9 @@
 		"network": "Network Visualization",
 		"sidebar": {
 			"toggle": "Toggle details for {title}"
-		}
+		},
+		"no-map": "Not visible on the map.",
+		"no-network": "Not visible in the network."
 	},
 	"EntitySidebar": {
 		"NextFeature": "NextFeature",
diff --git a/pages/data/index.vue b/pages/data/index.vue
deleted file mode 100644
index d3e6e685..00000000
--- a/pages/data/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	validate() {
-		const env = useRuntimeConfig();
-		return env.public.database !== "disabled";
-	},
-});
-
-const t = useTranslations();
-
-usePageMetadata({
-	title: t("DataPage.meta.title"),
-});
-
-const env = useRuntimeConfig();
-</script>
-
-<template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
-		<div>
-			<PageTitle class="sr-only">{{ t("DataPage.title") }}</PageTitle>
-		</div>
-
-		<template v-if="env.public.database !== 'disabled'">
-			<ErrorBoundary>
-				<DataView />
-			</ErrorBoundary>
-		</template>
-		<template v-else>
-			<div>{{ t("DataPage.work-in-progress") }}</div>
-		</template>
-	</MainContent>
-</template>
diff --git a/pages/entities/[id]/index.vue b/pages/entities/[id]/index.vue
deleted file mode 100644
index f554f780..00000000
--- a/pages/entities/[id]/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-	middleware: [
-		function (to, _from) {
-			return navigateTo(`${to.path}/map`); // TODO: Enable setting the default view through config
-		},
-	],
-});
-</script>
diff --git a/pages/entities/[id]/map.vue b/pages/entities/[id]/map.vue
deleted file mode 100644
index 6ba90058..00000000
--- a/pages/entities/[id]/map.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	layout: "visualization",
-});
-
-const t = useTranslations();
-
-const { entity } = useGetEntityFromRoute();
-
-useHead({
-	title: computed(() => {
-		return entity.value?.properties.title ?? t("EntityPage.meta.title");
-	}),
-});
-</script>
-
-<template>
-	<template v-if="entity != null">
-		<EntitySidebar :entity="entity" />
-	</template>
-</template>
diff --git a/pages/entities/[id]/network.vue b/pages/entities/[id]/network.vue
deleted file mode 100644
index 6ba90058..00000000
--- a/pages/entities/[id]/network.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	layout: "visualization",
-});
-
-const t = useTranslations();
-
-const { entity } = useGetEntityFromRoute();
-
-useHead({
-	title: computed(() => {
-		return entity.value?.properties.title ?? t("EntityPage.meta.title");
-	}),
-});
-</script>
-
-<template>
-	<template v-if="entity != null">
-		<EntitySidebar :entity="entity" />
-	</template>
-</template>
diff --git a/pages/index.vue b/pages/index.vue
index 38869ea7..4018ae2e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,8 +11,21 @@ defineRouteRules({
 
 const locale = useLocale();
 const t = useTranslations();
+const route = useRoute();
+const router = useRouter();
+
+onMounted(() => {
+	if (project.map.startPage) {
+		if (!route.query.mode) {
+			return router.push({ query: { mode: "map" } });
+		}
+		return null;
+	}
+	return null;
+});
 
 definePageMeta({
+	layout: project.map.startPage ? "visualization" : "default",
 	validate() {
 		const env = useRuntimeConfig();
 		return env.public.database !== "disabled";
@@ -48,13 +61,17 @@ onServerPrefetch(async () => {
 	 */
 	await suspense().catch(noop);
 });
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div v-if="!project.map.startPage">
 			<template v-if="content != null && content.leadIn != null">
-				<div class="grid place-items-center gap-8 p-8 sm:py-16">
+				<div class="container grid place-items-center gap-8 p-8 sm:py-16">
 					<div>
 						<h1 class="sr-only">{{ content.title }}</h1>
 						<NuxtImg
@@ -118,7 +135,9 @@ onServerPrefetch(async () => {
 			</div>
 			<template v-if="env.public.database !== 'disabled'">
 				<ErrorBoundary>
-					<DataMapView />
+					<DataMapView v-show="currentMode === 'map'" />
+					<DataNetworkView v-show="currentMode === 'network'" />
+					<DataView v-if="currentMode === 'table'" />
 				</ErrorBoundary>
 			</template>
 			<template v-else>
diff --git a/pages/network/index.vue b/pages/network/index.vue
deleted file mode 100644
index ab8b477a..00000000
--- a/pages/network/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	validate() {
-		const env = useRuntimeConfig();
-		return env.public.database !== "disabled";
-	},
-});
-
-const t = useTranslations();
-
-usePageMetadata({
-	title: t("NetworkPage.meta.title"),
-});
-
-const env = useRuntimeConfig();
-</script>
-
-<template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
-		<div>
-			<PageTitle class="sr-only">{{ t("NetworkPage.title") }}</PageTitle>
-		</div>
-		<template v-if="env.public.database !== 'disabled'">
-			<ErrorBoundary>
-				<DataNetworkView></DataNetworkView>
-			</ErrorBoundary>
-		</template>
-		<template v-else>
-			<div>{{ t("DataPage.work-in-progress") }}</div>
-		</template>
-	</MainContent>
-</template>
diff --git a/pages/map/index.vue b/pages/visualization/index.vue
similarity index 63%
rename from pages/map/index.vue
rename to pages/visualization/index.vue
index 249e2066..d6e0ca55 100644
--- a/pages/map/index.vue
+++ b/pages/visualization/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 definePageMeta({
+	layout: "visualization",
 	validate() {
 		const env = useRuntimeConfig();
 		return env.public.database !== "disabled";
@@ -12,17 +13,25 @@ usePageMetadata({
 	title: t("MapPage.meta.title"),
 });
 
+const route = useRoute();
+
 const env = useRuntimeConfig();
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div>
 			<PageTitle class="sr-only">{{ t("MapPage.title") }}</PageTitle>
 		</div>
 		<template v-if="env.public.database !== 'disabled'">
 			<ErrorBoundary>
-				<DataMapView />
+				<DataMapView v-if="currentMode === 'map'" />
+				<DataNetworkView v-if="currentMode === 'network'" />
+				<DataView v-if="currentMode === 'table'"></DataView>
 			</ErrorBoundary>
 		</template>
 		<template v-else>
diff --git a/project.config.json b/project.config.json
index 9d751129..a888da0d 100644
--- a/project.config.json
+++ b/project.config.json
@@ -22,6 +22,21 @@
 		"geojsonPoints": "#69c0ef",
 		"geojsonAreaCenterPoints": "#b8cf5b"
 	},
+	"network": {
+		"exclude": [
+			"type",
+			"object_location",
+			"reference_system",
+			"file",
+			"source_translation",
+			"source",
+			"bibliography",
+			"external_reference",
+			"administrative_unit",
+			"edition",
+			"type_tools"
+		]
+	},
 	"map": {
 		"startPage": false
 	},
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 387b9ac5..87c3da95 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { createPreset as createDesignTokenPreset } from "@acdh-oeaw/tailwindcss-
 import type { Config } from "tailwindcss";
 import createPlugin from "tailwindcss/plugin";
 
-// import { project } from "./config/project.config";
+import { project } from "./config/project.config";
 
 const shadcnPlugin = createPlugin(
 	({ addBase }) => {
@@ -75,6 +75,7 @@ const shadcnPlugin = createPlugin(
 			},
 			extend: {
 				colors: {
+					brand: project.colors.brand,
 					border: "hsl(var(--border))",
 					input: "hsl(var(--input))",
 					ring: "hsl(var(--ring))",
diff --git a/utils/get-entity-icon.ts b/utils/get-entity-icon.ts
index 8b247341..5148b57e 100644
--- a/utils/get-entity-icon.ts
+++ b/utils/get-entity-icon.ts
@@ -20,6 +20,7 @@ const icons: Record<string, Icon> = {
 	bibliography: TextIcon,
 	edition: TextIcon,
 	external_reference: TextIcon,
+	event: CalendarFoldIcon,
 	feature: MapPinIcon,
 	file: TextIcon,
 	find: MapPinIcon,