diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
index 10ace6b7..89a839ba 100644
--- a/web-app/packages/lib/src/common/components/AppSidebarRight.vue
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -26,11 +26,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <div class="flex flex-column h-full">
           <!-- Header -->
           <div
-            class="flex align-items-center justify-content-between py-2 px-3"
+            class="flex align-items-center justify-content-between px-4 py-3"
           >
-            <h4>
-              <slot v-if="isScrollingContent" name="title"></slot>
-            </h4>
+            <slot name="headerTitle">
+              <h4>
+                <slot v-if="isScrollingContent" name="title"></slot>
+              </h4>
+            </slot>
             <div class="flex-shrink-0">
               <slot name="headerButtons"></slot>
               <PButton
@@ -47,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
 
           <!-- content -->
-          <div class="overflow-y-auto p-4 pt-6" @scroll="scrollContent">
+          <div class="overflow-y-auto p-4 pt-5" @scroll="scrollContent">
             <slot></slot>
           </div>
 
diff --git a/web-app/packages/lib/src/common/components/data-view/DataViewWrapper.vue b/web-app/packages/lib/src/common/components/data-view/DataViewWrapper.vue
index 8b936d85..a3ced259 100644
--- a/web-app/packages/lib/src/common/components/data-view/DataViewWrapper.vue
+++ b/web-app/packages/lib/src/common/components/data-view/DataViewWrapper.vue
@@ -13,15 +13,18 @@
           <div
             v-for="col in columns.filter((item) => !item.fixed)"
             :class="[
-              'paragraph-p6 hidden lg:flex',
-              `col-${col.cols ?? defaultCols}`
+              'paragraph-p6',
+              `col-${col.cols ?? defaultCols}`,
+              responsive ? 'hidden lg:flex' : 'flex'
             ]"
             :key="col.text"
           >
             {{ col.text }}
           </div>
           <!-- else -->
-          <div class="col-12 flex lg:hidden"><slot name="header-title" /></div>
+          <div v-if="responsive" class="col-12 flex lg:hidden">
+            <slot name="header-title" />
+          </div>
         </div>
       </template>
 
@@ -50,12 +53,17 @@
               v-for="column in computedColumns.filter((item) => !item.fixed)"
               :key="column.value"
               :class="[
-                'flex flex-column justify-content-center col-12 gap-1',
-                `lg:col-${column.cols ?? defaultCols}`,
+                'flex flex-column justify-content-center gap-1',
+                responsive
+                  ? `col-12 lg:col-${column.cols ?? defaultCols}`
+                  : `col-${column.cols ?? defaultCols}`,
                 'py-2 lg:py-0'
               ]"
             >
-              <p class="paragraph-p6 opacity-80 font-semibold lg:hidden">
+              <p
+                v-if="responsive"
+                class="paragraph-p6 opacity-80 font-semibold lg:hidden"
+              >
                 {{ column.text }}
               </p>
               <slot :name="`col-${column.value}`" :column="column" :item="item">
@@ -86,8 +94,10 @@
                   v-for="col in columns.filter((item) => !item.fixed)"
                   :key="col.value"
                   :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`,
+                    'flex flex-column justify-content-center',
+                    responsive
+                      ? `col-12 lg:col-${col.cols ?? defaultCols}`
+                      : `col-${col.cols ?? defaultCols}`,
                     'py-2 pr-2'
                   ]"
                 >
@@ -116,20 +126,6 @@ defineOptions({
   inheritAttrs: false
 })
 
-/**
- * Defines the props for the `DataViewWrapper` component.
- *
- * @interface Props
- * @property {string} dataKey - The key to use for identifying each item in the data.
- * @property {boolean} [loading] - Indicates whether the data is currently being loaded.
- * @property {number} [loadingRows] - The number of loading rows to display when the data is being loaded.
- * @property {string} [emptyMessage] - The message to display when there is no data available.
- * @property {DataViewWrapperColumnItem[]} columns - An array of column definitions for the data view.
- * @property {(item: any) => StyleValue} [rowStyle] - A function that returns the style for each row in the data view.
- * @property {boolean} [rowCursorPointer] - Indicates whether the cursor should be a pointer when hovering over a row.
- * @property {DataViewWrapperOptions} [options] - The options for the data view.
- * @property {object[]} [value] - The data to be displayed in the data view.
- */
 /**
  * Defines the props for the `DataViewWrapper` component.
  *
@@ -156,6 +152,7 @@ interface Props {
   options?: DataViewWrapperOptions
   value?: object[]
   defaultCols?: number
+  responsive?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -163,7 +160,8 @@ const props = withDefaults(defineProps<Props>(), {
   loadingRows: 3,
   emptyMessage: 'No data available',
   rowCursorPointer: true,
-  defaultCols: 2
+  defaultCols: 2,
+  responsive: true
 })
 
 type EmitItem = Record<string, unknown>