diff --git a/StpFoodBlazor/Components/Layout/MainLayout.razor b/StpFoodBlazor/Components/Layout/MainLayout.razor
index 13f366f..c8d9864 100644
--- a/StpFoodBlazor/Components/Layout/MainLayout.razor
+++ b/StpFoodBlazor/Components/Layout/MainLayout.razor
@@ -10,12 +10,10 @@
     <main>
         <div class="top-row px-4" id="navbar">
             <div class="container d-md-flex" id="navbar-items">
-                <div id="messages" class="messages text-center marquee w-100 d-none d-md-block">
-                    <div class="marquee-content d-flex align-items-stretch">
-                        @foreach (var holiday in holidayStrings)
-                        {
-                            <span class="holiday m-auto p-3">@holiday</span>
-                        }
+                <div id="messages" class="marquee-container d-none d-md-block">
+                    <div class="marquee-inner">
+                        @RenderHolidayStrings()
+                        @RenderHolidayStrings()
                     </div>
                 </div>
                 <div class="d-flex" id="nav-links" style="align-items: center;">
@@ -94,4 +92,15 @@
 
         return " flex-fill";
     }
+
+    private RenderFragment RenderHolidayStrings() => builder =>
+    {
+        foreach (var holiday in holidayStrings)
+        {
+            builder.OpenElement(0, "span");
+            builder.AddAttribute(1, "class", "holiday m-auto p-3");
+            builder.AddContent(2, holiday);
+            builder.CloseElement();
+        }
+    };
 }
diff --git a/StpFoodBlazor/wwwroot/app.css b/StpFoodBlazor/wwwroot/app.css
index 5b8a17a..ef4ab88 100644
--- a/StpFoodBlazor/wwwroot/app.css
+++ b/StpFoodBlazor/wwwroot/app.css
@@ -24,20 +24,34 @@ h1:focus {
     outline: none;
 }
 
-@keyframes scroll-left {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(-120%); }
-}
-
-.marquee {
-    white-space: nowrap;
-    overflow: hidden;
-    box-sizing: border-box;
-}
-
-.marquee-content {
-    animation: scroll-left 45s linear infinite;
-    animation-delay: -1s;
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.marquee-container {
+  width: 100%;
+  overflow: hidden;
+  /* Optional styling */
+  background: #f9f9f9;
+  white-space: nowrap;
+}
+
+.marquee-inner {
+  display: inline-block;
+  /* Set width to fit content of both spans */
+  white-space: nowrap;
+  /* Animation */
+  animation: marquee 25s linear infinite;
+}
+
+.marquee-inner span {
+  display: inline-block;
+  padding-right: 2rem; /* gap between repeats, adjust as needed */
 }
 
 .holiday {
diff --git a/StpFoodBlazorTest/Layout/MainLayoutTest.razor b/StpFoodBlazorTest/Layout/MainLayoutTest.razor
index 207b143..d2a81cd 100644
--- a/StpFoodBlazorTest/Layout/MainLayoutTest.razor
+++ b/StpFoodBlazorTest/Layout/MainLayoutTest.razor
@@ -46,8 +46,8 @@
         var navbar = cut.Find("#navbar-items");
         var navlinks = cut.Find("#nav-links");
 
-        Assert.Equal("messages text-center marquee w-100 d-none d-md-block", navbar.Children[0].ClassName);
-        Assert.Equal("marquee-content d-flex align-items-stretch", navbar.Children[0].Children[0].ClassName);
+        Assert.Equal("marquee-container d-none d-md-block", navbar.Children[0].ClassName);
+        Assert.Equal("marquee-inner", navbar.Children[0].Children[0].ClassName);
         Assert.Equal(" d-none", navlinks.Children[0].ClassName);
         Assert.Equal(" flex-fill position-relative", navlinks.Children[1].ClassName);
         Assert.Equal(" justify-content-end", navlinks.Children[2].ClassName);
@@ -61,8 +61,8 @@
         var navbar = cut.Find("#navbar-items");
         var navlinks = cut.Find("#nav-links");
 
-        Assert.Equal("messages text-center marquee w-100 d-none d-md-block", navbar.Children[0].ClassName);
-        Assert.Equal("marquee-content d-flex align-items-stretch", navbar.Children[0].Children[0].ClassName);
+        Assert.Equal("marquee-container d-none d-md-block", navbar.Children[0].ClassName);
+        Assert.Equal("marquee-inner", navbar.Children[0].Children[0].ClassName);
         Assert.Equal(" flex-fill", navlinks.Children[0].ClassName);
         Assert.Equal(" justify-content-end position-relative", navlinks.Children[1].ClassName);
         Assert.Equal(" d-none", navlinks.Children[2].ClassName);
@@ -76,8 +76,8 @@
         var navbar = cut.Find("#navbar-items");
         var navlinks = cut.Find("#nav-links");
 
-        Assert.Equal("messages text-center marquee w-100 d-none d-md-block", navbar.Children[0].ClassName);
-        Assert.Equal("marquee-content d-flex align-items-stretch", navbar.Children[0].Children[0].ClassName);
+        Assert.Equal("marquee-container d-none d-md-block", navbar.Children[0].ClassName);
+        Assert.Equal("marquee-inner", navbar.Children[0].Children[0].ClassName);
         Assert.Equal(" flex-fill", navlinks.Children[0].ClassName);
     }
 
@@ -90,8 +90,8 @@
         var navbar = cut.Find("#navbar-items");
         var navlinks = cut.Find("#nav-links");
 
-        Assert.Equal("messages text-center marquee w-100 d-none d-md-block", navbar.Children[0].ClassName);
-        Assert.Equal("marquee-content d-flex align-items-stretch", navbar.Children[0].Children[0].ClassName);
+        Assert.Equal("marquee-container d-none d-md-block", navbar.Children[0].ClassName);
+        Assert.Equal("marquee-inner", navbar.Children[0].Children[0].ClassName);
         Assert.Equal(" d-none", navlinks.Children[0].ClassName);
         Assert.Equal(" flex-fill position-relative", navlinks.Children[1].ClassName);
         Assert.Equal(" justify-content-end", navlinks.Children[2].ClassName);