diff --git a/addons/dine360_dashboard/controllers/main.py b/addons/dine360_dashboard/controllers/main.py
index 0e1f891..79af440 100644
--- a/addons/dine360_dashboard/controllers/main.py
+++ b/addons/dine360_dashboard/controllers/main.py
@@ -80,6 +80,37 @@ class ImageHome(Website):
                 continue
             seen_names.add(menu.name)
 
+            # 4. Dynamic Icon Override (Dine360 Branding)
+            # This maps menu names to our custom SVG icons dynamically
+            icon_mapping = {
+                'Discuss': 'dine360_dashboard,static/src/img/icons/discuss.svg',
+                'Calendar': 'dine360_dashboard,static/src/img/icons/calendar.svg',
+                'Contacts': 'dine360_dashboard,static/src/img/icons/contacts.svg',
+                'CRM': 'dine360_dashboard,static/src/img/icons/crm.svg',
+                'Sales': 'dine360_dashboard,static/src/img/icons/sales.svg',
+                'Dashboards': 'dine360_dashboard,static/src/img/icons/dashboards.svg',
+                'Point of Sale': 'dine360_dashboard,static/src/img/icons/point_of_sale.svg',
+                'Invoicing': 'dine360_dashboard,static/src/img/icons/invoicing.svg',
+                'Website': 'dine360_dashboard,static/src/img/icons/website.svg',
+                'Purchase': 'dine360_dashboard,static/src/img/icons/purchase.svg',
+                'Inventory': 'dine360_dashboard,static/src/img/icons/inventory.svg',
+                'Employees': 'dine360_dashboard,static/src/img/icons/employees.svg',
+                'Apps': 'dine360_dashboard,static/src/img/icons/apps.svg',
+                'Settings': 'dine360_dashboard,static/src/img/icons/settings.svg',
+                'Kitchen (KDS)': 'dine360_dashboard,static/src/img/icons/kitchen_kds.svg',
+                'Table Reservation': 'dine360_dashboard,static/src/img/icons/table_reservation.svg',
+                'Uber Integration': 'dine360_dashboard,static/src/img/icons/uber_integration.svg',
+            }
+            
+            # Find the best match in the mapping
+            current_name = menu.name
+            for key, icon_path in icon_mapping.items():
+                if key.lower() in current_name.lower():
+                    # We use a virtual field assignment so it doesn't try to save to DB
+                    # but the template picks it up
+                    menu.web_icon = icon_path
+                    break
+
             filtered_menus.append(menu)
 
         # Low Stock Alerts (Ingredients)
diff --git a/addons/dine360_dashboard/static/src/css/home_menu.css b/addons/dine360_dashboard/static/src/css/home_menu.css
index b3e0fff..22a97be 100644
--- a/addons/dine360_dashboard/static/src/css/home_menu.css
+++ b/addons/dine360_dashboard/static/src/css/home_menu.css
@@ -71,7 +71,7 @@ body.o_home_dashboard,
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
+    background: linear-gradient(135deg, rgb(175 36 36 / 62%) 0%, rgb(181 84 84 / 20%) 50%);
     z-index: 1;
 }
 
diff --git a/addons/dine360_dashboard/static/src/img/icons/apps.svg b/addons/dine360_dashboard/static/src/img/icons/apps.svg
new file mode 100644
index 0000000..bac6c27
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/apps.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b7a;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#d6111e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- 3x3 App grid -->
+  <rect x="44"  y="44"  width="56" height="56" rx="14" fill="url(#grad1)"/>
+  <rect x="114" y="44"  width="56" height="56" rx="14" fill="url(#grad2)"/>
+  <rect x="156" y="44"  width="56" height="56" rx="14" fill="#ffb347" opacity="0.85"/>
+
+  <rect x="44"  y="114" width="56" height="56" rx="14" fill="#ffb347" opacity="0.85"/>
+  <rect x="114" y="114" width="56" height="56" rx="14" fill="url(#grad1)"/>
+  <rect x="184" y="114" width="56" height="56" rx="14" fill="url(#grad2)"/>
+
+  <rect x="44"  y="184" width="56" height="28" rx="14" fill="url(#grad2)"/>
+  <rect x="114" y="184" width="56" height="28" rx="14" fill="#ffb347" opacity="0.85"/>
+  <rect x="184" y="184" width="28" height="28" rx="14" fill="url(#grad1)"/>
+
+  <!-- Plus icon in center of middle grid -->
+  <text x="142" y="149" font-family="Arial" font-size="32" font-weight="bold" fill="white" text-anchor="middle">+</text>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/calendar.svg b/addons/dine360_dashboard/static/src/img/icons/calendar.svg
new file mode 100644
index 0000000..4b3e89c
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/calendar.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fff5f5;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="url(#bg)"/>
+  <!-- Calendar body -->
+  <rect x="44" y="76" width="168" height="144" rx="16" fill="white" stroke="#e8e8e8" stroke-width="3"/>
+  <!-- Header -->
+  <rect x="44" y="76" width="168" height="52" rx="16" fill="url(#grad1)"/>
+  <rect x="44" y="104" width="168" height="24" fill="#d6111e"/>
+  <!-- Calendar pins -->
+  <rect x="86" y="58" width="14" height="36" rx="7" fill="#555"/>
+  <rect x="156" y="58" width="14" height="36" rx="7" fill="#555"/>
+  <!-- Day number -->
+  <text x="128" y="116" font-family="Arial" font-size="28" font-weight="bold" fill="white" text-anchor="middle">31</text>
+  <!-- Grid dots -->
+  <circle cx="80" cy="158" r="7" fill="#d6111e"/>
+  <circle cx="112" cy="158" r="7" fill="#ccc"/>
+  <circle cx="144" cy="158" r="7" fill="#ccc"/>
+  <circle cx="176" cy="158" r="7" fill="#ccc"/>
+  <circle cx="80" cy="186" r="7" fill="#ccc"/>
+  <circle cx="112" cy="186" r="7" fill="#d6111e"/>
+  <circle cx="144" cy="186" r="7" fill="#ccc"/>
+  <circle cx="176" cy="186" r="7" fill="#ccc"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/contacts.svg b/addons/dine360_dashboard/static/src/img/icons/contacts.svg
new file mode 100644
index 0000000..01b115e
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/contacts.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Person head -->
+  <circle cx="128" cy="96" r="40" fill="url(#grad1)"/>
+  <!-- Person body -->
+  <path d="M60 210 Q60 158 128 158 Q196 158 196 210 Z" fill="url(#grad1)"/>
+  <!-- Book lines -->
+  <rect x="36" y="100" width="16" height="8" rx="3" fill="#d6111e" opacity="0.5"/>
+  <rect x="36" y="120" width="16" height="8" rx="3" fill="#d6111e" opacity="0.5"/>
+  <rect x="36" y="140" width="16" height="8" rx="3" fill="#d6111e" opacity="0.5"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/crm.svg b/addons/dine360_dashboard/static/src/img/icons/crm.svg
new file mode 100644
index 0000000..c658baa
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/crm.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b7a;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#d6111e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Funnel/Pipeline -->
+  <polygon points="48,60 208,60 168,120 88,120" fill="url(#grad1)"/>
+  <polygon points="88,128 168,128 148,178 108,178" fill="url(#grad2)"/>
+  <polygon points="108,185 148,185 135,220 121,220" fill="#8b0d16"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/dashboards.svg b/addons/dine360_dashboard/static/src/img/icons/dashboards.svg
new file mode 100644
index 0000000..c226833
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/dashboards.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Dashboard grid panels -->
+  <rect x="40" y="40" width="78" height="78" rx="14" fill="url(#grad1)"/>
+  <rect x="138" y="40" width="78" height="78" rx="14" fill="#ff6b7a" opacity="0.8"/>
+  <rect x="40" y="138" width="78" height="78" rx="14" fill="#ff6b7a" opacity="0.6"/>
+  <rect x="138" y="138" width="78" height="78" rx="14" fill="url(#grad1)"/>
+  <!-- Bar chart inside top-left -->
+  <rect x="54" y="82" width="10" height="22" rx="3" fill="white"/>
+  <rect x="70" y="70" width="10" height="34" rx="3" fill="white" opacity="0.8"/>
+  <rect x="86" y="75" width="10" height="29" rx="3" fill="white" opacity="0.6"/>
+  <!-- Pie slice inside bottom-right -->
+  <path d="M177 177 L177 157 A20 20 0 0 1 197 177 Z" fill="white"/>
+  <path d="M177 177 L197 177 A20 20 0 0 1 167 195 Z" fill="white" opacity="0.7"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/discuss.svg b/addons/dine360_dashboard/static/src/img/icons/discuss.svg
new file mode 100644
index 0000000..66a4f4c
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/discuss.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fff5f5;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="url(#bg)"/>
+  <!-- Main chat bubble -->
+  <rect x="50" y="70" width="140" height="100" rx="20" fill="url(#grad1)"/>
+  <polygon points="70,170 70,200 100,170" fill="#d6111e"/>
+  <!-- Dots inside bubble -->
+  <circle cx="98" cy="120" r="10" fill="white"/>
+  <circle cx="128" cy="120" r="10" fill="white" opacity="0.8"/>
+  <circle cx="158" cy="120" r="10" fill="white" opacity="0.6"/>
+  <!-- Small secondary bubble -->
+  <rect x="140" y="155" width="76" height="52" rx="14" fill="#ff6b7a" opacity="0.3"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/employees.svg b/addons/dine360_dashboard/static/src/img/icons/employees.svg
new file mode 100644
index 0000000..3e89511
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/employees.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Left person head -->
+  <circle cx="88" cy="92" r="30" fill="url(#grad1)" opacity="0.75"/>
+  <!-- Right person head -->
+  <circle cx="168" cy="92" r="30" fill="url(#grad1)"/>
+  <!-- Left person body -->
+  <path d="M34 210 Q34 160 88 160 Q120 160 126 175 Q114 158 88 158 Q38 158 38 210 Z" fill="#d6111e" opacity="0.6"/>
+  <path d="M34 215 Q34 160 88 160 Q118 160 126 178" fill="none" stroke="#d6111e" stroke-width="0"/>
+  <path d="M28 215 Q30 155 88 155 Q122 155 130 180" fill="#d6111e" opacity="0.55"/>
+  <!-- Right/main person body -->
+  <path d="M100 215 Q100 158 168 158 Q236 158 236 215 Z" fill="url(#grad1)"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/inventory.svg b/addons/dine360_dashboard/static/src/img/icons/inventory.svg
new file mode 100644
index 0000000..d1531cd
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/inventory.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b7a;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#d6111e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Bottom large box -->
+  <rect x="40" y="162" width="176" height="62" rx="12" fill="url(#grad1)"/>
+  <!-- Middle box -->
+  <rect x="60" y="108" width="136" height="62" rx="12" fill="url(#grad2)"/>
+  <!-- Top small box -->
+  <rect x="84" y="60" width="88" height="54" rx="12" fill="url(#grad1)" opacity="0.8"/>
+  <!-- Box lines/lids -->
+  <line x1="40" y1="180" x2="216" y2="180" stroke="white" stroke-width="3" opacity="0.4"/>
+  <line x1="60" y1="126" x2="196" y2="126" stroke="white" stroke-width="3" opacity="0.4"/>
+  <line x1="84" y1="78" x2="172" y2="78" stroke="white" stroke-width="3" opacity="0.4"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/invoicing.svg b/addons/dine360_dashboard/static/src/img/icons/invoicing.svg
new file mode 100644
index 0000000..1983140
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/invoicing.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Invoice paper -->
+  <rect x="56" y="44" width="144" height="180" rx="14" fill="white" stroke="#eee" stroke-width="3"/>
+  <!-- Invoice fold corner -->
+  <polygon points="168,44 200,76 168,76" fill="url(#grad1)"/>
+  <!-- Header bar -->
+  <rect x="56" y="44" width="112" height="32" rx="14" fill="url(#grad1)"/>
+  <rect x="56" y="62" width="112" height="14" fill="#d6111e"/>
+  <!-- Invoice lines -->
+  <rect x="76" y="96" width="104" height="8" rx="4" fill="#eee"/>
+  <rect x="76" y="114" width="80" height="8" rx="4" fill="#eee"/>
+  <rect x="76" y="132" width="92" height="8" rx="4" fill="#eee"/>
+  <!-- Dollar amount highlight -->
+  <rect x="76" y="158" width="104" height="24" rx="6" fill="#fff0f0"/>
+  <text x="128" y="175" font-family="Arial" font-size="16" font-weight="bold" fill="#d6111e" text-anchor="middle">$ 128.00</text>
+  <!-- Footer tag -->
+  <rect x="76" y="196" width="104" height="12" rx="4" fill="url(#grad1)" opacity="0.3"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/kitchen_kds.svg b/addons/dine360_dashboard/static/src/img/icons/kitchen_kds.svg
new file mode 100644
index 0000000..78c9a2c
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/kitchen_kds.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#fff5f5;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="url(#bg)"/>
+  <!-- Chef hat brim -->
+  <rect x="58" y="158" width="140" height="28" rx="8" fill="url(#grad1)"/>
+  <!-- Chef hat body -->
+  <ellipse cx="128" cy="118" rx="62" ry="56" fill="white" stroke="#e0e0e0" stroke-width="3"/>
+  <!-- Chef hat top bump -->
+  <ellipse cx="128" cy="82" rx="30" ry="28" fill="white" stroke="#e0e0e0" stroke-width="3"/>
+  <!-- D360 text on hat -->
+  <text x="128" y="145" font-family="Arial" font-size="18" font-weight="bold" fill="#d6111e" text-anchor="middle">D360</text>
+  <!-- Fork and spoon cross below -->
+  <line x1="100" y1="195" x2="156" y2="195" stroke="white" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/point_of_sale.svg b/addons/dine360_dashboard/static/src/img/icons/point_of_sale.svg
new file mode 100644
index 0000000..880a668
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/point_of_sale.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- POS terminal screen -->
+  <rect x="62" y="50" width="132" height="100" rx="14" fill="url(#grad1)"/>
+  <!-- Screen glare -->
+  <rect x="74" y="62" width="108" height="76" rx="8" fill="white" opacity="0.15"/>
+  <!-- Screen content lines -->
+  <rect x="82" y="74" width="60" height="10" rx="4" fill="white" opacity="0.8"/>
+  <rect x="82" y="92" width="40" height="8" rx="4" fill="white" opacity="0.6"/>
+  <rect x="150" y="88" width="24" height="18" rx="4" fill="white"/>
+  <!-- POS stand/neck -->
+  <rect x="114" y="150" width="28" height="18" rx="4" fill="#8b0d16"/>
+  <!-- POS base -->
+  <ellipse cx="128" cy="178" rx="52" ry="14" fill="url(#grad1)"/>
+  <!-- Keypad dots -->
+  <circle cx="88" cy="200" r="6" fill="#d6111e"/>
+  <circle cx="110" cy="200" r="6" fill="#d6111e"/>
+  <circle cx="132" cy="200" r="6" fill="#d6111e"/>
+  <circle cx="154" cy="200" r="6" fill="#d6111e"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/purchase.svg b/addons/dine360_dashboard/static/src/img/icons/purchase.svg
new file mode 100644
index 0000000..7d913e2
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/purchase.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Shopping bag body -->
+  <path d="M60 110 L70 210 Q70 220 80 220 L176 220 Q186 220 186 210 L196 110 Z" fill="url(#grad1)"/>
+  <!-- Bag handle left -->
+  <path d="M96 110 Q96 62 128 62 Q160 62 160 110" fill="none" stroke="#8b0d16" stroke-width="14" stroke-linecap="round"/>
+  <!-- Bag top fold highlight -->
+  <rect x="60" y="100" width="136" height="18" rx="6" fill="#8b0d16" opacity="0.5"/>
+  <!-- PO badge -->
+  <rect x="86" y="148" width="84" height="36" rx="10" fill="white" opacity="0.25"/>
+  <text x="128" y="172" font-family="Arial" font-size="18" font-weight="bold" fill="white" text-anchor="middle">PO</text>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/sales.svg b/addons/dine360_dashboard/static/src/img/icons/sales.svg
new file mode 100644
index 0000000..dd88f3f
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/sales.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Trending arrow up -->
+  <polyline points="44,180 96,124 136,152 212,72" fill="none" stroke="url(#grad1)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Arrow head -->
+  <polygon points="212,72 212,110 180,82" fill="#d6111e"/>
+  <!-- Dots on line -->
+  <circle cx="44" cy="180" r="10" fill="#d6111e"/>
+  <circle cx="96" cy="124" r="10" fill="#d6111e"/>
+  <circle cx="136" cy="152" r="10" fill="#d6111e"/>
+  <circle cx="212" cy="72" r="10" fill="#d6111e"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/settings.svg b/addons/dine360_dashboard/static/src/img/icons/settings.svg
new file mode 100644
index 0000000..6489267
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/settings.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Outer gear ring -->
+  <circle cx="128" cy="128" r="76" fill="none" stroke="url(#grad1)" stroke-width="20"/>
+  <!-- Gear teeth (8 teeth) -->
+  <rect x="116" y="36" width="24" height="30" rx="8" fill="url(#grad1)"/>
+  <rect x="116" y="190" width="24" height="30" rx="8" fill="url(#grad1)"/>
+  <rect x="36" y="116" width="30" height="24" rx="8" fill="url(#grad1)"/>
+  <rect x="190" y="116" width="30" height="24" rx="8" fill="url(#grad1)"/>
+  <!-- Diagonal teeth -->
+  <rect x="60" y="60" width="24" height="30" rx="8" fill="url(#grad1)" transform="rotate(45 72 75)"/>
+  <rect x="172" y="60" width="24" height="30" rx="8" fill="url(#grad1)" transform="rotate(-45 184 75)"/>
+  <rect x="60" y="166" width="24" height="30" rx="8" fill="url(#grad1)" transform="rotate(-45 72 181)"/>
+  <rect x="172" y="166" width="24" height="30" rx="8" fill="url(#grad1)" transform="rotate(45 184 181)"/>
+  <!-- Inner circle -->
+  <circle cx="128" cy="128" r="42" fill="url(#grad1)"/>
+  <!-- Center dot -->
+  <circle cx="128" cy="128" r="18" fill="white"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/table_reservation.svg b/addons/dine360_dashboard/static/src/img/icons/table_reservation.svg
new file mode 100644
index 0000000..624922b
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/table_reservation.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Table top -->
+  <ellipse cx="128" cy="118" rx="88" ry="22" fill="url(#grad1)"/>
+  <!-- Table leg -->
+  <rect x="118" y="138" width="20" height="62" rx="6" fill="#8b0d16"/>
+  <!-- Table base -->
+  <ellipse cx="128" cy="200" rx="50" ry="12" fill="#d6111e" opacity="0.5"/>
+  <!-- Reserved tag -->
+  <rect x="90" y="75" width="76" height="36" rx="8" fill="white" stroke="#d6111e" stroke-width="3"/>
+  <text x="128" y="99" font-family="Arial" font-size="14" font-weight="bold" fill="#d6111e" text-anchor="middle">RESERVED</text>
+  <!-- Chairs -->
+  <ellipse cx="54" cy="118" rx="20" ry="10" fill="#ff6b7a" opacity="0.7"/>
+  <ellipse cx="202" cy="118" rx="20" ry="10" fill="#ff6b7a" opacity="0.7"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/uber_integration.svg b/addons/dine360_dashboard/static/src/img/icons/uber_integration.svg
new file mode 100644
index 0000000..28fa7e2
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/uber_integration.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Car body -->
+  <rect x="30" y="140" width="196" height="56" rx="20" fill="url(#grad1)"/>
+  <!-- Car roof -->
+  <path d="M72 140 Q90 96 140 96 L186 96 Q210 96 220 140 Z" fill="url(#grad1)"/>
+  <!-- Windows -->
+  <path d="M90 140 Q100 108 128 108 L160 108 Q178 108 186 140 Z" fill="white" opacity="0.3"/>
+  <!-- Delivery bag on top -->
+  <rect x="100" y="68" width="56" height="42" rx="10" fill="#ff6b7a"/>
+  <rect x="112" y="58" width="32" height="18" rx="8" fill="#ff6b7a" stroke="white" stroke-width="3" fill-opacity="0"/>
+  <!-- U letter (Uber) -->
+  <text x="128" y="98" font-family="Arial" font-size="22" font-weight="bold" fill="white" text-anchor="middle">U</text>
+  <!-- Wheels -->
+  <circle cx="80" cy="196" r="22" fill="#8b0d16"/>
+  <circle cx="80" cy="196" r="12" fill="white"/>
+  <circle cx="176" cy="196" r="22" fill="#8b0d16"/>
+  <circle cx="176" cy="196" r="12" fill="white"/>
+</svg>
diff --git a/addons/dine360_dashboard/static/src/img/icons/website.svg b/addons/dine360_dashboard/static/src/img/icons/website.svg
new file mode 100644
index 0000000..cb8abbc
--- /dev/null
+++ b/addons/dine360_dashboard/static/src/img/icons/website.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#d6111e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b0d16;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="56" fill="white"/>
+  <!-- Globe/earth circle -->
+  <circle cx="128" cy="128" r="90" fill="none" stroke="#eee" stroke-width="3"/>
+  <circle cx="128" cy="128" r="90" fill="none" stroke="url(#grad1)" stroke-width="14" stroke-dasharray="60 510" stroke-dashoffset="-10"/>
+  <!-- Latitude lines -->
+  <ellipse cx="128" cy="128" rx="90" ry="38" fill="none" stroke="#d6111e" stroke-width="3" opacity="0.4"/>
+  <!-- Meridian (vertical oval) -->
+  <ellipse cx="128" cy="128" rx="44" ry="90" fill="none" stroke="#d6111e" stroke-width="3" opacity="0.4"/>
+  <!-- Center vertical line -->
+  <line x1="128" y1="38" x2="128" y2="218" stroke="#d6111e" stroke-width="3" opacity="0.4"/>
+  <!-- Horizontal center -->
+  <line x1="38" y1="128" x2="218" y2="128" stroke="#d6111e" stroke-width="3" opacity="0.4"/>
+  <!-- Outer circle -->
+  <circle cx="128" cy="128" r="90" fill="none" stroke="url(#grad1)" stroke-width="6"/>
+  <!-- Dine360 center badge -->
+  <circle cx="128" cy="128" r="28" fill="url(#grad1)"/>
+  <text x="128" y="134" font-family="Arial" font-size="13" font-weight="bold" fill="white" text-anchor="middle">D360</text>
+</svg>