diff --git a/assets/images/search-background.png b/assets/images/search-background.png
new file mode 100644
index 0000000..92c3bb5
Binary files /dev/null and b/assets/images/search-background.png differ
diff --git a/css/components/page/agency.css b/css/components/page/agency.css
index de45b3d..5437630 100644
--- a/css/components/page/agency.css
+++ b/css/components/page/agency.css
@@ -10,7 +10,7 @@
 
     width: 100%;
 
-    padding: 25px 0px;
+    padding-top: 25px;
     margin-top: 50px;
 }
 .agency-head-1 {
diff --git a/css/components/page/search.css b/css/components/page/search.css
new file mode 100644
index 0000000..ce3db9d
--- /dev/null
+++ b/css/components/page/search.css
@@ -0,0 +1,137 @@
+.search-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 62vw;
+
+    background-color: #E3F0FF;
+    background-size: cover;
+    object-fit: cover;
+}
+
+.search-bar-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+}
+
+.search-bar-arrangement-type-picker-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: end;
+
+    width: 100%;
+    margin-left: 20px;
+    margin-bottom: -5px;
+
+    gap: 2.5px;
+
+    font-family: Ubuntu;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 14px;
+    text-align: center;
+}
+.search-bar-arrangement-type-picker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 45px;
+    height: 30px;
+
+    color: black;
+    background-color: white;
+
+    border: 0.4px solid #26306B;
+    border-radius: 5px;
+}
+.search-bar-arrangement-type-picker-selected {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 45px;
+    height: 30px;
+
+    color: white;
+    background-color: #26306B;
+
+    border: 0.4px solid #26306B;
+    border-radius: 5px;
+}
+.search-bar-area-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+
+    background-color: #FEFEFE;
+
+    width: 400px;
+    height: 55px;
+
+    border-radius: 5px;
+}
+.search-bar-area-location-picker {
+    width: 150px;
+    color: black;
+    opacity: 0.6;
+    text-align: center;
+
+    font-size: 12px;
+}
+.search-bar-area-separator {
+    width: 0.7px;
+    height: 70%;
+
+    background-color: black;
+    opacity: 0.6;
+}
+.search-bar-area-text-search {
+    width: 180px;
+    color: black;
+    opacity: 0.6;
+    text-align: center;
+
+    font-size: 12px;
+}
+.search-bar-area-filter-toggle {
+    width: 30px;
+    height: 30px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: #26306B;
+    font-size: 17px;
+}
+.search-bar-area-filter-toggle:hover {
+    cursor: pointer;
+}
+.search-bar-area-go-button {
+    width: 30px;
+    height: 30px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 17px;
+    color: white;
+
+    border-radius: 5px;
+
+    background-color: #26306B;
+}
+
+.search-bar-area-go-button:hover {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 65c1558..bbac21f 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
         <link data-trunk type="text/css" href="css/components/navbar.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/page/hero.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/page/agency.css" rel="css" />
+        <link data-trunk type="text/css" href="css/components/page/search.css" rel="css" />
         
 
         <link data-trunk href="assets/text/robots.txt" rel="copy-file"/>
diff --git a/src/components/page/search.rs b/src/components/page/search.rs
index c1aa8bc..f3c6fe5 100644
--- a/src/components/page/search.rs
+++ b/src/components/page/search.rs
@@ -2,5 +2,33 @@ use yew::prelude::*;
 
 #[function_component(SearchSection)]
 pub fn search_section() -> Html {
-    html! {}
+    html! {
+        <div class={"search-container"} style={"background-image: url('images/search-background.png');"}>
+            <div class={"search-bar-container"}>
+                <div class={"search-bar-arrangement-type-picker-container"}>
+                    <div class={"search-bar-arrangement-type-picker-selected"}>
+                        {"Buy"}
+                    </div>
+                    <div class={"search-bar-arrangement-type-picker"}>
+                        {"Rent"}
+                    </div>
+                </div>
+                <div class={"search-bar-area-container"}>
+                    <div class={"search-bar-area-location-picker"}>
+                        {"Select Location"}
+                    </div>
+                    <div class={"search-bar-area-separator"}/>
+                    <div class={"search-bar-area-text-search"}>
+                        {"Enter keyword..."}
+                    </div>
+                    <div class={"search-bar-area-filter-toggle"}>
+                        <i class="fa-solid fa-sliders"></i>
+                    </div>
+                    <div class={"search-bar-area-go-button"}>
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
 }