diff --git a/OrderAppWithRazorPages/Extensions/EnumExtensions.cs b/OrderAppWithRazorPages/Extensions/EnumExtensions.cs
new file mode 100644
index 0000000..e07b3d6
--- /dev/null
+++ b/OrderAppWithRazorPages/Extensions/EnumExtensions.cs
@@ -0,0 +1,16 @@
+using System;
+
+namespace OrderApp.Extensions
+{
+    public static class EnumExtensions
+    {
+        public static T GetAttribute<T>(this Enum value) where T : Attribute
+        {
+            var type = value.GetType();
+            var memberInfo = type.GetMember(value.ToString());
+            var attributes = memberInfo[0].GetCustomAttributes(typeof(T), false);
+
+            return (T)attributes[0];
+        }
+    }
+}
\ No newline at end of file
diff --git a/OrderAppWithRazorPages/Models/OrderStatus.cs b/OrderAppWithRazorPages/Models/OrderStatus.cs
new file mode 100644
index 0000000..e45149e
--- /dev/null
+++ b/OrderAppWithRazorPages/Models/OrderStatus.cs
@@ -0,0 +1,22 @@
+using System.ComponentModel;
+
+namespace OrderApp.Models
+{
+    public enum OrderStatus
+    {
+        [Description("Ordered")]
+        Ordered,
+
+        [Description("Filled")]
+        Filled,
+
+        [Description("Shipped")]
+        Shipped,
+
+        [Description("Out for Delivery")]
+        OutForDelivery,
+
+        [Description("Delivered")]
+        Delivered
+    }
+}
\ No newline at end of file
diff --git a/OrderAppWithRazorPages/Pages/Index.cshtml b/OrderAppWithRazorPages/Pages/Index.cshtml
index ebd3370..8630aec 100644
--- a/OrderAppWithRazorPages/Pages/Index.cshtml
+++ b/OrderAppWithRazorPages/Pages/Index.cshtml
@@ -1,4 +1,5 @@
 @page
+@using OrderApp.Models
 @model IndexModel
 @{
     ViewData["Title"] = "Home page";
@@ -32,26 +33,7 @@
             </div>
             <div class="row step">
                 <div class="col-md-1"></div>
-                <div class="col-md-2 @Model.GetShippingStepClass(0)">
-                    <span class="fa glyphicon glyphicon-shopping-cart"></span>
-                    <p>Ordered</p>
-                </div>
-                <div class="col-md-2 @Model.GetShippingStepClass(1)">
-                    <span class="fa glyphicon glyphicon-check"></span>
-                    <p>Order Filled</p>
-                </div>
-                <div class="col-md-2 @Model.GetShippingStepClass(2)">
-                    <span class="fa glyphicon glyphicon-plane"></span>
-                    <p>Shipped</p>
-                </div>
-                <div class="col-md-2 @Model.GetShippingStepClass(3)">
-                    <span class="fa glyphicon glyphicon-road"></span>
-                    <p>Out for Delivery</p>
-                </div>
-                <div class="col-md-2 @Model.GetShippingStepClass(4)">
-                    <span class="fa glyphicon glyphicon-home"></span>
-                    <p>Delivered</p>
-                </div>
+                <order-status status="@(OrderStatus)Model.ShippingStatus.Step"></order-status>
                 <div class="col-md-1"></div>
             </div>
         </div>
diff --git a/OrderAppWithRazorPages/Pages/Index.cshtml.cs b/OrderAppWithRazorPages/Pages/Index.cshtml.cs
index e562aa6..3e9de48 100644
--- a/OrderAppWithRazorPages/Pages/Index.cshtml.cs
+++ b/OrderAppWithRazorPages/Pages/Index.cshtml.cs
@@ -28,18 +28,5 @@ public void OnGet()
             ShippingPercent = (ShippingStatus.Step * 20) + 20; 
             Total = _ordersService.GetOrderTotal(Order.OrderId);
         }
-
-        public string GetShippingStepClass(int Step)
-        {
-            if (ShippingStatus.Step > Step)
-            {
-                return "complete";
-            }
-            else if (ShippingStatus.Step == Step)
-            {
-                return "active";
-            }
-            return string.Empty;
-        }
     }
 }
diff --git a/OrderAppWithRazorPages/Pages/_ViewImports.cshtml b/OrderAppWithRazorPages/Pages/_ViewImports.cshtml
index 443153f..6c0399c 100644
--- a/OrderAppWithRazorPages/Pages/_ViewImports.cshtml
+++ b/OrderAppWithRazorPages/Pages/_ViewImports.cshtml
@@ -1,3 +1,4 @@
 @using OrderApp
 @namespace OrderApp.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, OrderApp
\ No newline at end of file
diff --git a/OrderAppWithRazorPages/TagHelpers/OrderStatusTagHelper.cs b/OrderAppWithRazorPages/TagHelpers/OrderStatusTagHelper.cs
new file mode 100644
index 0000000..212e685
--- /dev/null
+++ b/OrderAppWithRazorPages/TagHelpers/OrderStatusTagHelper.cs
@@ -0,0 +1,63 @@
+using System;
+using System.ComponentModel;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using OrderApp.Extensions;
+using OrderApp.Models;
+
+namespace OrderApp.TagHelpers
+{
+    public class OrderStatusTagHelper : TagHelper
+    {
+        public OrderStatus Status { get; set; }
+
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            foreach(OrderStatus value in Enum.GetValues(typeof(OrderStatus)))
+            {
+                output.Content.AppendHtml($@"<div class=""col-md-2 {GetOrderStatusClass(value)}"">
+    <span class=""fa glyphicon glyphicon-{GetOrderStatusIcon(value)}""></span>
+    <p>{value.GetAttribute<DescriptionAttribute>().Description}</p>
+</div>");
+            }
+        }
+
+        private string GetOrderStatusClass(OrderStatus status)
+        {
+            if (this.Status > status)
+            {
+                return "complete";
+            }
+            else if (this.Status == status)
+            {
+                return "active";
+            }
+
+            return string.Empty;
+        }
+
+        private string GetOrderStatusIcon(OrderStatus status)
+        {
+            var icon = string.Empty;
+            switch (status)
+            {
+                case OrderStatus.Ordered:
+                    icon = "shopping-cart";
+                    break;
+                case OrderStatus.Filled:
+                    icon = "check";
+                    break;
+                case OrderStatus.Shipped:
+                    icon = "plane";
+                    break;
+                case OrderStatus.OutForDelivery:
+                    icon = "road";
+                    break;
+                case OrderStatus.Delivered:
+                    icon = "home";
+                    break;
+            }
+
+            return icon;
+        }
+    }
+}