diff --git a/ui/status_bar.slint b/ui/status_bar.slint
index a7cc0c1..f467825 100644
--- a/ui/status_bar.slint
+++ b/ui/status_bar.slint
@@ -1,4 +1,5 @@
 import { Theme } from "theme.slint";
+import { VerticalSeparator } from "widgets/separator.slint";
 
 export component StatusBar inherits Rectangle {
     border-color: black;
@@ -14,23 +15,13 @@ export component StatusBar inherits Rectangle {
             text: "Last saved: 18:50";
         }
 
-        Path {
-            width: 1px;
-            stroke: black;
-            stroke-width: 1px;
-            commands: "M 0 0 L 0 24 Z";
-        }
+        VerticalSeparator { }
 
         Text {
             vertical-alignment: center;
             text: "Saved by: Jayrude";
         }
 
-        Path {
-            width: 1px;
-            stroke: black;
-            stroke-width: 1px;
-            commands: "M 0 0 L 0 24 Z";
-        }
+        VerticalSeparator { }
     }
 }
diff --git a/ui/tool_bar.slint b/ui/tool_bar.slint
index 53f10b8..cb082db 100644
--- a/ui/tool_bar.slint
+++ b/ui/tool_bar.slint
@@ -1,5 +1,6 @@
 import { Theme } from "theme.slint";
 import { Button } from "std-widgets.slint";
+import { HorizontalSeparator } from "widgets/separator.slint";
 
 component ToolBarItem inherits Rectangle {
     width: Theme.size-lg;
@@ -31,13 +32,7 @@ export component ToolBar inherits Rectangle {
 
         ToolBarItem { }
 
-        Path {
-            width: 32px;
-            height: 1px;
-            stroke: black;
-            stroke-width: 1px;
-            commands: "M 0 0 L 32 0 Z";
-        }
+        HorizontalSeparator { }
 
         ToolBarItem { }
 
@@ -51,13 +46,7 @@ export component ToolBar inherits Rectangle {
 
         ToolBarItem { }
 
-        Path {
-            width: 32px;
-            height: 1px;
-            stroke: black;
-            stroke-width: 1px;
-            commands: "M 0 0 L 32 0 Z";
-        }
+        HorizontalSeparator { }
 
         ToolBarItem { }
 
diff --git a/ui/widgets/separator.slint b/ui/widgets/separator.slint
index e69de29..9113c25 100644
--- a/ui/widgets/separator.slint
+++ b/ui/widgets/separator.slint
@@ -0,0 +1,17 @@
+export component VerticalSeparator {
+    Path {
+        width: 1px;
+        stroke: black;
+        stroke-width: 1px;
+        commands: "M 0 0 L 0 1 Z";
+    }
+}
+
+export component HorizontalSeparator {
+    Path {
+        height: 1px;
+        stroke: black;
+        stroke-width: 1px;
+        commands: "M 0 0 L 1 0 Z";
+    }
+}