diff --git a/awesome_clicker/static/src/click_rewards.js b/awesome_clicker/static/src/click_rewards.js
new file mode 100644
index 00000000000..552ffa68588
--- /dev/null
+++ b/awesome_clicker/static/src/click_rewards.js
@@ -0,0 +1,26 @@
+export const rewards = [
+    {
+        description: "Get 1 click bot",
+        apply(clicker) {
+            clicker.clickBots += 1;
+        },
+        minLevel: 0,
+        maxLevel: 2,
+    },
+    {
+        description: "Get 10 click bots",
+        apply(clicker) {
+            clicker.clickBots += 10;
+        },
+        minLevel: 3,
+        maxLevel: 4,
+    },
+    {
+        description: "Increase bot power!",
+        apply(clicker) {
+            clicker.multipler += 1;
+        },
+        minLevel: 3,
+        maxLevel: 10
+    },
+];
\ No newline at end of file
diff --git a/awesome_clicker/static/src/click_value/ClickValue.js b/awesome_clicker/static/src/click_value/ClickValue.js
new file mode 100644
index 00000000000..adc8b4aec4e
--- /dev/null
+++ b/awesome_clicker/static/src/click_value/ClickValue.js
@@ -0,0 +1,14 @@
+import {Component} from "@odoo/owl";
+import { humanNumber } from "@web/core/utils/numbers";
+
+export class ClickValue extends Component {
+    static template = 'awesome_clicker.click_value'
+    static props = { value: Number }
+    static components = {}
+
+    setup() {}
+
+    humanizedValue() {
+        return humanNumber(this.props.value, { minDigits: 2 });
+    }
+}
\ No newline at end of file
diff --git a/awesome_clicker/static/src/click_value/ClickValue.xml b/awesome_clicker/static/src/click_value/ClickValue.xml
new file mode 100644
index 00000000000..cf4b8e5c510
--- /dev/null
+++ b/awesome_clicker/static/src/click_value/ClickValue.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.click_value">
+        <span t-att-data-tooltip="props.value">Clicks: <t t-esc="humanizedValue()"/></span>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_clicker/static/src/clicker_command_provider.js b/awesome_clicker/static/src/clicker_command_provider.js
new file mode 100644
index 00000000000..9d24821b011
--- /dev/null
+++ b/awesome_clicker/static/src/clicker_command_provider.js
@@ -0,0 +1,26 @@
+import { registry } from "@web/core/registry";
+
+registry.category('command_provider').add("clicker", {
+    provide: (env, options) => {
+        return [{
+                action() {
+                    env.services.action.doAction({
+                        type: "ir.actions.client",
+                        tag: "awesome_clicker.client_action",
+                        target: "new",
+                        name: "Clicker Game"
+                    })
+                },
+                category: "debug",
+                name: "Open clicker game",
+            },
+            {
+                action() {
+                    env.services["clicker"].buyClickBot()
+                },
+                category: "debug",
+                name: "Buy one click bot",
+            }
+        ]
+    }
+})
\ No newline at end of file
diff --git a/awesome_clicker/static/src/clicker_model.js b/awesome_clicker/static/src/clicker_model.js
new file mode 100644
index 00000000000..b9ffbab1129
--- /dev/null
+++ b/awesome_clicker/static/src/clicker_model.js
@@ -0,0 +1,71 @@
+import { Reactive } from "@web/core/utils/reactive";
+import { EventBus } from "@odoo/owl";
+import {rewards} from "./click_rewards";
+
+export class ClickerModel extends Reactive {
+
+    constructor() {
+        super()
+        this.clicks = 850
+        this.level = 0
+        this.clickBots = 0
+        this.bigBots = 0
+        this.power = 1
+        this.bus = new EventBus();
+    }
+
+    increment(inc) {
+        this.clicks += inc;
+        if (this.level < 1 && this.clicks >= 1000) {
+            this.level++;
+            this.bus.trigger("Level1");
+        }
+        if (this.level === 1 && this.clicks >= 5000) {
+            this.level++;
+            this.bus.trigger("Level2")
+        }
+        if (this.level === 2 && this.clicks >= 100000) {
+            this.level++;
+            this.bus.trigger("Level3")
+        }
+    }
+
+    tick() {
+        this.increment((this.clickBots * 10 + this.bigBots * 100) * this.power);
+    }
+
+    buyClickBot() {
+        const clickBotPrice = 1000;
+        if (this.clicks < clickBotPrice) {
+            return false;
+        }
+        this.clicks -= clickBotPrice;
+        this.clickBots++;
+    }
+
+    buyBigBot() {
+        const bigBotPrice = 5000;
+        if (this.clicks < bigBotPrice) {
+            return false;
+        }
+        this.clicks -= bigBotPrice;
+        this.bigBots++;
+    }
+
+    buyPower() {
+        const powerPrice = 100000;
+        if (this.clicks < powerPrice) {
+            return false
+        }
+        this.clicks -= powerPrice;
+        this.power++;
+    }
+
+    giveReward() {
+        const validRewards = rewards.filter((r) => r.maxLevel >= this.level && r.minLevel <= this.level);
+        console.log(validRewards);
+        const reward = validRewards[Math.floor(Math.random() * validRewards.length)];
+        console.log(reward)
+        this.bus.trigger("Reward", reward)
+    }
+}
\ No newline at end of file
diff --git a/awesome_clicker/static/src/clicker_service.js b/awesome_clicker/static/src/clicker_service.js
new file mode 100644
index 00000000000..93cd6459e30
--- /dev/null
+++ b/awesome_clicker/static/src/clicker_service.js
@@ -0,0 +1,42 @@
+import { registry } from "@web/core/registry";
+import { ClickerModel } from "./clicker_model";
+
+const ClickerService = {
+    dependencies: ["effect", "action", "notification"],
+    start(env, services) {
+        const clicker = new ClickerModel()
+
+        document.addEventListener("click", () => clicker.increment(1), true);
+        clicker.bus.addEventListener("Level1", () => services.effect.add({ message: "Level up! You can now buy click bots!"}))
+        clicker.bus.addEventListener("Level2", () => services.effect.add({ message: "Level up! You can now buy big bots!"}))
+        clicker.bus.addEventListener("Level3", () => services.effect.add({ message: "Level up! You can now buy powers!"}))
+        clicker.bus.addEventListener("Reward", (e) => {
+            const reward = e.detail;
+            const closeNotification = services.notification.add(`You won a reward!: "${reward.description}"`,
+                {
+                    type: "success",
+                    sticky: true,
+                    buttons: [
+                        {
+                            name: "Collect",
+                            onClick: () => {
+                                reward.apply(clicker);
+                                closeNotification();
+                                services.action.doAction({
+                                    type: "ir.actions.client",
+                                    tag: "awesome_clicker.client_action",
+                                    target: "new",
+                                    name: "Clicker Game"
+                                })
+                            }
+                        }
+                    ]
+                })
+        })
+
+        setInterval(() => clicker.tick(), 10 * 1000)
+        return clicker;
+    },
+};
+
+registry.category("services").add("clicker", ClickerService);
\ No newline at end of file
diff --git a/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.js b/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.js
new file mode 100644
index 00000000000..8c3fb9648fa
--- /dev/null
+++ b/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.js
@@ -0,0 +1,29 @@
+import { Component, useState, useExternalListener } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { useClicker } from "../useClicker";
+import { ClickValue } from "../click_value/ClickValue";
+
+export class ClickerSystrayItem extends Component {
+    static template = 'awesome_clicker.systray_item'
+    static props = {}
+    static components = {ClickValue}
+
+    setup() {
+        this.actionService = useService('action')
+        this.clicker = useClicker()
+    }
+
+    openDialog() {
+        this.actionService.doAction({
+           type: "ir.actions.client",
+           tag: "awesome_clicker.client_action",
+           target: "new",
+           name: "Clicker"
+        })
+    }
+}
+
+registry.category("systray").add("awesome_clicker.clicker", {
+    Component: ClickerSystrayItem,
+}, { sequence: 100 });
\ No newline at end of file
diff --git a/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.xml b/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.xml
new file mode 100644
index 00000000000..cb1b1aa4e63
--- /dev/null
+++ b/awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.systray_item">
+        <div class="o_nav_entry gap-1">
+            <ClickValue value="clicker.clicks"/>
+            <button class="btn btn-secondary" t-on-click="openDialog">
+                Open
+            </button>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_clicker/static/src/client_action/client_action.js b/awesome_clicker/static/src/client_action/client_action.js
new file mode 100644
index 00000000000..0569acf8920
--- /dev/null
+++ b/awesome_clicker/static/src/client_action/client_action.js
@@ -0,0 +1,28 @@
+import {Component} from "@odoo/owl";
+import {registry} from "@web/core/registry";
+import {useClicker} from "../useClicker";
+import {ClickValue} from "../click_value/ClickValue";
+
+export class ClientAction extends Component {
+    static template = 'awesome_clicker.action'
+    static props = {}
+    static components = {ClickValue}
+
+    setup() {
+        this.clicker = useClicker();
+    }
+
+    canBuyClickBot() {
+        return this.clicker.level > 0 && this.clicker.clicks >= 1000
+    }
+
+    canBuyBigBot() {
+        return this.clicker.level > 1 && this.clicker.clicks >= 5000
+    }
+
+    canBuyPower() {
+        return this.clicker.level > 2 && this.clicker.clicks >= 100000
+    }
+}
+
+registry.category("actions").add("awesome_clicker.client_action", ClientAction);
\ No newline at end of file
diff --git a/awesome_clicker/static/src/client_action/client_action.xml b/awesome_clicker/static/src/client_action/client_action.xml
new file mode 100644
index 00000000000..06ce6598924
--- /dev/null
+++ b/awesome_clicker/static/src/client_action/client_action.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.action">
+        <div class="m-1 p-2">
+            <div class="d-flex align-items-center gap-2">
+                <ClickValue value="clicker.clicks"/>
+                <button class="btn btn-secondary" t-on-click="() => clicker.increment(300)">
+                    CLICK!
+                </button>
+            </div>
+            <h2 class="mt-2">Bots</h2>
+            <div class="d-flex gap-2">
+                <div>
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.clickBots"/>x ClickBots (10 clicks/10seconds)</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyClickBot()" t-att-disabled="!canBuyClickBot()">Buy ClickBot (1000) clicks</button>
+                    </div>
+                </div>
+                <div> <!--refactor into separate BuyClickBot component later-->
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.bigBots"/>x BigBots (100 clicks/10seconds)</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyBigBot()" t-att-disabled="!canBuyBigBot()">Buy BigBot (5000) clicks</button>
+                    </div>
+                </div>
+            </div>
+            <h2 class="mt-2">Power multiplier</h2>
+            <div class="d-flex gap-2">
+                <div>
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.power"/>x POWER!!!!</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyPower()" t-att-disabled="!canBuyPower()">Buy Power (100k) clicks</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_clicker/static/src/form_controller/form_controller_patch.js b/awesome_clicker/static/src/form_controller/form_controller_patch.js
new file mode 100644
index 00000000000..db5411e3add
--- /dev/null
+++ b/awesome_clicker/static/src/form_controller/form_controller_patch.js
@@ -0,0 +1,13 @@
+import { FormController } from "@web/views/form/form_controller";
+import { patch } from "@web/core/utils/patch";
+import { useClicker } from "../useClicker";
+
+patch(FormController.prototype, {
+    setup() {
+        super.setup(...arguments)
+        if (Math.random() < 0.6) {
+            const clicker = useClicker();
+            clicker.giveReward()
+        }
+    }
+})
\ No newline at end of file
diff --git a/awesome_clicker/static/src/useClicker.js b/awesome_clicker/static/src/useClicker.js
new file mode 100644
index 00000000000..8618a69199c
--- /dev/null
+++ b/awesome_clicker/static/src/useClicker.js
@@ -0,0 +1,6 @@
+const { useState } = owl;
+import { useService } from "@web/core/utils/hooks";
+
+export function useClicker() {
+    return useState(useService('clicker'))
+}
\ No newline at end of file
diff --git a/awesome_clicker/static/views/views.xml b/awesome_clicker/static/views/views.xml
new file mode 100644
index 00000000000..6635541deb2
--- /dev/null
+++ b/awesome_clicker/static/views/views.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<data>
+    <record model="ir.actions.client" id="my_client_action">
+        <field name="name">Clicker Action</field>
+        <field name="tag">awesome_clicker.client_action</field>
+    </record>
+</data>
+</odoo>
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
deleted file mode 100644
index 637fa4bb972..00000000000
--- a/awesome_dashboard/static/src/dashboard.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
-import { registry } from "@web/core/registry";
-
-class AwesomeDashboard extends Component {
-    static template = "awesome_dashboard.AwesomeDashboard";
-}
-
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
deleted file mode 100644
index 1a2ac9a2fed..00000000000
--- a/awesome_dashboard/static/src/dashboard.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-
-    <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
-    </t>
-
-</templates>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
new file mode 100644
index 00000000000..2764ebf5995
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -0,0 +1,49 @@
+/** @odoo-module **/
+import { useService } from "@web/core/utils/hooks";
+import { Component, useState, onWillStart } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { Layout } from '@web/search/layout'
+import { DashboardItem } from "./dashboard_item/dashboard_item";
+import { PieChart } from "./pie_chart/pie_chart";
+
+export class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem, PieChart }
+
+    setup() {
+        this.action = useService("action");
+        this.items = registry.category("awesome_dashboard").getAll()
+        this.stats = useState(useService("statistics"));
+        this.state = useState({ enabled: this.getEnabledItems() })
+    }
+
+    openCustomerView() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeadView() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            mane: "All leads",
+            res_model: "crm.lead",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        });
+    }
+
+    apply() {
+        this.items.forEach(item => {
+            const el = document.getElementById(`checkbox-${item.id}`)
+            localStorage.setItem(item.id, el.checked);
+        })
+        this.state.enabled = this.getEnabledItems(); // Force rerender because the line above doesn't do it
+    }
+
+    getEnabledItems() {
+        return this.items.filter(item => localStorage.getItem(item.id) === 'true').map(x => x.id)
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.scss b/awesome_dashboard/static/src/dashboard/dashboard.scss
new file mode 100644
index 00000000000..710cf0b5222
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+  background-color: #0a3622;
+}
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
new file mode 100644
index 00000000000..56e5355156a
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
+                <button class="btn btn-primary" t-on-click="openLeadView">Leads</button>
+                <i class="fa fa-gear" data-bs-toggle="modal" data-bs-target="#settingsModal">
+                </i>
+            </t>
+            <div class="d-flex flex-wrap" t-if="stats.isReady">
+                <t t-foreach="items" t-as="item" t-key="item.id">
+                    <DashboardItem t-if="state.enabled.includes(item.id)" size="item.size || 1">
+                        <t t-set="itemProp" t-value="item.props ? item.props(stats) : {'data': stats}"/>
+                        <t t-component="item.Component" t-props="itemProp"/>
+                    </DashboardItem>
+                </t>
+            </div>
+            <div t-else="">Loading</div>
+            <!-- Modal -->
+            <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
+                 aria-hidden="true">
+                <div class="modal-dialog" role="document"><div class="modal-content">
+                    <div class="modal-header"><h5 class="modal-title" id="settingsModalLabel">Dashboard items configuration</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="d-flex flex-column align-items-start gap-2">
+                            <p>Which cards do you wish to see?</p>
+                            <t t-foreach="items" t-as="item" t-key="item.id">
+                                <div class="d-flex gap-1 align-items-center">
+                                    <input type="checkbox" t-att-id="`checkbox-${item.id}`" t-att-checked="state.enabled.includes(item.id)"/>
+                                    <span><t t-esc="item.description"/></span>
+                                </div>
+                            </t>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" t-on-click="apply">Close</button>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </Layout>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js
new file mode 100644
index 00000000000..886f0a86a66
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js
@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = 'awesome_dashboard.dashboard_item'
+    static props = {
+        size: { type: Number, default: 1, optional: true },
+        slots: { type: Object, shape: { default: Object }},
+    }
+}
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.scss b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.scss
new file mode 100644
index 00000000000..811e443797c
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.scss
@@ -0,0 +1,6 @@
+
+@media (max-width: 575.98px) {
+  .full-width-phone {
+    width: 100% !important;
+  }
+}
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.xml
new file mode 100644
index 00000000000..89310161963
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.dashboard_item">
+        <div class="card m-2 full-width-phone" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
new file mode 100644
index 00000000000..4e8b39369df
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -0,0 +1,78 @@
+import {NumberCard} from "./number_card/number_card";
+import {PieChartCard} from "./pie_chart_card/pie_chart_card";
+import { registry } from "@web/core/registry";
+
+const dashboardItems = [
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        // size and props are optionals
+        size: 2,
+        props: (data) =>  ({
+                title: "Average amount of t-shirt by order this month",
+                value: data.average_quantity
+            })
+    },
+    {
+        id: "average_time",
+        description: "Average time for an order to go from new to sent or cancelled",
+        Component: NumberCard,
+        // size and props are optionals
+        size: 2,
+        props: (data) => ({
+            title: "Average time for an order to go from new to sent or cancelled",
+            value: data.average_time
+        }),
+    },
+    {
+        id: "nb_new_orders",
+        description: "Number of new orders this month",
+        Component: NumberCard,
+        // size and props are optionals
+        size: 1,
+        props: (data) => ({
+            title: "Number of new orders this month",
+            value: data.nb_new_orders
+        }),
+    },
+    {
+        id: "nb_cancelled_orders",
+        description: "Number of cancelled this month",
+        Component: NumberCard,
+        // size and props are optionals
+        size: 1,
+        props: (data) => ({
+            title: "Number of cancelled this month",
+            value: data.nb_cancelled_orders
+        }),
+    },
+    {
+        id: "total_amount",
+        description: "Total amount of new orders this month",
+        Component: NumberCard,
+        // size and props are optionals
+        size: 2,
+        props: (data) => ({
+            title: "Total amount of new orders this month",
+            value: data.total_amount
+        }),
+    },
+    {
+        id: "pie_chart",
+        description: "!!! Pie !!!",
+        Component: PieChartCard,
+        // size and props are optionals
+        size: 1,
+        props: (data) => {
+            return ({
+                title: "Pie!",
+                data: data.orders_by_size
+            })
+        },
+    },
+];
+
+dashboardItems.forEach(item => {
+    registry.category("awesome_dashboard").add(item.id, item);
+})
diff --git a/awesome_dashboard/static/src/dashboard/number_card/number_card.js b/awesome_dashboard/static/src/dashboard/number_card/number_card.js
new file mode 100644
index 00000000000..acf997f321b
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number_card/number_card.js
@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = 'awesome_dashboard.number_card'
+    static props = {
+        title: String,
+        value: Number
+    }
+}
diff --git a/awesome_dashboard/static/src/dashboard/number_card/number_card.xml b/awesome_dashboard/static/src/dashboard/number_card/number_card.xml
new file mode 100644
index 00000000000..27fed72e9af
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number_card/number_card.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.number_card">
+        <h3><t t-esc="props.title"/></h3>
+        <div class="h-100 d-flex justify-content-center align-items-center">
+            <p class="fs-1 fw-bold text-success"><t t-esc="props.value"/></p>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
new file mode 100644
index 00000000000..8776547112e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
@@ -0,0 +1,36 @@
+import { Component, onWillStart, useRef, onMounted, onWillUnmount } from "@odoo/owl";
+import { getColor } from "@web/core/colors/colors";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = 'awesome_dashboard.pie_chart';
+    static props = {
+        data: { type: Object, shape: { m: Number, s: Number, xl: Number }}
+    }
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+        onMounted(() => this.renderChart());
+        onWillUnmount(() => this.chart.destroy());
+    }
+
+    renderChart() {
+        const labels = Object.keys(this.props.data);
+        const data = Object.values(this.props.data);
+        const color = labels.map((_, index) => getColor(index*4));
+        this.chart = new Chart(this.canvasRef.el, {
+            type: "pie",
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: this.props.label,
+                        data: data,
+                        backgroundColor: color,
+                    },
+                ],
+            },
+        });
+    }
+}
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
new file mode 100644
index 00000000000..242451cf26c
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.pie_chart">
+        <div t-att-class="'h-100 ' + props.class" t-ref="root">
+            <div class="h-100 position-relative" t-ref="container">
+                <canvas t-ref="canvas" />
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js
new file mode 100644
index 00000000000..6243679bd01
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js
@@ -0,0 +1,11 @@
+import { Component } from "@odoo/owl";
+import { PieChart } from "../pie_chart/pie_chart";
+
+export class PieChartCard extends Component {
+    static template = 'awesome_dashboard.pie_chart_card'
+    static components = { PieChart }
+    static props = {
+        title: String,
+        data: Object
+    }
+}
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml
new file mode 100644
index 00000000000..dbfad8eaf6e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.pie_chart_card">
+        <h3><t t-esc="props.title"/></h3>
+        <PieChart data="props.data"/>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard/statistics.js b/awesome_dashboard/static/src/dashboard/statistics.js
new file mode 100644
index 00000000000..37bcb7c8b0e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/statistics.js
@@ -0,0 +1,21 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc"
+import { reactive } from "@odoo/owl";
+
+export const statistics = {
+    start() {
+        const statistics = reactive({ isReady: false });
+
+        async function loadData() {
+            const updates = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics, updates, { isReady: true });
+        }
+
+        setInterval(loadData, 10*60*1000);
+        loadData();
+
+        return statistics
+    }
+}
+
+registry.category("services").add("statistics", statistics);
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
new file mode 100644
index 00000000000..74232bef1ab
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -0,0 +1,14 @@
+/** @odoo-module */
+
+import { Component, xml } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+
+export class DashboardAction extends Component {
+    static components = { LazyComponent };
+    static template = xml`
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" props="props"/>
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", DashboardAction);
diff --git a/awesome_owl/static/src/TodoList/todo_item.js b/awesome_owl/static/src/TodoList/todo_item.js
new file mode 100644
index 00000000000..ff3cba6dc0e
--- /dev/null
+++ b/awesome_owl/static/src/TodoList/todo_item.js
@@ -0,0 +1,12 @@
+import {Component} from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static props = {
+        toggleState: {type: Function},
+        removeTodo: {type: Function},
+        todo: {
+            type: Object, shape: {id: Number, description: String, isCompleted: Boolean}
+        }
+    }
+}
diff --git a/awesome_owl/static/src/TodoList/todo_item.xml b/awesome_owl/static/src/TodoList/todo_item.xml
new file mode 100644
index 00000000000..01ec80b0ddd
--- /dev/null
+++ b/awesome_owl/static/src/TodoList/todo_item.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}" class="d-flex gap-1">
+            <input type="checkbox" t-att-checked="props.todo.isCompleted"
+                   t-on-change="() => props.toggleState(props.todo.id)"/>
+            <span><t t-esc="props.todo.id"/>.</span>
+            <span><t t-esc="props.todo.description"/></span>
+            <span class="fa fa-remove" t-on-click="() => props.removeTodo(props.todo.id)"/>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/TodoList/todo_list.js b/awesome_owl/static/src/TodoList/todo_list.js
new file mode 100644
index 00000000000..afd31576f32
--- /dev/null
+++ b/awesome_owl/static/src/TodoList/todo_list.js
@@ -0,0 +1,35 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item";
+import { useAutofocus } from '../utils';
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = {TodoItem}
+    static props = {}
+
+    setup() {
+        this.todos = useState([]);
+        this.todoId = useState([1]);
+        useAutofocus('bestInputEver');
+    }
+
+    createTodo = (e) => {
+        if (e.keyCode === 13 && e.target.value) {
+            this.todos.push({id: this.todoId++, description: e.target.value, isCompleted: false})
+            e.target.value = "";
+        }
+    }
+
+    toggleState = (id) => {
+        const todo = this.todos.filter(t => t.id === id)[0];
+        todo.isCompleted = !todo.isCompleted;
+        console.log(todo);
+    }
+
+    removeTodo = (id) => {
+        const index = this.todos.findIndex(t => t.id === id)
+        if (index >= 0) {
+            this.todos.splice(index, 1);
+        }
+    }
+}
diff --git a/awesome_owl/static/src/TodoList/todo_list.xml b/awesome_owl/static/src/TodoList/todo_list.xml
new file mode 100644
index 00000000000..a76f58db9a5
--- /dev/null
+++ b/awesome_owl/static/src/TodoList/todo_list.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <input placeholder="Add a Todo" t-ref="bestInputEver" t-on-keyup="createTodo"/>
+        <div>
+            <t t-foreach="this.todos" t-as="todo" t-key="todo.id">
+                <TodoItem todo="todo" toggleState="toggleState" removeTodo="removeTodo"/>
+            </t>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..3cd0aa8e953
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,18 @@
+import {Component, useState} from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card"
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            }
+        }
+    }
+
+    setup() {
+        this.state = useState({isOpen: true})
+    }
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..cc5e894b00d
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <div class="d-flex flex-row align-items-center">
+                    <h5 class="card-title"><t t-out="props.title" /></h5>
+                    <button class="border border-0 shadow-sm p-1 mb-2 ms-2 bg-body rounded"
+                            t-on-click="() => { state.isOpen = !state.isOpen }">toggle</button>
+                </div>
+                <p class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..f7058f167d3
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,16 @@
+import {Component, useState} from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter"
+    state = useState({value: 1})
+    static props = {
+        onChange: { typ: Function, optional: true }
+    }
+
+    increment() {
+        this.state.value++;
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..df9776e146d
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.counter">
+        <div class="m-2 p-2 border border-dark w-25">
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 657fb8b07bb..c0ab77f0912 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,23 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import {Component, useState} from "@odoo/owl";
+import {Counter} from "./counter/counter";
+import {Card} from "./card/card";
+import {TodoList} from "./TodoList/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static props = {};
+    static components = {Counter, Card, TodoList}
+
+    setup() {
+        this.state = useState({
+            sum: 2,
+        })
+    }
+
+    incrementSum() {
+        this.state.sum++;
+        console.log(this.state.sum)
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..25b5939e806 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div class="p-3 d-flex flex-row align-items-start">
+            <Card title="'Card one'">
+                content 1
+            </Card>
+            <Card title="'TODO List'">
+                <TodoList/>
+            </Card>
         </div>
     </t>
-
 </templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..e438e44435f
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,9 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export function useAutofocus(name) {
+    const inputRef = useRef(name);
+
+    onMounted(() => {
+        inputRef.el.focus()
+    })
+}