diff --git a/components/LayoutWrapper.vue b/components/LayoutWrapper.vue
index 4dcbe4d79e2d7730a1acc32f857a9d8f1374afb4..872c0d516252107565cbc21237c3071770a04231 100644
--- a/components/LayoutWrapper.vue
+++ b/components/LayoutWrapper.vue
@@ -8,13 +8,15 @@ export interface Props {
   toc?: boolean
   edit?: boolean
   navDrawer?: boolean
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   fluid: false,
   toc: true,
   edit: true,
-  navDrawer: true
+  navDrawer: true,
+  title: null
 });
 const drawer = ref(true);
 
@@ -45,7 +47,8 @@ function onScroll() {
       </v-container>
       <!-- <Footer></Footer> -->
     </v-main>
-    <NavNavbar v-model:drawer="drawer" :density="density" :drawer-enabled="navDrawer" />
+    <NavNavbar v-model:drawer="drawer" :title="title !== null ? title : undefined" :density="density"
+      :drawer-enabled="navDrawer" />
     <slot v-if="navDrawer" name="drawer" :drawer="drawer">
       <NavDrawer :drawer="drawer" />
     </slot>
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 271dc77ace75e5993a1101463bf8ac5f7a87bf4c..1bf062a010d4066cd8e1ba5646fa02c720b63261 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -6,6 +6,7 @@ export interface Props {
   density: 'prominent' | 'compact'
   drawer: boolean
   drawerEnabled: boolean
+  title?: string
 }
 const runtimeConfig = useRuntimeConfig();
 
@@ -16,7 +17,8 @@ const switchTheme = ref(false)
 const props = withDefaults(defineProps<Props>(), {
   density: "prominent",
   drawer: true,
-  drawerEnabled: true
+  drawerEnabled: true,
+  title: "Knowledge database of all known anti-phage systems"
 });
 const emit = defineEmits(['update:drawer'])
 function toggleTheme() {
@@ -47,13 +49,12 @@ function toggleDrawer() {
 <template>
   <v-app-bar :elevation="0" border name="app-bar" :density="density" color="background">
     <template v-if="drawerEnabled" #prepend>
-      <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon @click.stop="toggleDrawer" class="d-flex align-self-center"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
     </template>
-    <v-app-bar-title>
-      <span class="d-flex align-center">
-        Knowledge database of all known anti-phage systems
-      </span>
+    <v-app-bar-title class="d-flex align-self-center py-0">
+      <span class="">
+        {{ title }} </span>
     </v-app-bar-title>
     <template #append>
       <template v-if="!mobile">
diff --git a/layouts/db.vue b/layouts/db.vue
index cda2035ea2c90f51b5c7277abf668eb4ed16d726..0bfb739346187fb61405436deeebfbac2985f600 100644
--- a/layouts/db.vue
+++ b/layouts/db.vue
@@ -1,8 +1,10 @@
 
-<template>
-    <LayoutWrapper :fluid="true" :toc="false" :edit="false" :nav-drawer="false">
-        
+<script setup lang="ts">
+const { page } = useContent();
 
+</script>
+<template>
+    <LayoutWrapper :title="page.title" :fluid="true" :toc="false" :edit="false" :nav-drawer="false">
         <slot />
     </LayoutWrapper>
 </template>