diff --git a/frontend/src/components/header/HeaderQuickSearch.jsx b/frontend/src/components/header/HeaderQuickSearch.jsx
index ded9733257..f9addba82d 100644
--- a/frontend/src/components/header/HeaderQuickSearch.jsx
+++ b/frontend/src/components/header/HeaderQuickSearch.jsx
@@ -1,52 +1,132 @@
-import { set } from "date-fns";
+
 import React, { useState } from "react";
+import { Col, Dropdown, FormControl } from "react-bootstrap";
+import MainButton from "../MainButton";
+import { FormattedMessage } from "react-intl";
+import ThemeColorContext from "../../ThemeColorProvider";
 
 export default function HeaderQuickSearch() {
     const [search, setSearch] = useState("");
-    const [searchResults, setSearchResults] = useState(["Result 1", "Result 2", "Result 3"]);
+    const [searchResults, setSearchResults] = useState([{
+        name: "5a746580-df85-40cd-976f-ae0d53155ec4",
+        species: "Species 1",
+    }, {
+        name: "Name 2",
+        species: "Species 2",
+    }, {
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },{
+        name: "Name 3",
+        species: "Species 3",
+    },
+    {
+        name: "Name 3",
+        species: "Species 3",
+    },
+
+]);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const theme = React.useContext(ThemeColorContext);
+
+    const handleInputChange = (e) => {
+        setSearch(e.target.value);
+    };
 
+    const handleClearSearch = () => {
+        setSearch("");
+        setShowDropdown(false);
+    };
+
+    console.log("showDropdown", showDropdown);
     return (
-        <div className="header-quick-search d-flex flex-column" >
-            <div className="header-quick-search d-flex flex-row" >
-                <input
-                    type="text"
-                    placeholder="Search"
-                    className="header-quick-search-input"
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    style={{
-                        height: "35px",
-                        width: "150px",
-                        paddingLeft: "10px",
-                        backgroundColor: "transparent",
-                        border: "1px solid white",
-                        borderRadius: "20px 0px 0px 20px",
-                        color: "white",
-                        borderRight: "none",
-                    }}
-                />
-                <button
-                    className="header-quick-search-button"
-                    style={{
-                        height: "35px",
-                        backgroundColor: "transparent",
-                        border: "1px solid white",
-                        borderRadius: "0px 20px 20px 0px",
-                        color: "white",
-                        borderLeft: "none",
-                    }}
-                    onClick={() => {
-                        setSearch("");
-                    }}
-                >
-                    <i class="bi bi-x"></i>
-                </button>
-            </div>
-            <div className="header-quick-search-results">
-                {searchResults.map((result) => (
-                    <div className="header-quick-search-result">{result}</div>
-                ))}
-            </div>
+        <div className="header-quick-search">
+            <Dropdown show={showDropdown} onBlur={() => setShowDropdown(false)}>
+                <div className="d-flex">
+                    <FormControl
+                        type="text"
+                        placeholder="Search Individuals"
+                        value={search}
+                        onChange={handleInputChange}
+                        onFocus={() => setShowDropdown(true)}
+                        style={{
+                            height: "35px",
+                            width: "150px",
+                            paddingLeft: "10px",
+                            backgroundColor: "transparent",
+                            border: "1px solid white",
+                            borderRadius: "20px 0px 0px 20px",
+                            color: "white",
+                            borderRight: "none",
+                        }}
+                        className="header-quick-search-input"
+                    />
+                    <button
+                        className="header-quick-search-button"
+                        style={{
+                            height: "35px",
+                            backgroundColor: "transparent",
+                            border: "1px solid white",
+                            borderRadius: "0px 20px 20px 0px",
+                            color: "white",
+                            borderLeft: "none",
+                        }}
+                        onClick={handleClearSearch}
+                    >
+                        <i className="bi bi-x"></i>
+                    </button>
+                </div>
+
+                <Dropdown.Menu style={{
+                    width: "300px",
+                    marginTop: "10px",
+                    overflow: "auto",
+                    maxHeight: "400px",
+                }}>
+                    {searchResults.map((result, index) => (
+                        <Dropdown.Item key={index}>
+                            <div className="d-flex flex-row justify-content-between">
+                                <div className="individual-name" style={{
+                                    width: "180px",
+                                    fontSize: "0.8rem",
+                                    overflow: "hidden",
+                                }}>
+                                    <div>{result.name}</div>
+                                    <div>{result.species}</div>
+                                </div>
+                                <MainButton
+                                    noArrow={true}
+                                    style={{
+                                        width: "80px",
+                                        height: "30px",
+                                        color: "white",
+                                        fontSize: "0.8rem",
+                                        marginRight: 0,
+                                    }}
+                                    backgroundColor={theme.primaryColors.primary500}
+                                >
+                                    <FormattedMessage id="nick_name" />
+                                </MainButton>
+                            </div>
+                        </Dropdown.Item>
+                    ))}
+                </Dropdown.Menu>
+            </Dropdown>
         </div>
     );
-}
\ No newline at end of file
+}