diff --git a/mrp_bom_overview_forecast/__manifest__.py b/mrp_bom_overview_forecast/__manifest__.py
new file mode 100644
index 00000000000..31ba19806a9
--- /dev/null
+++ b/mrp_bom_overview_forecast/__manifest__.py
@@ -0,0 +1,13 @@
+{
+    "name": "BOM overview",
+    "version": "1.0",
+    "depends": ["mrp", "purchase"],
+    "author": "danal",
+    "category": "Category",
+    "license": "LGPL-3",
+    "assets": {
+        "web.assets_backend": [
+            "mrp_bom_overview_forecast/static/src/**/*",
+        ],
+    },
+}
diff --git a/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.js b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.js
new file mode 100644
index 00000000000..ec7568a128a
--- /dev/null
+++ b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.js
@@ -0,0 +1,17 @@
+import { patch } from "@web/core/utils/patch";
+import { BomOverviewLine } from "@mrp/components/bom_overview_line/mrp_bom_overview_line";
+
+patch(BomOverviewLine.prototype, {
+    get ColorClass() {
+        switch (this.data.availability_state) {
+            case "available":
+                return "text-bg-success";
+            case "expected":
+                return "text-bg-warning";
+            case "unavailable":
+                return "text-bg-danger";
+            default:
+                return "text-bg-dark";
+        }
+    }
+});
diff --git a/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.xml b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.xml
new file mode 100644
index 00000000000..46693f20a75
--- /dev/null
+++ b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_line/mrp_bom_overview_line.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-inherit="mrp.BomOverviewLine" t-inherit-mode="extension">
+        <xpath expr="//td[.//a[@title='Forecast Report']]" position="replace"/>
+        <xpath expr="//td//div[hasclass('o_field_badge')]" position="replace">
+            <div class="o_field_badge">
+                <t t-if="data.index == 0">
+                    <t t-if="data.status == 'No Ready To Produce' or !data.components_available">
+                        <span href="#" role="button" t-attf-class="badge rounded-pill o_mrp_overview_badge {{ColorClass}}" t-on-click.prevent="goToForecast" t-esc="data.availability_display"/>
+                    </t>
+                    <t t-else="">
+                        <span href="#" role="button" t-attf-class="badge rounded-pill o_mrp_overview_badge text-bg-success" t-on-click.prevent="goToForecast" t-esc="data.status"/>
+                    </t>
+                </t>
+                <t t-else="">
+                    <span href="#" role="button" t-attf-class="badge rounded-pill o_mrp_overview_badge {{ColorClass}}" t-on-click.prevent="goToForecast" t-esc="data.availability_display"/>
+                </t>
+            </div>
+        </xpath>
+    </t>
+</templates>
diff --git a/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_table/mrp_bom_overview_table.xml b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_table/mrp_bom_overview_table.xml
new file mode 100644
index 00000000000..95dad63a62d
--- /dev/null
+++ b/mrp_bom_overview_forecast/static/src/components/mrp_bom_overview_table/mrp_bom_overview_table.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="mrp.clean_forecast_view" t-inherit="mrp.BomOverviewTable" t-inherit-mode="extension">
+        <xpath expr="//div[hasclass('o_mrp_bom_report_page')]" position="attributes">
+            <attribute name="class">o_mrp_bom_report_page px-0 overflow-auto border-bottom bg-view</attribute>
+        </xpath>
+        <xpath expr="//div[hasclass('d-flex mb-5')]" position="replace"/>
+        <xpath expr="//th[text()='Availability']" position="replace"/>
+    </t>
+</templates>