diff --git a/README.adoc b/README.adoc
index f5925d7..df16c4a 100644
--- a/README.adoc
+++ b/README.adoc
@@ -52,7 +52,8 @@ If you are interested in the FSXA check this link:https://docs.e-spirit.com/modu
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#resolutions-in-firstspirit[Resolutions in FirstSpirit]
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#responsiveness[Responsiveness]
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#lazy-loading[Lazy Loading]
-. xref:docs/modules/ROOT/pages/CustomSitemap.adoc#sitemap[Creating a Sitemap]
+. xref:docs/modules/ROOT/pages/CustomSitemap.adoc[Creating a Sitemap]
+. xref:docs/modules/ROOT/pages/MetaTags.adoc[Meta Tags]
 
 == Legal Notices
 
diff --git a/components/AppLayout/Header.vue b/components/AppLayout/Header.vue
index 623ea3f..4af5684 100644
--- a/components/AppLayout/Header.vue
+++ b/components/AppLayout/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed top-0 z-50 h-16 w-full border-b bg-white p-2 lg:h-20"
+    class="fixed top-0 z-40 h-16 w-full border-b bg-white p-2 lg:h-20"
     data-testid="layoutHeader"
   >
     <div class="container mx-auto flex items-center">
diff --git a/components/Dev.vue b/components/Dev.vue
index 57d2992..e7d4b28 100644
--- a/components/Dev.vue
+++ b/components/Dev.vue
@@ -62,16 +62,16 @@
         <button
           class="rounded-t p-2 font-bold capitalize text-white"
           :class="{
-            'bg-gray-800 ': activeItem === 'page',
-            'bg-gray-600 ': activeItem !== 'page',
+            'bg-gray-800 ': activeItem === 'content',
+            'bg-gray-600 ': activeItem !== 'content',
           }"
-          @click="activeItem = 'page'"
+          @click="activeItem = 'content'"
         >
           {{ componentName }} Data
         </button>
 
         <button
-          v-if="dataset && isContentProjection"
+          v-if="currentDataset && isContentProjection"
           class="rounded-t p-2 font-bold text-white"
           :class="{
             'bg-gray-800 ': activeItem === 'dataset',
@@ -93,6 +93,17 @@
         >
           Products
         </button>
+
+        <button
+          class="rounded-t p-2 font-bold text-white"
+          :class="{
+            'bg-gray-800 ': activeItem === 'currentPage',
+            'bg-gray-600 ': activeItem !== 'currentPage',
+          }"
+          @click="activeItem = 'currentPage'"
+        >
+          Current Page
+        </button>
       </div>
 
       <div
@@ -111,30 +122,48 @@
 </template>
 
 <script setup lang="ts">
-import { Dataset } from "fsxa-api";
-
 const props = defineProps<{
   content: unknown;
-  dataset?: Dataset | null;
   componentName?: string;
 }>();
 
 const { activeNavigationItem } = useNavigationData();
-const { findCachedProductsByRoute } = useContent();
+const {
+  findCachedProductsByRoute,
+  findCachedPageByRoute,
+  findCachedDatasetByRoute,
+} = useContent();
 
 const devComponentVisible = ref(false);
 
-const activeItem = ref<"page" | "dataset" | "products">("page");
+const activeItem = ref<"content" | "dataset" | "products" | "currentPage">(
+  "content"
+);
 
 const devContent = computed(() => {
   if (activeItem.value === "dataset") {
-    return props.dataset;
+    return currentDataset.value;
   } else if (activeItem.value === "products") {
     return products.value;
+  } else if (activeItem.value === "currentPage") {
+    return currentPage.value;
   } else return props.content;
 });
 
-const products = computed(() => findCachedProductsByRoute(useRoute().path));
+const products = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedProductsByRoute(route);
+});
+
+const currentPage = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedPageByRoute(route);
+});
+
+const currentDataset = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedDatasetByRoute(route);
+});
 
 const isContentProjection = computed(
   () => activeNavigationItem.value?.seoRouteRegex !== null
diff --git a/components/Page/Body.vue b/components/Page/Body.vue
index 9e8c89c..43dd412 100644
--- a/components/Page/Body.vue
+++ b/components/Page/Body.vue
@@ -10,7 +10,6 @@
         <Dev
           v-if="showDev"
           :content="pageBodyContent"
-          :dataset="currentDataset"
           class="hidden group-hover:block"
           component-name="section"
         />
@@ -28,7 +27,6 @@ import { PageBody, PageBodyContent } from "fsxa-api";
 
 defineProps<{ pageBody: PageBody }>();
 
-const { currentDataset } = useContent();
 const { showDev } = useDev();
 
 function getComponentFromPageBodyContent(pageBodyContent: PageBodyContent) {
diff --git a/docs/modules/ROOT/images/DevMode/DevMode_page.png b/docs/modules/ROOT/images/DevMode/DevMode_page.png
index 2ef5beb..52af135 100644
Binary files a/docs/modules/ROOT/images/DevMode/DevMode_page.png and b/docs/modules/ROOT/images/DevMode/DevMode_page.png differ
diff --git a/docs/modules/ROOT/pages/DevMode.adoc b/docs/modules/ROOT/pages/DevMode.adoc
index 8aae20e..b7829f0 100644
--- a/docs/modules/ROOT/pages/DevMode.adoc
+++ b/docs/modules/ROOT/pages/DevMode.adoc
@@ -53,10 +53,10 @@ image:DevMode/DevMode_products.png[Infobox Products]
 
 === Page info
 
-To get general information about the page that is loaded you need to click the question mark that is displayed in the top right corner on every page, if the `devMode` is enabled.
+To get general information about the page that is loaded click on a question mark that is displayed in the top right corner on any section of the page, if the `devMode` is enabled.
 
-image:DevMode/Questionmark_page.png[Question Mark Page]
+image:DevMode/Questionmark.png[Questionmark]
 
-Inside the infobox you can then get general information about what content is in the page and what layout the page should be displayed in.
+Inside the infobox you can then get general information about what content is in the page by clicking on the "Current Page" tab. Here you can also find information about what layout the page should be displayed in.
 
 image:DevMode/DevMode_page.png[Infobox Page]
\ No newline at end of file
diff --git a/docs/modules/ROOT/pages/GettingStarted/MyFirstTemplate.adoc b/docs/modules/ROOT/pages/GettingStarted/MyFirstTemplate.adoc
index 45d2c29..a03a232 100644
--- a/docs/modules/ROOT/pages/GettingStarted/MyFirstTemplate.adoc
+++ b/docs/modules/ROOT/pages/GettingStarted/MyFirstTemplate.adoc
@@ -37,7 +37,7 @@ To enable the development mode, the variable `devMode` must be set to `true` in
 
 If you are in development mode and a component on the page has not been developed yet, you will get an unknown component which shows where a component is missing and what information in the component can be addressed.
 
-image:Missing_Component.png[Missing Layout]
+image:Missing_component.png[Missing Layout]
 
 If you are in development mode and you have already implemented the component, then you will see question marks when hovering over the element.
 
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index b73f692..d0af18a 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -8,11 +8,6 @@
       v-if="currentPage"
       :page="currentPage"
     />
-    <DevOnly>
-      <div v-if="showDev" class="fixed top-0 right-0 z-30">
-        <Dev v-if="currentPage" :content="currentPage" component-name="page" />
-      </div>
-    </DevOnly>
   </div>
 </template>
 
@@ -30,8 +25,6 @@ const { activeLocale } = useLocale();
 const { activeNavigationItem } = useNavigationData();
 const currentRoute = decodeURIComponent(useRoute().path);
 
-const { showDev } = useDev();
-
 // fetch page and dataset
 const { pending } = useAsyncData(async () => {
   // This state should not be possible.