diff --git a/business_objects/__pycache__/__init__.cpython-38.pyc b/business_objects/__pycache__/__init__.cpython-38.pyc
index 29012b58..7bd02514 100644
Binary files a/business_objects/__pycache__/__init__.cpython-38.pyc and b/business_objects/__pycache__/__init__.cpython-38.pyc differ
diff --git a/lib/__pycache__/__init__.cpython-38.pyc b/lib/__pycache__/__init__.cpython-38.pyc
index 7ada03ef..8451c079 100644
Binary files a/lib/__pycache__/__init__.cpython-38.pyc and b/lib/__pycache__/__init__.cpython-38.pyc differ
diff --git a/lib/__pycache__/argument_validation.cpython-38.pyc b/lib/__pycache__/argument_validation.cpython-38.pyc
index 534c89de..c6a2978a 100644
Binary files a/lib/__pycache__/argument_validation.cpython-38.pyc and b/lib/__pycache__/argument_validation.cpython-38.pyc differ
diff --git a/lib/__pycache__/data_types.cpython-38.pyc b/lib/__pycache__/data_types.cpython-38.pyc
index 08437f7e..2fe4c47a 100644
Binary files a/lib/__pycache__/data_types.cpython-38.pyc and b/lib/__pycache__/data_types.cpython-38.pyc differ
diff --git a/models/__pycache__/__init__.cpython-38.pyc b/models/__pycache__/__init__.cpython-38.pyc
index 0f524495..9e6d8aec 100644
Binary files a/models/__pycache__/__init__.cpython-38.pyc and b/models/__pycache__/__init__.cpython-38.pyc differ
diff --git a/models/__pycache__/model_view_base.cpython-38.pyc b/models/__pycache__/model_view_base.cpython-38.pyc
index 1cc9640f..85fbe57d 100644
Binary files a/models/__pycache__/model_view_base.cpython-38.pyc and b/models/__pycache__/model_view_base.cpython-38.pyc differ
diff --git a/models/__pycache__/model_view_contact.cpython-38.pyc b/models/__pycache__/model_view_contact.cpython-38.pyc
index 09301898..d1c47f6f 100644
Binary files a/models/__pycache__/model_view_contact.cpython-38.pyc and b/models/__pycache__/model_view_contact.cpython-38.pyc differ
diff --git a/models/__pycache__/model_view_home.cpython-38.pyc b/models/__pycache__/model_view_home.cpython-38.pyc
index 22cf0a13..0d3b052f 100644
Binary files a/models/__pycache__/model_view_home.cpython-38.pyc and b/models/__pycache__/model_view_home.cpython-38.pyc differ
diff --git a/models/model_view_services.py b/models/model_view_services.py
index 4a9557a8..ef64beb2 100644
--- a/models/model_view_services.py
+++ b/models/model_view_services.py
@@ -14,9 +14,13 @@ Data model for services view
 from models.model_view_base import Model_View_Base
 # from routes import bp_home
 # external
+from typing import ClassVar
 
 class Model_View_Services(Model_View_Base):
-    # Attributes
+    FLAG_FAQ: ClassVar[str] = 'faq'
+    FLAG_SERVICES: ClassVar[str] = 'services'
+    FLAG_TECHNOLOGIES: ClassVar[str] = 'technologies'
+
     @property
     def title(self):
         return 'Services'
diff --git a/static/css/components/button.css b/static/css/components/button.css
index 3243556c..de10fbba 100644
--- a/static/css/components/button.css
+++ b/static/css/components/button.css
@@ -6,15 +6,15 @@ button, .button-submit, input[type="submit"] {
     border-radius: 2vh;
     padding: 1vh 2vh 1vh 2vh;
     margin: 0.5vh;
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    color: var(--primary-colour);
+    border-color: var(--border-colour);
 }
 
 button.navContactUs {
-    border: 4px solid var(--c_purple_dark);
+    border: 4px solid var(--border-colour);
     background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark) !important;
+    /* color: var(--c_purple_dark) !important; */
     border-radius: 2vh;
     width: 180px !important;
 }
diff --git a/static/css/components/overlay.css b/static/css/components/overlay.css
index 6ad963a6..7603f28c 100644
--- a/static/css/components/overlay.css
+++ b/static/css/components/overlay.css
@@ -10,7 +10,7 @@
     right: 0;
     width: 100px;
     /* height: 50%; */ 
-    background: var(--c_purple_pastel);
+    background: var(--background-colour);
     justify-content: right;
     align-items: right;
     align-self: right;
@@ -33,7 +33,7 @@
     max-height: 80%;
 }
 .hamburger {
-    border: 2px solid var(--c_purple_dark);
+    border: 2px solid var(--border-colour);
     border-radius: 4px;
 }
 .hamburger:first-child {
@@ -52,14 +52,14 @@
     justify-content: center;
     text-align: center;
     width: 100%;
-    color: var(--c_purple_dark);
+    /* color: var(--text-colour); */
     font-weight: bold;
     font-size: 18px;
     /* height: 18px; */
 }
 .hamburger > :hover {
-    background-color: var(--c_purple_light);
-    color: var(--c_purple_dark);
+    color: var(--background-colour);
+    background-color: var(--primary-colour);
 }
 .hamburger > * > * {
     width: 100%;
@@ -73,10 +73,6 @@
     padding-bottom: 4.5px;
 }
 
-#overlayHamburger .row *:hover {
-    text-decoration: underline;
-}
-
 /* Confirm overlay */
 #overlayConfirm {
     position: absolute;
diff --git a/static/css/components/table.css b/static/css/components/table.css
index a93db554..c589db94 100644
--- a/static/css/components/table.css
+++ b/static/css/components/table.css
@@ -9,7 +9,7 @@ thead, tbody {
 }
 
 th {
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 td {
     font-size: min(12px, calc(1vh * 3));
@@ -19,7 +19,7 @@ th, td {
     min-width: fit-content;
 }
 tr:not(:last-child) > td {
-    border-bottom: 1px dashed var(--c_purple_dark);
+    border-bottom: 1px dashed var(--border-colour);
 }
 td > table > tbody > tr > td {
     border: none !important;
@@ -28,17 +28,18 @@ th.collapsed, td.collapsed {
     display: table-cell !important;
 }
 td.dirty {
-    background-color: var(--c_purple_dark);
+    background-color: var(--primary-colour);
 }
 td:not(.dirty) {
     /* color: var(--c_purple_dark); */
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 
 tr {
     min-height: 1px;
-    border-bottom: 1px solid var(--c_purple_dark);
-    border-top: 1px solid var(--c_purple_dark);
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    border-color: var(--border-colour);
     background-color: transparent;
 }
 
@@ -54,11 +55,11 @@ table button {
 }
 
 table button.active {
-    background-color: var(--c_purple_pastel);
+    background-color: var(--background-colour);
 }
 
 tr.delete, tr.delete > td {
-    background-color: red;
+    background-color: var(--c-red);
 }
 
 table div {
diff --git a/static/css/layouts/footer.css b/static/css/layouts/footer.css
index 8493cada..88fc749c 100644
--- a/static/css/layouts/footer.css
+++ b/static/css/layouts/footer.css
@@ -8,9 +8,11 @@
     margin: 0;
     height: 8vh !important;
     overflow-y: auto;
-    background-color: var(--c_purple_pastel);
+    background-color: var(--accent-colour);
+    /*
     border-top-left-radius: 2.5vh;
     border-top-right-radius: 2.5vh;
+    */
     position: absolute;
     /* top: 2.5vh; */
     bottom: 0;
diff --git a/static/css/layouts/header.css b/static/css/layouts/header.css
index eb486b3b..32151af3 100644
--- a/static/css/layouts/header.css
+++ b/static/css/layouts/header.css
@@ -17,7 +17,7 @@
 .topnav a, .topnav label, .topnav p, .topnav h1 {
     float: left;
     display: flex;
-    color: white;
+    /* color: white; */
     text-align: center;
     text-decoration: none;
     width: 100%;
@@ -26,8 +26,8 @@
     justify-content: center;
 }
 .topnav a:hover {
-    background-color: var(--c_purple_light);
-    color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
 }
 
 .topnav > .container {
@@ -43,9 +43,11 @@
     padding: 1vh;
     margin: 1vh;
     border-radius: 1vh;
-    /* background-color: var(--c_purple_light); */
-    color: var(--c_purple_dark);
-    border: 2px solid white;
+    /*
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark); 
+    */
+    border: 2px solid var(--border-colour);
     font-weight: bold;
     text-align: center;
 }
@@ -58,7 +60,6 @@
 
 .company-name {
     font-size: min(28px, calc(1vh * 7));
-    color: white;
 }
 @media screen and (max-width: 450px) {
     .company-name {
@@ -100,5 +101,5 @@ form.filter button.save, form.filter button.button-cancel {
 }
 form.filter button.save, form.filter button.button-cancel {
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: 1px;
 }
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index b56c8995..829fedf0 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,14 +1,31 @@
 
 :root {
     /* Declare global variables */
+    /*
     --c_purple: #5B29FF;
     --c_purple_pastel: #D1D1FF;
+    --c_purple_lighter: #E8E1FF;
     --c_purple_light: #C6BDFF;
     --c_purple_dark: #4700B3;
+    */
+    /* purple theme
+        - light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
+        - dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
+    */
+    --c_purple_darker: #310055;
+    --c_purple_dark: #4A0A77;
+    --c_purple: #6818A5;
+    --c_purple_light: #CBAFFE;
+    --c_purple_lighter: #F5ECFE;
+
     --c_blue: #0044FF;
     --c_blue_pastel: #B8E0FF;
     --c_blue_light: #73E8FF;
     --c_blue_dark: #003ADB;
+    /* --c_red: */
+    --c-red: #FF0000;
+    --c_red_pastel: #FAE0E2;
+    --c_red_lighter: #FAE0E2;
 }
 
 html {
@@ -16,14 +33,14 @@ html {
 }
 
 body {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--background-colour);
+    color: var(--text-colour);
     font-family: var(--font-family-base);
     font-family: Arial;
     padding: 0;
     margin: 0;
     border: 0;
-    background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */
+    background: linear-gradient(to bottom right, var(--c_purple_lighter), var(--c_red_lighter)); /* var(--c_purple); */
     height: 100vh;
     max-height: 100%;
 }
@@ -53,7 +70,8 @@ script, link {
     overflow-y: auto;
     overflow-x: hidden;
     position: absolute;
-    width: 98vw; 
+    width: 98vw;
+    color: var(--text-colour);
 }
 
 .page-body > * {
@@ -70,7 +88,7 @@ script, link {
     align-self: center;
     padding-top: 0.5vh;
     padding-bottom: 0.5vh;
-    color: var(--c_purple_dark);
+    /* color: var(--c_purple_dark); */
 }
 #pageBody > .card {
     height: fit-content;
@@ -160,7 +178,7 @@ img.header-logo {
 
 /* Add a card effect for articles */
 .card {
-    background-color: var(--c_purple_pastel);
+    background-color: white;
     padding: 1vh;
     margin: 1vh;
     display: flex !important;
@@ -250,7 +268,7 @@ img.header-logo {
 }
 
 .container-input > input, .container-input > textarea {
-    border: 2px solid var(--c_purple);
+    border: 2px solid var(--border-colour);
     padding: 1vh;
 }
 
@@ -270,10 +288,10 @@ li {
 
 
 :not(input,textarea,select,button).dirty {
-    background-color: var(--c_purple_dark);
+    background-color: var(--accent-colour);
 }
 input.dirty, textarea.dirty, select.dirty {
-    border-color: var(--c_purple_dark);
+    border-color: var(--border-colour);
 }
 
 
diff --git a/static/css/pages/core/admin_home.css b/static/css/pages/core/admin_home.css
index 1a767856..6c3e5ccc 100644
--- a/static/css/pages/core/admin_home.css
+++ b/static/css/pages/core/admin_home.css
@@ -1,5 +1,5 @@
 #pageBody > .card:first-of-type {
-    width: 80%;
+    width: min(80vw, 500px);
 }
 
 .container.row {
diff --git a/static/css/pages/core/contact.css b/static/css/pages/core/contact.css
index f97d13cb..eb9c030d 100644
--- a/static/css/pages/core/contact.css
+++ b/static/css/pages/core/contact.css
@@ -11,15 +11,19 @@
     font-size: min(16px, calc(1vh * 4));
 }
 
+#pageBody > .card {
+    max-width: min(80vw, 1000px);
+}
+
 #email {
     /* min-width: 40vw; */
-    width: 40vw;
+    width: min(40vw, 500px);
 }
 #name {
-    width: 50vw;
+    width: min(50vw, 625px);
 }
 #message {
-    width: 60vw;
+    width: min(60vw, 750px);
 }
 
 input, textarea {
diff --git a/static/css/pages/core/home.css b/static/css/pages/core/home.css
index 642e9327..81a874d3 100644
--- a/static/css/pages/core/home.css
+++ b/static/css/pages/core/home.css
@@ -12,6 +12,15 @@
     margin-bottom: 35vh;
 }
 
+.home-hero {
+
+}
+
+.home-hero-title {
+    font-size: 24px; 
+    font-weight: normal;
+}
+
 .img-demo {
     max-width: 50%;
     min-width: 500px;
diff --git a/static/css/pages/core/services.css b/static/css/pages/core/services.css
index e65bae53..b899bf19 100644
--- a/static/css/pages/core/services.css
+++ b/static/css/pages/core/services.css
@@ -1,7 +1,16 @@
 #pageBody > .card {
     padding-left: 5vw;
     padding-right: 5vw;
-    max-width: 80vw;
+    max-width: min(80vw, 1000px);
+}
+
+#pageBody > .card.services {
+    max-width: min(80vw, 690px);
+}
+#pageBody > .card.technologies {
+}
+#pageBody > .card.faq {
+    max-width: min(80vw, 1250px);
 }
 
 #pageBody .card h1,
diff --git a/static/css/pages/store/product_categories.css b/static/css/pages/store/product_categories.css
index 7d80d358..06b3c1c1 100644
--- a/static/css/pages/store/product_categories.css
+++ b/static/css/pages/store/product_categories.css
@@ -52,7 +52,7 @@
 }
 
 td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
-    border: 2px solid var(--c_purple);
+    border: 2px solid var(--border-colour);
     border-radius: 0.5vh;
 }
 
diff --git a/static/css/pages/store/products.css b/static/css/pages/store/products.css
index 9219df7c..f018cd70 100644
--- a/static/css/pages/store/products.css
+++ b/static/css/pages/store/products.css
@@ -46,7 +46,7 @@
 }
 
 td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
-    border: 2px solid var(--c_purple);
+    border: 2px solid var(--border-colour);
     border-radius: 0.5vh;
 }
 
diff --git a/static/css/sections/store.css b/static/css/sections/store.css
index a8c1974b..963cccfb 100644
--- a/static/css/sections/store.css
+++ b/static/css/sections/store.css
@@ -14,15 +14,15 @@
 }
 
 .buttonAddToBasket {
-    background-color: var(--c_blue_pastel);
-    color: var(--c_blue_dark);
-    border-color: var(--c_blue_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_blue_dark); */
+    border-color: var(--border-colour);
 }
 
 #buttonCheckout, .buttonBuyNow {
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
+    border-color: var(--border-colour);
 }
 
 .button-increment, .button-decrement {
diff --git a/static/css/themes/light.css b/static/css/themes/light.css
index e46bc225..f957477a 100644
--- a/static/css/themes/light.css
+++ b/static/css/themes/light.css
@@ -1,45 +1,48 @@
 :root {
-    --background-color: #ffffff;
-    --text-color: #333333;
-    --primary-color: #007bff;
-    --secondary-color: #6c757d;
-    --success-color: #28a745;
-    --danger-color: #dc3545;
-    --warning-color: #ffc107;
-    --info-color: #17a2b8;
-    --light-color: #f8f9fa;
-    --dark-color: #343a40;
-    --border-color: #dee2e6;
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    /* --background-colour: #ffffff; */
+    --text-colour: var(--c_purple_darker);
+    --primary-colour: var(--c_purple_dark);
+    --secondary-colour: var(--c_purple);
+    --accent-colour: var(--c_purple_light);
+    --background-colour: var(--c_purple_lighter);
+    --success-colour: #28a745;
+    --danger-colour: #dc3545;
+    --warning-colour: #ffc107;
+    --info-colour: #17a2b8;
+    --light-colour: var(--c_purple_light);
+    --dark-colour: var(--c_purple_dark);
+    --border-colour: var(--c_purple_dark);
+    --shadow-colour: rgba(0, 0, 0, 0.1);
     
-    /* Header */
+    /* Header * /
     --header-bg: #f8f9fa;
     --header-text: #333333;
     
-    /* Footer */
+    /* Footer * /
     --footer-bg: #f8f9fa;
     --footer-text: #6c757d;
     
-    /* Navigation */
+    /* Navigation * /
     --nav-bg: #ffffff;
     --nav-text: #333333;
     --nav-hover-bg: #f1f3f5;
     --nav-hover-text: #007bff;
     
-    /* Buttons */
+    /* Buttons * /
     --Button-primary-bg: #007bff;
     --Button-primary-text: #ffffff;
     --Button-secondary-bg: #6c757d;
     --Button-secondary-text: #ffffff;
     
-    /* Forms */
+    /* Forms * /
     --input-bg: #ffffff;
     --input-border: #ced4da;
     --input-text: #495057;
     --input-focus-border: #80bdff;
     
-    /* Cards */
+    /* Cards * /
     --card-bg: #ffffff;
     --card-border: #dee2e6;
     --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    */
 }
\ No newline at end of file
diff --git a/static/dist/css/core_admin_home.bundle.css b/static/dist/css/core_admin_home.bundle.css
index 42c7bbca..8dd0ec06 100644
--- a/static/dist/css/core_admin_home.bundle.css
+++ b/static/dist/css/core_admin_home.bundle.css
@@ -1,5 +1,5 @@
 #pageBody > .card:first-of-type {
-    width: 80%;
+    width: min(80vw, 500px);
 }
 
 .container.row {
diff --git a/static/dist/css/core_contact.bundle.css b/static/dist/css/core_contact.bundle.css
index b8d0d4ae..498dcbdd 100644
--- a/static/dist/css/core_contact.bundle.css
+++ b/static/dist/css/core_contact.bundle.css
@@ -11,15 +11,19 @@
     font-size: min(16px, calc(1vh * 4));
 }
 
+#pageBody > .card {
+    max-width: min(80vw, 1000px);
+}
+
 #email {
     /* min-width: 40vw; */
-    width: 40vw;
+    width: min(40vw, 500px);
 }
 #name {
-    width: 50vw;
+    width: min(50vw, 625px);
 }
 #message {
-    width: 60vw;
+    width: min(60vw, 750px);
 }
 
 input, textarea {
diff --git a/static/dist/css/core_home.bundle.css b/static/dist/css/core_home.bundle.css
index d0514284..88332580 100644
--- a/static/dist/css/core_home.bundle.css
+++ b/static/dist/css/core_home.bundle.css
@@ -12,6 +12,15 @@
     margin-bottom: 35vh;
 }
 
+.home-hero {
+
+}
+
+.home-hero-title {
+    font-size: 24px; 
+    font-weight: normal;
+}
+
 .img-demo {
     max-width: 50%;
     min-width: 500px;
diff --git a/static/dist/css/core_services.bundle.css b/static/dist/css/core_services.bundle.css
index caa09437..5418e5f8 100644
--- a/static/dist/css/core_services.bundle.css
+++ b/static/dist/css/core_services.bundle.css
@@ -1,7 +1,16 @@
 #pageBody > .card {
     padding-left: 5vw;
     padding-right: 5vw;
-    max-width: 80vw;
+    max-width: min(80vw, 1000px);
+}
+
+#pageBody > .card.services {
+    max-width: min(80vw, 690px);
+}
+#pageBody > .card.technologies {
+}
+#pageBody > .card.faq {
+    max-width: min(80vw, 1250px);
 }
 
 #pageBody .card h1,
diff --git a/static/dist/css/main.bundle.css b/static/dist/css/main.bundle.css
index 4a91ab5c..9ccdf036 100644
--- a/static/dist/css/main.bundle.css
+++ b/static/dist/css/main.bundle.css
@@ -1,14 +1,31 @@
 
 :root {
     /* Declare global variables */
+    /*
     --c_purple: #5B29FF;
     --c_purple_pastel: #D1D1FF;
+    --c_purple_lighter: #E8E1FF;
     --c_purple_light: #C6BDFF;
     --c_purple_dark: #4700B3;
+    */
+    /* purple theme
+        - light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
+        - dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
+    */
+    --c_purple_darker: #310055;
+    --c_purple_dark: #4A0A77;
+    --c_purple: #6818A5;
+    --c_purple_light: #CBAFFE;
+    --c_purple_lighter: #F5ECFE;
+
     --c_blue: #0044FF;
     --c_blue_pastel: #B8E0FF;
     --c_blue_light: #73E8FF;
     --c_blue_dark: #003ADB;
+    /* --c_red: */
+    --c-red: #FF0000;
+    --c_red_pastel: #FAE0E2;
+    --c_red_lighter: #FAE0E2;
 }
 
 html {
@@ -16,14 +33,14 @@ html {
 }
 
 body {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--background-colour);
+    color: var(--text-colour);
     font-family: var(--font-family-base);
     font-family: Arial;
     padding: 0;
     margin: 0;
     border: 0;
-    background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */
+    background: linear-gradient(to bottom right, var(--c_purple_lighter), var(--c_red_lighter)); /* var(--c_purple); */
     height: 100vh;
     max-height: 100%;
 }
@@ -53,7 +70,8 @@ script, link {
     overflow-y: auto;
     overflow-x: hidden;
     position: absolute;
-    width: 98vw; 
+    width: 98vw;
+    color: var(--text-colour);
 }
 
 .page-body > * {
@@ -70,7 +88,7 @@ script, link {
     align-self: center;
     padding-top: 0.5vh;
     padding-bottom: 0.5vh;
-    color: var(--c_purple_dark);
+    /* color: var(--c_purple_dark); */
 }
 #pageBody > .card {
     height: fit-content;
@@ -160,7 +178,7 @@ img.header-logo {
 
 /* Add a card effect for articles */
 .card {
-    background-color: var(--c_purple_pastel);
+    background-color: white;
     padding: 1vh;
     margin: 1vh;
     display: flex !important;
@@ -250,7 +268,7 @@ img.header-logo {
 }
 
 .container-input > input, .container-input > textarea {
-    border: 2px solid var(--c_purple);
+    border: 2px solid var(--border-colour);
     padding: 1vh;
 }
 
@@ -270,10 +288,10 @@ li {
 
 
 :not(input,textarea,select,button).dirty {
-    background-color: var(--c_purple_dark);
+    background-color: var(--accent-colour);
 }
 input.dirty, textarea.dirty, select.dirty {
-    border-color: var(--c_purple_dark);
+    border-color: var(--border-colour);
 }
 
 
@@ -288,15 +306,15 @@ button, .button-submit, input[type="submit"] {
     border-radius: 2vh;
     padding: 1vh 2vh 1vh 2vh;
     margin: 0.5vh;
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    color: var(--primary-colour);
+    border-color: var(--border-colour);
 }
 
 button.navContactUs {
-    border: 4px solid var(--c_purple_dark);
+    border: 4px solid var(--border-colour);
     background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark) !important;
+    /* color: var(--c_purple_dark) !important; */
     border-radius: 2vh;
     width: 180px !important;
 }
@@ -354,7 +372,7 @@ h5 {
     right: 0;
     width: 100px;
     /* height: 50%; */ 
-    background: var(--c_purple_pastel);
+    background: var(--background-colour);
     justify-content: right;
     align-items: right;
     align-self: right;
@@ -377,7 +395,7 @@ h5 {
     max-height: 80%;
 }
 .hamburger {
-    border: 2px solid var(--c_purple_dark);
+    border: 2px solid var(--border-colour);
     border-radius: 4px;
 }
 .hamburger:first-child {
@@ -396,14 +414,14 @@ h5 {
     justify-content: center;
     text-align: center;
     width: 100%;
-    color: var(--c_purple_dark);
+    /* color: var(--text-colour); */
     font-weight: bold;
     font-size: 18px;
     /* height: 18px; */
 }
 .hamburger > :hover {
-    background-color: var(--c_purple_light);
-    color: var(--c_purple_dark);
+    color: var(--background-colour);
+    background-color: var(--primary-colour);
 }
 .hamburger > * > * {
     width: 100%;
@@ -417,10 +435,6 @@ h5 {
     padding-bottom: 4.5px;
 }
 
-#overlayHamburger .row *:hover {
-    text-decoration: underline;
-}
-
 /* Confirm overlay */
 #overlayConfirm {
     position: absolute;
@@ -439,7 +453,7 @@ thead, tbody {
 }
 
 th {
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 td {
     font-size: min(12px, calc(1vh * 3));
@@ -449,7 +463,7 @@ th, td {
     min-width: fit-content;
 }
 tr:not(:last-child) > td {
-    border-bottom: 1px dashed var(--c_purple_dark);
+    border-bottom: 1px dashed var(--border-colour);
 }
 td > table > tbody > tr > td {
     border: none !important;
@@ -458,17 +472,18 @@ th.collapsed, td.collapsed {
     display: table-cell !important;
 }
 td.dirty {
-    background-color: var(--c_purple_dark);
+    background-color: var(--primary-colour);
 }
 td:not(.dirty) {
     /* color: var(--c_purple_dark); */
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 
 tr {
     min-height: 1px;
-    border-bottom: 1px solid var(--c_purple_dark);
-    border-top: 1px solid var(--c_purple_dark);
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    border-color: var(--border-colour);
     background-color: transparent;
 }
 
@@ -484,11 +499,11 @@ table button {
 }
 
 table button.active {
-    background-color: var(--c_purple_pastel);
+    background-color: var(--background-colour);
 }
 
 tr.delete, tr.delete > td {
-    background-color: red;
+    background-color: var(--c-red);
 }
 
 table div {
@@ -513,7 +528,7 @@ table div {
 .topnav a, .topnav label, .topnav p, .topnav h1 {
     float: left;
     display: flex;
-    color: white;
+    /* color: white; */
     text-align: center;
     text-decoration: none;
     width: 100%;
@@ -522,8 +537,8 @@ table div {
     justify-content: center;
 }
 .topnav a:hover {
-    background-color: var(--c_purple_light);
-    color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
 }
 
 .topnav > .container {
@@ -539,9 +554,11 @@ table div {
     padding: 1vh;
     margin: 1vh;
     border-radius: 1vh;
-    /* background-color: var(--c_purple_light); */
-    color: var(--c_purple_dark);
-    border: 2px solid white;
+    /*
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark); 
+    */
+    border: 2px solid var(--border-colour);
     font-weight: bold;
     text-align: center;
 }
@@ -554,7 +571,6 @@ table div {
 
 .company-name {
     font-size: min(28px, calc(1vh * 7));
-    color: white;
 }
 @media screen and (max-width: 450px) {
     .company-name {
@@ -596,7 +612,7 @@ form.filter button.save, form.filter button.button-cancel {
 }
 form.filter button.save, form.filter button.button-cancel {
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: 1px;
 }
 
 /* Footer */
@@ -608,9 +624,11 @@ form.filter button.save, form.filter button.button-cancel {
     margin: 0;
     height: 8vh !important;
     overflow-y: auto;
-    background-color: var(--c_purple_pastel);
+    background-color: var(--accent-colour);
+    /*
     border-top-left-radius: 2.5vh;
     border-top-right-radius: 2.5vh;
+    */
     position: absolute;
     /* top: 2.5vh; */
     bottom: 0;
@@ -668,49 +686,52 @@ form.filter button.save, form.filter button.button-cancel {
 
 
 :root {
-    --background-color: #ffffff;
-    --text-color: #333333;
-    --primary-color: #007bff;
-    --secondary-color: #6c757d;
-    --success-color: #28a745;
-    --danger-color: #dc3545;
-    --warning-color: #ffc107;
-    --info-color: #17a2b8;
-    --light-color: #f8f9fa;
-    --dark-color: #343a40;
-    --border-color: #dee2e6;
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    /* --background-colour: #ffffff; */
+    --text-colour: var(--c_purple_darker);
+    --primary-colour: var(--c_purple_dark);
+    --secondary-colour: var(--c_purple);
+    --accent-colour: var(--c_purple_light);
+    --background-colour: var(--c_purple_lighter);
+    --success-colour: #28a745;
+    --danger-colour: #dc3545;
+    --warning-colour: #ffc107;
+    --info-colour: #17a2b8;
+    --light-colour: var(--c_purple_light);
+    --dark-colour: var(--c_purple_dark);
+    --border-colour: var(--c_purple_dark);
+    --shadow-colour: rgba(0, 0, 0, 0.1);
     
-    /* Header */
+    /* Header * /
     --header-bg: #f8f9fa;
     --header-text: #333333;
     
-    /* Footer */
+    /* Footer * /
     --footer-bg: #f8f9fa;
     --footer-text: #6c757d;
     
-    /* Navigation */
+    /* Navigation * /
     --nav-bg: #ffffff;
     --nav-text: #333333;
     --nav-hover-bg: #f1f3f5;
     --nav-hover-text: #007bff;
     
-    /* Buttons */
+    /* Buttons * /
     --Button-primary-bg: #007bff;
     --Button-primary-text: #ffffff;
     --Button-secondary-bg: #6c757d;
     --Button-secondary-text: #ffffff;
     
-    /* Forms */
+    /* Forms * /
     --input-bg: #ffffff;
     --input-border: #ced4da;
     --input-text: #495057;
     --input-focus-border: #80bdff;
     
-    /* Cards */
+    /* Cards * /
     --card-bg: #ffffff;
     --card-border: #dee2e6;
     --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    */
 }
 
 /*# sourceMappingURL=main.bundle.css.map*/
\ No newline at end of file
diff --git a/static/dist/css/store_home.bundle.css b/static/dist/css/store_home.bundle.css
index 8c7baf61..549bbdfe 100644
--- a/static/dist/css/store_home.bundle.css
+++ b/static/dist/css/store_home.bundle.css
@@ -14,15 +14,15 @@
 }
 
 .buttonAddToBasket {
-    background-color: var(--c_blue_pastel);
-    color: var(--c_blue_dark);
-    border-color: var(--c_blue_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_blue_dark); */
+    border-color: var(--border-colour);
 }
 
 #buttonCheckout, .buttonBuyNow {
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
+    border-color: var(--border-colour);
 }
 
 .button-increment, .button-decrement {
diff --git a/static/dist/css/store_product_categories.bundle.css b/static/dist/css/store_product_categories.bundle.css
index 4ace60b7..4ea06ef3 100644
--- a/static/dist/css/store_product_categories.bundle.css
+++ b/static/dist/css/store_product_categories.bundle.css
@@ -14,15 +14,15 @@
 }
 
 .buttonAddToBasket {
-    background-color: var(--c_blue_pastel);
-    color: var(--c_blue_dark);
-    border-color: var(--c_blue_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_blue_dark); */
+    border-color: var(--border-colour);
 }
 
 #buttonCheckout, .buttonBuyNow {
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
+    border-color: var(--border-colour);
 }
 
 .button-increment, .button-decrement {
@@ -109,7 +109,7 @@
 }
 
 td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
-    border: 2px solid var(--c_purple);
+    border: 2px solid var(--border-colour);
     border-radius: 0.5vh;
 }
 
diff --git a/static/dist/css/store_product_permutations.bundle.css b/static/dist/css/store_product_permutations.bundle.css
index c94b2239..e79e8182 100644
--- a/static/dist/css/store_product_permutations.bundle.css
+++ b/static/dist/css/store_product_permutations.bundle.css
@@ -14,15 +14,15 @@
 }
 
 .buttonAddToBasket {
-    background-color: var(--c_blue_pastel);
-    color: var(--c_blue_dark);
-    border-color: var(--c_blue_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_blue_dark); */
+    border-color: var(--border-colour);
 }
 
 #buttonCheckout, .buttonBuyNow {
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
+    border-color: var(--border-colour);
 }
 
 .button-increment, .button-decrement {
diff --git a/static/dist/css/store_stock_items.bundle.css b/static/dist/css/store_stock_items.bundle.css
index 593ab181..967fb5ce 100644
--- a/static/dist/css/store_stock_items.bundle.css
+++ b/static/dist/css/store_stock_items.bundle.css
@@ -14,15 +14,15 @@
 }
 
 .buttonAddToBasket {
-    background-color: var(--c_blue_pastel);
-    color: var(--c_blue_dark);
-    border-color: var(--c_blue_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_blue_dark); */
+    border-color: var(--border-colour);
 }
 
 #buttonCheckout, .buttonBuyNow {
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    /* color: var(--c_purple_dark); */
+    border-color: var(--border-colour);
 }
 
 .button-increment, .button-decrement {
diff --git a/static/dist/js/core_admin_home.bundle.js b/static/dist/js/core_admin_home.bundle.js
index b7f572da..6e543b60 100644
--- a/static/dist/js/core_admin_home.bundle.js
+++ b/static/dist/js/core_admin_home.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 497:
+/***/ 561:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 647:
+/***/ 711:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			780: 0,
-/******/ 			564: 0
+/******/ 			466: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [564], () => (__webpack_require__(647)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(497)))
+/******/ 	__webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(561)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/core_contact.bundle.js b/static/dist/js/core_contact.bundle.js
index f171a7ec..9d39c392 100644
--- a/static/dist/js/core_contact.bundle.js
+++ b/static/dist/js/core_contact.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 206:
+/***/ 278:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 647:
+/***/ 711:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			775: 0,
-/******/ 			564: 0
+/******/ 			466: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [564], () => (__webpack_require__(647)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(206)))
+/******/ 	__webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(278)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/core_home.bundle.js b/static/dist/js/core_home.bundle.js
index 81cafc5f..53bb722c 100644
--- a/static/dist/js/core_home.bundle.js
+++ b/static/dist/js/core_home.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 469:
+/***/ 805:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 647:
+/***/ 711:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			664: 0,
-/******/ 			564: 0
+/******/ 			466: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [564], () => (__webpack_require__(647)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(469)))
+/******/ 	__webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(805)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/core_services.bundle.js b/static/dist/js/core_services.bundle.js
index b26c5ab7..ea715ef1 100644
--- a/static/dist/js/core_services.bundle.js
+++ b/static/dist/js/core_services.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 396:
+/***/ 188:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 647:
+/***/ 711:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			405: 0,
-/******/ 			564: 0
+/******/ 			466: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [564], () => (__webpack_require__(647)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [564], () => (__webpack_require__(396)))
+/******/ 	__webpack_require__.O(undefined, [466], () => (__webpack_require__(711)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [466], () => (__webpack_require__(188)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/legal_accessibility_statement.bundle.js b/static/dist/js/legal_accessibility_statement.bundle.js
index 6a4f7c11..6412d1ae 100644
--- a/static/dist/js/legal_accessibility_statement.bundle.js
+++ b/static/dist/js/legal_accessibility_statement.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 132:
+/***/ 780:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 807:
+/***/ 359:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			841: 0,
-/******/ 			830: 0
+/******/ 			416: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [830], () => (__webpack_require__(807)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(132)))
+/******/ 	__webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(780)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/legal_license.bundle.js b/static/dist/js/legal_license.bundle.js
index 2c4f3a66..303e433f 100644
--- a/static/dist/js/legal_license.bundle.js
+++ b/static/dist/js/legal_license.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 527:
+/***/ 623:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 807:
+/***/ 359:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			690: 0,
-/******/ 			830: 0
+/******/ 			416: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [830], () => (__webpack_require__(807)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(527)))
+/******/ 	__webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(623)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/legal_privacy_policy.bundle.js b/static/dist/js/legal_privacy_policy.bundle.js
index 260c6aeb..fc95391f 100644
--- a/static/dist/js/legal_privacy_policy.bundle.js
+++ b/static/dist/js/legal_privacy_policy.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 649:
+/***/ 713:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 807:
+/***/ 359:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			364: 0,
-/******/ 			830: 0
+/******/ 			416: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [830], () => (__webpack_require__(807)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(649)))
+/******/ 	__webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(713)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/legal_retention_schedule.bundle.js b/static/dist/js/legal_retention_schedule.bundle.js
index 6faac6c5..1a032edc 100644
--- a/static/dist/js/legal_retention_schedule.bundle.js
+++ b/static/dist/js/legal_retention_schedule.bundle.js
@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 954:
+/***/ 930:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -10,7 +10,7 @@
 
 /***/ }),
 
-/***/ 807:
+/***/ 359:
 /***/ (() => {
 
 // extracted by mini-css-extract-plugin
@@ -94,7 +94,7 @@
 /******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
 /******/ 		var installedChunks = {
 /******/ 			607: 0,
-/******/ 			830: 0
+/******/ 			416: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -144,8 +144,8 @@
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [830], () => (__webpack_require__(807)))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [830], () => (__webpack_require__(954)))
+/******/ 	__webpack_require__.O(undefined, [416], () => (__webpack_require__(359)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [416], () => (__webpack_require__(930)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()
diff --git a/static/dist/js/main.bundle.js b/static/dist/js/main.bundle.js
index b403cae4..19812ea3 100644
--- a/static/dist/js/main.bundle.js
+++ b/static/dist/js/main.bundle.js
@@ -167,8 +167,6 @@ function dom_createClass(e, r, t) { return r && dom_defineProperties(e.prototype
 function dom_toPropertyKey(t) { var i = dom_toPrimitive(t, "string"); return "symbol" == dom_typeof(i) ? i : i + ""; }
 function dom_toPrimitive(t, r) { if ("object" != dom_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != dom_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
-
-// Module for DOM manipulation
 var DOM = /*#__PURE__*/function () {
   function DOM() {
     dom_classCallCheck(this, DOM);
@@ -538,8 +536,6 @@ function api_createClass(e, r, t) { return r && api_defineProperties(e.prototype
 function api_toPropertyKey(t) { var i = api_toPrimitive(t, "string"); return "symbol" == api_typeof(i) ? i : i + ""; }
 function api_toPrimitive(t, r) { if ("object" != api_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != api_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
-
-// Module for API calls
 var api_API = /*#__PURE__*/function () {
   function API() {
     api_classCallCheck(this, API);
@@ -896,7 +892,6 @@ var api_API = /*#__PURE__*/function () {
 const api = new API();
 export default api;
 
-Example of using the API
 document.addEventListener('DOMContentLoaded', () => {
     initializeApp();
     setupEventListeners();
@@ -3270,7 +3265,7 @@ var StoreMixinPage = /*#__PURE__*/function () {
               ajaxData[flagForm] = convertForm2JSON(elForm);
               console.log('sending data to currency selector controller: '); console.log(ajaxData);
               ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
-                let optionSelected = elSelector.options[elSelector.selectedIndex]
+               let optionSelected = elSelector.options[elSelector.selectedIndex]
               let textSelected = optionSelected.getAttribute(attrDataShort)
               
           });
@@ -3471,7 +3466,7 @@ var StoreMixinPage = /*#__PURE__*/function () {
           // goToPage(hashPageStoreBasket);
           let ajaxData = {};
           ajaxData[keyBasket] = basket;
-            ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
+           ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
           */
           this.router.navigateToHash(hashPageStoreBasket);
         });
@@ -4125,7 +4120,7 @@ var PageStoreManufacturingPurchaseOrders = /*#__PURE__*/function (_TableBasePage
       inputCostTotalLocalVatExcl.step = 0.01;
       DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatExcl, orderItem[flagCostTotalLocalVatExcl]);
       tdCostTotalLocalVatExcl.appendChild(inputCostTotalLocalVatExcl);
-        let tdCostTotalLocalVatIncl = document.createElement("td");
+       let tdCostTotalLocalVatIncl = document.createElement("td");
       tdCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
       let inputCostTotalLocalVatIncl = document.createElement("input");
       inputCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
@@ -4133,13 +4128,13 @@ var PageStoreManufacturingPurchaseOrders = /*#__PURE__*/function (_TableBasePage
       inputCostTotalLocalVatIncl.step = 0.01;
       DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatIncl, orderItem[flagCostTotalLocalVatIncl]);
       tdCostTotalLocalVatIncl.appendChild(inputCostTotalLocalVatIncl);
-        let tdCostUnitLocalVatExcl = document.createElement("td");
+       let tdCostUnitLocalVatExcl = document.createElement("td");
       tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
       let divCostUnitLocalVatExcl = document.createElement("div");
       divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
       DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, orderItem[flagCostUnitLocalVatExcl]);
       tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
-        let tdCostUnitLocalVatIncl = document.createElement("td");
+       let tdCostUnitLocalVatIncl = document.createElement("td");
       tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
       let divCostUnitLocalVatIncl = document.createElement("div");
       divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
@@ -4253,10 +4248,10 @@ var PageStoreManufacturingPurchaseOrders = /*#__PURE__*/function (_TableBasePage
         let priceTotalLocalVatExcl = DOM.getElementValueCurrent(inputPriceTotalLocalVatExcl);
         let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
         let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
-          let divPriceUnitLocalVatExcl = row.querySelector('td.' + flagPriceUnitLocalVatExcl + ' div');
+         let divPriceUnitLocalVatExcl = row.querySelector('td.' + flagPriceUnitLocalVatExcl + ' div');
         let priceUnitLocalVatExcl = quantityUsed == 0 ? 0 : priceTotalLocalVatExcl / quantityUsed;
         DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatExcl, priceUnitLocalVatExcl);
-          let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+         let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
         let divPriceGrandTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatExcl + ' div');
         let inputsPriceTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatExcl + ' input');
         let priceGrandTotalLocalVatExcl = Array.from(inputsPriceTotalLocalVatExcl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
@@ -4268,10 +4263,10 @@ var PageStoreManufacturingPurchaseOrders = /*#__PURE__*/function (_TableBasePage
         let priceTotalLocalVatIncl = DOM.getElementValueCurrent(inputPriceTotalLocalVatIncl);
         let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
         let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
-          let divPriceUnitLocalVatIncl = row.querySelector('td.' + flagPriceUnitLocalVatIncl + ' div');
+         let divPriceUnitLocalVatIncl = row.querySelector('td.' + flagPriceUnitLocalVatIncl + ' div');
         let priceUnitLocalVatIncl = quantityUsed == 0 ? 0 : priceTotalLocalVatIncl / quantityUsed;
         DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatIncl, priceUnitLocalVatIncl);
-          let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+         let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
         let divPriceGrandTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatIncl + ' div');
         let inputsPriceTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatIncl + ' input');
         let priceGrandTotalLocalVatIncl = Array.from(inputsPriceTotalLocalVatIncl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
@@ -4647,7 +4642,7 @@ var PageStoreProductPermutations = /*#__PURE__*/function (_TableBasePage) {
       DOM.setElementValuesCurrentAndPrevious(inputQuantityMax, rowJson[flagQuantityMax]);
       let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
       DOM.setElementValuesCurrentAndPrevious(inputQuantityStep, rowJson[flagCountUnitMeasurementPerQuantityStep]);
-            row.querySelector('td.' + flagQuantityStock + ' input').value = rowJson[flagQuantityStock];
+         row.querySelector('td.' + flagQuantityStock + ' input').value = rowJson[flagQuantityStock];
       row.querySelector('td.' + flagQuantityMin + ' input').value = rowJson[flagQuantityMin];
       row.querySelector('td.' + flagQuantityMax + ' input').value = rowJson[flagQuantityMax];
       row.querySelector('td.' + flagCostLocal).innerHTML = rowJson[flagCostLocal];
@@ -6926,43 +6921,10 @@ function router_toPrimitive(t, r) { if ("object" != router_typeof(t) || !t) retu
 // import PageUserLogout from './pages/user/logout.js';
 // import PageUserAccount from './pages/user/account.js';
 
-/*
-import "./lib/common.js";
-import "./lib/constants.js";
-import "./lib/events.js";
-import "./lib/extras.js";
-// import "./DEPRECATED/init.js";
-import "./lib/local_storage.js";
-import "./lib/utils.js";
-import "./lib/validation.js";
-*/
 
 
 
 
-
-
-// Create a context for the pages
-// const pagesContext = require.context('./pages', true, /\.js$/);
-
-/*
-const pageModules = {
-    // Core
-    [hashPageHome]: () => import('./pages/core/home.js'),
-    [hashPageContact]: () => import('./pages/core/contact.js'),
-    [hashPageServices]: () => import('./pages/core/services.js'),
-    [hashPageAdminHome]: () => import('./pages/core/admin_home.js'),
-    // Legal
-    [hashPageAccessibilityStatement]: () => import('./pages/legal/accessibility_statement.js'),
-    [hashPageLicense]: () => import('./pages/legal/license.js'),
-    // Store
-    [hashPageStoreProductCategories]: () => import('./pages/store/product_categories.js'),
-    [hashPageStoreProductPermutations]: () => import('./pages/store/product_permutations.js'),
-    // [hashPageStoreProducts]: () => import('./pages/store/products.js'),
-    // User
-    // Add other pages here...
-};
-*/
 var Router = /*#__PURE__*/function () {
   function Router() {
     var _this = this;
@@ -7236,10 +7198,10 @@ var Router = /*#__PURE__*/function () {
         console.log("pages: ", pages);
         return pages;
     }
-      addRoute(path, handler) {
+     addRoute(path, handler) {
         this.routes[path] = handler;
     }
-      handlePopState(event) {
+     handlePopState(event) {
         /*
         let url = window.location.pathname;
         url = url.split('?')[0];
@@ -7250,11 +7212,11 @@ var Router = /*#__PURE__*/function () {
         let pageCurrent = Router.getPageCurrent();
         pageCurrent.initialize(true);
     }
-      navigateToHash(hash, data = null) {
+     navigateToHash(hash, data = null) {
         const url = API.getUrlFromHash(hash);
         this.navigateToUrl(url, data);
     }
-        leavePageCurrent() {
+      leavePageCurrent() {
         const pageCurrent = Router.getPageCurrent();
         if (pageCurrent) pageCurrent.leave();
     }
@@ -7272,7 +7234,7 @@ var Router = /*#__PURE__*/function () {
         }
         throw new Error('Page not found: ' + hashPageCurrent);
     }
-      static parameteriseUrl(url, parameters) {
+     static parameteriseUrl(url, parameters) {
         if (!Validation.isEmpty(parameters)) {
             url += '%3F'; // '?';
             let firstParameter = true;
@@ -7301,7 +7263,7 @@ var Router = /*#__PURE__*/function () {
             // Optionally, handle 404 or redirect to a default route
         }
     }
-      handleRouteHash(hash) {
+     handleRouteHash(hash) {
         if (this.routes[hash]) {
             this.routes[hash]();
         } else {
@@ -7326,7 +7288,7 @@ var Router = /*#__PURE__*/function () {
     static getQueryParams() {
         return Object.fromEntries(new URLSearchParams(window.location.search));
     }
-      static updateQueryParams(params) {
+     static updateQueryParams(params) {
         const searchParams = new URLSearchParams(window.location.search);
         for (const [key, value] of Object.entries(params)) {
             searchParams.set(key, value);
@@ -7341,12 +7303,10 @@ var Router = /*#__PURE__*/function () {
       DOM.loadPageBody(response.data);
     }
   }]);
-}(); // Create and export a singleton instance
+}();
 
 var router = new Router();
-// import this for navigation
 
-// Usage example (you can put this in your main.js or app.js)
 /*
 router.addRoute('/', () => {
     console.log('Home page');
@@ -7358,7 +7318,6 @@ router.addRoute('/about', () => {
     // Load about page content
 });
 
-// Example of how to use the router in other parts of your application
 export function setupNavigationEvents() {
     document.querySelectorAll('a[data-nav]').forEach(link => {
         link.addEventListener('click', (e) => {
@@ -7370,32 +7329,8 @@ export function setupNavigationEvents() {
 }
 */
 ;// CONCATENATED MODULE: ./static/js/app.js
-/*
-// Bundle css imports
-import '../css/lib/reset.css';
-import '../css/lib/typography.css';
-import '../css/lib/variables.css';
-import '../css/lib/utils.css';
-
-import '../css/layouts/header.css';
-import '../css/layouts/footer.css';
-import '../css/layouts/table-main.css'
-
-import '../css/components/button.css';
-import '../css/components/card.css';
-import '../css/components/dialog.css';
-import '../css/components/form.css';
-import '../css/components/modal.css';
-import '../css/components/navigation.css';
-import '../css/components/overlay.css';
-
-import '../css/sections/store.css';
-*/
-
-// Main entry point for the application
 
 
-// import API from './api.js';
 function app_typeof(o) { "@babel/helpers - typeof"; return app_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, app_typeof(o); }
 function app_classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function app_defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, app_toPropertyKey(o.key), o); } }
@@ -7419,35 +7354,24 @@ var App = /*#__PURE__*/function () {
   }, {
     key: "setupEventListeners",
     value: function setupEventListeners() {
-      // Global event listeners
       // document.addEventListener('click', this.handleGlobalClick.bind(this));
-      // Add more global event listeners as needed
     }
   }, {
     key: "handleGlobalClick",
-    value: function handleGlobalClick(event) {
-      // Handle global click events
-    }
+    value: function handleGlobalClick(event) {}
   }, {
     key: "start",
     value: function start() {
-      // Additional startup logic
       this.initPageCurrent();
     }
   }, {
     key: "initPageCurrent",
     value: function initPageCurrent() {
-      /*
-      _pageCurrent = Router.getPageCurrent();
-      _pageCurrent.initialize();
-      */
       this.router.loadPageCurrent();
     }
   }]);
-}(); // Application instance
+}();
 var app = new App();
-
-// DOM ready handler
 function domReady(fn) {
   if (document.readyState !== 'loading') {
     fn();
@@ -7455,16 +7379,10 @@ function domReady(fn) {
     document.addEventListener('DOMContentLoaded', fn);
   }
 }
-
-// Initialize and start the app when DOM is ready
 domReady(function () {
   app.initialize();
 });
-
-// Expose app to window for debugging (optional)
 window.app = app;
-
-// Export app if using modules
 /* harmony default export */ const js_app = ((/* unused pure expression or super */ null && (app)));
 })();
 
diff --git a/templates/layouts/layout.html b/templates/layouts/layout.html
index 57c2647b..a6f7e513 100644
--- a/templates/layouts/layout.html
+++ b/templates/layouts/layout.html
@@ -339,9 +339,11 @@
         </div>
     {% endif %}
     {% if model.user.is_logged_in %}
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
-            <a class="{{ model.FLAG_NAV_USER_ACCOUNT }}">Account</a>
-        </div>
+        {#
+            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
+                <a class="{{ model.FLAG_NAV_USER_ACCOUNT }}">Account</a>
+            </div>
+        #}
         <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
             <a class="{{ model.FLAG_NAV_USER_LOGOUT }}">Logout</a>
         </div>
diff --git a/templates/pages/core/_home.html b/templates/pages/core/_home.html
index 97b3da5e..9c2999c0 100644
--- a/templates/pages/core/_home.html
+++ b/templates/pages/core/_home.html
@@ -5,8 +5,8 @@
 {% block page_body %}
     <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_home.bundle.css') }}">
 
-    <div>
-        <h2 style="font-size: 24px; color: white; font-weight: normal;">We make websites, web apps, and desktop software</h2>
+    <div class="home-hero">
+        <h2 class="home-hero-title">We make websites, web apps, and desktop software</h2>
         {% set block_id = 'button_get_in_touch' %}
         {% include 'components/common/buttons/_buttons_save_cancel.html' %}
     </div>
diff --git a/templates/pages/core/_services.html b/templates/pages/core/_services.html
index 373e2fa4..7283f623 100644
--- a/templates/pages/core/_services.html
+++ b/templates/pages/core/_services.html
@@ -7,7 +7,7 @@
 {% block page_body %}
     <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_services.bundle.css') }}">
     
-    <div class="{{ model.FLAG_CARD }}">
+    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_SERVICES }}">
         <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
             <h1>Services</h1>
             <h2>Website, Web App, & Desktop Software Development</h2>
@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <div class="{{ model.FLAG_CARD }}">
+    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_TECHNOLOGIES }}">
         <h1>Technologies</h1>
         <p>We are most experienced with these technologies, in case you have any requirements.</p>
         <table>
@@ -82,7 +82,7 @@
         </table>
     </div>
     
-    <div class="{{ model.FLAG_CARD }}">
+    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_FAQ }}">
         <h1>FAQs</h1>
         <h2>Websites, Web apps, and Software - what's the difference?</h2>
         <ul>