Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r29934b375099b67b06d6515d65c7bb3d72ace59e -rb311244c55b221fc9f910cf4de25874d13d2296d
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 29934b375099b67b06d6515d65c7bb3d72ace59e)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision b311244c55b221fc9f910cf4de25874d13d2296d)
@@ -92,7 +92,7 @@
 
 .component-page-wrapper .offcanvas {
     top: 4.5rem;
-	width: 18rem;
+	width: 20rem;
     max-width: 70rem;
     border-radius: 0 1.2rem 0 0;
     border: thin solid var(--bs-gray-400);
@@ -113,10 +113,6 @@
     left: 1rem;
 }
 
-.component-page-wrapper .offcanvas .progress-bar-items > li {
-    padding: .5rem;
-}
-
 .component-page-wrapper .offcanvas .progress-bar-items > li a {
     color: var(--bs-gray-dark);
 }
@@ -135,6 +131,22 @@
     color: var(--bs-green);
 }
 
+#component-offcanvas .list-group-item {
+	padding: 0;
+
+	.icon {
+		width: 35px;
+		background-color: rgba(211,211,211,0.17);
+		padding: 10px 35px 10px 10px;
+		margin-left: 12px;
+	}
+	
+	.col {
+		padding-left: 0.2rem;
+    	padding-right: 1rem;
+	}
+}
+
 .component-page-wrapper .activity-bottom-buttons {
     margin-top: 1rem;
     display: flex;