diff --git a/enferno/admin/templates/admin/actor-fields.html b/enferno/admin/templates/admin/actor-fields.html
index efa3233c3..6c9b97e9d 100644
--- a/enferno/admin/templates/admin/actor-fields.html
+++ b/enferno/admin/templates/admin/actor-fields.html
@@ -64,14 +64,14 @@
 <v-main>
   <div class="pa-4">
     <v-card>
-      <v-card-text class="d-flex justify-space-between ga-12 pt-6">
+      <v-card-text class="d-flex justify-space-between pt-6" :class="{ 'flex-column ga-4': $vuetify.display.smAndDown, 'ga-12': $vuetify.display.smAndUp }">
         <div class="text-h6 text-no-wrap">{{ _('Actor Dynamic From Builder') }}
         </div>
       
         <v-text-field density="compact" class="flex-grow-1" placeholder="{{ _('Search') }}" prepend-inner-icon="mdi-magnify"
           hide-details v-model="ui.search" clearable></v-text-field>
       
-        <div class="d-flex ga-4 align-center">
+        <div v-if="$vuetify.display.smAndUp" class="d-flex ga-4 align-center">
           <v-btn
             class="outlined-btn"
             prepend-icon="mdi-history"
diff --git a/enferno/admin/templates/admin/actors.html b/enferno/admin/templates/admin/actors.html
index 18446b052..9f4ae2cfc 100644
--- a/enferno/admin/templates/admin/actors.html
+++ b/enferno/admin/templates/admin/actors.html
@@ -27,7 +27,7 @@
             @close-entity-details="closeActorDrawer()"
         ></map-visualization>
 
-        <v-container fluid>
+        <v-container fluid style="height: calc(100vh - 64px);">
             <v-tooltip text="{{ _('Map visualization') }}">
                 <template #activator="{props}">
                     <v-btn
@@ -63,14 +63,13 @@
                 </template>
             </v-tooltip>
 
-            <v-card>
+            <v-card class="h-100">
                 <v-card-title>
                     <div class="flex-grow-1"></div>
                 </v-card-title>
-                <v-card-text>
+                <v-card-text class="h-100">
                     <v-data-table-server
                             fixed-header
-                            height="calc(100vh - 331px)"
                             id="actors-dt"
                             v-model="selected"
                             hover
@@ -84,20 +83,19 @@
                             item-value="id"
                             select-strategy="page"
                             item-selectable="selectable"
-                            class="elevation-1"
+                            class="elevation-1 h-100"
                             hide-default-footer
                     >
 
                         <template v-slot:top>
                             <v-sheet class="ma-3 d-flex align-center">
-                                <v-btn variant="text" class="hidden-sm-and-down" @click="allActors"
-                                       text>{{ _('All Actors') }}</v-btn>
-                                <v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn variant="text" class="hidden-sm-and-down" @click="myAssigned"
-                                       text>{{ _('Assigned to me') }}</v-btn>
-                                <v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn variant="text" @click="myReview" class="mr-2 hidden-sm-and-down"
-                                       text>{{ _('My Review List') }}</v-btn>
+                                <template v-if="this.$vuetify.display.smAndUp">
+                                    <v-btn variant="text" @click="allActors" text>{{ _('All Actors') }}</v-btn>
+                                    <v-divider class="mx-2" inset vertical></v-divider>
+                                    <v-btn variant="text" @click="myAssigned" text>{{ _('Assigned to me') }}</v-btn>
+                                    <v-divider class="mx-2" inset vertical></v-divider>
+                                    <v-btn variant="text" @click="myReview" class="mr-2" text>{{ _('My Review List') }}</v-btn>
+                                </template>
 
                                 <v-text-field
                                         variant="outlined"
@@ -115,7 +113,7 @@
                                 ></v-text-field>
 
 
-                                <v-spacer></v-spacer>
+                                <v-spacer v-if="this.$vuetify.display.smAndUp"></v-spacer>
                                 {% if current_user.roles_in(['Admin','DA']) %}
                                     <v-btn @click="editItem" color="primary" variant="elevated"
                                            class="ma-2">{{ _('New Actor') }}</v-btn>
@@ -124,7 +122,7 @@
                                 {% include 'admin/partials/review_dialog.html' %}
                             </v-sheet>
 
-                            <v-toolbar class="px-3" v-if="bulkAllowed() || exportAllowed()">
+                            <v-toolbar class="px-3" v-if="selected.length && (bulkAllowed() || exportAllowed())">
 
                                 <template v-if="bulkIcons">
 
@@ -187,12 +185,12 @@
 
                         <template #bottom>
                             <div class="d-flex align-center justify-space-between w-100 border-t px-3" style="height: 61px">
-                                <div>{{ _('Search time: ') }}
+                                <div v-if="this.$vuetify.display.smAndUp">{{ _('Search time: ') }}
                                     ${searchTime} {{ _('seconds') }}</div>
                                 <div>
                         
                                     <div class="d-flex flex-row align-center ga-2">
-                                        <div class="d-flex flex-row align-center ga-2">
+                                        <div v-if="this.$vuetify.display.smAndUp" class="d-flex flex-row align-center ga-2">
                                             {{ _('Items per page:') }}
                                             <v-select :model-value="perPage" @update:model-value="setNextPerPageValue" hide-details
                                                 density="compact" :items="itemsPerPageOptions" variant="outlined"></v-select>
diff --git a/enferno/admin/templates/admin/bulletin-fields.html b/enferno/admin/templates/admin/bulletin-fields.html
index f52e72316..b1d5710a2 100644
--- a/enferno/admin/templates/admin/bulletin-fields.html
+++ b/enferno/admin/templates/admin/bulletin-fields.html
@@ -64,14 +64,13 @@
 <v-main>
   <div class="pa-4">
     <v-card>
-      <v-card-text class="d-flex justify-space-between ga-12 pt-6">
-        <div class="text-h6 text-no-wrap">{{ _('Bulletin Dynamic From Builder') }}
-        </div>
+      <v-card-text class="d-flex justify-space-between pt-6" :class="{ 'flex-column ga-4': $vuetify.display.smAndDown, 'ga-12': $vuetify.display.smAndUp }">
+        <div class="text-h6 text-no-wrap">{{ _('Bulletin Dynamic From Builder') }}</div>
       
         <v-text-field density="compact" class="flex-grow-1" placeholder="{{ _('Search') }}" prepend-inner-icon="mdi-magnify"
           hide-details v-model="ui.search" clearable></v-text-field>
       
-        <div class="d-flex ga-4 align-center">
+        <div v-if="$vuetify.display.smAndUp" class="d-flex ga-4 align-center">
           <v-btn
             class="outlined-btn"
             prepend-icon="mdi-history"
@@ -90,12 +89,12 @@
       </v-card-text>
 
       <div class="d-flex">
-        <div class="ml-1">
+        <div v-if="$vuetify.display.smAndUp" class="ml-1">
           <v-card class="h-fit ma-3 flex-shrink-0 rounded-10 border border-opacity-25">
             <v-card-text class="text-no-wrap font-weight-medium text-h6 text-medium-emphasis py-6 px-5">{{ _('Media') }}</v-card-text>
           </v-card>
         </div>
-        <v-divider vertical></v-divider>
+        <v-divider v-if="$vuetify.display.smAndUp" vertical></v-divider>
         <v-card variant="flat" class="ml-3 w-100">
           <v-card-text class="d-flex flex-column ga-4 overflow-y-scroll pt-0 px-0" style="height: calc(100vh - 176px);">
             <v-container v-if="formBuilder.loading && !formBuilder.dynamicFields.bulletin.length" height="130px" class="d-flex justify-center align-center">
diff --git a/enferno/admin/templates/admin/bulletins.html b/enferno/admin/templates/admin/bulletins.html
index 0ce557e67..db4a08687 100644
--- a/enferno/admin/templates/admin/bulletins.html
+++ b/enferno/admin/templates/admin/bulletins.html
@@ -18,7 +18,7 @@
 
 
         {% include'admin/partials/export_drawer.html' %}
-        <v-container fluid>
+        <v-container fluid style="height: calc(100vh - 64px);">
             <v-tooltip text="{{ _('Visualize Results') }}">
                 <template #activator="{props}">
                     <v-btn
@@ -37,12 +37,10 @@
                 </template>
             </v-tooltip>
 
-            <v-card>
-
-                <v-card-text>
+            <v-card class="h-100">
+                <v-card-text class="h-100">
                     <v-data-table-server
                             fixed-header
-                            height="calc(100vh - 331px)"
                             id="bulletins-dt"
                             v-model="selected"
                             hover
@@ -56,22 +54,18 @@
                             item-value="id"
                             select-strategy="page"
                             item-selectable="selectable"
-                            class="elevation-1"
+                            class="elevation-1 h-100"
                             hide-default-footer
                     >
                         <template #top>
                             <v-sheet class="ma-3 d-flex align-center">
-                                <v-btn variant="text" class="hidden-sm-and-down" @click="allBulletins"
-                                >{{ _('All Bulletins') }}</v-btn
-                                >
-                                <v-divider class="mx-1 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn variant="text" class="hidden-sm-and-down" @click="myAssigned"
-                                >{{ _('Assigned to me') }}</v-btn
-                                >
-                                <v-divider class="mx-1 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn variant="text" @click="myReview" class="mr-2 hidden-sm-and-down"
-                                >{{ _('My Review List') }}</v-btn
-                                >
+                                <template v-if="this.$vuetify.display.smAndUp">
+                                    <v-btn variant="text" @click="allBulletins">{{ _('All Bulletins') }}</v-btn>
+                                    <v-divider class="mx-1" inset vertical></v-divider>
+                                    <v-btn variant="text" @click="myAssigned">{{ _('Assigned to me') }}</v-btn>
+                                    <v-divider class="mx-1" inset vertical></v-divider>
+                                    <v-btn variant="text" @click="myReview" class="mr-2">{{ _('My Review List') }}</v-btn>
+                                </template>
 
                                 <v-text-field
                                         class="mx-1"
@@ -88,12 +82,9 @@
                                         prepend-inner-icon="mdi-magnify"
                                         label="{{ _('Search') }}"
                                         :bg-color="searchBg"
-                                        
-                                        
-
                                 ></v-text-field>
 
-                                <v-spacer></v-spacer>
+                                <v-spacer v-if="this.$vuetify.display.smAndUp"></v-spacer>
                                 {% if current_user.roles_in(['Admin','DA']) %}
                                     <v-btn
                                             @click="editItem"
@@ -104,6 +95,7 @@
                                     >
                                     {% if config.WEB_IMPORT and (current_user.can_import_web or current_user.has_role("Admin")) %}
                                     <v-btn
+                                        v-if="this.$vuetify.display.smAndUp"
                                             @click="webImportDlg = true"
                                             color="primary"
                                             variant="elevated"
@@ -118,7 +110,7 @@
                                 {% include'admin/partials/review_dialog.html' %}
                             </v-sheet>
 
-                            <v-toolbar class="px-3" v-if="bulkAllowed() || exportAllowed()">
+                            <v-toolbar class="px-3" v-if="selected.length && (bulkAllowed() || exportAllowed())">
                                 <template v-if="bulkIcons">
                                     <v-tooltip location="top" text="{{ _('Unselect all') }}">
                                         <template #activator="{props}">
@@ -180,12 +172,12 @@
 
                         <template #bottom>
                             <div class="d-flex align-center justify-space-between w-100 border-t px-3" style="height: 61px">
-                                <div>{{ _('Search time: ') }}
+                                <div v-if="this.$vuetify.display.smAndUp">{{ _('Search time: ') }}
                                     ${searchTime} {{ _('seconds') }}</div>
                                 <div>
                                 
                                 <div class="d-flex flex-row align-center ga-2">
-                                    <div class="d-flex flex-row align-center ga-2">
+                                    <div v-if="this.$vuetify.display.smAndUp" class="d-flex flex-row align-center ga-2">
                                         {{ _('Items per page:') }}
                                         <v-select :model-value="perPage" @update:model-value="setNextPerPageValue" hide-details density="compact" :items="itemsPerPageOptions"
                                             variant="outlined"></v-select>
@@ -570,6 +562,7 @@
 
 
                     actorDialog: false,
+                    bulletinMobilePane: 'form',
                     dialog: dialog,
                     saving: false,
                     eventDialog: false,
@@ -817,6 +810,17 @@
 
 
                 watch: {
+                    '$vuetify.display.smAndDown': {
+                        immediate: true,
+                        handler() {
+                            this.syncBulletinDialogViewportProps();
+                        },
+                    },
+                    dialog(val) {
+                        if (!val) return;
+                        this.bulletinMobilePane = 'form';
+                        this.syncBulletinDialogViewportProps();
+                    },
 
                     bulletinDrawer: function (val) {
                         if (val === false) {
@@ -866,6 +870,8 @@
 
                 },
                 mounted: function () {
+                    this.syncBulletinDialogViewportProps();
+
                     // populate roles for advanced search for admins
                     {% if current_user.has_role('Admin') %}
                         api.get('/admin/api/roles/').then(res => {
@@ -894,6 +900,57 @@
                 },
 
                 methods: {
+                    buildLeftDialogProps(isMobile) {
+                        return {
+                            'retain-focus': false,
+                            'content-props': {
+                                style: { width: isMobile ? '100%' : '60%' },
+                            },
+                            ...(isMobile ? {} : { 'content-class': 'absolute left-0' }),
+                            fullscreen: true,
+                            persistent: true,
+                            'no-click-animation': true,
+                            scrim: isMobile,
+                        };
+                    },
+                    buildRightDialogProps(isMobile) {
+                        return {
+                            'retain-focus': false,
+                            'content-props': {
+                                style: { width: isMobile ? '100%' : '60%', contain: 'none' },
+                            },
+                            ...(isMobile ? {} : { 'content-class': 'absolute right-0 left-auto' }),
+                            fullscreen: true,
+                            persistent: true,
+                            'no-click-animation': true,
+                            scrim: isMobile,
+                        };
+                    },
+                    buildRightContainedDialogProps(isMobile) {
+                        if (isMobile) {
+                            return {
+                                'retain-focus': false,
+                                fullscreen: true,
+                                persistent: true,
+                                'no-click-animation': true,
+                                scrim: true,
+                            };
+                        }
+
+                        return {
+                            'retain-focus': false,
+                            contained: true,
+                            persistent: true,
+                            'no-click-animation': true,
+                            scrim: false,
+                        };
+                    },
+                    syncBulletinDialogViewportProps() {
+                        const isMobile = this.$vuetify.display.smAndDown;
+                        this.leftDialogProps = this.buildLeftDialogProps(isMobile);
+                        this.rightDialogProps = this.buildRightDialogProps(isMobile);
+                        this.rightContainedDialogProps = this.buildRightContainedDialogProps(isMobile);
+                    },
                     refreshEditedMedia(mediaId) {
                         if (!this.editedItem?.medias) return;
                         api.get(`/admin/api/media/${mediaId}`).then(response => {
@@ -1601,6 +1658,7 @@
                     close() {
                         this.dialog = false;
                         this.actorDialog = false;
+                        this.bulletinMobilePane = 'form';
                         this.closeExpandedMedia();
                         this.closeMediaDialog();
                         this.closeSnapshotDialog();
diff --git a/enferno/admin/templates/admin/component-data.html b/enferno/admin/templates/admin/component-data.html
index 9e8ef20cd..324808da5 100644
--- a/enferno/admin/templates/admin/component-data.html
+++ b/enferno/admin/templates/admin/component-data.html
@@ -1,24 +1,34 @@
 {% extends 'layout.html' %}
 {% block content %}
 
-<v-main class="overflow-y-auto">
-    <div class="pa-4">
-        <v-card class="pa-4" elevation="2">
+<v-main class="overflow-hidden">
+    <v-container fluid class="pa-4" style="height: calc(100vh - 64px);">
+        <v-card class="pa-4 h-100 d-flex flex-column" elevation="2">
             <h1 class="text-h6 mb-5">{{ _('Component Data Management') }}</h1>
 
-            <div class="d-flex flex-column flex-md-row ga-4">
-                <v-card class="py-5 overflow-y-auto h-fit" elevation="2" style="min-width: 255px;">
-                    <v-tabs mandatory height="40" v-model="tabState.main" selected-class="bg-surface-light" direction="vertical">
+            <div class="d-flex flex-column flex-md-row ga-4 flex-grow-1" style="min-height: 0;">
+                <v-card
+                    :class="$vuetify.display.smAndDown ? 'w-100 flex-shrink-0' : 'py-5 overflow-y-auto h-fit'"
+                    elevation="2"
+                    :style="$vuetify.display.smAndDown ? '' : 'min-width: 255px;'"
+                >
+                    <v-tabs
+                        mandatory
+                        height="40"
+                        v-model="tabState.main"
+                        :direction="$vuetify.display.smAndDown ? 'horizontal' : 'vertical'"
+                        align-tabs="start"
+                    >
                         <v-tab v-for="(tab, key) in tabsMap" :key="key" :value="key"
                             class="px-7 justify-start text-none text-subtitle-2">
                             ${tab.text}
                         </v-tab>
                     </v-tabs>
                 </v-card>
-                <v-card elevation="2" class="w-100">
-                    <div>
-                        <div v-if="tabState.main === 'location'">
-                            <v-tabs mandatory height="64" v-model="tabState.child">
+                <v-card elevation="2" class="w-100 h-100 d-flex flex-column">
+                    <div class="h-100 d-flex flex-column" style="min-height: 0;">
+                        <div v-if="tabState.main === 'location'" class="h-100 d-flex flex-column">
+                            <v-tabs mandatory height="64" class="flex-shrink-0" v-model="tabState.child">
                                 <v-tab v-for="(childTab, key) in tabsMap[tabState.main].nestedTabsMap" :key="key" class="px-7"
                                     :value="key">
                                     ${childTab.text}
@@ -26,9 +36,9 @@ <h1 class="text-h6 mb-5">{{ _('Component Data Management') }}</h1>
                             </v-tabs>
                             <v-divider></v-divider>
 
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
                                 <div v-if="tabState.child === 'administrative-levels'">
-                                    <editable-table :height="`calc(100vh - ${showLalWarning ? '701px' : '628px'})`" title="{{ _('Location Administrative Levels') }}"
+                                    <editable-table title="{{ _('Location Administrative Levels') }}"
                                         :item-headers="alHeaders" :editable-columns="['code', 'title']"
                                         :no-delete-action-ids="noDeleteIdsForLocationAdminLevels"
                                         delete-endpoint="/admin/api/location-admin-level"
@@ -87,7 +97,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'location-types'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Location Types') }}"
+                                    <editable-table title="{{ _('Location Types') }}"
                                         :item-headers="ltHeaders" :no-action-ids="[1,2]" delete-endpoint="/admin/api/location-type"
                                         save-endpoint="/admin/api/location-type"
                                         load-endpoint="/admin/api/location-types/?per_page=1000">
@@ -96,8 +106,8 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             </div>
                         </div>
 
-                        <div v-if="tabState.main === 'countries'">
-                            <v-tabs mandatory height="64" v-model="tabState.child">
+                        <div v-if="tabState.main === 'countries'" class="h-100 d-flex flex-column">
+                            <v-tabs mandatory height="64" class="flex-shrink-0" v-model="tabState.child">
                                 <v-tab v-for="(childTab, key) in tabsMap[tabState.main].nestedTabsMap" :key="key" class="px-7"
                                     :value="key">
                                     ${childTab.text}
@@ -105,9 +115,9 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             </v-tabs>
                             <v-divider></v-divider>
 
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
                                 <div v-if="tabState.child === 'countries'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Countries') }}"
+                                    <editable-table title="{{ _('Countries') }}"
                                         :item-headers="countryHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/country" save-endpoint="/admin/api/country"
                                         load-endpoint="/admin/api/countries/?per_page=1000">
@@ -115,7 +125,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'ethnographic-info'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Ethnographic Information') }}"
+                                    <editable-table title="{{ _('Ethnographic Information') }}"
                                         :item-headers="ethnoHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/ethnography" save-endpoint="/admin/api/ethnography"
                                         load-endpoint="/admin/api/ethnographies/?per_page=1000">
@@ -123,7 +133,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'dialects'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Dialects') }}"
+                                    <editable-table title="{{ _('Dialects') }}"
                                         :item-headers="dialectHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/dialect" save-endpoint="/admin/api/dialect"
                                         load-endpoint="/admin/api/dialects/?per_page=1000">
@@ -132,8 +142,8 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             </div>
                         </div>
 
-                        <div v-if="tabState.main === 'relations'">
-                            <v-tabs mandatory height="64" v-model="tabState.child">
+                        <div v-if="tabState.main === 'relations'" class="h-100 d-flex flex-column">
+                            <v-tabs mandatory height="64" class="flex-shrink-0" v-model="tabState.child">
                                 <v-tab v-for="(childTab, key) in tabsMap[tabState.main].nestedTabsMap" :key="key" class="px-7"
                                     :value="key">
                                     ${childTab.text}
@@ -141,9 +151,9 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             </v-tabs>
                             <v-divider></v-divider>
 
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
                                 <div v-if="tabState.child === 'actor-to-actor'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Actor to Actor Relations') }}"
+                                    <editable-table title="{{ _('Actor to Actor Relations') }}"
                                         :item-headers="revRelationHeaders"
                                         :editable-columns="['title','title_tr', 'reverse_title', 'reverse_title_tr']"
                                         delete-endpoint="/admin/api/atoainfo" save-endpoint="/admin/api/atoainfo"
@@ -152,7 +162,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'actor-to-bulletin'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Actor to Bulletin Relations') }}"
+                                    <editable-table title="{{ _('Actor to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/atobinfo" save-endpoint="/admin/api/atobinfo"
                                         load-endpoint="/admin/api/atobinfos/?per_page=1000">
@@ -160,7 +170,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'bulletin-to-bulletin'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Bulletin to Bulletin Relations') }}"
+                                    <editable-table title="{{ _('Bulletin to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/btobinfo" save-endpoint="/admin/api/btobinfo"
                                         load-endpoint="/admin/api/btobinfos/?per_page=1000">
@@ -168,7 +178,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'incident-to-bulletin'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Bulletin Relations') }}"
+                                    <editable-table title="{{ _('Incident to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/itobinfo" save-endpoint="/admin/api/itobinfo"
                                         load-endpoint="/admin/api/itobinfos/?per_page=1000">
@@ -176,7 +186,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'incident-to-actor'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Actor Relations') }}"
+                                    <editable-table title="{{ _('Incident to Actor Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/itoainfo" save-endpoint="/admin/api/itoainfo"
                                         load-endpoint="/admin/api/itoainfos/?per_page=1000">
@@ -184,7 +194,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'incident-to-incident'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Incident Relations') }}"
+                                    <editable-table title="{{ _('Incident to Incident Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/itoiinfo" save-endpoint="/admin/api/itoiinfo"
                                         load-endpoint="/admin/api/itoiinfos/?per_page=1000">
@@ -192,33 +202,33 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
                             </div>
                         </div>
-                        <div v-if="tabState.main === 'media'">
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 180px);">
-                                <editable-table height="calc(100vh - 307px)" title="{{ _('Media Categories') }}"
+                        <div v-if="tabState.main === 'media'" class="h-100 d-flex flex-column">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
+                                <editable-table title="{{ _('Media Categories') }}"
                                     :item-headers="mediaHeaders" :editable-columns="['title','title_tr']"
                                     delete-endpoint="/admin/api/mediacategory" save-endpoint="/admin/api/mediacategory"
                                     load-endpoint="/admin/api/mediacategories/?per_page=1000">
                                 </editable-table>
                             </div>
                         </div>
-                        <div v-if="tabState.main === 'geolocation'">
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 180px);">
-                                <editable-table height="calc(100vh - 307px)" title="{{ _('Geo Location Types') }}"
+                        <div v-if="tabState.main === 'geolocation'" class="h-100 d-flex flex-column">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
+                                <editable-table title="{{ _('Geo Location Types') }}"
                                     :item-headers="geoHeaders" :editable-columns="['title','title_tr']"
                                     delete-endpoint="/admin/api/geolocationtype" save-endpoint="/admin/api/geolocationtype"
                                     load-endpoint="/admin/api/geolocationtypes/?per_page=1000">
                                 </editable-table>
                             </div>
                         </div>
-                        <div v-if="tabState.main === 'identification'">
-                            <v-tabs mandatory height="64" v-model="tabState.child">
+                        <div v-if="tabState.main === 'identification'" class="h-100 d-flex flex-column">
+                            <v-tabs mandatory height="64" class="flex-shrink-0" v-model="tabState.child">
                                 <v-tab v-for="(childTab, key) in tabsMap[tabState.main].nestedTabsMap" :key="key" class="px-7" :value="key">
                                     ${childTab.text}
                                 </v-tab>
                             </v-tabs>
                             <v-divider></v-divider>
                         
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
                                 <div v-if="tabState.child === 'id-number-types'">
                                     <editable-table title="{{ _('ID Number Types') }}" :item-headers="idNumberTypeHeaders"
                                         :editable-columns="['title','title_tr']" delete-endpoint="/admin/api/idnumbertype"
@@ -227,8 +237,8 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
                             </div>
                         </div>
-                        <div v-if="tabState.main === 'violation'">
-                            <v-tabs mandatory height="64" v-model="tabState.child">
+                        <div v-if="tabState.main === 'violation'" class="h-100 d-flex flex-column">
+                            <v-tabs mandatory height="64" class="flex-shrink-0" v-model="tabState.child">
                                 <v-tab class="px-7" value="potential-violation">
                                     {{ _('Potential Violation') }}
                                 </v-tab>
@@ -238,9 +248,9 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             </v-tabs>
                             <v-divider></v-divider>
 
-                            <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
+                            <div class="flex-grow-1 overflow-y-auto" style="min-height: 0;">
                                 <div v-if="tabState.child === 'potential-violation'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Potential Violation Categories') }}"
+                                    <editable-table title="{{ _('Potential Violation Categories') }}"
                                         :item-headers="potentialHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/potentialviolation" save-endpoint="/admin/api/potentialviolation"
                                         load-endpoint="/admin/api/potentialviolation/?per_page=1000">
@@ -248,7 +258,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 </div>
 
                                 <div v-if="tabState.child === 'claimed-violation'">
-                                    <editable-table height="calc(100vh - 375px)" title="{{ _('Claimed Violation Categories') }}"
+                                    <editable-table title="{{ _('Claimed Violation Categories') }}"
                                         :item-headers="claimedHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/claimedviolation" save-endpoint="/admin/api/claimedviolation"
                                         load-endpoint="/admin/api/claimedviolation/?per_page=1000">
@@ -262,7 +272,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                         
 
         </v-card>
-    </div>
+    </v-container>
 </v-main>
 
 {% endblock %} {% block js %}
@@ -293,14 +303,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
             this.setInitialTabStateKey()
 
             this.$router.afterEach((to) => {
-                const [main, child] = to.hash.slice(1).split('/');
-
-                const mainKey = main && main in this.tabsMap ? main : Object.keys(this.tabsMap)[0];
-                const nested = this.tabsMap[mainKey]?.nestedTabsMap || {};
-                const childKey = child && child in nested ? child : Object.keys(nested)[0] || null;
-
-                this.tabState.main = mainKey;
-                this.tabState.child = Object.keys(nested).length ? childKey : null;
+                this.applyHashToTabState(to.hash);
             });
         },
         data() {
@@ -422,22 +425,39 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
 
                 return [...base, ...(fieldMaps[type] || customFields), { title: "{{ _('Actions') }}", value: 'actions', align: 'end' }];
             },
+            normalizeHash(rawHash = '') {
+                return (rawHash || '').replace(/^#\/?/, '');
+            },
+            applyHashToTabState(rawHash = '') {
+                const normalizedHash = this.normalizeHash(rawHash);
+                const [main, child] = normalizedHash.split('/');
+
+                const mainKey = main && main in this.tabsMap ? main : Object.keys(this.tabsMap)[0];
+                const nested = this.tabsMap[mainKey]?.nestedTabsMap || {};
+                const childKey = child && child in nested ? child : Object.keys(nested)[0] || null;
+
+                this.tabState.main = mainKey;
+                this.tabState.child = Object.keys(nested).length ? childKey : null;
+            },
             updateHash() {
                 const { main, child } = this.tabState;
                 const hash = [main, child].filter(Boolean).join('/');
-                this.$router.push({ name: 'component-data', hash: `#${hash}` });
+                const nextHash = `#${hash}`;
+
+                if (this.$route?.hash === nextHash) return;
+
+                const fullPath = `${this.$route?.path || window.location.pathname}${window.location.search}`;
+                this.$router.push(`${fullPath}${nextHash}`);
             },
             setInitialTabStateKey() {
-                const main = this.tabState.main || Object.keys(this.tabsMap)[0];
-                const nested = this.tabsMap[main]?.nestedTabsMap || {};
-                const child = this.tabState.child || Object.keys(nested)[0] || null;
+                const currentHash = this.$route?.hash || window.location.hash;
 
-                const hash = [main, child].filter(Boolean).join('/');
+                if (currentHash) {
+                    this.applyHashToTabState(currentHash);
+                    return;
+                }
 
-                this.$router.replace({
-                    name: 'component-data',
-                    hash: `#${hash}` 
-                });
+                this.updateHash();
             },
             onDragEnd() {
                 if (this.isOrderChanged) {
@@ -487,4 +507,4 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
         window.app = app;
     });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/enferno/admin/templates/admin/eventtypes.html b/enferno/admin/templates/admin/eventtypes.html
index a3461ffb0..a51f2c7fb 100644
--- a/enferno/admin/templates/admin/eventtypes.html
+++ b/enferno/admin/templates/admin/eventtypes.html
@@ -3,17 +3,14 @@
 
     <v-main>
 
-        <v-container fluid>
-            <v-row>
-                <v-col cols="12">
-                    <v-card>
+        <v-container fluid style="height: calc(100vh - 64px);">
+                    <v-card class="h-100">
                         <v-card-title>
                             <div class="flex-grow-1"></div>
                         </v-card-title>
 
-                        <v-card-text>
+                        <v-card-text class="h-100">
                             <v-data-table-server
-                                    height="calc(100vh - 260px)"
                                     fixed-header
                                     :headers="headers"
                                     :items="items"
@@ -21,7 +18,7 @@
                                     :page="options.page"
                                     :loading="loading"
                                     :items-length="itemsLength"
-                                    class="elevation-1"
+                                    class="elevation-1 h-100"
                             >
                                 <template v-slot:top>
                                     <v-toolbar flat color="white">
@@ -113,6 +110,7 @@
                                             {% if current_user.roles_in(['Admin']) %}
                                                 <template v-slot:activator="{ props }">
                                                     <v-btn
+                                                            v-if="$vuetify.display.smAndUp"
                                                             color="secondary"
                                                             variant="elevated"
                                                             class="ma-2"
@@ -179,8 +177,6 @@
 
                         </v-card-text>
                     </v-card>
-                </v-col>
-            </v-row>
         </v-container>
 
     </v-main>
diff --git a/enferno/admin/templates/admin/incident-fields.html b/enferno/admin/templates/admin/incident-fields.html
index aa462cf4b..cbfed3701 100644
--- a/enferno/admin/templates/admin/incident-fields.html
+++ b/enferno/admin/templates/admin/incident-fields.html
@@ -64,14 +64,14 @@
 <v-main>
   <div class="pa-4">
     <v-card>
-      <v-card-text class="d-flex justify-space-between ga-12 pt-6">
+      <v-card-text class="d-flex justify-space-between pt-6" :class="{ 'flex-column ga-4': $vuetify.display.smAndDown, 'ga-12': $vuetify.display.smAndUp }">
         <div class="text-h6 text-no-wrap">{{ _('Incident Dynamic From Builder') }}
         </div>
       
         <v-text-field density="compact" class="flex-grow-1" placeholder="{{ _('Search') }}" prepend-inner-icon="mdi-magnify"
           hide-details v-model="ui.search" clearable></v-text-field>
       
-        <div class="d-flex ga-4 align-center">
+        <div v-if="$vuetify.display.smAndUp" class="d-flex ga-4 align-center">
           <v-btn
             class="outlined-btn"
             prepend-icon="mdi-history"
diff --git a/enferno/admin/templates/admin/incidents.html b/enferno/admin/templates/admin/incidents.html
index 047f61920..4e32f571a 100644
--- a/enferno/admin/templates/admin/incidents.html
+++ b/enferno/admin/templates/admin/incidents.html
@@ -11,7 +11,7 @@
     {% include     'admin/partials/bulk_incident_drawer.html' %}
     {% include   'admin/partials/export_drawer.html' %}
     <v-main>
-        <v-container fluid>
+        <v-container fluid style="height: calc(100vh - 64px);">
             <v-tooltip text="{{ _('Visualize Results') }}">
                 <template #activator="{ props }">
                     <v-btn
@@ -31,14 +31,13 @@
                 </template>
             </v-tooltip>
 
-            <v-card>
+            <v-card class="h-100">
                 <v-card-title>
                     <div class="flex-grow-1"></div>
                 </v-card-title>
                 <v-card-text>
                     <v-data-table-server
                             fixed-header
-                            height="calc(100vh - 331px)"
                             id="incidents-dt"
                             v-model="selected"
                             hover
@@ -52,20 +51,19 @@
                             item-value="id"
                             select-strategy="page"
                             item-selectable="selectable"
-                            class="elevation-1"
+                            class="elevation-1 h-100"
                             hide-default-footer
                     >
 
                         <template v-slot:top>
                             <v-sheet class="ma-3 d-flex align-center ">
-                                <v-btn class="hidden-sm-and-down" @click="allIncidents"
-                                variant="text">{{ _('All Incidents') }}</v-btn>
-                                <v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn class="hidden-sm-and-down" @click="myAssigned"
-                                variant="text">{{ _('Assigned to me') }}</v-btn>
-                                <v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
-                                <v-btn @click="myReview" class="mr-2 hidden-sm-and-down"
-                                       variant="text">{{ _('My Review List') }}</v-btn>
+                                <template v-if="this.$vuetify.display.smAndUp">
+                                    <v-btn @click="allIncidents" variant="text">{{ _('All Incidents') }}</v-btn>
+                                    <v-divider class="mx-2" inset vertical></v-divider>
+                                    <v-btn @click="myAssigned" variant="text">{{ _('Assigned to me') }}</v-btn>
+                                    <v-divider class="mx-2" inset vertical></v-divider>
+                                    <v-btn @click="myReview" class="mr-2" variant="text">{{ _('My Review List') }}</v-btn>
+                                </template>
 
 
                                 <v-text-field
@@ -84,7 +82,7 @@
                                 ></v-text-field>
 
 
-                                <v-spacer></v-spacer>
+                                <v-spacer v-if="this.$vuetify.display.smAndUp"></v-spacer>
                                 {% if current_user.roles_in(['Admin','DA']) %}
                                     <v-btn @click="editItem" color="primary" variant="elevated" class="ma-2"
                                     >{{ _('New Incident') }}</v-btn
@@ -96,7 +94,7 @@
                             </v-sheet>
 
 
-                            <v-toolbar class="px-3" v-if="bulkAllowed() || exportAllowed()">
+                            <v-toolbar class="px-3" v-if="selected.length && (bulkAllowed() || exportAllowed())">
 
                                 <template v-if="bulkIcons">
                                     <v-tooltip location="top" text="{{ _('Unselect all') }}">
@@ -159,12 +157,12 @@
 
                         <template #bottom>
                             <div class="d-flex align-center justify-space-between w-100 border-t px-3" style="height: 61px">
-                                <div>{{ _('Search time: ') }}
+                                <div v-if="this.$vuetify.display.smAndUp">{{ _('Search time: ') }}
                                     ${searchTime} {{ _('seconds') }}</div>
                                 <div>
                         
                                     <div class="d-flex flex-row align-center ga-2">
-                                        <div class="d-flex flex-row align-center ga-2">
+                                        <div v-if="this.$vuetify.display.smAndUp" class="d-flex flex-row align-center ga-2">
                                             {{ _('Items per page:') }}
                                             <v-select :model-value="perPage" @update:model-value="setNextPerPageValue" hide-details
                                                 density="compact" :items="itemsPerPageOptions" variant="outlined"></v-select>
diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 7677ac08c..f51f84e01 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -2,16 +2,14 @@
 {% block content %}
 
             <v-main>
-                <v-container fluid>
-                    <v-row>
-                        <v-col cols="12">
-                            <v-card>
+                <v-container fluid style="height: calc(100vh - 64px);">
+                            <v-card class="h-100">
                                 <v-tabs v-model="tab" color="primary">
                                     <v-tab value="labels">{{ _('Labels') }}</v-tab>
                                     <v-tab value="verified">{{ _('Verified Labels') }}</v-tab>
                                 </v-tabs>
 
-                                <v-card-text>
+                                <v-card-text class="d-flex flex-column" style="height: calc(100% - 48px);">
                                     <!-- Toolbar -->
                                     <v-toolbar flat density="compact" class="mb-2">
                                         <v-text-field
@@ -43,6 +41,7 @@
 
                                         {% if current_user.roles_in(['Admin']) %}
                                         <v-btn
+                                            v-if="$vuetify.display.smAndUp"
                                             variant="outlined"
                                             class="ma-2 border-thin"
                                             @click="imDialog = true">
@@ -51,10 +50,10 @@
                                         {% endif %}
                                     </v-toolbar>
 
+                                    <div class="flex-grow-1" style="min-height: 0;">
                                     <!-- Table view -->
                                     <v-data-table-server
                                         v-if="viewMode === 'table'"
-                                        height="calc(100vh - 295px)"
                                         fixed-header
                                         @update:options="refresh"
                                         :page="options.page"
@@ -62,7 +61,7 @@
                                         :items="items"
                                         :loading="loading"
                                         :items-length="itemsLength"
-                                        class="elevation-1"
+                                        class="elevation-1 h-100"
                                     >
                                         <template v-slot:item.parent="{ item }">
                                             ${ item.parent ? item.parent.title : '' }
@@ -86,7 +85,7 @@
                                     </v-data-table-server>
 
                                     <!-- Tree view -->
-                                    <div v-if="viewMode === 'tree'" style="height: calc(100vh - 235px); overflow-y: auto;">
+                                    <div v-if="viewMode === 'tree'" class="h-100 overflow-y-auto">
                                         <v-treeview
                                             v-if="treeItems.length"
                                             :items="treeItems"
@@ -113,10 +112,9 @@
                                         </div>
                                         <div v-else class="text-center pa-4 text-grey">{{ _('No labels found') }}</div>
                                     </div>
+                                    </div>
                                 </v-card-text>
                             </v-card>
-                        </v-col>
-                    </v-row>
                 </v-container>
 
                 <!-- Create/Edit dialog -->
diff --git a/enferno/admin/templates/admin/locations.html b/enferno/admin/templates/admin/locations.html
index c357a4f62..e064b2200 100644
--- a/enferno/admin/templates/admin/locations.html
+++ b/enferno/admin/templates/admin/locations.html
@@ -2,18 +2,15 @@
 
 
             <v-main>
-                <v-container fluid>
-                    <v-row>
-                        <v-col cols="12">
-                            <v-card>
+                <v-container fluid style="height: calc(100vh - 64px);">
+                            <v-card class="h-100">
                                 <v-card-title>
                                     <div class="flex-grow-1"></div>
                                 </v-card-title>
 
-                                <v-card-text>
+                                <v-card-text class="h-100">
 
                                     <v-data-table-server
-                                            height="calc(100vh - 260px)"
                                             id="locations-dt"
                                             fixed-header
                                             :headers="headers"
@@ -23,16 +20,16 @@
                                             @update:options="refresh"
                                             :page="options.page"
                                             :items-length="itemsLength"
-                                            class="elevation-1"
+                                            class="elevation-1 h-100"
                                     >
                                         <template v-slot:top>
                                             <v-toolbar color="white" >
-                                                <v-toolbar-title>{{ _('Locations') }}</v-toolbar-title>
+                                                <v-toolbar-title v-if="$vuetify.display.smAndUp">{{ _('Locations') }}</v-toolbar-title>
 
                                                 <v-text-field
                                                     variant="outlined"
                                                     density="compact"
-                                                    class="mt-6"
+                                                    class="mt-6 px-4"
                                                     v-model="q.title"
                                                     clearable
                                                     @keydown.enter="refresh()"
@@ -42,7 +39,7 @@
                                                     label="{{ _('Search') }}">
                                                 </v-text-field>
 
-                                                <v-spacer></v-spacer>
+                                                <v-spacer v-if="$vuetify.display.smAndUp"></v-spacer>
 
                                                 <v-btn 
                                                     @click="newItem"
@@ -55,6 +52,7 @@
 
                                                 {% if current_user.has_role('Admin') %}
                                                         <v-btn
+                                                            v-if="$vuetify.display.smAndUp"
                                                             @click="imDialog=true"
                                                             variant="elevated"
 
@@ -135,8 +133,6 @@
 
                                 </v-card-text>
                             </v-card>
-                        </v-col>
-                    </v-row>
 
                 </v-container>
             </v-main>
diff --git a/enferno/admin/templates/admin/media-dashboard.html b/enferno/admin/templates/admin/media-dashboard.html
index 4a2d015bd..e2e58d806 100644
--- a/enferno/admin/templates/admin/media-dashboard.html
+++ b/enferno/admin/templates/admin/media-dashboard.html
@@ -59,10 +59,10 @@
                             :loading="loading"
                             :items-length="itemsLength"
                             class="elevation-1"
-                            :show-select="hasOcrProvider"
+                            :show-select="$vuetify.display.smAndUp && hasOcrProvider"
                             item-value="id"
                             select-strategy="page"
-                            :item-selectable="canRunOCRProcess"
+                            :item-selectable="$vuetify.display.smAndUp && canRunOCRProcess"
                             :items-per-page-options="itemsPerPageOptions"
                             @click:row="rowClick"
                     >
@@ -73,7 +73,7 @@
                                 </v-toolbar-title>
 
                                 <!-- Filters -->
-                                <div class="d-flex align-center ga-2">
+                                <div v-if="$vuetify.display.smAndUp" class="d-flex align-center ga-2">
                                     <v-select
                                         v-model="filters.ocr_status"
                                         :items="statusOptions"
@@ -404,6 +404,7 @@
                     if (this.$route.params.id) this.showOcrDialog(this.$route.params.id);
                 },
                 rowClick(e, row) {
+                    if (this.$vuetify.display.smAndDown) return; // Disable row click on mobile devices
                     const item = row.item;
                     const path = `/admin/media/${item.id}`;
                     if (this.$route.path !== path) this.$router.push(path);
diff --git a/enferno/admin/templates/admin/partials/actor_dialog.html b/enferno/admin/templates/admin/partials/actor_dialog.html
index b550aed39..aa8d0aaf1 100644
--- a/enferno/admin/templates/admin/partials/actor_dialog.html
+++ b/enferno/admin/templates/admin/partials/actor_dialog.html
@@ -35,7 +35,7 @@
                     style="height: calc(100vh - 64px);"
                     class="overflow-y-auto">
 
-                <v-card-text>
+                <v-card-text :class="{ 'pa-0': $vuetify.display.smAndDown }">
                     <v-container fluid>
                         <v-btn-toggle v-model="editedItem.type" tile mandatory>
                             <v-btn
@@ -344,7 +344,7 @@
                                                                 ></v-text-field>
                                                             </v-col>
 
-                                                            <v-col md="8">
+                                                            <v-col cols="12" md="8">
                                                                 <v-text-field class="mx-2"
                                                                                 variant="outlined"
                                                                                 v-model="profile.source_link"
@@ -354,7 +354,7 @@
                                                                 ></v-text-field>
                                                             </v-col>
 
-                                                            <v-col md="2">
+                                                            <v-col cols="12" md="2">
                                                                 <v-switch color="primary" class="mx-2" label="{{ _('Private') }}"
                                                                             v-model="profile.source_link_type"
                                                                 >
@@ -420,7 +420,7 @@
 
                                                     <v-container fluid>
                                                         <v-row>
-                                                            <v-col md="6">
+                                                            <v-col cols="12" sm="6">
                                                                 <!-- Publish Date -->
 
                                                                 <pop-date-time-field
@@ -430,7 +430,7 @@
                                                                 </pop-date-time-field>
 
                                                             </v-col>
-                                                            <v-col md="6">
+                                                            <v-col cols="12" sm="6">
                                                                 <!-- Documentation Date -->
                                                                 <pop-date-time-field
                                                                         label="{{ _('Documentation Date')}}"
@@ -457,7 +457,7 @@
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.last_address`)"
                                                                                 ></v-text-field>
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-text-field label="{{ _('Marriage History') }}"
                                                                                             v-model="profile.marriage_history"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.marriage_history`)"
@@ -465,7 +465,7 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-select
                                                                                         label="{{ _('Pregnant at Disappearance') }}"
                                                                                         clearable
@@ -476,7 +476,7 @@
 
                                                                                 </v-select>
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-text-field
                                                                                     label="{{ _('Months Pregnant at time of disappearance') }}"
                                                                                     v-model="profile.months_pregnant" :rules="[validationRules.integer()]"
@@ -484,7 +484,7 @@
                                                                                 ></v-text-field>
 
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-switch label="{{ _('Missing Relatives') }}"
                                                                                         v-model="profile.missing_relatives"></v-switch>
                                                                             </v-col>
@@ -494,7 +494,7 @@
                                                                         <v-row>
 
 
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-card class="pa-3">
                                                                                     <v-card-title class="subtitle-2">
                                                                                         {{ _('Details of the person who saw them last') }}
@@ -521,13 +521,13 @@
                                                                                     </v-card-text>
                                                                                 </v-card>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <mix-yes-no-field title="{{ _('Seen in a detention center?') }}"
                                                                                     v-model="profile.seen_in_detention"
                                                                                     :server-errors="serverErrors" :error-key="`item.actor_profiles.${index}.seen_in_detention.details`"
                                                                                 ></mix-yes-no-field>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <mix-yes-no-field v-model="profile.injured"
                                                                                     title="{{ _('Injured around time of disappearance?') }}"
                                                                                     :server-errors="serverErrors"
@@ -536,7 +536,7 @@
                                                                             </v-col>
 
 
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <mix-yes-no-field v-model="profile.known_dead"
                                                                                     title="{{ _('Known to be dead?') }}"
                                                                                     :server-errors="serverErrors"
@@ -545,7 +545,7 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Details about circumstances of death') }}"
                                                                                             v-model="profile.death_details"
@@ -553,7 +553,7 @@
                                                                                 ></v-textarea>
                                                                             </v-col>
 
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Personal Items (watch,ring,chains etc)') }}"
                                                                                             v-model="profile.personal_items"
@@ -563,7 +563,7 @@
 
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="2">
+                                                                            <v-col cols="12" md="2">
                                                                                 <v-text-field v-model="profile.height"
                                                                                             label="{{ _('Height') }}"
                                                                                             suffix="cm"
@@ -573,7 +573,7 @@
 
 
                                                                             </v-col>
-                                                                            <v-col md="2">
+                                                                            <v-col cols="12" md="2">
                                                                                 <v-text-field v-model="profile.weight"
                                                                                             label="{{ _('Weight') }}"
                                                                                             suffix="kg"
@@ -583,7 +583,7 @@
 
 
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-select label="{{ _('Physique') }}"
                                                                                         clearable
                                                                                         item-title="tr"
@@ -593,7 +593,7 @@
                                                                                 ></v-select>
 
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-select label="{{ _('Hair loss') }}"
                                                                                         clearable
                                                                                         v-model="profile.hair_loss"
@@ -606,7 +606,7 @@
                                                                         </v-row>
 
                                                                         <v-row>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-select label="{{ _('Hair type') }}"
                                                                                         clearable
                                                                                         v-model="profile.hair_type"
@@ -615,7 +615,7 @@
                                                                                         :items="translations.hairType"
                                                                                 ></v-select>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-select label="{{ _('Hair length') }}"
                                                                                         clearable
                                                                                         v-model="profile.hair_length"
@@ -624,7 +624,7 @@
                                                                                         :items="translations.hairLength"
                                                                                 ></v-select>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-select label="{{ _('Hair color') }}"
                                                                                         clearable
                                                                                         v-model="profile.hair_color"
@@ -633,7 +633,7 @@
                                                                                         :items="translations.hairColor"
                                                                                 ></v-select>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-select label="{{ _('Facial hair') }}"
                                                                                         clearable
                                                                                         v-model="profile.facial_hair"
@@ -646,7 +646,7 @@
                                                                         </v-row>
 
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             v-model="profile.posture"
                                                                                             label="{{ _('Notes on posture and walking style') }}"
@@ -671,7 +671,7 @@
                                                                                         item-value="en"
                                                                                         v-model="profile.eye_color"></v-select>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <mix-select-field title="{{ _('Skin Markings') }}"
                                                                                         :items="translations.skinMarkings"
                                                                                         item-title="tr"
@@ -687,14 +687,14 @@
 
 
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Distinctive characteristics (congenital)') }}"
                                                                                             v-model="profile.dist_char_con"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.dist_char_con`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Distinctive characteristics (acquired)') }}"
                                                                                             v-model="profile.dist_char_acq"
@@ -703,14 +703,14 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Physical habits') }}"
                                                                                             v-model="profile.physical_habits"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.physical_habits`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Other comments') }}"
                                                                                             v-model="profile.other"
@@ -720,14 +720,14 @@
                                                                         </v-row>
 
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Physician’s name and contact') }}"
                                                                                             v-model="profile.phys_name_contact"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.phys_name_contact`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Fractures / Injuries (indicate place, side, circumstances, age at the time of injury, treatment)') }}"
                                                                                             v-model="profile.injuries"
@@ -736,14 +736,14 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Implants (pacemakers, orthopedic prostheses, screws or metal plates, etc...) with date or age') }}"
                                                                                             v-model="profile.implants"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.implants`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Congenital malformations (indicate type and whether there is more than one relative with the same pathology)') }}"
                                                                                             v-model="profile.malforms"
@@ -752,14 +752,14 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Pain and/or ailments') }}"
                                                                                             v-model="profile.pain"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.pain`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Other medical conditions (specify type and age of occurrence)') }}"
                                                                                             v-model="profile.other_conditions"
@@ -768,14 +768,14 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Accidents (indicate age of occurrence)') }}"
                                                                                             v-model="profile.accidents"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.accidents`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="6">
+                                                                            <v-col cols="12" md="6">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Prescription drugs taken (indicate at what age and reason)') }}"
                                                                                             v-model="profile.pres_drugs"
@@ -784,7 +784,7 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col cols="3">
+                                                                            <v-col cols="12" sm="3">
                                                                                 <v-select
                                                                                         clearable
                                                                                         item-title="tr"
@@ -795,19 +795,19 @@
 
                                                                                 </v-select>
                                                                             </v-col>
-                                                                            <v-col cols="3">
+                                                                            <v-col cols="12" sm="3">
                                                                                 <v-switch
                                                                                         label="{{ _('Is there a Dental Record?') }}"
                                                                                         v-model="profile.dental_record"></v-switch>
                                                                             </v-col>
-                                                                            <v-col cols="3">
+                                                                            <v-col cols="12" sm="3">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Dentist\'s name and contact') }}"
                                                                                             v-model="profile.dentist_info"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.dentist_info`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col cols="3">
+                                                                            <v-col cols="12" sm="3">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Teeth features (spacing, extra teeth, missing teeth, overbite, etc...)') }}"
                                                                                             v-model="profile.teeth_features"
@@ -818,28 +818,28 @@
                                                                         </v-row>
 
                                                                         <v-row>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Dental problems (absences, infections, bleeding, etc...)') }}"
                                                                                             v-model="profile.dental_problems"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.dental_problems`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Dental treatments (extractions, fillings, etc...) with dates') }}"
                                                                                             v-model="profile.dental_treatments"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.dental_treatments`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Dental habits (toothpicks, smoking, etc...)') }}"
                                                                                             v-model="profile.dental_habits"
                                                                                             v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.dental_habits`)"
                                                                                 ></v-textarea>
                                                                             </v-col>
-                                                                            <v-col md="3">
+                                                                            <v-col cols="12" md="3">
                                                                                 <v-select label="{{ _('Case status') }}"
                                                                                         v-model="profile.case_status"
                                                                                         clearable
@@ -859,20 +859,20 @@
                                                                             </v-col>
                                                                         </v-row>
                                                                         <v-row>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-text-field
                                                                                         label="{{ _('Identified by (responsible institution)') }}"
                                                                                         v-model="profile.identified_by"
                                                                                         v-bind="serverErrorPropsForField(serverErrors, `item.actor_profiles.${index}.identified_by`)"
                                                                                 ></v-text-field>
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-switch
                                                                                         label="{{ _('Was the family notified?') }}"
                                                                                         v-model="profile.family_notified"></v-switch>
 
                                                                             </v-col>
-                                                                            <v-col md="4">
+                                                                            <v-col cols="12" md="4">
                                                                                 <v-textarea rows="1"
                                                                                             label="{{ _('Location of reburial (full address)') }}"
                                                                                             v-model="profile.reburial_location"
diff --git a/enferno/admin/templates/admin/partials/actor_drawer.html b/enferno/admin/templates/admin/partials/actor_drawer.html
index 15a8b8d86..411c27884 100644
--- a/enferno/admin/templates/admin/partials/actor_drawer.html
+++ b/enferno/admin/templates/admin/partials/actor_drawer.html
@@ -1,7 +1,7 @@
 <v-navigation-drawer
       v-model="actorDrawer"
-      absolute
-      floating
+      clipped
+      fixed
       location="right"
       temporary
       :width="actorDrawerSettings?.width ?? 520"
diff --git a/enferno/admin/templates/admin/partials/bulletin_dialog.html b/enferno/admin/templates/admin/partials/bulletin_dialog.html
index 5fe840ae9..6c7fb34da 100644
--- a/enferno/admin/templates/admin/partials/bulletin_dialog.html
+++ b/enferno/admin/templates/admin/partials/bulletin_dialog.html
@@ -70,149 +70,169 @@
             </v-toolbar
             >
 
-            <v-card-text class="pa-0" style="height: calc(100vh - 64px);">
-                    <split-view ref="bulletinDialogSplitViewRef" @left-width-changed="leftDialogProps['content-props'].style.width = $event" @right-width-changed="rightDialogProps['content-props'].style.width = $event">
-                        <template #left>
-                            <div class="mx-4 mb-4 mt-8">
-                                {% include 'admin/partials/media_dialog.html' %}
-                            </div>
-                        </template>
-                        <template #right>
-                            <div v-if="movableDynamicFields({ entityType: 'bulletin' }).length" class="form-grid mt-4">
-                                <template v-for="(field, index) in movableDynamicFields({ entityType: 'bulletin' })" :key="field.id">
-                                    <div v-if="isFieldActive(field, 'title')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <dual-field v-model:original="editedItem.title" v-model:translation="editedItem.title_ar"
-                                            label-original="{{ _('Original Title') }}" label-translation="{{ _('Original Title (Ar)') }}" :rules="[
-                                                validationRules.atLeastOneRequired(editedItem.title, '{{ _('Original Title is required.') }}'),
-                                                validationRules.maxLength(255),
-                                            ]"
-                                            v-bind="serverErrorPropsForDualField(serverErrors, 'item.title', 'item.title_ar')"
-                                        ></dual-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'sjac_title')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <dual-field v-model:original="editedItem.sjac_title" v-model:translation="editedItem.sjac_title_ar"
-                                            label-original="{{ _('Title') }}" label-translation="{{ _('Title (Ar)') }}"
-                                            :rules="[validationRules.maxLength(255)]"
-                                            v-bind="serverErrorPropsForDualField(serverErrors, 'item.sjac_title', 'item.sjac_title_ar')"
-                                        ></dual-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'tags')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <v-combobox chips multiple v-model="editedItem.tags" label="{{ _('Tags') }}"></v-combobox>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'sources')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <search-field v-model="editedItem.sources" api="/admin/api/sources/" item-title="title" item-value="id"
-                                            :multiple="true" label="{{ _('Sources') }}"></search-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'description')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <tinymce-editor :init="tinyConfig" :key="descKey" v-model="editedItem.description"></tinymce-editor>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <search-field v-model="editedItem.labels" api="/admin/api/labels/" :query-params="{ typ: 'for_bulletin', mode: 2 }"
-                                            item-title="title" item-value="id" :multiple="true" :show-copy-icon="advFeatures"
-                                            item-subtitle="path" :retain-search="true" label="{{ _('Labels') }}"></search-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'ver_labels')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <search-field v-model="editedItem.verLabels" api="/admin/api/labels/"
-                                            :query-params="{ fltr: 'verified', typ: 'for_bulletin', mode: 2 }" item-title="title" item-value="id" :multiple="true"
-                                            :show-copy-icon="advFeatures" item-subtitle="path" :retain-search="true" label="{{ _('Verified Labels') }}"></search-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'locations')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <location-search-field v-model="editedItem.locations" api="/admin/api/locations/" item-title="full_string"
-                                            item-value="id" :multiple="true" :show-copy-icon="advFeatures" label="{{ _('Locations') }}"></location-search-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'events_section')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <events-section :edited-item="editedItem" :dialog-props="rightContainedDialogProps" :show-copy-icon="advFeatures"
-                                        :event-params="eventParams"></events-section>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'geo_locations')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <geo-locations @locations-updated="geoLocationsUpdated" :others="editedItem.geoLocations"
-                                            v-model="editedItem.geoLocations" :dialog-props="rightContainedDialogProps"></geo-locations>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'global_map')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <global-map  ref="globalmap" :model-value="compLocations"></global-map>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'publish_date')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <pop-date-time-field time-label="{{ _('Time') }}" label="{{ _('Publish Date') }}"
-                                            v-model="editedItem.publish_date"></pop-date-time-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'documentation_date')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <pop-date-time-field time-label="{{ _('Time') }}" label="{{ _('Documentation Date') }}"
-                                            v-model="editedItem.documentation_date"></pop-date-time-field>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'related_bulletins')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        {% include 'admin/partials/edit_related_bulletins.html' %}
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'related_actors')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        {% include 'admin/partials/edit_related_actors.html' %}
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'related_incidents')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        {% include 'admin/partials/edit_related_incidents.html' %}
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'source_link')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <v-sheet class="d-flex align-center">
-                                            <v-text-field class="mx-2" :disabled="source_disabled" v-model="editedItem.source_link"
-                                                label="{{ _('Source Link') }}" :rules="[
-                                                validationRules.required('{{ _('Source link is required unless unavailable.')}}'),
-                                                    validationRules.maxLength(255)
-                                                ]"
-                                                v-bind="serverErrorPropsForField(serverErrors, 'item.source_link')"
-                                            ></v-text-field>
-                                        
-                                            <v-checkbox class="mx-2" label="{{ _('Not Available') }}" v-model="source_alt">
+            <v-card-text class="pa-0 bulletin-dialog-content d-flex flex-column" style="min-height: calc(100dvh - 64px);">
+                    <div v-if="$vuetify.display.smAndDown" class="pa-2 pb-0">
+                        <v-btn-toggle v-model="bulletinMobilePane" mandatory divided class="w-100">
+                            <v-btn value="form" class="text-none flex-grow-1">{{ _('Form') }}</v-btn>
+                            <v-btn value="media" class="text-none flex-grow-1">{{ _('Media') }}</v-btn>
+                        </v-btn-toggle>
+                    </div>
+
+                    <div v-if="!$vuetify.display.smAndDown || bulletinMobilePane === 'form'" class="flex-grow-1" style="min-height: 0;">
+                        <split-view
+                            ref="bulletinDialogSplitViewRef"
+                            :left-slot-visible="!$vuetify.display.smAndDown"
+                            @left-width-changed="!$vuetify.display.smAndDown && (leftDialogProps['content-props'].style.width = $event)"
+                            @right-width-changed="!$vuetify.display.smAndDown && (rightDialogProps['content-props'].style.width = $event)"
+                        >
+                            <template #left>
+                                <div class="mx-4 mb-4 mt-8">
+                                    {% include 'admin/partials/media_dialog.html' %}
+                                </div>
+                            </template>
+                            <template #right>
+                                    <div v-if="movableDynamicFields({ entityType: 'bulletin' }).length" class="form-grid mt-4">
+                                        <template v-for="(field, index) in movableDynamicFields({ entityType: 'bulletin' })" :key="field.id">
+                                            <div v-if="isFieldActive(field, 'title')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <dual-field v-model:original="editedItem.title" v-model:translation="editedItem.title_ar"
+                                                    label-original="{{ _('Original Title') }}" label-translation="{{ _('Original Title (Ar)') }}" :rules="[
+                                                        validationRules.atLeastOneRequired(editedItem.title, '{{ _('Original Title is required.') }}'),
+                                                        validationRules.maxLength(255),
+                                                    ]"
+                                                    v-bind="serverErrorPropsForDualField(serverErrors, 'item.title', 'item.title_ar')"
+                                                ></dual-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'sjac_title')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <dual-field v-model:original="editedItem.sjac_title" v-model:translation="editedItem.sjac_title_ar"
+                                                    label-original="{{ _('Title') }}" label-translation="{{ _('Title (Ar)') }}"
+                                                    :rules="[validationRules.maxLength(255)]"
+                                                    v-bind="serverErrorPropsForDualField(serverErrors, 'item.sjac_title', 'item.sjac_title_ar')"
+                                                ></dual-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'tags')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <v-combobox chips multiple v-model="editedItem.tags" label="{{ _('Tags') }}"></v-combobox>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'sources')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <search-field v-model="editedItem.sources" api="/admin/api/sources/" item-title="title" item-value="id"
+                                                    :multiple="true" label="{{ _('Sources') }}"></search-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'description')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <tinymce-editor :init="tinyConfig" :key="descKey" v-model="editedItem.description"></tinymce-editor>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'labels')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <search-field v-model="editedItem.labels" api="/admin/api/labels/" :query-params="{ typ: 'for_bulletin', mode: 2 }"
+                                                    item-title="title" item-value="id" :multiple="true" :show-copy-icon="advFeatures"
+                                                    item-subtitle="path" :retain-search="true" label="{{ _('Labels') }}"></search-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'ver_labels')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <search-field v-model="editedItem.verLabels" api="/admin/api/labels/"
+                                                    :query-params="{ fltr: 'verified', typ: 'for_bulletin', mode: 2 }" item-title="title" item-value="id" :multiple="true"
+                                                    :show-copy-icon="advFeatures" item-subtitle="path" :retain-search="true" label="{{ _('Verified Labels') }}"></search-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'locations')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <location-search-field v-model="editedItem.locations" api="/admin/api/locations/" item-title="full_string"
+                                                    item-value="id" :multiple="true" :show-copy-icon="advFeatures" label="{{ _('Locations') }}"></location-search-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'events_section')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <events-section :edited-item="editedItem" :dialog-props="rightContainedDialogProps" :show-copy-icon="advFeatures"
+                                                :event-params="eventParams"></events-section>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'geo_locations')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <geo-locations @locations-updated="geoLocationsUpdated" :others="editedItem.geoLocations"
+                                                    v-model="editedItem.geoLocations" :dialog-props="rightContainedDialogProps"></geo-locations>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'global_map')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <global-map  ref="globalmap" :model-value="compLocations"></global-map>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'publish_date')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <pop-date-time-field time-label="{{ _('Time') }}" label="{{ _('Publish Date') }}"
+                                                    v-model="editedItem.publish_date"></pop-date-time-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'documentation_date')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <pop-date-time-field time-label="{{ _('Time') }}" label="{{ _('Documentation Date') }}"
+                                                    v-model="editedItem.documentation_date"></pop-date-time-field>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'related_bulletins')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                {% include 'admin/partials/edit_related_bulletins.html' %}
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'related_actors')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                {% include 'admin/partials/edit_related_actors.html' %}
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'related_incidents')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                {% include 'admin/partials/edit_related_incidents.html' %}
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'source_link')" :class="[fieldClass(field), 'px-3 py-2']">
+                                                <v-sheet class="d-flex align-center">
+                                                    <v-text-field class="mx-2" :disabled="source_disabled" v-model="editedItem.source_link"
+                                                        label="{{ _('Source Link') }}" :rules="[
+                                                        validationRules.required('{{ _('Source link is required unless unavailable.')}}'),
+                                                            validationRules.maxLength(255)
+                                                        ]"
+                                                        v-bind="serverErrorPropsForField(serverErrors, 'item.source_link')"
+                                                    ></v-text-field>
+                                                
+                                                    <v-checkbox class="mx-2" label="{{ _('Not Available') }}" v-model="source_alt">
+                                                    </v-checkbox>
+                                                
+                                                    <v-switch color="primary" class="mx-2" label="{{ _('Private') }}" v-model="editedItem.source_link_type">
+                                                    </v-switch>
+                                                </v-sheet>
+                                            </div>
+                                            <field-renderer v-else-if="isFieldActive(field) && !field.core" v-model="editedItem[field.name]" :field="field" :class="[fieldClass(field), 'px-3 py-2']"></field-renderer>
+                                        </template>
+                                    </div>
+                                    <div v-if="fixedDynamicFields({ entityType: 'bulletin' }).length" class="form-grid mt-4">
+                                        <template v-for="(field, index) in fixedDynamicFields({ entityType: 'bulletin' })" :key="field.id">
+                                            <div v-if="isFieldActive(field, 'comments')" :class="fieldClass(field)">
+                                                <v-textarea required class="h-100" :rules="[validationRules.required()]" outlined v-model="editedItem.comments"
+                                                    label="{{ _('Comments') }}" v-bind="serverErrorPropsForField(serverErrors, 'item.comments')">
+                                                </v-textarea>
+                                            </div>
+                                            <div v-else-if="isFieldActive(field, 'status')" :class="fieldClass(field)">
+                                                <v-select :disabled="statusDisabled" item-title="tr" item-value="en" :items="statusItems" class="mx-2"
+                                                    v-model="editedItem.status" label="{{ _('Status') }}"></v-select>
+                                            </div>
+                                        </template>
+                                        {% if config.AC_USERS_CAN_RESTRICT_NEW or current_user.has_role("Admin") %}
+                                        <div class="grid-col-span-1 px-3 py-2" v-if="!editedItem.id">
+                                            <v-select :color="editedItem.roles?.length ? 'blue darken-1' : 'error'"
+                                                :prepend-icon="editedItem.roles?.length ? 'mdi-lock' : 'mdi-lock-open'" chips :disabled="unrestricted"
+                                                item-title="name" return-object :items="allowedRoles" multiple v-model="editedItem.roles"
+                                                label="{{ _('Restrict Bulletin to Access Group(s)') }}" :rules="
+                                                                                                                            !unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []
+                                                                                                                        " clearable></v-select>
+                                            <v-checkbox color="error" @change="unrestricted? editedItem.roles = [] : null" class="mx-2"
+                                                label="{{ _('No Access Groups') }}" v-model="unrestricted">
                                             </v-checkbox>
-                                        
-                                            <v-switch color="primary" class="mx-2" label="{{ _('Private') }}" v-model="editedItem.source_link_type">
-                                            </v-switch>
-                                        </v-sheet>
-                                    </div>
-                                    <field-renderer v-else-if="isFieldActive(field) && !field.core" v-model="editedItem[field.name]" :field="field" :class="[fieldClass(field), 'px-3 py-2']"></field-renderer>
-                                </template>
-                            </div>
-                            <div v-if="fixedDynamicFields({ entityType: 'bulletin' }).length" class="form-grid mt-4">
-                                <template v-for="(field, index) in fixedDynamicFields({ entityType: 'bulletin' })" :key="field.id">
-                                    <div v-if="isFieldActive(field, 'comments')" :class="fieldClass(field)">
-                                        <v-textarea required class="h-100" :rules="[validationRules.required()]" outlined v-model="editedItem.comments"
-                                            label="{{ _('Comments') }}" v-bind="serverErrorPropsForField(serverErrors, 'item.comments')">
-                                        </v-textarea>
-                                    </div>
-                                    <div v-else-if="isFieldActive(field, 'status')" :class="fieldClass(field)">
-                                        <v-select :disabled="statusDisabled" item-title="tr" item-value="en" :items="statusItems" class="mx-2"
-                                            v-model="editedItem.status" label="{{ _('Status') }}"></v-select>
+                                        </div>
+                                        {% endif %}
                                     </div>
-                                </template>
-                                {% if config.AC_USERS_CAN_RESTRICT_NEW or current_user.has_role("Admin") %}
-                                <div class="grid-col-span-1 px-3 py-2" v-if="!editedItem.id">
-                                    <v-select :color="editedItem.roles?.length ? 'blue darken-1' : 'error'"
-                                        :prepend-icon="editedItem.roles?.length ? 'mdi-lock' : 'mdi-lock-open'" chips :disabled="unrestricted"
-                                        item-title="name" return-object :items="allowedRoles" multiple v-model="editedItem.roles"
-                                        label="{{ _('Restrict Bulletin to Access Group(s)') }}" :rules="
-                                                                                                                    !unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []
-                                                                                                                " clearable></v-select>
-                                    <v-checkbox color="error" @change="unrestricted? editedItem.roles = [] : null" class="mx-2"
-                                        label="{{ _('No Access Groups') }}" v-model="unrestricted">
-                                    </v-checkbox>
-                                </div>
-                                {% endif %}
-                            </div>
 
 
-                            <v-row class="w-100 ma-0" v-if="editedItem.review">
-                                <v-col cols="12" md="12">
-                        
-                                    <v-card outlined color="gray " elevation="0">
-                                        <v-card-title class="subtitle-2 black--text">{{ _('Review') }}</v-card-title>
-                                        <v-card-text>
-                                            <read-more>
-                                                <p class="pa-1 my-2 grey--text text--darken-2" v-html="editedItem.review"></p>
-                                            </read-more>
-                                        </v-card-text>
-                        
-                                    </v-card>
-                        
-                                </v-col>
-                            </v-row>
-                        </template>
-                    </split-view>
+                                    <v-row class="w-100 ma-0" v-if="editedItem.review">
+                                        <v-col cols="12" md="12">
+                                
+                                            <v-card outlined color="gray " elevation="0">
+                                                <v-card-title class="subtitle-2 black--text">{{ _('Review') }}</v-card-title>
+                                                <v-card-text>
+                                                    <read-more>
+                                                        <p class="pa-1 my-2 grey--text text--darken-2" v-html="editedItem.review"></p>
+                                                    </read-more>
+                                                </v-card-text>
+                                
+                                            </v-card>
+                                
+                                        </v-col>
+                                    </v-row>
+                            </template>
+                        </split-view>
+                    </div>
+
+                    <div v-else class="flex-grow-1 overflow-y-auto px-2 pb-2" style="min-height: 0;">
+                        <div class="mt-2 mb-2">
+                            {% include 'admin/partials/media_dialog.html' %}
+                        </div>
+                    </div>
             </v-card-text>
         </v-card>
     </v-form>
diff --git a/enferno/admin/templates/admin/partials/incident_dialog.html b/enferno/admin/templates/admin/partials/incident_dialog.html
index bb5f11bed..de37012ab 100644
--- a/enferno/admin/templates/admin/partials/incident_dialog.html
+++ b/enferno/admin/templates/admin/partials/incident_dialog.html
@@ -25,7 +25,7 @@
                     id="card-content"
                     style="height: calc(100vh - 64px);"
                     class="overflow-y-auto">
-                <v-card-text>
+                <v-card-text :class="{ 'pa-0': $vuetify.display.smAndDown }">
                     <v-container fluid>
                         <div v-if="movableDynamicFields({ entityType: 'incident' }).length" class="form-grid mt-4">
                             <template v-for="(field, index) in movableDynamicFields({ entityType: 'incident' })" :key="field.id">
diff --git a/enferno/admin/templates/admin/partials/media_dialog.html b/enferno/admin/templates/admin/partials/media_dialog.html
index dfc7bdccf..42f791b87 100644
--- a/enferno/admin/templates/admin/partials/media_dialog.html
+++ b/enferno/admin/templates/admin/partials/media_dialog.html
@@ -1,6 +1,16 @@
-<snapshot-dialog v-model="snapshotDialog" v-bind="leftDialogProps || { 'max-width': '500px' }"></snapshot-dialog>
+<snapshot-dialog
+  v-model="snapshotDialog"
+  v-bind="$vuetify.display.smAndDown
+    ? { 'retain-focus': false, fullscreen: true, persistent: true, 'no-click-animation': true, scrim: true }
+    : (leftDialogProps || { 'max-width': '500px' })"
+></snapshot-dialog>
 
-<v-dialog v-model="mediaDialog" v-bind="leftDialogProps || { 'max-width': '500px' }">
+<v-dialog
+  v-model="mediaDialog"
+  v-bind="$vuetify.display.smAndDown
+    ? { 'retain-focus': false, fullscreen: true, persistent: true, 'no-click-animation': true, scrim: true }
+    : (leftDialogProps || { 'max-width': '500px' })"
+>
   <template #activator="{props}">
     <v-card>
       <v-toolbar class="handle">
diff --git a/enferno/admin/templates/admin/sources.html b/enferno/admin/templates/admin/sources.html
index 967eda329..7ca04baa3 100644
--- a/enferno/admin/templates/admin/sources.html
+++ b/enferno/admin/templates/admin/sources.html
@@ -2,16 +2,14 @@
 
 
             <v-main>
-                <v-container  fluid>
-
-                            <v-card>
+                <v-container fluid style="height: calc(100vh - 64px);">
+                            <v-card class="h-100">
                                 <v-card-title>
                                     <div class="flex-grow-1"></div>
                                 </v-card-title>
 
-                                <v-card-text>
+                                <v-card-text class="h-100">
                                     <v-data-table-server
-                                            height="calc(100vh - 260px)"
                                             fixed-header
                                             :headers="headers"
                                             :items="items"
@@ -19,15 +17,15 @@
                                             :page="options.page"
                                             :loading="loading"
                                             :items-length="itemsLength"
-                                            class="elevation-1"
+                                            class="elevation-1 h-100"
                                     >
                                         <template v-slot:top>
                                             <v-toolbar flat color="white">
-                                                <v-toolbar-title>{{ _('Sources') }}</v-toolbar-title>
+                                                <v-toolbar-title v-if="$vuetify.display.smAndUp">{{ _('Sources') }}</v-toolbar-title>
 
                                             <v-text-field
                                             variant="outlined"
-                                            class="mt-6"
+                                            class="mt-6 px-4"
                                             density="compact"
                                             clearable
                                             @click:clear="resetSearch"
@@ -36,7 +34,7 @@
                                             @keydown.enter="refresh()"
                                             ></v-text-field>
 
-                                                <v-spacer></v-spacer>
+                                                <v-spacer v-if="$vuetify.display.smAndUp"></v-spacer>
 
                                                 <v-btn
                                                     color="primary"
@@ -120,6 +118,7 @@
                                                     {% if current_user.roles_in(['Admin']) %}
                                                     <template v-slot:activator="{ props }">
                                                         <v-btn
+                                                            v-if="$vuetify.display.smAndUp"
                                                             color="secondary"
                                                             variant="elevated"
                                                             class="ma-2"
diff --git a/enferno/admin/templates/admin/system-administration.html b/enferno/admin/templates/admin/system-administration.html
index 2a360d068..66c2cf435 100644
--- a/enferno/admin/templates/admin/system-administration.html
+++ b/enferno/admin/templates/admin/system-administration.html
@@ -1,16 +1,25 @@
 {% extends 'layout.html' %}
 {% block content %}
 
-    <v-main class="system-admin">
-        <div class="pa-4">
-            <v-card class="pa-4" elevation="2" height="calc(100dvh - 96px)">
+    <v-main class="system-admin overflow-hidden">
+        <v-container fluid class="pa-4" style="height: calc(100vh - 64px);">
+            <v-card class="pa-4 h-100 d-flex flex-column" elevation="2">
                 <h1 class="text-h6 mb-5">{{ _('Administration Dashboard') }}</h1>
 
-                <div class="d-flex flex-column flex-md-row ga-4" style="height: calc(100% - 52px);">
+                <div class="d-flex flex-column flex-md-row ga-4 flex-grow-1" style="min-height: 0;">
 
                     <!-- Left navigation menu -->
-                    <v-card class="py-5 h-100 overflow-y-auto" elevation="2" style="min-width: 255px; max-height: fit-content;">
-                        <v-tabs height="40" v-model="tab" selected-class="text-primary" direction="vertical">
+                    <v-card
+                        :class="$vuetify.display.smAndDown ? 'w-100 flex-shrink-0' : 'py-5 h-100 overflow-y-auto'"
+                        elevation="2"
+                        :style="$vuetify.display.smAndDown ? '' : 'min-width: 255px; max-height: fit-content;'"
+                    >
+                        <v-tabs
+                            height="40"
+                            v-model="tab"
+                            :direction="$vuetify.display.smAndDown ? 'horizontal' : 'vertical'"
+                            align-tabs="start"
+                        >
                             <v-tab v-for="(tab, key) in tabsMap" :key="key" :value="key"
                                 class="px-7 justify-start text-none text-subtitle-2">
                                 ${tab.text}
@@ -20,7 +29,7 @@ <h1 class="text-h6 mb-5">{{ _('Administration Dashboard') }}</h1>
 
 
                     <!-- Main content -->
-                    <v-card elevation="2" class="w-100 overflow-y-auto">
+                    <v-card elevation="2" class="w-100 h-100 overflow-y-auto">
 
                         <!-- Main content header -->
                         <v-card-title class="d-flex flex-column pa-0 px-4 position-sticky top-0 z-1 bg-surface">
@@ -32,6 +41,7 @@ <h1 class="text-h6 mb-5">{{ _('Administration Dashboard') }}</h1>
 
                                 <!-- Actions -->
                                 <div class="d-flex ga-4">
+                                    <template v-if="$vuetify.display.smAndUp">
                                     <v-btn class="outlined-btn" color="primary" prepend-icon="mdi-restore" @click="loadDefaults"
                                         variant="outlined">
                                         {{ _('Restore default settings') }}
@@ -40,6 +50,7 @@ <h1 class="text-h6 mb-5">{{ _('Administration Dashboard') }}</h1>
                                         variant="outlined">
                                         {{ _('Revision history') }}
                                     </v-btn>
+                                    </template>
                                     <v-btn @click.stop="showConfigDiff()" variant="elevated" color="primary" prepend-icon="mdi-check"
                                         :disabled="!hasChanges">{{ _('Save changes') }}</v-btn>
                                 </div>
@@ -983,7 +994,7 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
                     </v-card>
                 </div>
             </v-card>
-        </div>
+        </v-container>
     </v-main>
 
 
@@ -1426,4 +1437,4 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
     </script>
 
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index 3a724aae3..b883b3117 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -3,7 +3,7 @@
     <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
   </template>
 
-  <v-toolbar-title class="ml-0 pl-2 flex-fill">
+  <v-toolbar-title class="ml-0 pl-0 flex-fill">
     <a href="/">
       <img src="/static/img/bayanat-h-w-v2.svg" class="mt-1" height="42" cover loading="lazy" />
     </a>
@@ -11,21 +11,23 @@
   <v-spacer></v-spacer>
 
   <template v-slot:append>
-    {% if config.OCR_PROVIDER == 'google_vision' %}
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="mr-2" href="/admin/media/">Vision API</v-chip>
-      </template>
-      {{ _('OCR powered by Google Vision') }}
-    </v-tooltip>
-    {% elif config.OCR_PROVIDER %}
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="mr-2" href="/admin/media/">AI Powered</v-chip>
-      </template>
-      {{ _('OCR powered by AI') }}
-    </v-tooltip>
-    {% endif %}
+    <template v-if="this.$vuetify.display.smAndUp">
+      {% if config.OCR_PROVIDER == 'google_vision' %}
+      <v-tooltip location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="mr-2" href="/admin/media/">Vision API</v-chip>
+        </template>
+        {{ _('OCR powered by Google Vision') }}
+      </v-tooltip>
+      {% elif config.OCR_PROVIDER %}
+      <v-tooltip location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="mr-2" href="/admin/media/">AI Powered</v-chip>
+        </template>
+        {{ _('OCR powered by AI') }}
+      </v-tooltip>
+      {% endif %}
+    </template>
 
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
diff --git a/enferno/static/js/components/InlineMediaRenderer.js b/enferno/static/js/components/InlineMediaRenderer.js
index 20ee93e64..d90444eee 100644
--- a/enferno/static/js/components/InlineMediaRenderer.js
+++ b/enferno/static/js/components/InlineMediaRenderer.js
@@ -81,6 +81,7 @@ const InlineMediaRenderer = Vue.defineComponent({
                 :icon="iconMap[mediaType]"
                 :color="mediaType === 'pdf' ? 'red' : 'primary'"
               ></v-icon>
+              <template v-if="$vuetify.display.smAndUp">
               <v-divider vertical class="mx-2"></v-divider>
               <v-chip prepend-icon="mdi-identifier" variant="text" class="font-weight-bold"
                 >{{ media.id }}</v-chip
@@ -146,6 +147,7 @@ const InlineMediaRenderer = Vue.defineComponent({
                   </v-tooltip>
                 </v-list-item>
               </div>
+              </template>
             </div>
           </div>
           <v-spacer></v-spacer>
diff --git a/enferno/static/js/components/MediaCard.js b/enferno/static/js/components/MediaCard.js
index 49e188e59..cb167ba34 100644
--- a/enferno/static/js/components/MediaCard.js
+++ b/enferno/static/js/components/MediaCard.js
@@ -34,7 +34,7 @@ const toolbarContent = `
           {{ translations.ocrStatus_ }}: {{ $root.getStatusText($root.getEffectiveStatus(media)) }}
         </v-tooltip>
 
-        <v-tooltip v-if="ocrButtonState?.visible" location="bottom">
+        <v-tooltip v-if="$vuetify.display.smAndUp && ocrButtonState?.visible" location="bottom">
           <template v-slot:activator="{ props }">
             <div v-bind="props">
               <v-btn size="small" variant="text" icon="mdi-text-recognition" @click="expansionPanel = null; $root.showOcrDialog(media.id)" :disabled="ocrButtonState.disabled"></v-btn>
diff --git a/enferno/templates/account-security.html b/enferno/templates/account-security.html
index 4b7bd2576..6ad330dfb 100644
--- a/enferno/templates/account-security.html
+++ b/enferno/templates/account-security.html
@@ -7,9 +7,17 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
 
             <div class="d-flex flex-column flex-md-row ga-4" style="height: calc(100% - 52px)">
                 <!-- Left navigation menu -->
-                <v-card class="py-5 h-100 overflow-y-auto" elevation="2"
-                    style="min-width: 255px; max-height: fit-content">
-                    <v-tabs height="40" v-model="tab" selected-class="text-primary" direction="vertical">
+                <v-card
+                    :class="$vuetify.display.smAndDown ? 'w-100 flex-shrink-0' : 'py-5 h-100 overflow-y-auto'"
+                    elevation="2"
+                    :style="$vuetify.display.smAndDown ? '' : 'min-width: 255px; max-height: fit-content;'"
+                >
+                    <v-tabs
+                        height="40"
+                        v-model="tab"
+                        :direction="$vuetify.display.smAndDown ? 'horizontal' : 'vertical'"
+                        align-tabs="start"
+                    >
                         <v-tab v-for="(tab, key) in tabsMap" :key="key" :value="key"
                             class="px-7 justify-start text-none text-subtitle-2">
                             ${tab.text}