diff --git a/Wino.Calendar.ViewModels/CalendarPageViewModel.cs b/Wino.Calendar.ViewModels/CalendarPageViewModel.cs
index fc598419..28cb9c3d 100644
--- a/Wino.Calendar.ViewModels/CalendarPageViewModel.cs
+++ b/Wino.Calendar.ViewModels/CalendarPageViewModel.cs
@@ -115,6 +115,7 @@ public partial class CalendarPageViewModel : CalendarBaseViewModel,
     [ObservableProperty]
     [NotifyPropertyChangedFor(nameof(IsEventDetailsVisible))]
     [NotifyCanExecuteChangedFor(nameof(JoinOnlineCommand))]
+    [NotifyPropertyChangedFor(nameof(CanJoinOnline))]
     public partial CalendarItemViewModel DisplayDetailsCalendarItemViewModel { get; set; }
 
     public bool IsEventDetailsVisible => DisplayDetailsCalendarItemViewModel != null;
@@ -227,12 +228,6 @@ public partial class CalendarPageViewModel : CalendarBaseViewModel,
         };
     }
 
-    public override void OnNavigatedFrom(NavigationMode mode, object parameters)
-    {
-        // Do not call base method because that will unregister messenger recipient.
-        // This is a singleton view model and should not be unregistered.
-    }
-
     public override void OnNavigatedTo(NavigationMode mode, object parameters)
     {
         base.OnNavigatedTo(mode, parameters);
diff --git a/Wino.Mail.WinUI/Controls/Calendar/CalendarItemControl.xaml b/Wino.Mail.WinUI/Controls/Calendar/CalendarItemControl.xaml
index 0001c2ae..fb7d9711 100644
--- a/Wino.Mail.WinUI/Controls/Calendar/CalendarItemControl.xaml
+++ b/Wino.Mail.WinUI/Controls/Calendar/CalendarItemControl.xaml
@@ -23,6 +23,7 @@
         Tapped="ControlTapped"
         ToolTipService.ToolTip="{x:Bind CalendarItem.DisplayTitle, Mode=OneWay}">
         <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="5" />
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
@@ -36,20 +37,36 @@
             </local:CalendarItemCommandBarFlyout>
         </Grid.ContextFlyout>
 
+
         <Grid
             x:Name="MainBackground"
+            Grid.Column="1"
             Grid.ColumnSpan="2"
-            Background="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(CalendarItem.AssignedCalendar.BackgroundColorHex), Mode=OneWay}" />
+            Background="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(CalendarItem.AssignedCalendar.BackgroundColorHex), Mode=OneWay}"
+            Opacity="0.9" />
 
         <Rectangle
             x:Name="MainBorder"
+            Grid.Column="1"
             Grid.ColumnSpan="2"
             Canvas.ZIndex="2"
             Stroke="{ThemeResource CalendarItemBorderBrush}"
             StrokeThickness="0" />
 
+        <!--  ShowAs Status Stripe  -->
+        <ContentControl
+            x:Name="ShowAsStripe"
+            Grid.Column="0"
+            HorizontalContentAlignment="Stretch"
+            VerticalContentAlignment="Stretch"
+            Canvas.ZIndex="10000"
+            Content="{x:Bind CalendarItem}"
+            ContentTemplateSelector="{StaticResource ShowAsStripeSelector}"
+            IsTabStop="False" />
+
         <TextBlock
             x:Name="EventTitleTextblock"
+            Grid.Column="1"
             Margin="2,0"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Center"
@@ -63,7 +80,7 @@
         <!--  TODO: Event attributes  -->
         <StackPanel
             x:Name="AttributeStack"
-            Grid.Column="1"
+            Grid.Column="2"
             Margin="0,4,4,0"
             HorizontalAlignment="Right"
             VerticalAlignment="Top"
diff --git a/Wino.Mail.WinUI/Selectors/CalendarItemShowAsStripeTemplateSelector.cs b/Wino.Mail.WinUI/Selectors/CalendarItemShowAsStripeTemplateSelector.cs
new file mode 100644
index 00000000..bbf4657d
--- /dev/null
+++ b/Wino.Mail.WinUI/Selectors/CalendarItemShowAsStripeTemplateSelector.cs
@@ -0,0 +1,36 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Wino.Calendar.ViewModels.Data;
+using Wino.Core.Domain.Enums;
+
+namespace Wino.Selectors;
+
+/// <summary>
+/// DataTemplateSelector that selects the appropriate stripe template based on CalendarItemShowAs status.
+/// </summary>
+public class CalendarItemShowAsStripeTemplateSelector : DataTemplateSelector
+{
+    public DataTemplate FreeTemplate { get; set; }
+    public DataTemplate TentativeTemplate { get; set; }
+    public DataTemplate BusyTemplate { get; set; }
+    public DataTemplate OutOfOfficeTemplate { get; set; }
+    public DataTemplate WorkingElsewhereTemplate { get; set; }
+
+    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+    {
+        if (item is CalendarItemViewModel calendarItem)
+        {
+            return calendarItem.CalendarItem.ShowAs switch
+            {
+                CalendarItemShowAs.Free => FreeTemplate,
+                CalendarItemShowAs.Tentative => TentativeTemplate,
+                CalendarItemShowAs.Busy => BusyTemplate,
+                CalendarItemShowAs.OutOfOffice => OutOfOfficeTemplate,
+                CalendarItemShowAs.WorkingElsewhere => WorkingElsewhereTemplate,
+                _ => BusyTemplate // Default to Busy
+            };
+        }
+
+        return base.SelectTemplateCore(item, container);
+    }
+}
diff --git a/Wino.Mail.WinUI/Styles/WinoCalendarResources.xaml b/Wino.Mail.WinUI/Styles/WinoCalendarResources.xaml
index 9a545f5e..242934c0 100644
--- a/Wino.Mail.WinUI/Styles/WinoCalendarResources.xaml
+++ b/Wino.Mail.WinUI/Styles/WinoCalendarResources.xaml
@@ -25,9 +25,42 @@
         </Grid>
     </DataTemplate>
 
+    <!--  ShowAs Status Stripe Templates  -->
+    <DataTemplate x:Key="FreeStripeTemplate" x:DataType="data:CalendarItemViewModel">
+        <Border Background="#4CAF50" />
+    </DataTemplate>
+
+    <DataTemplate x:Key="TentativeStripeTemplate" x:DataType="data:CalendarItemViewModel">
+        <Border Background="#FFC107" />
+    </DataTemplate>
+
+    <DataTemplate x:Key="BusyStripeTemplate" x:DataType="data:CalendarItemViewModel">
+        <Border Background="#F44336" />
+    </DataTemplate>
+
+    <DataTemplate x:Key="OutOfOfficeStripeTemplate" x:DataType="data:CalendarItemViewModel">
+        <Border Background="#9C27B0" />
+    </DataTemplate>
+
+    <DataTemplate x:Key="WorkingElsewhereStripeTemplate" x:DataType="data:CalendarItemViewModel">
+        <Border Background="#2196F3" />
+    </DataTemplate>
+
+    <!--  ShowAs Status Stripe Selector  -->
+    <selectors1:CalendarItemShowAsStripeTemplateSelector
+        x:Key="ShowAsStripeSelector"
+        BusyTemplate="{StaticResource BusyStripeTemplate}"
+        FreeTemplate="{StaticResource FreeStripeTemplate}"
+        OutOfOfficeTemplate="{StaticResource OutOfOfficeStripeTemplate}"
+        TentativeTemplate="{StaticResource TentativeStripeTemplate}"
+        WorkingElsewhereTemplate="{StaticResource WorkingElsewhereStripeTemplate}" />
+
     <!--  Vertical panel that renders items on canvas.  -->
     <DataTemplate x:Key="DayCalendarItemVerticalRenderTemplate" x:DataType="models:CalendarDayModel">
-        <ItemsControl x:Name="RegularEventItemsControl" ItemsSource="{x:Bind EventsCollection.RegularEvents}" Loaded="OnRegularEventItemsControlLoaded">
+        <ItemsControl
+            x:Name="RegularEventItemsControl"
+            ItemsSource="{x:Bind EventsCollection.RegularEvents}"
+            Loaded="OnRegularEventItemsControlLoaded">
             <ItemsControl.ItemTemplate>
                 <!--  Default Calendar Item View Model Template  -->
                 <DataTemplate x:DataType="data:CalendarItemViewModel">
@@ -60,7 +93,11 @@
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
-            <ItemsControl x:Name="DayColumnsItemsControl" Margin="50,0,16,0" ItemsSource="{x:Bind CalendarDays}" Loaded="OnDayColumnsItemsControlLoaded">
+            <ItemsControl
+                x:Name="DayColumnsItemsControl"
+                Margin="50,0,16,0"
+                ItemsSource="{x:Bind CalendarDays}"
+                Loaded="OnDayColumnsItemsControlLoaded">
                 <ItemsControl.ItemTemplate>
                     <DataTemplate x:DataType="models:CalendarDayModel">
                         <controls:DayColumnControl DayModel="{x:Bind}" />