diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7e7f0b70..7c699282 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -3,7 +3,7 @@
 /* CSS Variables */
 :root {
   /* Medical Theme Colors */
-  --background: 210 20% 98%;
+  --background: 230 20% 98%;
   --foreground: 210 20% 15%;
   --card: 0 0% 100%;
   --card-foreground: 210 20% 15%;
@@ -162,12 +162,17 @@
 }
 
 body {
-  background-color: hsl(var(--background));
+  /* background-color: hsl(var(--background)); */
+  /* background-color: hsl(var(--background), 0.5); */
   color: hsl(var(--foreground));
   line-height: 1.5;
   margin: 0;
 }
 
+body {
+  @apply bg-slate-100 dark:bg-slate-800;
+}
+
 /* Container */
 .container {
   width: 100%;
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index 71167dac..2c76cad6 100644
--- a/app/components/content/dashboard/index.vue
+++ b/app/components/content/dashboard/index.vue
@@ -121,10 +121,10 @@ onMounted(() => {
       </div>
     </div>
     <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </div>
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <Card v-for="n in 3" :key="n">
           <CardHeader>
             <CardTitle>Recent Sales</CardTitle>
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index ccb41100..e4413432 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -38,7 +38,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50">
+    <TableHeader class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
           v-for="(h, idx) in header[0]"
@@ -55,7 +55,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
         </TableCell>
       </TableRow>
     </TableBody>
diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
index 1f304071..2c5eda28 100644
--- a/app/components/pub/ui/card/CardContent.vue
+++ b/app/components/pub/ui/card/CardContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 2d06d4d5..6acffbae 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground flex  h-10 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/sidebar/SidebarInset.vue b/app/components/pub/ui/sidebar/SidebarInset.vue
index 92d35958..ae25091c 100644
--- a/app/components/pub/ui/sidebar/SidebarInset.vue
+++ b/app/components/pub/ui/sidebar/SidebarInset.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <main
     :class="cn(
-      'overflow-x-auto relative flex min-h-svh flex-1 flex-col bg-background',
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col',
       'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
       props.class,
     )"
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1f62236f..c68136e9 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CardContent from '~/components/pub/ui/card/CardContent.vue'
+
 const route = useRoute()
 const contentFrame = computed(() => route.meta.contentFrame)
 const contentContent = computed(() => {
@@ -22,11 +24,13 @@ const contentContent = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
-        <div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
-          <div :class="`${contentContent} ${contentFrame}`">
-            <slot />
-          </div>
+      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 xl:p-5 2xl:p-6">
+        <div v-if="contentFrame !== 'cf-no-frame'" :class="`contentFrame ${contentContent} ${contentFrame}`">
+          <Card>
+            <CardContent>
+              <slot />
+            </CardContent>
+          </Card>
         </div>
         <slot v-else />
       </div>
@@ -39,14 +43,14 @@ const contentContent = computed(() => {
 .cf-container-lg,
 .cf-container-md,
 .cf-container-sm {
-  container-type: inline-size;
+  /* container-type: inline-size;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   border-radius: 0.375rem;
-  padding-bottom: 5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-bottom: 5rem; */
+  /* padding-left: 1rem;
+  padding-right: 1rem; */
 }
 
 .cf-container > *,
@@ -54,15 +58,15 @@ const contentContent = computed(() => {
 .cf-container-md > *,
 .cf-container-sm > *,
 .cf-full-width {
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0.75rem; /* p-3 */
-  padding-bottom: 5rem; /* pb-20 */
-  background-color: hsl(var(--background));
+  /* margin-left: auto;
+  margin-right: auto; */
+  /* padding: 0.75rem;
+  padding-bottom: 5rem; */
+  /* background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
-  border-color: rgb(226 232 240); /* slate-200 */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-color: rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
 .cf-container-lg > * {
@@ -78,25 +82,25 @@ const contentContent = computed(() => {
 }
 
 .cf-frame-width {
-  margin-left: auto;
+  /* margin-left: auto;
   margin-right: auto;
   background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  padding: 1rem;
+  max-width: 100%; */
+  /* padding: 1rem; */
 }
 
 .cf-frame {
-  margin-left: auto;
+  /* margin-left: auto;
   margin-right: auto;
   padding: 1rem;
   background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
+  max-width: 100%; */
 }
 
 @media (min-width: 640px) {
@@ -104,16 +108,16 @@ const contentContent = computed(() => {
   .cf-container-lg,
   .cf-container-md,
   .cf-container-sm {
-    padding-left: 2rem;
-    padding-right: 2rem;
+    /* padding-left: 2rem;
+    padding-right: 2rem; */
   }
 
   .cf-frame {
-    padding: 2rem;
+    /* padding: 2rem; */
   }
 
   .cf-frame-width {
-    padding: 2rem;
+    /* padding: 2rem; */
   }
 }
 
@@ -122,16 +126,16 @@ const contentContent = computed(() => {
   .cf-container-lg,
   .cf-container-md,
   .cf-container-sm {
-    padding-left: 3rem;
-    padding-right: 3rem;
+    /* padding-left: 3rem;
+    padding-right: 3rem; */
   }
 
   .cf-frame {
-    padding: 3rem;
+    /* padding: 3rem; */
   }
 
   .cf-frame-width {
-    padding: 3rem;
+    /* padding: 3rem; */
   }
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 45476961..7e27e735 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,7 +3,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Dashboard',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-no-frame',
 })
 
 const route = useRoute()