diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor
index 16c07ee..62ef8d5 100644
--- a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor	
@@ -9,20 +9,22 @@
     else
     {
 
-        <div>
-            <h3 class="text-xl font-bold mb-4">Temperature Blanket Reviewer</h3>
+        <div class="">
+            <h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
 
-            <div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
-                @foreach (var day in TemperatureDays)
-                {
-                    var color = GetColorForTemp(day.AvgTemp);
-                    <div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
-                         title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
-                    </div>
-                }
+            <div class="d-flex"> 
+                <div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
+                    @foreach (var day in TemperatureDays)
+                    {
+                        var color = GetColorForTemp(day.AvgTemp);
+                        <div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
+                             title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
+                        </div>
+                    }
+                </div>
+
+                <TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" /> 
             </div>
-
-            <TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
         </div>
     }
 </div>
diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
index 1151cb1..3cc3013 100644
--- a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
@@ -4,11 +4,11 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
+<div class="position-relative" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
     <!-- Base number line -->
-    <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div>
+    @* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@
 
-    <!-- Draggable nodes for adjusting range breakpoints -->
+@*     <!-- Draggable nodes for adjusting range breakpoints -->
     @for (int i = 0; i < TempRanges.Count; i++)
     {
         var left = i == 0 ? 0 : TempRanges[i - 1].Max;
@@ -19,16 +19,26 @@
              @onmousedown="(e) => OnMouseDown(i, e)"
              title="@left°F">
         </div>
-    }
+    } *@
 
     <!-- Color pickers for each range -->
-    <div class="flex gap-2 mt-6">
+    <div class="container">
         @for (int i = 0; i < TempRanges.Count; i++)
         {
             var localIndex = i;
-            <input type="color"
-                   value="@TempRanges[i].Color"
-                   @onchange="e => HandleColorChange(e, localIndex)" />
+
+            <div class="d-flex justify-content-between align-items-center mb-2 gx-2">
+                <div class="col-10">
+                    <label class="form-label mb-0 me-2">
+                        @TempRanges[i].Min&deg; - @TempRanges[i].Max&deg;
+                    </label>
+                </div>
+                <div class="col">
+                    <input type="color"
+                           value="@TempRanges[i].Color"
+                           @onchange="e => HandleColorChange(e, localIndex)" />
+                </div>
+            </div>
         }
     </div>
 </div>
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor
index 5c2216f..38c1ee1 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor	
@@ -3,7 +3,14 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<h3 class="text-xl font-bold mb-4">Crochet</h3>
+<PageTitle>Crochet Tools</PageTitle>
+<head>
+    <link rel="stylesheet" href="bootstrap/bootstrap-cosmo.css" /> <!-- app.css -->
+</head>
 
+<h3 class="text-xl font-bold mb-4">Crochet</h3>
+<div class="container">
 <TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
 
+</div>
+
diff --git a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs
index 5958f01..45af7f9 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs	
@@ -38,7 +38,7 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
             double maxAvgTemp = 84.0;
             double amplitude = (maxAvgTemp - minAvgTemp) / 2.0;  // 32.5
             double avgAnnualTemp = (maxAvgTemp + minAvgTemp) / 2.0;  // 52.5
-            double noiseMax = 4.0; // Small daily variation
+            double noiseMax = 3.0; // Small daily variation
 
             for (int i = 0; i < daysInYear; i++)
             {