using the new component

app/components/dashboard/rounded_header.vue

@@ -0,0 +1,21 @@
+<template>
+  <UHeader toggle-side="left" class="rounded-full border top-3 mb-6 mx-auto">
+    <template #left>
+      <h1 class="text-xl font-bold">{{ props.title }}</h1>
+    </template>
+    <template #toggle>
+      <UDashboardSidebarToggle class="rounded-xl" />
+    </template>
+  </UHeader>
+</template>
+
+<script lang="ts" setup>
+
+ const props = defineProps({
+        title: {
+            type: String,
+            required: false,
+            default: "Title"
+        }
+    })
+</script>

app/pages/dashboard.vue

@@ -122,7 +122,7 @@ import { h } from 'vue'
 </script>
 
 <template>
-  <DashboardHeader title="Dashboard"/>
+  <DashboardRoundedHeader title="Dashboard"/>
   <UContainer class="max-w-full">
     <div class="mt-3 mb-3 flex flex-col w-full relative z-0">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>