diff --git a/README.md b/README.md
index 8f7707c..a20e6e1 100644
--- a/README.md
+++ b/README.md
@@ -19,11 +19,11 @@ npm run dev
 - [ ] elements
   - [x] forms
   - [x] tables
-  - [ ] widgets
+  - [x] widgets
   - [ ] components
 - [ ] examples
   - [x] auth
-  - [ ] empty
+  - [x] empty
   - [ ] dasboard
 
 ## Docs
diff --git a/src/Router.tsx b/src/Router.tsx
index 719f2d7..4354cca 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -12,6 +12,8 @@ import Forms from "./pages/Forms";
 import Tables from "./pages/Tables";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
+import Widgets from "./pages/Widgets";
+import Components from "./pages/Components";
 
 export const router = createBrowserRouter([
     {
@@ -34,6 +36,14 @@ export const router = createBrowserRouter([
                 path: "table",
                 element: <Tables />,
             },
+            {
+                path: "widgets",
+                element: <Widgets />,
+            },
+            {
+                path: "components",
+                element: <Components />,
+            },
             {
                 path: "auth/login",
                 element: <Login />,
diff --git a/src/pages/Components.tsx b/src/pages/Components.tsx
new file mode 100644
index 0000000..f7cc1b0
--- /dev/null
+++ b/src/pages/Components.tsx
@@ -0,0 +1,18 @@
+import { PageHeader, PageHeaderHeading } from "@/components/page-header";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Components() {
+    return (
+        <>
+            <PageHeader>
+                <PageHeaderHeading>Components</PageHeaderHeading>
+            </PageHeader>
+            <Card>
+                <CardHeader>
+                    <CardTitle>Card Title</CardTitle>
+                    <CardDescription>Card description.</CardDescription>
+                </CardHeader>
+            </Card>
+        </>
+    )
+}
diff --git a/src/pages/Widgets.tsx b/src/pages/Widgets.tsx
new file mode 100644
index 0000000..99fb33e
--- /dev/null
+++ b/src/pages/Widgets.tsx
@@ -0,0 +1,111 @@
+import { PageHeader, PageHeaderHeading } from "@/components/page-header";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Widgets() {
+    return (
+        <>
+            <PageHeader>
+                <PageHeaderHeading>Widgets</PageHeaderHeading>
+            </PageHeader>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+                <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium">
+                            Total Revenue
+                        </CardTitle>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            className="h-4 w-4 text-muted-foreground">
+                            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+                        </svg>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-bold">$45,231.89</div>
+                        <p className="text-xs text-muted-foreground">
+                            +20.1% from last month
+                        </p>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium">
+                            Subscriptions
+                        </CardTitle>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            className="h-4 w-4 text-muted-foreground">
+                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                            <circle cx="9" cy="7" r="4" />
+                            <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+                        </svg>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-bold">+2350</div>
+                        <p className="text-xs text-muted-foreground">
+                            +180.1% from last month
+                        </p>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            className="h-4 w-4 text-muted-foreground">
+                            <rect width="20" height="14" x="2" y="5" rx="2" />
+                            <path d="M2 10h20" />
+                        </svg>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-bold">+12,234</div>
+                        <p className="text-xs text-muted-foreground">
+                            +19% from last month
+                        </p>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium">
+                            Active Now
+                        </CardTitle>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            className="h-4 w-4 text-muted-foreground">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                        </svg>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-2xl font-bold">+573</div>
+                        <p className="text-xs text-muted-foreground">
+                            +201 since last hour
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+        </>
+    )
+}