diff --git a/src/components/searchBar.js b/src/components/searchBar.js
new file mode 100644
index 0000000..e9f0a63
--- /dev/null
+++ b/src/components/searchBar.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import styles from './searchBar.module.css'
+
+export default function SearchBar({ searchTerm, onChange }) {
+  return (
+    <center>
+      <div className={styles.searchContainer}>
+        <input
+          placeholder="Kezdj el írni a kereséshez..."
+          type="text"
+          value={searchTerm}
+          onChange={(event) => {
+            onChange(event.target.value)
+          }}
+        />
+        <button
+          onClick={() => {
+            onChange('')
+          }}
+          className={styles.clearButton}
+        >
+          ❌
+        </button>
+      </div>
+    </center>
+  )
+}
diff --git a/src/components/searchBar.module.css b/src/components/searchBar.module.css
new file mode 100644
index 0000000..983af43
--- /dev/null
+++ b/src/components/searchBar.module.css
@@ -0,0 +1,18 @@
+.searchContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 2px;
+}
+
+.clearButton {
+  width: 50px;
+  background-color: var(--background-color);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  border: none;
+  margin-left: 10px;
+}