diff --git a/src/fragments/shell/Shell.stories.tsx b/src/fragments/shell/Shell.stories.tsx
index a784a52..df0f8d9 100644
--- a/src/fragments/shell/Shell.stories.tsx
+++ b/src/fragments/shell/Shell.stories.tsx
@@ -18,10 +18,15 @@ import {
   TableHeader,
   TableRow,
   Tab,
-  Tabs
+  Tabs,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Textarea,
+  Switch
 } from "../../components/base";
 import { FormSection } from "../form/FormSection";
 import { Widget } from "../widget/Widget";
+import { Chart, Grid } from "../../components";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Shell> = {
@@ -161,6 +166,10 @@ export const Auto: Story = {
 export const WithTable: Story = {
   args: {
     ...Primary.args,
+    sidebar: Primary.args?.sidebar ? {
+      ...Primary.args.sidebar,
+      autoLayout: true,
+    } : undefined,
     children: (
       <>
         <h1>Customers</h1>
@@ -204,30 +213,24 @@ export const WithTable: Story = {
           <Tab key="settings" title="Settings">
             <form>
               <h2>First Section</h2>
-              <FormSection title="Title" description="Description">
-                <Input />
-              </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
+              <FormSection title="Name" description="Description" direction="horizontal">
+                <Input label="First name" />
+                <Input label="Last name" />
               </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
+              <FormSection title="Biography" description="Description">
+                <Textarea label="Biography" minRows={6} />
               </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
+              <FormSection title="Notifications" description="Turn on/off email notifications." direction="horizontal">
+                <Switch />
               </FormSection>
               <h2>Second Section</h2>
-              <FormSection title="Title" description="Description">
-                <Input />
-              </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
+              <FormSection title="Title" description="Description" direction="horizontal">
+                <Input label="First name" />
+                <Input label="Last name" />
               </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
-              </FormSection>
-              <FormSection title="Title" description="Description">
-                <Input />
+              <FormSection title="Title" description="Description" direction="horizontal">
+                <Input label="First name" />
+                <Input label="Last name" />
               </FormSection>
             </form>
           </Tab>
@@ -248,17 +251,203 @@ export const WithTable: Story = {
 export const WithGrid: Story = {
   args: {
     ...Primary.args,
+    sidebar: Primary.args?.sidebar ? {
+      ...Primary.args.sidebar,
+      autoLayout: true,
+    } : undefined,
     children: (
       <>
+        <Breadcrumbs>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Customers</BreadcrumbItem>
+        </Breadcrumbs>
         <h1>Customers</h1>
         <p className="mt-2 text-foreground-500">Blablabla</p>
         <Divider className="my-4" />
-        <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-6">
-          <Widget title="Bla">Bla</Widget>
-          <Widget title="Bla">Bla</Widget>
-          <Widget title="Bla">Bla</Widget>
-          <Widget title="Bla">Bla</Widget>
-        </div>
+        <Grid size="lg">
+          <Widget title="Analytics" colSpan={2}>
+            <Chart
+              type="line"
+              series={[
+                {
+                  name: "Clicks",
+                  data: [6500, 6418, 6456, 6526, 6356, 6456],
+                  color: "#1A56DB",
+                },
+                {
+                  name: "CPC",
+                  data: [6456, 6356, 6526, 6332, 6418, 6500],
+                  color: "#7E3AF2",
+                },
+              ]}
+              height="350px"
+            />
+          </Widget>
+          <Widget title="Traffic">
+            <Chart
+              type="pie"
+              options={{
+                labels: ["Direct", "Organic search", "Referrals"],
+                yaxis: {
+                  labels: {
+                    formatter: function (value) {
+                      return value + "%"
+                    },
+                  },
+                },
+                xaxis: {
+                  labels: {
+                    formatter: function (value) {
+                      return value  + "%"
+                    },
+                  },
+                }
+              }}
+              series={[52.8, 26.8, 20.4]}
+              height="350px"
+            />
+          </Widget>
+          <Widget title="Origins" colSpan={2}>
+            <Chart
+              type="column"
+              series={[
+                {
+                  name: "Organic",
+                  color: "#1A56DB",
+                  data: [
+                    { x: "Mon", y: 231 },
+                    { x: "Tue", y: 122 },
+                    { x: "Wed", y: 63 },
+                    { x: "Thu", y: 421 },
+                    { x: "Fri", y: 122 },
+                    { x: "Sat", y: 323 },
+                    { x: "Sun", y: 111 },
+                  ],
+                },
+                {
+                  name: "Social media",
+                  color: "#FDBA8C",
+                  data: [
+                    { x: "Mon", y: 232 },
+                    { x: "Tue", y: 113 },
+                    { x: "Wed", y: 341 },
+                    { x: "Thu", y: 224 },
+                    { x: "Fri", y: 522 },
+                    { x: "Sat", y: 411 },
+                    { x: "Sun", y: 243 },
+                  ],
+                },
+              ]}
+              height="350px"
+            />
+          </Widget>
+          <Widget title="Cost">
+            <Chart
+              type="bar"
+              options={{
+                tooltip: {
+                  y: {
+                    formatter: function (value) {
+                      return "$" + value
+                    }
+                  }
+                },
+              }}
+              series={[
+                {
+                  name: "Income",
+                  color: "#31C48D",
+                  data: [1420, 1620, 1820, 1420, 1650, 2120],
+                },
+                {
+                  name: "Expense",
+                  data: [788, 810, 866, 788, 1100, 1200],
+                  color: "#F05252",
+                }
+              ]}
+            />
+          </Widget>
+          <Widget title="New Users">
+            <Chart
+              type="area"
+              options={{
+                xaxis: {
+                  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
+                }
+              }}
+              series={[
+                {
+                  name: "New users",
+                  data: [6500, 6418, 6456, 6526, 6356, 6456],
+                  color: "#1A56DB",
+                },
+              ]}
+            />
+          </Widget>
+          <Widget title="Website traffic">
+            <Chart
+              type="donut"
+              options={{
+                labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
+                plotOptions: {
+                  pie: {
+                    donut: {
+                      labels: {
+                        total: {
+                          label: "Unique visitors",
+                          formatter: function (w) {
+                            const sum = w.globals.seriesTotals.reduce((a: number, b: number) => {
+                              return a + b
+                            }, 0)
+                            return sum + 'k'
+                          },
+                        },
+                        value: {
+                          formatter: function (value) {
+                            return value + "k"
+                          },
+                        }
+                      }
+                    }
+                  }
+                },
+                yaxis: {
+                  labels: {
+                    formatter: function (value) {
+                      return value + "k"
+                    },
+                  },
+                },
+                xaxis: {
+                  labels: {
+                    formatter: function (value) {
+                      return value  + "k"
+                    },
+                  },
+                },
+              }}
+              series={[35.1, 23.5, 2.4, 5.4]}
+              height="350px"
+            />
+          </Widget>
+          <Widget title="New Users">
+            <Chart
+              type="radial"
+              options={{
+                labels: ["Done", "In progress", "To do"],
+                yaxis: {
+                  labels: {
+                    formatter: function (value) {
+                      return value + '%';
+                    }
+                  }
+                }
+              }}
+              series={[90, 85, 70]}
+              height="350px"
+            />
+          </Widget>
+        </Grid>
       </>
     ),
   },
diff --git a/src/fragments/shell/Shell.tsx b/src/fragments/shell/Shell.tsx
index 4602dc9..0c2b8f2 100644
--- a/src/fragments/shell/Shell.tsx
+++ b/src/fragments/shell/Shell.tsx
@@ -11,9 +11,9 @@ interface ShellProps {
 
 export const Shell: React.FC<ShellProps> = ({ sidebar, children }) => {
   return (
-    <div className={`flex min-h-screen`}>
+    <div className="flex min-h-screen">
       <Sidebar {...sidebar} />
-      <main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl min-w-0">
+      <main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl">
         {children}
       </main>
     </div>
diff --git a/src/fragments/widget/Widget.tsx b/src/fragments/widget/Widget.tsx
index 3c02c34..f1e84a1 100644
--- a/src/fragments/widget/Widget.tsx
+++ b/src/fragments/widget/Widget.tsx
@@ -12,20 +12,39 @@ export interface WidgetProps {
     endContent?: React.ReactNode;
   };
   title: string;
+  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 }
 
 const widget = tv({
   slots: {
-    base: 'border-[1px] border-default-100 px-5 py-3',
+    base: 'border-[1px] border-default-100',
     headerEndContent: 'ml-auto',
+    header: 'px-7 pt-5',
+    body: 'px-7 pb-5',
+  },
+  variants: {
+    colSpan: {
+      1: 'lg:col-span-1',
+      2: 'lg:col-span-2',
+      3: 'lg:col-span-3',
+      4: 'lg:col-span-4',
+      5: 'lg:col-span-5',
+      6: 'lg:col-span-6',
+      7: 'lg:col-span-7',
+      8: 'lg:col-span-8',
+      9: 'lg:col-span-9',
+      10: 'lg:col-span-10',
+      11: 'lg:col-span-11',
+      12: 'lg:col-span-12',
+    },
   },
 });
 
 export const Widget: React.FC<WidgetProps> = ({ children, title, header, ...props }) => {
-  const { base, headerEndContent } = widget(props);
+  const { base, body, header: headerClasses, headerEndContent } = widget(props);
 
   return (
-    <Card shadow="none" classNames={{ base: base() }}>
+    <Card shadow="none" classNames={{ base: base(), body: body(), header: headerClasses(),  }}>
       <CardHeader>
         <h3>{title}</h3>
         <div className={headerEndContent()}>{header?.endContent}</div>