Index: lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java
===================================================================
diff -u -r365a2c22199a5fe2b1e55e18cbf4b6d2596f202b -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java	(.../PortraitTag.java)	(revision 365a2c22199a5fe2b1e55e18cbf4b6d2596f202b)
+++ lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java	(.../PortraitTag.java)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -43,7 +43,7 @@
 public class PortraitTag extends BodyTagSupport {
     private static final long serialVersionUID = -3143529984657965761L;
     private static final Logger log = Logger.getLogger(PortraitTag.class);
-    private static final int NUM_COLORS = 7;
+    private static final int NUM_COLORS = 6;
     private IUserManagementService userManagementService;
 
     private static final String CSS_ROUND = " portrait-round";
Index: lams_central/web/css/authoring-svg.css
===================================================================
diff -u -rfb2e534f60cd5b148214a23587f20140dc1bd2dd -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/css/authoring-svg.css	(.../authoring-svg.css)	(revision fb2e534f60cd5b148214a23587f20140dc1bd2dd)
+++ lams_central/web/css/authoring-svg.css	(.../authoring-svg.css)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1,12 +1,21 @@
+:root{
+	--lams-blue: #0175E2;
+	--lams-yellow: #F9F871;
+	--lams-green: #00914A;
+	--lams-red: #D73961;
+	--lams-opacity: 0.5;
+	--lams-low-opacity: 0.25;
+}
+
 .svg-tool-activity-border {
 	fill: none;
-	stroke: #b6b6b6;
+	stroke: var(--bs-gray);
 	stroke-width: 1;
 }
 
 .svg-tool-activity-border-require-grouping {
 	fill: none;
-	stroke: red;
+	stroke: var(--lams-red);
 	stroke-width: 3;
 }
 
@@ -21,33 +30,35 @@
 
 .svg-tool-activity-category-1 {
 	stroke: none;
-	fill: #caddfb;
+	fill: var(--lams-blue);
+	opacity: var(--lams-low-opacity);
 }
 
 .svg-tool-activity-category-2 {
 	stroke: none;
-	fill: #ffffbb;
+	fill: var(--lams-yellow);
+	opacity: var(--lams-opacity);
 }
 
 .svg-tool-activity-category-3 {
-	fill: #2DBCE9;
-	opacity: 0.25;
+	fill: var(--lams-blue);
+	opacity: var(--lams-opacity);
 }
 
 .svg-tool-activity-category-4 {
-	fill: #FF72AC;
-	opacity: 0.25;	
-
+	fill: var(--lams-red);
+	opacity: var(--lams-opacity);	
 }
 
 .svg-tool-activity-category-5 {
 	stroke: none;
-	fill: #caddfb;
+	fill: var(--lams-blue);
+	opacity: var(--lams-low-opacity);
 }
 
 .svg-tool-activity-category-6 {
-	fill: #1AD9B2;
-	opacity: 0.25;
+	fill: var(--lams-green);
+	opacity: var(--lams-opacity);
 }
 
 .svg-activity-title-label {
@@ -75,41 +86,42 @@
 }
 
 .svg-branching-start {
-	stroke: green;
+	stroke: var(--lams-green);
 }
 
 .svg-branching-end {
-	stroke: red;
+	stroke: var(--lams-red);
 }
 
 .svg-branching-match {
-	stroke: blue;
+	stroke: var(--lams-blue);
 }
 
 .svg-annotation-container {
-	stroke: #b6b6b6;
+	stroke: var(--bs-gray);
 }
 
 .svg-activity-optional .svg-annotation-container,
 .svg-activity-parallel .svg-annotation-container,
 .svg-activity-floating .svg-annotation-container {
-	fill : #f0f8ff;
+	fill: var(--lams-blue);
+	opacity: var(--lams-low-opacity);
 }
 
 .svg-transition {
 	stroke-width: 1;
-	stroke: rgb(119, 126, 157);
+	stroke: var(--bs-gray);
 	fill: none;
 }
 
 .svg-transition-element {
-	stroke: rgb(119, 126, 157);
-	fill: rgb(119, 126, 157);
+	stroke: var(--bs-gray);
+	fill: var(--bs-gray);
 }
 
 .svg-transition-draw {
 	stroke-width: 2;
-	stroke: rgb(119, 126, 157);
+	stroke: var(--bs-gray);
 	stroke-dasharray: 5, 3;
 }
 
Index: lams_central/web/css/bootstrap5.custom.scss
===================================================================
diff -u -r9f4482aa1d29f454f091420cc38d3b27a3f4cc8f -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision 9f4482aa1d29f454f091420cc38d3b27a3f4cc8f)
+++ lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1,15 +1,18 @@
 /* LAMS custom palette 
-   https://coolors.co/f8f8f8-a6aabd-0175e2-f9f871-00914a-d73961
+   https://coolors.co/f8f8f8-0175e2-f9f871-00914a-d73961
 */
-$blue: #0175E2;
-$yellow: #F9F871;
-$green: #00914A;
-$red: #D73961;
-$gray: #A6AABD;
+$blue: #0175E2; /* rgb(1, 117, 226) */
+$yellow: #F9F871; /* rgb(249, 248, 113) */
+$green: #00914A; /* rgb(0, 145, 74) */
+$red: #D73961; /* rgb(215, 57, 97) */
 
 
 @import "bootstrap/bootstrap.scss";
 
 :root {
-	--lams-background-gray: #F8F8F8;
+	--lams-background-gray: #F8F8F8; /* rgb(248, 248, 248) */
+}
+
+.btn-success, .btn-success:hover{
+	color: $white;
 }
\ No newline at end of file
Index: lams_central/web/css/components.css
===================================================================
diff -u -r31afff99da6da76fe6c33c0eaba09f57a02ca1ac -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/css/components.css	(.../components.css)	(revision 31afff99da6da76fe6c33c0eaba09f57a02ca1ac)
+++ lams_central/web/css/components.css	(.../components.css)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1,5 +1,5 @@
 body.component {
-	background-color: #E4E4E4;
+	background-color: var(--lams-background-gray);
 }
 
 body.component .tooltip-inner {
@@ -28,7 +28,6 @@
 	min-height: 100vh;
 	border-radius: 2rem;
 	overflow: hidden;
-	background-color: #F6F5FA;
 }
 
 .component-page-wrapper input::-webkit-input-placeholder {
@@ -40,7 +39,7 @@
 }
 
 .component-page-wrapper label {
-	color: #6c757d;
+	color: var(--bs-gray);
 }
 
 .component-page-wrapper .btn {
@@ -368,30 +367,14 @@
 }
 
 .component-page-wrapper .component-menu-btn a {
-	color: #fff;
-	display: inline-block;
-	background-color: #3C42E0;
 	width: 3.1rem;
 	height: 3.1rem;
-	border-radius: 1rem;
-	text-align: center;
-	line-height: 2.8rem;
-	box-shadow: 0px 3px 6px #3C42E040;
-	transition: all .3s ease;
 }
 
 .component-page-wrapper .component-menu-btn a i.fa {
-	padding-top: 1.5rem;
+	padding-top: 1.09rem;
 }
 
-.component-page-wrapper .component-menu-btn a.active {
-	background-color: #878bea;
-}
-
-.component-page-wrapper .component-menu-btn a:hover {
-	background-color: #878bea;
-}
-
 .component-page-wrapper .component-menu-btn a img {
 	width: 1rem;
 }
@@ -511,7 +494,7 @@
 
 .switch input ~ label::before {
 	right: 0;
-	background-color: #dee2e6;
+	background-color: var(--bs-gray);
 	border-radius: calc(2.375rem * .8);
 	transition: 0.2s all;
 }
@@ -527,7 +510,7 @@
 }
 
 .switch input:checked ~ label::before {
-	background-color: #7fdaa1;
+	background-color: var(--bs-green);
 }
 
 .switch input:checked ~ label::after {
Index: lams_central/web/css/free.ui.jqgrid.custom.css
===================================================================
diff -u -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
+++ lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -10,7 +10,7 @@
 }
 
 .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
-	background-color: #F6F5FA;
+	background-color: var(--bs-gray-200);
 }
 
 .ui-jqgrid .ui-jqgrid-bdiv {
@@ -81,7 +81,7 @@
 }
 
 .table-hover tbody tr:hover {
-	background-color: #F6F5FA;
+	background-color: var(--bs-gray-200);
 }
 
 .ui-jqgrid .ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close {
Index: lams_central/web/css/vertical-timeline.css
===================================================================
diff -u -rbfa7dfb5557d54767b137652b34dd89c13fb1227 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/css/vertical-timeline.css	(.../vertical-timeline.css)	(revision bfa7dfb5557d54767b137652b34dd89c13fb1227)
+++ lams_central/web/css/vertical-timeline.css	(.../vertical-timeline.css)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -123,7 +123,7 @@
   background-clip: padding-box;
   border-radius: 50%;
   text-align: center;
-  border: 7px solid #ffffff;
+  border: 1px solid var(--bs-gray);
   line-height: 45px;
   font-size: 15px;
   float: left;
@@ -139,6 +139,7 @@
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
+  border: 1px solid var(--bs-gray);
 }
 .vertical-timeline .timeline-entry .timeline-entry-inner .timeline-label:after {
   content: '';
@@ -148,7 +149,7 @@
   height: 0;
   border-style: solid;
   border-width: 9px 9px 9px 0;
-  border-color: transparent #ffffff transparent transparent;
+  border-color: transparent var(--bs-gray) transparent transparent;
   left: 0;
   top: 20px;
   margin-left: -9px;
@@ -160,6 +161,12 @@
   margin: 5px 0 0 10px;
 }
 
+.vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon.activity-complete,
+.vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon.activity-current {
+	border-width: 7px;
+}
+
+
 .vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon.activity-complete ~ .timeline-label:after {
 	margin-left: -13px;
 	border-color: transparent var(--bs-success) transparent transparent;
@@ -180,5 +187,10 @@
 
 .vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon img {
 	width: 25px;
+	margin-top: 10px;
+}
+
+.vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon.activity-complete img,
+.vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon.activity-current img {
 	margin-top: -2px;
 }
\ No newline at end of file
Index: lams_central/web/images/svg/gateClosed.svg
===================================================================
diff -u -r4032b1b03d4bf650f44d7c49a5745e3524a876d7 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/images/svg/gateClosed.svg	(.../gateClosed.svg)	(revision 4032b1b03d4bf650f44d7c49a5745e3524a876d7)
+++ lams_central/web/images/svg/gateClosed.svg	(.../gateClosed.svg)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -20,7 +20,7 @@
 <style
    type="text/css"
    id="style1150">
-	svg.gateClosed .st0{fill:#FBA919;stroke:#111342;stroke-width:14.3597;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	svg.gateClosed .st0{fill:#D73961;stroke:#111342;stroke-width:14.3597;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 	svg.gateClosed .st1{display:none;}
 	
 		svg.gateClosed .st2{display:inline;fill:#FFFFFF;stroke:#111342;stroke-width:14.3597;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
@@ -32,7 +32,7 @@
    cx="256"
    class="st0"
    r="250.54585"
-   style="fill:#ff2a2a;stroke:#ff2a2a;stroke-width:8.9083;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" /><g
+   style="fill:#D73961;stroke:#D73961;stroke-width:8.9083;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" /><g
    id="g1158"
    class="st1">
 		<circle
Index: lams_central/web/images/svg/gateOpen.svg
===================================================================
diff -u -r4032b1b03d4bf650f44d7c49a5745e3524a876d7 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/images/svg/gateOpen.svg	(.../gateOpen.svg)	(revision 4032b1b03d4bf650f44d7c49a5745e3524a876d7)
+++ lams_central/web/images/svg/gateOpen.svg	(.../gateOpen.svg)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -20,7 +20,7 @@
 <style
    id="style833"
    type="text/css">
-	svg.gateOpen .st0{fill:#87CB9D;stroke:#111342;stroke-width:15.317;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	svg.gateOpen .st0{fill:#00914A;stroke:#111342;stroke-width:15.317;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 	svg.gateOpen .st1{display:none;}
 	
 	svg.gateOpen .st2{display:inline;fill:#FFFFFF;stroke:#111342;stroke-width:15.317;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
@@ -30,7 +30,7 @@
    transform="matrix(1.0296407,0,0,1.0296407,-7.5880272,-7.5880268)"
    id="g851">
 	<circle
-   style="fill:#00a700;fill-opacity:1;stroke:#00a700;stroke-width:15.3184;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+   style="fill:#00914A;fill-opacity:1;stroke:#00914A;stroke-width:15.3184;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
    r="240"
    id="circle835"
    cy="256"
Index: lams_central/web/images/svg/lamsv5_logo.svg
===================================================================
diff -u -rc4e2630bc5f7c4471aaa7bcd1cea0bbe6ae4d423 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/images/svg/lamsv5_logo.svg	(.../lamsv5_logo.svg)	(revision c4e2630bc5f7c4471aaa7bcd1cea0bbe6ae4d423)
+++ lams_central/web/images/svg/lamsv5_logo.svg	(.../lamsv5_logo.svg)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"  xmlns:v="https://vecta.io/nano"><path d="M512 1024c282.8 0 512-229.2 512-512S794.8 0 512 0 0 229.2 0 512s229.2 512 512 512" fill="#1fb1e9"/><path d="M77.3 617.6V423.9c0-11.2 9.1-20.7 20.7-20.7 11.2 0 20.4 9.5 20.4 20.7v179.4h87.1c9.8 0 18.3 8.1 18.3 17.9 0 10.2-8.4 18.3-18.3 18.3H99c-14-.1-21.7-7.8-21.7-21.9zm383.3 2.8c0 11.6-9.5 21.1-21.1 21.1-8.8 0-16.5-5.6-19.3-13.3l-12.3-33.7H295.6l-12.3 33.7c-2.8 7.7-10.5 13.3-19.3 13.3-11.6 0-21.1-9.5-21.1-21.1 0-2.5 1.1-5.3 1.8-7.4l73.4-186.7c5.3-13.3 18.3-23.2 33.7-23.2s28.4 9.8 33.7 23.2L458.9 613c.6 2.2 1.7 5 1.7 7.4zm-65.7-62.1L351.8 440l-43.2 118.3h86.3zm302.3 62.5V462.1l-69.9 172c-1.8 4.6-6 7.4-10.9 7.4s-9.1-2.8-10.9-7.4l-69.5-172v158.7c0 11.2-9.1 20.7-20.4 20.7-11.6 0-20.7-9.5-20.7-20.7V437.2c0-18.6 15.1-34 34-34 14.4 0 26.7 8.8 31.6 21.4l55.8 138.3 56.2-138.3c4.9-12.6 17.2-21.4 31.6-21.4 19 0 34 15.4 34 34v183.6c0 11.2-9.1 20.7-20.7 20.7-11.1 0-20.2-9.5-20.2-20.7zm80.7-18.3c0-10.9 8.8-19.7 19.3-19.7 4.6 0 8.8 1.4 11.9 3.9 16.1 11.9 36.2 20.4 60.7 20.4 33.7 0 47-16.5 47-31.9 0-21.1-24.9-27.4-53.4-34.8-38.3-9.5-83.2-20.7-83.2-70.2 0-38.6 34-68.5 88.8-68.5 27.4 0 49.5 7 72.3 21.4 5.3 3.2 8.8 9.1 8.8 15.8 0 10.5-8.8 19.3-19.3 19.3-4.2 0-8.1-1.4-10.9-3.5-16.8-11.2-36.5-16.5-54.4-16.5-27.7 0-43.2 11.6-43.2 29.1 0 18.3 23.9 24.2 51.6 31.2 38.6 9.8 84.6 21.8 84.6 72.7 0 39-27.4 72.3-90.6 72.3-34.8 0-61.8-9.8-82.5-25.6-4.3-3.4-7.5-9-7.5-15.4z" enable-background="new" fill="#fff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"  xmlns:v="https://vecta.io/nano"><path d="M512 1024c282.8 0 512-229.2 512-512S794.8 0 512 0 0 229.2 0 512s229.2 512 512 512" fill="#0175E2"/><path d="M77.3 617.6V423.9c0-11.2 9.1-20.7 20.7-20.7 11.2 0 20.4 9.5 20.4 20.7v179.4h87.1c9.8 0 18.3 8.1 18.3 17.9 0 10.2-8.4 18.3-18.3 18.3H99c-14-.1-21.7-7.8-21.7-21.9zm383.3 2.8c0 11.6-9.5 21.1-21.1 21.1-8.8 0-16.5-5.6-19.3-13.3l-12.3-33.7H295.6l-12.3 33.7c-2.8 7.7-10.5 13.3-19.3 13.3-11.6 0-21.1-9.5-21.1-21.1 0-2.5 1.1-5.3 1.8-7.4l73.4-186.7c5.3-13.3 18.3-23.2 33.7-23.2s28.4 9.8 33.7 23.2L458.9 613c.6 2.2 1.7 5 1.7 7.4zm-65.7-62.1L351.8 440l-43.2 118.3h86.3zm302.3 62.5V462.1l-69.9 172c-1.8 4.6-6 7.4-10.9 7.4s-9.1-2.8-10.9-7.4l-69.5-172v158.7c0 11.2-9.1 20.7-20.4 20.7-11.6 0-20.7-9.5-20.7-20.7V437.2c0-18.6 15.1-34 34-34 14.4 0 26.7 8.8 31.6 21.4l55.8 138.3 56.2-138.3c4.9-12.6 17.2-21.4 31.6-21.4 19 0 34 15.4 34 34v183.6c0 11.2-9.1 20.7-20.7 20.7-11.1 0-20.2-9.5-20.2-20.7zm80.7-18.3c0-10.9 8.8-19.7 19.3-19.7 4.6 0 8.8 1.4 11.9 3.9 16.1 11.9 36.2 20.4 60.7 20.4 33.7 0 47-16.5 47-31.9 0-21.1-24.9-27.4-53.4-34.8-38.3-9.5-83.2-20.7-83.2-70.2 0-38.6 34-68.5 88.8-68.5 27.4 0 49.5 7 72.3 21.4 5.3 3.2 8.8 9.1 8.8 15.8 0 10.5-8.8 19.3-19.3 19.3-4.2 0-8.1-1.4-10.9-3.5-16.8-11.2-36.5-16.5-54.4-16.5-27.7 0-43.2 11.6-43.2 29.1 0 18.3 23.9 24.2 51.6 31.2 38.6 9.8 84.6 21.8 84.6 72.7 0 39-27.4 72.3-90.6 72.3-34.8 0-61.8-9.8-82.5-25.6-4.3-3.4-7.5-9-7.5-15.4z" enable-background="new" fill="#fff"/></svg>
\ No newline at end of file
Index: lams_central/web/images/svg/lamsv5_logo_reverse.svg
===================================================================
diff -u -rc4e2630bc5f7c4471aaa7bcd1cea0bbe6ae4d423 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/images/svg/lamsv5_logo_reverse.svg	(.../lamsv5_logo_reverse.svg)	(revision c4e2630bc5f7c4471aaa7bcd1cea0bbe6ae4d423)
+++ lams_central/web/images/svg/lamsv5_logo_reverse.svg	(.../lamsv5_logo_reverse.svg)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"  xmlns:v="https://vecta.io/nano"><path d="M512 1024c282.8 0 512-229.2 512-512S794.8 0 512 0 0 229.2 0 512s229.2 512 512 512" fill="#fff"/><path d="M77.3 617.6V423.9c0-11.2 9.1-20.7 20.7-20.7 11.2 0 20.4 9.5 20.4 20.7v179.4h87.1c9.8 0 18.3 8.1 18.3 17.9 0 10.2-8.4 18.3-18.3 18.3H99c-14-.1-21.7-7.8-21.7-21.9zm383.3 2.8c0 11.6-9.5 21.1-21.1 21.1-8.8 0-16.5-5.6-19.3-13.3l-12.3-33.7H295.6l-12.3 33.7c-2.8 7.7-10.5 13.3-19.3 13.3-11.6 0-21.1-9.5-21.1-21.1 0-2.5 1.1-5.3 1.8-7.4l73.4-186.7c5.3-13.3 18.3-23.2 33.7-23.2s28.4 9.8 33.7 23.2L458.9 613c.6 2.2 1.7 5 1.7 7.4zm-65.7-62.1L351.8 440l-43.2 118.3zm302.3 62.5V462.1l-69.9 172c-1.8 4.6-6 7.4-10.9 7.4s-9.1-2.8-10.9-7.4l-69.5-172v158.7c0 11.2-9.1 20.7-20.4 20.7-11.6 0-20.7-9.5-20.7-20.7V437.2c0-18.6 15.1-34 34-34 14.4 0 26.7 8.8 31.6 21.4l55.8 138.3 56.2-138.3c4.9-12.6 17.2-21.4 31.6-21.4 19 0 34 15.4 34 34v183.6c0 11.2-9.1 20.7-20.7 20.7-11.1 0-20.2-9.5-20.2-20.7zm80.7-18.3c0-10.9 8.8-19.7 19.3-19.7 4.6 0 8.8 1.4 11.9 3.9 16.1 11.9 36.2 20.4 60.7 20.4 33.7 0 47-16.5 47-31.9 0-21.1-24.9-27.4-53.4-34.8-38.3-9.5-83.2-20.7-83.2-70.2 0-38.6 34-68.5 88.8-68.5 27.4 0 49.5 7 72.3 21.4 5.3 3.2 8.8 9.1 8.8 15.8 0 10.5-8.8 19.3-19.3 19.3-4.2 0-8.1-1.4-10.9-3.5-16.8-11.2-36.5-16.5-54.4-16.5-27.7 0-43.2 11.6-43.2 29.1 0 18.3 23.9 24.2 51.6 31.2 38.6 9.8 84.6 21.8 84.6 72.7 0 39-27.4 72.3-90.6 72.3-34.8 0-61.8-9.8-82.5-25.6-4.3-3.4-7.5-9-7.5-15.4z" enable-background="new" fill="#1fb1e9"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"  xmlns:v="https://vecta.io/nano"><path d="M512 1024c282.8 0 512-229.2 512-512S794.8 0 512 0 0 229.2 0 512s229.2 512 512 512" fill="#fff"/><path d="M77.3 617.6V423.9c0-11.2 9.1-20.7 20.7-20.7 11.2 0 20.4 9.5 20.4 20.7v179.4h87.1c9.8 0 18.3 8.1 18.3 17.9 0 10.2-8.4 18.3-18.3 18.3H99c-14-.1-21.7-7.8-21.7-21.9zm383.3 2.8c0 11.6-9.5 21.1-21.1 21.1-8.8 0-16.5-5.6-19.3-13.3l-12.3-33.7H295.6l-12.3 33.7c-2.8 7.7-10.5 13.3-19.3 13.3-11.6 0-21.1-9.5-21.1-21.1 0-2.5 1.1-5.3 1.8-7.4l73.4-186.7c5.3-13.3 18.3-23.2 33.7-23.2s28.4 9.8 33.7 23.2L458.9 613c.6 2.2 1.7 5 1.7 7.4zm-65.7-62.1L351.8 440l-43.2 118.3zm302.3 62.5V462.1l-69.9 172c-1.8 4.6-6 7.4-10.9 7.4s-9.1-2.8-10.9-7.4l-69.5-172v158.7c0 11.2-9.1 20.7-20.4 20.7-11.6 0-20.7-9.5-20.7-20.7V437.2c0-18.6 15.1-34 34-34 14.4 0 26.7 8.8 31.6 21.4l55.8 138.3 56.2-138.3c4.9-12.6 17.2-21.4 31.6-21.4 19 0 34 15.4 34 34v183.6c0 11.2-9.1 20.7-20.7 20.7-11.1 0-20.2-9.5-20.2-20.7zm80.7-18.3c0-10.9 8.8-19.7 19.3-19.7 4.6 0 8.8 1.4 11.9 3.9 16.1 11.9 36.2 20.4 60.7 20.4 33.7 0 47-16.5 47-31.9 0-21.1-24.9-27.4-53.4-34.8-38.3-9.5-83.2-20.7-83.2-70.2 0-38.6 34-68.5 88.8-68.5 27.4 0 49.5 7 72.3 21.4 5.3 3.2 8.8 9.1 8.8 15.8 0 10.5-8.8 19.3-19.3 19.3-4.2 0-8.1-1.4-10.9-3.5-16.8-11.2-36.5-16.5-54.4-16.5-27.7 0-43.2 11.6-43.2 29.1 0 18.3 23.9 24.2 51.6 31.2 38.6 9.8 84.6 21.8 84.6 72.7 0 39-27.4 72.3-90.6 72.3-34.8 0-61.8-9.8-82.5-25.6-4.3-3.4-7.5-9-7.5-15.4z" enable-background="new" fill="#0175E2"/></svg>
\ No newline at end of file
Index: lams_central/web/includes/javascript/portrait5.js
===================================================================
diff -u -r006332d8896a1fad1667b5f506333b3d4f6eecc9 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_central/web/includes/javascript/portrait5.js	(.../portrait5.js)	(revision 006332d8896a1fad1667b5f506333b3d4f6eecc9)
+++ lams_central/web/includes/javascript/portrait5.js	(.../portrait5.js)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -1,6 +1,6 @@
 // Functions for displaying portraits using Javascript. The logic should match PortraitTag.jsp except that this uses all divs and the tag uses an image. 
 
-var NUM_COLORS = 7,
+var NUM_COLORS = 6,
    CSS_ROUND = 'portrait-round',
    PORTRAIT_VERSION_SUFFIX = ' portrait-color-',
    CSS_GENERIC_SMALL = 'portrait-generic-sm',
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r2854e181e86fc428bc0a0845d9c9428e6e3a8650 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 2854e181e86fc428bc0a0845d9c9428e6e3a8650)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -360,26 +360,13 @@
 }
 
 .monitoring-page-wrapper #required-tasks button {
-	background-color: #3C42E0;
-	border: 0;
-	color: #fff;
-	font-family: mont-regular, sans-serif;
 	font-size: .8rem;
-	box-shadow: 0px 3px 6px #3C42E040;
 }
 
-.monitoring-page-wrapper #required-tasks button.contribute-gate-opened-button {
-	background-color: #05CCD6;
-}
-
 .monitoring-page-wrapper #required-tasks button.contribute-go-button {
 	min-width: 5rem;
 }
 
-.monitoring-page-wrapper #required-tasks button:hover {
-	background-color: #878bea;
-}
-
 .monitoring-page-wrapper #required-tasks .dropdown-item {
 	font-size: .8rem;
 }
@@ -1106,19 +1093,11 @@
 }
 
 body.component .popover-link {
-	color: #337ab7 !important;
+	color: var(--bs-blue) !important;
 }
 
-body.component .popover-link:hover {
-	color: #0E9AEF !important;
-}
-
-body.component .popover-link:focus {
-	color: #0E9AEF !important;
-}
-
 body.component .popover-title {
-	background-color: #dddddd;
+	background-color: var(--bs-gray);
 }
 
 body.component .popover-content-with-portrait {
@@ -1127,32 +1106,30 @@
 }
 
 body.component .portrait-color-0 {
-	color: #001f3f;
+	color: black;
 }
 
 body.component .portrait-color-1 {
-	color: #FF851B;
+	color: var(--bs-red);
 }
 
 body.component .portrait-color-2 {
-	color: #85144b;
+	color: var(--bs-yellow);
+	filter: brightness(70%);
 }
 
 body.component .portrait-color-3 {
-	color: #111111;
+	color: var(--bs-gray);
 }
 
 body.component .portrait-color-4 {
-	color: #3D9970;
+	color: var(--bs-green);
 }
 
 body.component .portrait-color-5 {
-	color: #0074D9;
+	color: var(--bs-blue);
 }
 
-body.component .portrait-color-6 {
-	color: #FF4136;
-}
 
 body.component .portrait-sm-lineheight {
 	line-height: 32px;
@@ -1232,7 +1209,7 @@
 
 #learners-accordion .vertical-timeline-container {
 	display: none;
-	background-color: #F6F5FA;
+	background-color: var(--lams-background-gray);
 	padding-top: 5px;
 	border-radius: 10px;
 }
@@ -1243,4 +1220,8 @@
 
 #learners-accordion .vertical-timeline:before  {
 	bottom: 90px;
-}	
\ No newline at end of file
+}	
+
+.table-hover > tbody > tr:hover > * {
+	--bs-table-accent-bg: var(--bs-gray-200);
+}
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -r2854e181e86fc428bc0a0845d9c9428e6e3a8650 -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 2854e181e86fc428bc0a0845d9c9428e6e3a8650)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -41,6 +41,19 @@
 	},
 	tempusDominusDateFormatter = function(date) {
 		return date ? date.year + '-' + date.monthFormatted + '-' + date.dateFormatted + ' ' + date.hoursFormatted + ':' + date.minutesFormatted : '';
+	},
+	
+	COLORS = {
+		blue: '#0175E2',
+		yellow: '#F9F871',
+		green: '#00914A',
+		red: '#D73961',
+		gray: '#6c757d'
+	},
+	GRAPH_COLORS = {
+		blue: 'rgba(1, 117, 226, 0.85)',
+		yellow: 'rgba(249, 248, 113, 0.85)',
+		green: 'rgba(0, 145, 74, 0.85)'
 	};
 	
 
@@ -65,6 +78,7 @@
 		tabContent.load(LAMS_URL + 'monitoring/monitoring/displaySequenceTab.do', function(){
 			refreshMonitor('sequence');
 			canvasFitScreen(learningDesignSvgFitScreen, true);
+			$("#load-sequence-tab-btn").addClass('active');
 		});
 	} else if (tabName == 'learners') {
 		tabContent.load(LAMS_URL + 'monitoring/monitoring/displayLearnersTab.do', function(){
@@ -466,7 +480,7 @@
 					labelColour = 'danger'; 
 					break;
 			}
-			$('#lessonStateLabel').attr('class', 'badge bg-' + labelColour).html(label + ' <i class="fa-solid fa-angles-down"></i>');
+			$('#lessonStateLabel').attr('class', 'badge btn-' + labelColour).html(label + ' <i class="fa-solid fa-angles-down"></i>');
 			
 			// update available options in change state dropdown menu
 			var selectField = $('#lessonStateField');
@@ -607,11 +621,13 @@
 							},
 							datasets : [ {
 								data : percent,
-								backgroundColor : [ 'rgba(255, 195, 55, 1)',
-													'rgba(253, 60, 165, 1)',
-													'rgba(5, 204, 214, 1)'
+								backgroundColor : [
+													GRAPH_COLORS.yellow,
+													GRAPH_COLORS.green,
+													GRAPH_COLORS.blue
 												  ],
-								borderWidth : 0
+								borderWidth : 1,
+								borderColor : COLORS.gray
 							} ],
 							labels : labels
 						},
@@ -652,7 +668,7 @@
 													text: label + ": " + rawValue + " (" + value + "%)",
 													fillStyle: style.backgroundColor,
 													strokeStyle: style.borderColor,
-													lineWidth: style.borderWidth,
+													lineWidth: 0,
 													hidden: isNaN(value) || meta.data[i].hidden,
 				
 													// Extra data used for toggling the
@@ -866,10 +882,10 @@
 						 					 + '</button></div>';
 							} else {
 								entryContent += '<div class="btn-group" role="group"><button onClick="javascript:openGateNow('
-                                    + contributeActivity.activityID + ')" type="button" class="btn" title="' 
+                                    + contributeActivity.activityID + ')" type="button" class="btn btn-primary" title="' 
 									+ LABELS.CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP + '">' 
 									+ LABELS.CONTRIBUTE_OPEN_GATE_NOW_BUTTON 
-									+ '</button><button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
+									+ '</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
 									+ '<div class="dropdown-menu"><a href="#" class="dropdown-item" onClick="javascript:openPopUp(\''
                                     + this.url + '\',\'ContributeActivity\', 800, 1280, true)" title="' 
 									+ LABELS.CONTRIBUTE_OPEN_GATE_TOOLTIP + '">' 
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r9f4482aa1d29f454f091420cc38d3b27a3f4cc8f -rf11663c9b27c276fae910e6c3fa5561a3e2af781
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 9f4482aa1d29f454f091420cc38d3b27a3f4cc8f)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
@@ -236,11 +236,11 @@
 		
 		<div class="component-menu">
 			<div class="component-menu-btn">
-				<a href="/" title="Back to lesson list"><i class="fa fa-arrow-left fa-lg"></i></a>
-				<a id="edit-lesson-btn" href="#"><i class="fa fa-pen fa-lg"></i></a>
-				<a id="load-sequence-tab-btn" href="#" class="navigate-btn active"><i class="fa fa-sitemap fa-lg"></i></a>
-				<a id="load-learners-tab-btn" href="#" class="navigate-btn"><i class="fa fa-solid fa-user fa-lg"></i></a>
-				<a id="load-gradebook-tab-btn" href="#" class="navigate-btn"><i class="fa fa-solid fa-list-ol fa-lg"></i></a>
+				<a href="/" class="btn btn-primary" title="Back to lesson list"><i class="fa fa-arrow-left fa-lg"></i></a>
+				<a id="edit-lesson-btn" class="btn btn-primary" href="#"><i class="fa fa-pen fa-lg"></i></a>
+				<a id="load-sequence-tab-btn" href="#" class="btn btn-primary navigate-btn active"><i class="fa fa-sitemap fa-lg"></i></a>
+				<a id="load-learners-tab-btn" href="#" class="btn btn-primary navigate-btn"><i class="fa fa-solid fa-user fa-lg"></i></a>
+				<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary navigate-btn"><i class="fa fa-solid fa-list-ol fa-lg"></i></a>
 			</div>
 			
 			<div class="lesson-properties">