diff --git a/frontend/resources/images/cap-line-arrow.svg b/frontend/resources/images/cap-line-arrow.svg
deleted file mode 100644
index 0df0673ba..000000000
--- a/frontend/resources/images/cap-line-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5M11.7 0l1 1 1.6 2-2.6 3" fill="none" stroke="#000"/></svg>
diff --git a/frontend/resources/images/cap-square-marker.svg b/frontend/resources/images/cap-square-marker.svg
deleted file mode 100644
index 2340ce571..000000000
--- a/frontend/resources/images/cap-square-marker.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="10" width="6" height="6" fill="#070707"/><path d="M0 3h14.5" fill="none" stroke="#000"/></svg>
diff --git a/frontend/resources/images/cap-triangle-arrow.svg b/frontend/resources/images/cap-triangle-arrow.svg
deleted file mode 100644
index f294d01cf..000000000
--- a/frontend/resources/images/cap-triangle-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5" fill="none" stroke="#000"/><path d="M13 0l2.9 3L13 6V0z"/></svg>
diff --git a/frontend/resources/images/cap-circle-marker.svg b/frontend/resources/images/icons/cap-circle-marker.svg
similarity index 77%
rename from frontend/resources/images/cap-circle-marker.svg
rename to frontend/resources/images/icons/cap-circle-marker.svg
index b41388e50..85dd8793b 100644
--- a/frontend/resources/images/cap-circle-marker.svg
+++ b/frontend/resources/images/icons/cap-circle-marker.svg
@@ -1 +1 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="6" ry="6" x="10" width="6" height="6"/><path d="M0 3h14.5" fill="none" stroke="#000"/></svg>
+<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="6" ry="6" x="10" width="6" height="6"/><path d="M0 3h14.5" fill="none"/></svg>
diff --git a/frontend/resources/images/cap-diamond-marker.svg b/frontend/resources/images/icons/cap-diamond-marker.svg
similarity index 64%
rename from frontend/resources/images/cap-diamond-marker.svg
rename to frontend/resources/images/icons/cap-diamond-marker.svg
index 0e2318340..58aceb5d2 100644
--- a/frontend/resources/images/cap-diamond-marker.svg
+++ b/frontend/resources/images/icons/cap-diamond-marker.svg
@@ -1 +1 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="11" y="1" transform="rotate(45 13 3)" width="4" height="4"/><path d="M0 3h14.5" fill="none" stroke="#000"/></svg>
+<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="11" y="1" transform="rotate(45 13 3)" width="4" height="4"/><path d="M0 3h14.5" fill="none"/></svg>
diff --git a/frontend/resources/images/icons/cap-line-arrow.svg b/frontend/resources/images/icons/cap-line-arrow.svg
new file mode 100644
index 000000000..5476c2448
--- /dev/null
+++ b/frontend/resources/images/icons/cap-line-arrow.svg
@@ -0,0 +1 @@
+<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5M11.7 0l1 1 1.6 2-2.6 3" fill="none"/></svg>
diff --git a/frontend/resources/images/cap-round.svg b/frontend/resources/images/icons/cap-round.svg
similarity index 77%
rename from frontend/resources/images/cap-round.svg
rename to frontend/resources/images/icons/cap-round.svg
index 594e02575..c0cf52ab2 100644
--- a/frontend/resources/images/cap-round.svg
+++ b/frontend/resources/images/icons/cap-round.svg
@@ -1 +1 @@
-<svg viewBox="1863 1374 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1374h-12s-4 0-4 4 4 4 4 4h12" fill="none" stroke="#000"/></svg>
+<svg viewBox="1863 1374 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1374h-12s-4 0-4 4 4 4 4 4h12" fill="none"/></svg>
diff --git a/frontend/resources/images/icons/cap-square-marker.svg b/frontend/resources/images/icons/cap-square-marker.svg
new file mode 100644
index 000000000..f3672dd68
--- /dev/null
+++ b/frontend/resources/images/icons/cap-square-marker.svg
@@ -0,0 +1 @@
+<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="10" width="6" height="6"/><path d="M0 3h14.5" fill="none"/></svg>
diff --git a/frontend/resources/images/cap-square.svg b/frontend/resources/images/icons/cap-square.svg
similarity index 84%
rename from frontend/resources/images/cap-square.svg
rename to frontend/resources/images/icons/cap-square.svg
index a2e3b6260..328608aad 100644
--- a/frontend/resources/images/cap-square.svg
+++ b/frontend/resources/images/icons/cap-square.svg
@@ -1 +1 @@
-<svg viewBox="1863 1407 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1407h-16v8h16" fill="none" stroke="#000"/></svg>
+<svg viewBox="1863 1407 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1407h-16v8h16" fill="none"/></svg>
diff --git a/frontend/resources/images/icons/cap-triangle-arrow.svg b/frontend/resources/images/icons/cap-triangle-arrow.svg
new file mode 100644
index 000000000..cab940669
--- /dev/null
+++ b/frontend/resources/images/icons/cap-triangle-arrow.svg
@@ -0,0 +1 @@
+<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5" fill="none"/><path d="M13 0l2.9 3L13 6V0z"/></svg>
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 6e47f82d1..6be8495cc 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -49,6 +49,7 @@
     .separator {
       margin: 0;
       height: $s-12;
+      border-top: 1px solid $db-primary;
     }
   }
   .checked-element {
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index f73fef49b..fd0c0657f 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -466,6 +466,15 @@
 (def ^:icon view-as-icons-refactor (icon-xref :view-as-icons-refactor))
 (def ^:icon wrap-refactor (icon-xref :wrap-refactor))
 (def ^:icon view-as-list-refactor (icon-xref :view-as-list-refactor))
+(def ^:icon cap-line-arrow (icon-xref :cap-line-arrow))
+(def ^:icon cap-triangle-arrow (icon-xref :cap-triangle-arrow))
+(def ^:icon cap-square-marker (icon-xref :cap-square-marker))
+(def ^:icon cap-circle-marker (icon-xref :cap-circle-marker))
+(def ^:icon cap-diamond-marker (icon-xref :cap-diamond-marker))
+(def ^:icon cap-round (icon-xref :cap-round))
+(def ^:icon cap-square (icon-xref :cap-square))
+
+
 (def ^:icon loader-pencil
   (mf/html
    [:svg
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index ca0b4b57f..23c70c23e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -123,14 +123,14 @@
         stroke-caps-options
         [{:value nil :label (tr "workspace.options.stroke-cap.none")}
          :separator
-         {:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short")}
-         {:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short")}
-         {:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short")}
-         {:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short")}
-         {:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short")}
+         {:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :cap-line-arrow}
+         {:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short") :icon :cap-triangle-arrow}
+         {:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short") :icon :cap-square-marker}
+         {:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short") :icon :cap-circle-marker}
+         {:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :cap-diamond-marker}
          :separator
-         {:value :round :label (tr "workspace.options.stroke-cap.round")}
-         {:value :square :label (tr "workspace.options.stroke-cap.square")}]
+         {:value :round :label (tr "workspace.options.stroke-cap.round") :icon :cap-round}
+         {:value :square :label (tr "workspace.options.stroke-cap.square") :icon :cap-square}]
 
         on-cap-switch
         (mf/use-callback