diff --git a/app/assets/stylesheets/components/_search_bar_component.css b/app/assets/stylesheets/components/_search_bar_component.css
new file mode 100644
index 0000000..013426f
--- /dev/null
+++ b/app/assets/stylesheets/components/_search_bar_component.css
@@ -0,0 +1,16 @@
+.search-bar{
+    display: flex;
+    column-gap: 0.5em;
+    background-color: var(--primary-50);
+    padding: 0.5em;
+    border-radius: 0.5em;
+    align-items: center;
+
+    .search-field input{
+        padding-inline: 0.5em;
+        width: 400px;
+        background-color: transparent;
+        border: none;
+        height: 2em;
+    }
+}
\ No newline at end of file
diff --git a/app/components/search_bar_component.rb b/app/components/search_bar_component.rb
new file mode 100644
index 0000000..47cd748
--- /dev/null
+++ b/app/components/search_bar_component.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class SearchBarComponent < ViewComponent::Base
+  include ApplicationHelper
+  erb_template <<-ERB
+    <%# locals: () -%>
+    <%= form_with(url: search_path, method: :get, class: 'search-bar') do |f| %>
+        <div class='search-field'>
+            <%= f.text_field :q, required: true, placeholder: 'Type your search here...'%>
+        </div>
+        <%= render(IconButtonComponent.new(path: 'search', action: :search)) %>
+    <% end %>
+  ERB
+
+  def initialize(
+    search_path:,
+    method: :get,
+    data: { turbo: false },
+    placeholder: 'Type your search here...'
+  )
+    super()
+    @search_path = search_path
+    @method = method
+    @data = data
+    @placeholder = placeholder
+  end
+end
diff --git a/app/views/search/_search-bar.html.erb b/app/views/search/_search-bar.html.erb
index 1fb4fa7..e4b40a4 100644
--- a/app/views/search/_search-bar.html.erb
+++ b/app/views/search/_search-bar.html.erb
@@ -1,10 +1,3 @@
 <%# locals: () -%>
 
-<%= form_with(url: search_path, method: :get) do |f| %>
-    <div>
-        <%= f.text_field :q, required: true, placeholder: 'Type your search here...'%>
-    </div>
-    <%= f.button "search", name: nil do%>
-        <%= svg_icon_tag "icon_search" %>
-    <% end %>
-<% end %>
+<%= render(SearchBarComponent.new(search_path: search_path)) %>
diff --git a/test/components/search_bar_component_test.rb b/test/components/search_bar_component_test.rb
new file mode 100644
index 0000000..52af17c
--- /dev/null
+++ b/test/components/search_bar_component_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class SearchBarComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(SearchBarComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end