diff --git a/lapce-app/src/title.rs b/lapce-app/src/title.rs
index a73d61a9..667e3157 100644
--- a/lapce-app/src/title.rs
+++ b/lapce-app/src/title.rs
@@ -173,6 +173,7 @@ fn middle(cx: AppContext, config: ReadSignal<Arc<LapceConfig>>) -> impl View {
                 justify_content: Some(JustifyContent::Center),
                 align_items: Some(AlignItems::Center),
                 border: 1.0,
+                border_radius: 2.0,
                 background: Some(
                     *config.get().get_color(LapceColor::EDITOR_BACKGROUND),
                 ),
@@ -210,14 +211,27 @@ fn middle(cx: AppContext, config: ReadSignal<Arc<LapceConfig>>) -> impl View {
     })
 }
 
-fn right(cx: AppContext) -> impl View {
-    let (read_svg, set_svg) = create_signal(cx.scope, r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.99999 9.00004L5.14644 11.1465L4.43933 11.8536L1.43933 8.85359V8.14649L4.43933 5.14648L5.14644 5.85359L2.99999 8.00004H13L10.8535 5.85359L11.5606 5.14648L14.5606 8.14648V8.85359L11.5606 11.8536L10.8535 11.1465L13 9.00004H2.99999Z" fill="\#C5C5C5"/></svg>"#.to_string());
+fn right(cx: AppContext, config: ReadSignal<Arc<LapceConfig>>) -> impl View {
     container(cx, move |cx| {
-        svg(cx, move || read_svg.get()).style(cx, || Style {
-            width: Dimension::Points(20.0),
-            height: Dimension::Points(20.0),
-            ..Default::default()
-        })
+        svg(cx, move || config.get().ui_svg(LapceIcons::SETTINGS)).style(
+            cx,
+            move || {
+                let icon_size = config.get().ui.icon_size() as f32;
+                Style {
+                    width: Dimension::Points(icon_size),
+                    height: Dimension::Points(icon_size),
+                    ..Default::default()
+                }
+            },
+        )
+    })
+    .style(cx, || Style {
+        flex_basis: Dimension::Points(0.0),
+        flex_grow: 1.0,
+        padding_left: 10.0,
+        padding_right: 10.0,
+        justify_content: Some(JustifyContent::FlexEnd),
+        ..Default::default()
     })
 }
 
@@ -229,18 +243,11 @@ pub fn title(
     let connected = proxy_data.connected;
     let diff_info = proxy_data.diff_info;
     let head = move || diff_info.get().map(|info| info.head);
-    let (read_svg, set_svg) = create_signal(cx.scope, r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.99999 9.00004L5.14644 11.1465L4.43933 11.8536L1.43933 8.85359V8.14649L4.43933 5.14648L5.14644 5.85359L2.99999 8.00004H13L10.8535 5.85359L11.5606 5.14648L14.5606 8.14648V8.85359L11.5606 11.8536L10.8535 11.1465L13 9.00004H2.99999Z" fill="\#C5C5C5"/></svg>"#.to_string());
     stack(cx, move |cx| {
         (
             left(cx, proxy_data, config),
             middle(cx, config),
-            right(cx).style(cx, || Style {
-                flex_basis: Dimension::Points(0.0),
-                flex_grow: 1.0,
-                justify_content: Some(JustifyContent::FlexEnd),
-                border: 1.0,
-                ..Default::default()
-            }),
+            right(cx, config),
         )
     })
     .style(cx, move || Style {