diff --git a/README.md b/README.md
index c403366..57515f5 100644
--- a/README.md
+++ b/README.md
@@ -16,8 +16,6 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
@@ -31,6 +29,6 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The main branch is automatically deployed to [BookHive](https://thebookhive.vercel.app/) with [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) the creator of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/src/app/globals.css b/src/app/globals.css
index ed518da..3fdcc64 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,10 +7,12 @@
   --font-color-secondary: #4a4545;
 
   --color-primary: #ffdd4b;
+  --color-grey: #555;
 
   --background-primary: #fffce0;
   --background-secondary: #ffffff;
   --background-tertiary: #e7e7e7;
+  --background-grey: #d3d3d3;
 }
 
 * {
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 962d95c..15a27ca 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,9 +1,12 @@
 import SearchBar from "@/components/SearchBar";
+import styles from "./search.module.css";
 
 export default function Search() {
   return (
     <main>
-      <SearchBar placeholder="Title, author or ISBN" />
+      <div className={styles.searchBarContainer}>
+        <SearchBar placeholder="Title, author or ISBN" width="100%" />
+      </div>
     </main>
   );
 }
diff --git a/src/app/search/search.module.css b/src/app/search/search.module.css
new file mode 100644
index 0000000..b9189b5
--- /dev/null
+++ b/src/app/search/search.module.css
@@ -0,0 +1,4 @@
+.searchBarContainer {
+  margin-top: 2rem;
+  width: 70%;
+}
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
index 92e4dfd..e31097f 100644
--- a/src/components/SearchBar/index.tsx
+++ b/src/components/SearchBar/index.tsx
@@ -1,13 +1,14 @@
 import { FiSearch } from "react-icons/fi";
-import styles from "./profile.module.css";
+import styles from "./search-bar.module.css";
 
 type SearchBarProps = {
   placeholder?: string;
+  width?: string;
 };
 
-export default function SearchBar({ placeholder }: SearchBarProps) {
+export default function SearchBar({ placeholder, width }: SearchBarProps) {
   return (
-    <div className={styles.searchBar}>
+    <div style={{ width }} className={styles.searchBar}>
       <FiSearch className={styles.icon} />
       <input type="text" placeholder={placeholder} className={styles.input} />
     </div>
diff --git a/src/components/SearchBar/profile.module.css b/src/components/SearchBar/search-bar.module.css
similarity index 75%
rename from src/components/SearchBar/profile.module.css
rename to src/components/SearchBar/search-bar.module.css
index cf4d017..1dfe393 100644
--- a/src/components/SearchBar/profile.module.css
+++ b/src/components/SearchBar/search-bar.module.css
@@ -1,10 +1,9 @@
 .searchBar {
   display: flex;
   align-items: center;
-  background-color: #d3d3d3;
+  background-color: var(--background-grey);
   border-radius: 12px;
   padding: 10px 15px;
-  width: 300px;
 }
 
 .icon {
@@ -18,5 +17,6 @@
   background-color: transparent;
   outline: none;
   font-size: 16px;
-  color: #555;
+  width: 100%;
+  color: var(--color-grey);
 }