diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index 2f19c91868..6a000091e4 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -1531,6 +1531,7 @@ impl ProjectSearchBar {
     ) -> AnyElement<Self> {
         let action: Box<dyn Action>;
         let tooltip;
+
         match direction {
             Direction::Prev => {
                 action = Box::new(SelectPrevMatch);
@@ -1546,10 +1547,51 @@ impl ProjectSearchBar {
         enum NavButton {}
         MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
             let theme = theme::current(cx);
-            let style = theme.search.option_button.inactive_state().style_for(state);
-            Label::new(icon, style.text.clone())
+            let mut style = theme.search.nav_button.style_for(state).clone();
+
+            match direction {
+                Direction::Prev => style.container.border.left = false,
+                Direction::Next => style.container.border.right = false,
+            };
+            let mut label = Label::new(icon, style.label.clone())
                 .contained()
-                .with_style(style.container)
+                .with_style(style.container.clone());
+            match direction {
+                Direction::Prev => Flex::row()
+                    .with_child(
+                        ButtonSide::left(
+                            style
+                                .clone()
+                                .container
+                                .background_color
+                                .unwrap_or_else(gpui::color::Color::transparent_black),
+                        )
+                        .with_border(style.container.border.width, style.container.border.color)
+                        .contained()
+                        .constrained()
+                        .with_max_width(theme.search.mode_filling_width),
+                    )
+                    .with_child(label)
+                    .constrained()
+                    .with_height(theme.workspace.toolbar.height),
+                Direction::Next => Flex::row()
+                    .with_child(label)
+                    .with_child(
+                        ButtonSide::right(
+                            style
+                                .clone()
+                                .container
+                                .background_color
+                                .unwrap_or_else(gpui::color::Color::transparent_black),
+                        )
+                        .with_border(style.container.border.width, style.container.border.color)
+                        .contained()
+                        .constrained()
+                        .with_max_width(theme.search.mode_filling_width),
+                    )
+                    .constrained()
+                    .with_height(theme.workspace.toolbar.height),
+            }
         })
         .on_click(MouseButton::Left, move |_, this, cx| {
             if let Some(search) = this.active_project_search.as_ref() {
@@ -1911,7 +1953,26 @@ impl View for ProjectSearchBar {
             Flex::row()
                 .with_child(
                     Flex::column()
-                        .with_child(Flex::row().with_children(matches).aligned().left())
+                        .with_child(
+                            Flex::row()
+                                .with_child(
+                                    Flex::row()
+                                        .with_child(self.render_nav_button(
+                                            "<",
+                                            Direction::Prev,
+                                            cx,
+                                        ))
+                                        .with_child(self.render_nav_button(
+                                            ">",
+                                            Direction::Next,
+                                            cx,
+                                        ))
+                                        .aligned(),
+                                )
+                                .with_children(matches)
+                                .aligned()
+                                .left(),
+                        )
                         .flex(1., true),
                 )
                 .with_child(
@@ -1929,20 +1990,6 @@ impl View for ProjectSearchBar {
                                         .with_max_width(theme.search.editor.max_width)
                                         .flex(1., false),
                                 )
-                                .with_child(
-                                    Flex::row()
-                                        .with_child(self.render_nav_button(
-                                            "<",
-                                            Direction::Prev,
-                                            cx,
-                                        ))
-                                        .with_child(self.render_nav_button(
-                                            ">",
-                                            Direction::Next,
-                                            cx,
-                                        ))
-                                        .aligned(),
-                                )
                                 .contained()
                                 .with_margin_bottom(row_spacing),
                         )
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index da6a188527..1107906ca7 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -389,6 +389,7 @@ pub struct Search {
     pub editor_icon: IconStyle,
     pub mode_button: Toggleable<Interactive<ContainedText>>,
     pub mode_filling_width: f32,
+    pub nav_button: Interactive<ContainedLabel>,
 }
 
 #[derive(Clone, Deserialize, Default, JsonSchema)]
diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts
index 3565db1f9f..fb9b356591 100644
--- a/styles/src/style_tree/search.ts
+++ b/styles/src/style_tree/search.ts
@@ -225,5 +225,33 @@ export default function search(): any {
             },
         }),
         mode_filling_width: 4.0,
+        nav_button: interactive({
+            base: {
+                text: text(theme.highest, "mono", "on"),
+                background: background(theme.highest, "on"),
+                corner_radius: 2,
+                border: border(theme.highest, "on"),
+
+                padding: {
+                    bottom: 6,
+                    left: 6,
+                    right: 6,
+                    top: 6,
+                },
+            },
+            state: {
+                hovered: {
+                    ...text(theme.highest, "mono", "on", "hovered"),
+                    background: background(theme.highest, "on", "hovered"),
+                    border: border(theme.highest, "on", "hovered"),
+                },
+                clicked: {
+                    ...text(theme.highest, "mono", "on", "pressed"),
+                    background: background(theme.highest, "on", "pressed"),
+                    border: border(theme.highest, "on", "pressed"),
+                },
+            },
+        }),
+
     }
 }