diff --git a/components/home/demo/demo.tsx b/components/home/demo/demo.tsx
index d861462..802554d 100644
--- a/components/home/demo/demo.tsx
+++ b/components/home/demo/demo.tsx
@@ -9,19 +9,19 @@ import data from "./data.json"
 
 export default function Demo() {
   return (
-   <section className="container mx-auto mt-3 hidden md:block">
-    <SidebarProvider className="flex flex-1">
+  <section className="container mx-auto mt-3 px-4 sm:px-6 lg:px-5 ">
+    <SidebarProvider className="flex flex-1 flex-col sm:flex-row">
       <SidebarInset>
         <SiteHeader />
         <div className="flex flex-1 flex-col">
           <div className="flex flex-1 flex-col gap-2">
-            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+            <div className="flex flex-wrap sm:grid-cols-2 md:grid-cols-2 gap-4 py-4 md:gap-6 md:py-6">
               <SectionCards />
-              <div className="px-4 lg:px-6">
+            </div>
+            <div className="px-4 lg:px-6">
                 <ChartAreaInteractive />
               </div>
               {/* <DataTable data={data} /> */}
-            </div>
           </div>
         </div>
       </SidebarInset>
diff --git a/components/home/demo/sectionCards.tsx b/components/home/demo/sectionCards.tsx
index 59b6c71..96f549a 100644
--- a/components/home/demo/sectionCards.tsx
+++ b/components/home/demo/sectionCards.tsx
@@ -11,14 +11,14 @@ import {
 
 export function SectionCards() {
   return (
-    <div className="flex flex-wrap justify-center gap-4 px-4">
+    <div className="grid grid-cols-2 justify-center md:grid-cols-2 lg:flex-col lg:flex-1 gap-4 px-4">
       <Card className="@container/card">
-        <CardHeader className="relative">
+        <CardHeader className="relative text-sm lg:text-2xl">
           <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+          <CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
             $1,250.00
           </CardTitle>
-          <div className="absolute right-4 top-4">
+          <div className="absolute right-4 top-4 ">
             <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
               <TrendingUpIcon className="size-3" />
               +12.5%
@@ -37,7 +37,7 @@ export function SectionCards() {
       <Card className="@container/card">
         <CardHeader className="relative">
           <CardDescription>New Customers</CardDescription>
-          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+          <CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
             1,234
           </CardTitle>
           <div className="absolute right-4 top-4">
@@ -59,10 +59,10 @@ export function SectionCards() {
       <Card className="@container/card">
         <CardHeader className="relative">
           <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+          <CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
             45,678
           </CardTitle>
-          <div className="absolute right-4 top-4">
+          <div className="absolute right-4 top-4 text-sm lg:text-2xl">
             <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
               <TrendingUpIcon className="size-3" />
               +12.5%
diff --git a/components/home/demo/siteHeader.tsx b/components/home/demo/siteHeader.tsx
index c9f0939..820d0fd 100644
--- a/components/home/demo/siteHeader.tsx
+++ b/components/home/demo/siteHeader.tsx
@@ -5,11 +5,11 @@ export function SiteHeader() {
   return (
     <header className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        {/* <SidebarTrigger className="-ml-1" /> */}
-        {/* <Separator
+        <SidebarTrigger className="-ml-1" />
+        <Separator
           orientation="vertical"
           className="mx-2 data-[orientation=vertical]:h-4"
-        /> */}
+        />
         <h1 className="text-base font-medium">Dashboard</h1>
       </div>
     </header>