diff --git a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
index f19b97741b..3debc25802 100644
--- a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -280,7 +280,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -400,7 +400,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -427,7 +427,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -516,7 +516,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -877,7 +877,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -1449,7 +1449,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -1560,7 +1560,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -1680,7 +1680,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -1707,7 +1707,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -1796,7 +1796,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -2157,7 +2157,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
diff --git a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
index 0db82eaa32..b54aded228 100644
--- a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
@@ -182,7 +182,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   style="padding: 0px 10px;"
                 >
                   <div
-                    class="HorizontalLine Small"
+                    class="HorizontalLine size-sm"
                   />
                 </div>
               </div>
@@ -293,7 +293,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="extension-install-registry"
@@ -413,7 +413,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="start-up"
@@ -440,7 +440,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="update-channel"
@@ -529,7 +529,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="timezone"
diff --git a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
index b706037dff..c69b64bf69 100644
--- a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
@@ -157,14 +157,14 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
               <div
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -275,7 +275,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -395,7 +395,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -422,7 +422,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -511,7 +511,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -859,7 +859,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
               <div
@@ -887,7 +887,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -998,7 +998,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -1118,7 +1118,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -1145,7 +1145,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -1234,7 +1234,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -1582,7 +1582,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
               <div
@@ -1622,7 +1622,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -1733,7 +1733,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -1853,7 +1853,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -1880,7 +1880,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -1969,7 +1969,7 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
diff --git a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 710c260d38..822d9641c9 100644
--- a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -157,7 +157,7 @@ exports[`preferences - navigation to application preferences given in some child
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -215,7 +215,7 @@ exports[`preferences - navigation to application preferences given in some child
                 </section>
               </div>
               <div
-                class="HorizontalLine Small"
+                class="HorizontalLine size-sm"
               />
               <div
                 data-preference-item-test="allow-untrusted-certificates"
@@ -505,7 +505,7 @@ exports[`preferences - navigation to application preferences given in some child
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -616,7 +616,7 @@ exports[`preferences - navigation to application preferences given in some child
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -736,7 +736,7 @@ exports[`preferences - navigation to application preferences given in some child
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -763,7 +763,7 @@ exports[`preferences - navigation to application preferences given in some child
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -852,7 +852,7 @@ exports[`preferences - navigation to application preferences given in some child
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -1202,7 +1202,7 @@ exports[`preferences - navigation to application preferences given in some child
                   style="padding: 0px 10px;"
                 >
                   <div
-                    class="HorizontalLine Small"
+                    class="HorizontalLine size-sm"
                   />
                 </div>
               </div>
@@ -1313,7 +1313,7 @@ exports[`preferences - navigation to application preferences given in some child
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="extension-install-registry"
@@ -1433,7 +1433,7 @@ exports[`preferences - navigation to application preferences given in some child
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="start-up"
@@ -1460,7 +1460,7 @@ exports[`preferences - navigation to application preferences given in some child
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="update-channel"
@@ -1549,7 +1549,7 @@ exports[`preferences - navigation to application preferences given in some child
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="timezone"
diff --git a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index 9cce512ad4..23391e74a6 100644
--- a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -157,7 +157,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -268,7 +268,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -388,7 +388,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -415,7 +415,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -504,7 +504,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -853,7 +853,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
diff --git a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index 1ce05f47b9..1c44934841 100644
--- a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -157,7 +157,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -268,7 +268,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -388,7 +388,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -415,7 +415,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -504,7 +504,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -853,7 +853,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -911,7 +911,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </section>
               </div>
               <div
-                class="HorizontalLine Small"
+                class="HorizontalLine size-sm"
               />
               <div
                 data-preference-item-test="allow-untrusted-certificates"
diff --git a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index 611792273f..ec0afed8ff 100644
--- a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -488,7 +488,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -599,7 +599,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -719,7 +719,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -746,7 +746,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -835,7 +835,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -1196,7 +1196,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -1307,7 +1307,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -1427,7 +1427,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -1454,7 +1454,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -1543,7 +1543,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -1904,7 +1904,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -2213,7 +2213,7 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
diff --git a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 70dd5edfe8..8ad4a3ea09 100644
--- a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -157,7 +157,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -268,7 +268,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -388,7 +388,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -415,7 +415,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -504,7 +504,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
@@ -853,7 +853,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
diff --git a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index 806c8df00b..c80cd4abe3 100644
--- a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -375,7 +375,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 style="padding: 0px 10px;"
               >
                 <div
-                  class="HorizontalLine Small"
+                  class="HorizontalLine size-sm"
                 />
               </div>
             </div>
@@ -486,7 +486,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="extension-install-registry"
@@ -606,7 +606,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="start-up"
@@ -633,7 +633,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="update-channel"
@@ -722,7 +722,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                 </section>
               </div>
               <div
-                class="HorizontalLine"
+                class="HorizontalLine size-xl"
               />
               <div
                 data-preference-item-test="timezone"
diff --git a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
index 6dd574e631..ae29839693 100644
--- a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
@@ -378,7 +378,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   style="padding: 0px 10px;"
                 >
                   <div
-                    class="HorizontalLine Small"
+                    class="HorizontalLine size-sm"
                   />
                 </div>
               </div>
@@ -489,7 +489,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="extension-install-registry"
@@ -609,7 +609,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="start-up"
@@ -636,7 +636,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="update-channel"
@@ -725,7 +725,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   </section>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  class="HorizontalLine size-xl"
                 />
                 <div
                   data-preference-item-test="timezone"
diff --git a/src/features/preferences/renderer/preference-items/preference-tab-root.tsx b/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
index 77af345065..5f5188799b 100644
--- a/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
+++ b/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
@@ -23,7 +23,7 @@ export const preferenceTabsRoot: PreferenceTabsRoot = {
 
   childSeparator: () => (
     <div style={{ padding: "0 10px" }}>
-      <HorizontalLine small />
+      <HorizontalLine size="sm" />
     </div>
   ),
 };
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
index 3478970396..34a698fd5c 100644
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
@@ -23,7 +23,7 @@ const proxyPreferencePageInjectable = getInjectable({
     id: "proxy-page",
     parentId: "proxy-tab",
     Component: ProxyPage,
-    childSeparator: () => <HorizontalLine small />,
+    childSeparator: () => <HorizontalLine size="sm" />,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/renderer/components/horizontal-line/horizontal-line.module.scss b/src/renderer/components/horizontal-line/horizontal-line.module.scss
index 3d6f09dbfc..91dc5106d3 100644
--- a/src/renderer/components/horizontal-line/horizontal-line.module.scss
+++ b/src/renderer/components/horizontal-line/horizontal-line.module.scss
@@ -4,14 +4,22 @@
  */
 
 .HorizontalLine {
-  margin-top: 40px;
-  margin-bottom: 40px;
-
   height: 1px;
   border-top: thin solid var(--hrColor);
 }
 
-.Small {
-  margin-top: 20px;
-  margin-bottom: 20px;
+@mixin horizontalLineSize(
+  $sizeName,
+  $size
+) {
+  .size-#{$sizeName} {
+  margin-top: $size;
+  margin-bottom: $size;
+  }
 }
+
+$baseline: 8px;
+
+@include horizontalLineSize('sm', 2 * $baseline);
+@include horizontalLineSize('md', 3 * $baseline);
+@include horizontalLineSize('xl', 5 * $baseline);
diff --git a/src/renderer/components/horizontal-line/horizontal-line.tsx b/src/renderer/components/horizontal-line/horizontal-line.tsx
index fba1e6dfdc..0e9e9accf3 100644
--- a/src/renderer/components/horizontal-line/horizontal-line.tsx
+++ b/src/renderer/components/horizontal-line/horizontal-line.tsx
@@ -6,11 +6,12 @@ import React from "react";
 import styles from "./horizontal-line.module.scss";
 import { cssNames } from "../../utils";
 
-export const HorizontalLine = ({ small } = { small: false }) => (
-  <div
-    className={cssNames({
-      [styles.HorizontalLine]: true,
-      [styles.Small]: small,
-    })}
-  />
-);
+interface HorizontalLineProps {
+  size: "sm" | "md" | "xl";
+}
+
+export const HorizontalLine = ({ size }: HorizontalLineProps = { size: "xl" }) => {
+  const classNames = cssNames(styles.HorizontalLine, styles[`size-${size}`]);
+
+  return <div className={classNames} />;
+};