EnAccess · dmohns · Dec 17, 2025 · Dec 17, 2025 · Dec 18, 2025 · Dec 18, 2025
diff --git a/docs/.public/favicon.png b/docs/.public/favicon.png
diff --git a/docs/.public/mpmlogo_banner.png b/docs/.public/mpmlogo_banner.png
diff --git a/docs/.public/mpmlogo_raw.png b/docs/.public/mpmlogo_raw.png
diff --git a/docs/.public/mpmlogo_square.png b/docs/.public/mpmlogo_square.png
diff --git a/docs/.public/mpmlogo_stylized.png b/docs/.public/mpmlogo_stylized.png
diff --git a/docs/.public/mpmlogo_stylized.svg b/docs/.public/mpmlogo_stylized.svg
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -51,14 +51,15 @@
 } */
 
 :root {
-  --vp-c-brand-1: #b23028;
-  --vp-c-brand-2: #b23028;
-  --vp-c-brand-3: #9d302a;
+  --vp-c-brand-1: #1b75ba;
+  --vp-c-brand-2: #174569;
+  --vp-c-brand-3: #1b75ba;
+  --vp-c-brand-4: #77d9f7;
 }
 
-/* Purple from icons: #8575c3 */
-/* MPM Red Light: #b23028 */
-/*MPM Red Dark: #9d302a */
+/* MPM Main Blue: #1b75ba */
+/* MPM Light Blue: #77d9f7 */
+/* MPM Dark Blue: #174569 */
 
 /**
  * Component: Home
@@ -67,14 +68,14 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #8575c3 30%,
+    var(--vp-c-brand-4),
     var(--vp-c-brand-1)
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #8575c3 50%,
-    var(--vp-c-brand-1) 50%
+    var(--vp-c-brand-4) 20%,
+    var(--vp-c-brand-1) 80%
   );
   --vp-home-hero-image-filter: blur(44px);
 }

diff --git a/docs/get-started.md b/docs/get-started.md
@@ -12,7 +12,7 @@ order: 1
 <p align="center">
   <a href="https://github.com/EnAccess/micropowermanager">
     <img
-      src="https://micropowermanager.io/mpmlogo_raw.png"
+      src="/mpmlogo_stylized.svg"
       alt="MicroPowerManager"
       width="320"
     >

diff --git a/docs/index.md b/docs/index.md
@@ -14,7 +14,7 @@ hero:
       text: Demo Version
       link: https://demo.micropowermanager.io/#/login
   image:
-    src: /mpmlogo_raw.png
+    src: /mpmlogo_stylized.svg
     alt: MicroPowerManager
 
 features:

diff --git a/src/frontend/public/favicon.ico b/src/frontend/public/favicon.ico
diff --git a/src/frontend/public/favicon.png b/src/frontend/public/favicon.png
diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
     <title>MicroPowerManager</title>
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
@@ -14,10 +14,6 @@
       rel="stylesheet"
       href="//fonts.googleapis.com/css?family=Roboto:200,300,400,300italic|Material+Icons"
     />
-    <script
-      type="text/javascript"
-      src="https://www.gstatic.com/charts/loader.js"
-    ></script>
   </head>
   <body>
     <script>

diff --git a/src/frontend/src/assets/images/Logo1.png b/src/frontend/src/assets/images/Logo1.png
diff --git a/src/frontend/src/assets/images/Logo2.png b/src/frontend/src/assets/images/Logo2.png
diff --git a/src/frontend/src/assets/images/mpmlogo_raw.png b/src/frontend/src/assets/images/mpmlogo_raw.png
diff --git a/src/frontend/src/assets/images/mpmlogo_square.png b/src/frontend/src/assets/images/mpmlogo_square.png
diff --git a/src/frontend/src/assets/images/mpmlogo_stylized.png b/src/frontend/src/assets/images/mpmlogo_stylized.png
diff --git a/src/frontend/src/assets/images/mpmlogo_stylized.svg b/src/frontend/src/assets/images/mpmlogo_stylized.svg
diff --git a/src/frontend/src/assets/sass/_variables.scss b/src/frontend/src/assets/sass/_variables.scss
diff --git a/src/frontend/src/assets/sass/app.scss b/src/frontend/src/assets/sass/app.scss
diff --git a/src/frontend/src/assets/sass/brand.scss b/src/frontend/src/assets/sass/brand.scss
@@ -0,0 +1,18 @@
+// primary colors
+$brand-primary-dark: #174569;
+$brand-primary: #1b75ba;
+$brand-primary-light: #28aae1;
+$brand-primary-lighter: #77d9f7;
+
+$brand-background: #f3f8fb;
+$brand-background-dark: #e0f7fa;
+$brand-white: #ffffff;
+
+// accent colors
+$brand-secondary-dark: #fa8d41;
+$brand-secondary: #fab15b;
+$brand-secondary-light: #fad087;
+
+$brand-accent-dark: #628b45;
+$brand-accent: #81a872;
+$brand-accent-light: #c3e8b5;
diff --git a/src/frontend/src/assets/sass/mpm.scss b/src/frontend/src/assets/sass/mpm.scss
@@ -11,6 +11,9 @@
 // =========================================================
 //
 // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+@import "theme";
+
 @import "mpm/variables";
 @import "mpm/mixins";
 @import "mpm/shadows";

diff --git a/src/frontend/src/assets/sass/mpm/_colors.scss b/src/frontend/src/assets/sass/mpm/_colors.scss
@@ -1,22 +1,3 @@
-@import "~vue-material/dist/theme/engine"; // Import the theme engine
-
-@include md-register-theme(
-  "selection-black",
-  (
-    accent: md-get-palette-color(black, 500),
-  )
-);
-
-@include md-register-theme(
-  "default",
-  (
-    primary: md-get-palette-color(blue, 500),
-    // The primary color of your application
-  )
-);
-
-@import "~vue-material/dist/theme/all"; // Apply the theme
-
 $red-50: #ffebee !default;
 $red-100: #ffcdd2 !default;
 $red-200: #ef9a9a !default;

diff --git a/src/frontend/src/assets/sass/mpm/_misc.scss b/src/frontend/src/assets/sass/mpm/_misc.scss
@@ -71,7 +71,12 @@ h6,
   border-bottom-right-radius: 6px;
 }
 
-a {
+/*
+Only apply to <a> that is NOT inside a button/
+Else the button style looks odd when using
+https://www.creative-tim.com/vuematerial/components/button
+*/
+a:not(.md-button) {
   color: $link-color;
 
   &:hover,

diff --git a/src/frontend/src/assets/sass/theme.scss b/src/frontend/src/assets/sass/theme.scss
@@ -0,0 +1,22 @@
+@import "brand.scss";
+
+// Apply the color scheme to theme
+@import "~vue-material/dist/theme/engine"; // Import the theme engine
+
+@include md-register-theme(
+  "selection-black",
+  (
+    accent: md-get-palette-color(black, 500),
+  )
+);
+
+@include md-register-theme(
+  "default",
+  (
+    primary: $brand-primary,
+    accent: $brand-secondary,
+    theme: light,
+  )
+);
+
+@import "~vue-material/dist/theme/all"; // Apply the theme
diff --git a/src/frontend/src/layouts/Default.vue b/src/frontend/src/layouts/Default.vue
@@ -89,7 +89,7 @@ export default {
     showed: false,
     confirmed: false,
     expires_in: null,
-    sidebarBackground: "green",
+    sidebarBackground: "primary",
     sidebarBackgroundImage: null,
     showWizard: false,
     tail: [],

diff --git a/src/frontend/src/modules/Agent/AgentTicketList.vue b/src/frontend/src/modules/Agent/AgentTicketList.vue
@@ -3,7 +3,7 @@
     :subscriber="subscriber"
     :title="$tc('phrases.agentTicket', 1)"
     :paginator="agentTicketService.paginator"
-    color="green"
+    color="primary"
   >
     <ticket-item
       :allow-comment="true"

diff --git a/src/frontend/src/modules/Agent/AgentTransactionList.vue b/src/frontend/src/modules/Agent/AgentTransactionList.vue
@@ -2,7 +2,7 @@
   <widget
     :class="'col-sm-6 col-md-5'"
     :title="$tc('phrases.lastTransactions')"
-    color="green"
+    color="primary"
     :paginator="agentTransactionService.paginator"
     :subscriber="subscriber"
   >

diff --git a/src/frontend/src/modules/Agent/Appliances/AssignedApplianceList.vue b/src/frontend/src/modules/Agent/Appliances/AssignedApplianceList.vue
@@ -9,7 +9,7 @@
       :button-text="$tc('phrases.assignAppliance', 0)"
       :button="true"
       :title="$tc('phrases.assignAppliance', 1)"
-      color="green"
+      color="primary"
       :subscriber="subscriber"
       @widgetAction="addNewAppliance"
     >

diff --git a/src/frontend/src/modules/Agent/Appliances/SoldApplianceList.vue b/src/frontend/src/modules/Agent/Appliances/SoldApplianceList.vue
@@ -6,7 +6,7 @@
     :button-color="'red'"
     :paginator="agentSoldApplianceService.paginator"
     :subscriber="subscriber"
-    color="green"
+    color="primary"
   >
     <md-table>
       <md-table-row>

diff --git a/src/frontend/src/modules/Agent/Balance/AgentBalanceHistory.vue b/src/frontend/src/modules/Agent/Balance/AgentBalanceHistory.vue
@@ -12,7 +12,7 @@
       :subscriber="subscriber"
       :resetKey="resetKey"
       :show_per_page="true"
-      color="green"
+      color="primary"
     >
       <div>
         <md-table md-sort="id" md-sort-order="asc">

diff --git a/src/frontend/src/modules/Agent/Commission/AgentCommissionList.vue b/src/frontend/src/modules/Agent/Commission/AgentCommissionList.vue
@@ -7,7 +7,7 @@
       :button="true"
       :title="$tc('phrases.commissionType', 2)"
       @widgetAction="newCommission"
-      color="green"
+      color="primary"
       :subscriber="subscriber"
     >
       <md-progress-bar md-mode="indeterminate" v-if="loading" />

diff --git a/src/frontend/src/modules/Agent/Receipt/AgentReceiptList.vue b/src/frontend/src/modules/Agent/Receipt/AgentReceiptList.vue
@@ -10,7 +10,7 @@
       :paginator="agentReceiptService.paginator"
       :subscriber="subscriber"
       :resetKey="resetKey"
-      color="green"
+      color="primary"
     >
       <md-table md-sort="id" md-sort-order="asc">
         <md-table-row>

diff --git a/src/frontend/src/modules/Appliances/ApplianceTypeList.vue b/src/frontend/src/modules/Appliances/ApplianceTypeList.vue
@@ -5,7 +5,7 @@
       :title="$tc('phrases.applianceType', 1)"
       :subscriber="subscriber"
       :route_name="'/appliances'"
-      color="green"
+      color="primary"
       :reset-key="resetKey"
     >
       <md-table>

diff --git a/src/frontend/src/modules/Client/Addresses.vue b/src/frontend/src/modules/Client/Addresses.vue
@@ -5,7 +5,7 @@
       :title="$tc('words.address', 1)"
       :button="true"
       :button-text="$tc('phrases.newAddress')"
-      color="green"
+      color="primary"
       @widgetAction="addNewAddress"
       :paginator="addresses.paginator"
       :subscriber="subscriber"

diff --git a/src/frontend/src/modules/Client/Appliances/SoldApplianceDetail.vue b/src/frontend/src/modules/Client/Appliances/SoldApplianceDetail.vue
@@ -15,7 +15,7 @@
 
       <widget
         :title="deviceInfoTitle"
-        color="green"
+        color="primary"
         id="device-info"
         style="margin-top: 2rem"
       >
@@ -62,7 +62,7 @@
     <div class="md-layout-item md-size-60">
       <widget
         :title="'Details of ' + soldAppliance.applianceType.name"
-        color="green"
+        color="primary"
         :key="updateDetail"
         :subscriber="subscriber"
       >
@@ -154,7 +154,7 @@
           <div class="md-layout-item md-size-100">
             <widget
               title="Payment Plan"
-              color="green"
+              color="primary"
               :paginator="applianceRateService.paginator"
               :subscriber="ratesSubscriber"
             >
@@ -275,7 +275,7 @@
           <div class="md-layout-item md-size-100">
             <widget
               title="History"
-              color="green"
+              color="primary"
               :paginator="applianceLogService.paginator"
               :subscriber="logsSubscriber"
             >

diff --git a/src/frontend/src/modules/Client/Appliances/SoldAppliancesList.vue b/src/frontend/src/modules/Client/Appliances/SoldAppliancesList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <widget
-      color="green"
+      color="primary"
       @widgetAction="
         () => {
           showSellApplianceModal = true

diff --git a/src/frontend/src/modules/Client/Clients.vue b/src/frontend/src/modules/Client/Clients.vue
@@ -8,7 +8,7 @@
       :button="true"
       :paginator="paginator"
       :route_name="'/people'"
-      color="green"
+      color="primary"
       :button-text="$tc('phrases.addCustomer')"
       :key="widgetKey"
       @widgetAction="

diff --git a/src/frontend/src/modules/Client/DeferredPayments.vue b/src/frontend/src/modules/Client/DeferredPayments.vue
@@ -6,7 +6,7 @@
       :button="true"
       :title="$tc('phrases.soldAppliances')"
       :button-color="'red'"
-      color="green"
+      color="primary"
       :subscriber="subscriber"
       @widgetAction="
         () => {

diff --git a/src/frontend/src/modules/Client/Devices.vue b/src/frontend/src/modules/Client/Devices.vue
@@ -2,7 +2,7 @@
   <div>
     <widget
       :title="$tc('words.devices')"
-      color="green"
+      color="primary"
       :subscriber="subscriber"
     >
       <div class="md-layout md-gutter">

diff --git a/src/frontend/src/modules/Client/PaymentDetail.vue b/src/frontend/src/modules/Client/PaymentDetail.vue
@@ -95,17 +95,12 @@ export default {
       const seriesNames = headers.slice(1)
       const categories = data.slice(1).map((row) => row[0] || "")
 
-      const colors = ["#0b920b", "#8b2621", "#0c7cd5", "#aad4df"]
-
       const series = seriesNames.map((name, index) => {
         const seriesIndex = index + 1
         return {
           name: String(name || `Series ${index + 1}`),
           type: "bar",
           data: data.slice(1).map((row) => parseFloat(row[seriesIndex]) || 0),
-          itemStyle: {
-            color: colors[index % colors.length],
-          },
         }
       })
 

diff --git a/src/frontend/src/modules/Client/PaymentFlow.vue b/src/frontend/src/modules/Client/PaymentFlow.vue
@@ -172,17 +172,12 @@ export default {
       const seriesNames = headers.slice(1)
       const categories = data.slice(1).map((row) => row[0] || "")
 
-      const colors = ["#1b9e77", "#d95f02", "#7570b3"]
-
       const series = seriesNames.map((name, index) => {
         const seriesIndex = index + 1
         return {
           name: String(name || `Series ${index + 1}`),
           type: "bar",
           data: data.slice(1).map((row) => parseFloat(row[seriesIndex]) || 0),
-          itemStyle: {
-            color: colors[index % colors.length],
-          },
         }
       })
 

diff --git a/src/frontend/src/modules/Client/SmsHistory.vue b/src/frontend/src/modules/Client/SmsHistory.vue
@@ -1,7 +1,7 @@
 <template>
   <widget
     :title="$tc('phrases.smsHistory') + ' (' + smses.length + ')'"
-    color="green"
+    color="primary"
     :subscriber="subscriber"
     :button="true"
     :empty-state-create-button="true"

diff --git a/src/frontend/src/modules/Client/Ticket.vue b/src/frontend/src/modules/Client/Ticket.vue
@@ -2,7 +2,7 @@
   <div class="col-sm-12">
     <widget
       :subscriber="subscriber"
-      color="green"
+      color="primary"
       :title="$tc('phrases.userTicket', 2)"
       :paginator="tickets.paginator"
       :button="true"