diff --git a/WebApp/Components/Features/Events/Components/EventAttributes.razor b/WebApp/Components/Features/Events/Components/EventAttributes.razor
index 710013b..fa69a9c 100644
--- a/WebApp/Components/Features/Events/Components/EventAttributes.razor
+++ b/WebApp/Components/Features/Events/Components/EventAttributes.razor
@@ -1,21 +1,25 @@
 @using WebApp.Models
 
-<span style=""></span>
-@if (EventDefinition.LevelOfEffort.HasValue)
+@* @if (EventDefinition.LevelOfEffort.HasValue)
 {
     <span class="numberCircle">@EventDefinition.LevelOfEffort</span>
-}
+} *@
 <MudText Style="font-family: monospace; white-space: pre;">
-    
+    @{
+        var loeIcon = AppIcons.LevelOfEffortIcon(EventDefinition.LevelOfEffort);
+        var loeColor = AppIcons.IconColors.GetValueOrDefault(loeIcon, "inherit");
+    }
+    @RenderFixedWidthChar(loeIcon, "1.5em", loeColor)
     @foreach (var charStr in _attributes.Select(c => c.ToString()))
     {
+        var color = AppIcons.IconColors.GetValueOrDefault(charStr, "inherit");
         if (AppIcons.IconTooltips.TryGetValue(charStr, out var tooltip))
         {
-            <MudTooltip Text="@tooltip">@charStr</MudTooltip>
+            <MudTooltip Text="@tooltip">@RenderFixedWidthChar(charStr, color: color)</MudTooltip>
         }
         else
         {
-            @charStr
+            @RenderFixedWidthChar(charStr, color: color)
         }
     }
 </MudText>
@@ -35,4 +39,9 @@
         _attributes += EventDefinition.InterviewOrPresentation ? AppIcons.PresentationEvent : " ";
         _attributes += EventDefinition.Presubmission ? AppIcons.PresubmissionEvent : " ";
     }
+
+    private RenderFragment RenderFixedWidthChar(string character, string width = "1.3em", string color = "inherit") => __builder =>
+    {
+        <span style="display: inline-block; width: @width; text-align: center; color: @color;">@character</span>
+    };
 }
diff --git a/WebApp/Models/AppIcons.cs b/WebApp/Models/AppIcons.cs
index 9cad260..9f3887f 100644
--- a/WebApp/Models/AppIcons.cs
+++ b/WebApp/Models/AppIcons.cs
@@ -17,9 +17,9 @@ namespace WebApp.Models
             
             return loe switch
             {
-                1 => "1",
-                2 => "2",
-                3 => "3",
+                1 => "○",
+                2 => "◐",
+                3 => "●",
                 _ => Icons.Material.Filled.QuestionMark
             };
         }
@@ -30,7 +30,6 @@ namespace WebApp.Models
         public static string IndividualEvent = "ⓘ";
         public static string PresubmissionEvent = "ⓟ";
         public static string PresentationEvent = "";
-        public static string QuestionMark = "❔";
 
         // Tooltip mapping for icon unicode characters
         public static Dictionary<string, string> IconTooltips => new()
@@ -40,9 +39,22 @@ namespace WebApp.Models
             { IndividualEvent, "Individual Event" },
             { PresubmissionEvent, "Presubmission" },
             { PresentationEvent, "Presentation/Interview" },
-            { "①", "Level of Effort: 1" },
-            { "②", "Level of Effort: 2" },
-            { "③", "Level of Effort: 3" }
+            { "○", "Level of Effort: 1" },
+            { "◐", "Level of Effort: 2" },
+            { "●", "Level of Effort: 3" }
+        };
+
+        // Color mapping for icon unicode characters
+        public static Dictionary<string, string> IconColors => new()
+        {
+            { OnSiteActivity, "#ff9800" },        // Orange
+            { RegionalEvent, "#2196f3" },         // Blue
+            { IndividualEvent, "#9c27b0" },       // Purple
+            { PresubmissionEvent, "#4caf50" },    // Green
+            { PresentationEvent, "#f44336" },     // Red
+            { "○", "#757575" },                  // Gray
+            { "◐", "#616161" },                  // Darker Gray
+            { "●", "#424242" }                   // Even Darker Gray
         };
 
         public static string EventEffort(EventDefinition eventDefinition)