<h3 id="heading-revamping-the-navbar-and-adding-filter-buttons-and-search-bar">Revamping the Navbar and Adding Filter Buttons and Search Bar</h3>
<p>In the journey of building our food app, today we focused on enhancing the user interface by revamping the navbar and adding a Login button. I also created filter button components with a search bar. While the logic is still in progress, let's dive into the UI improvements we made.</p>
<h4 id="heading-1-revamped-navbar"><strong>1. Revamped Navbar</strong></h4>
<p>We started by revamping the navbar to improve navigation and make it more visually appealing. The new change in the Navbar includes a Login button.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1715262616916/606c1767-abf4-42ec-970e-6e4517a5a98a.png" alt class="image--center mx-auto" /></p>
<h4 id="heading-2-filter-button-components"><strong>2. Filter Button Components</strong></h4>
<p>We added filter button components to allow users to filter restaurants based on various criteria such as cuisine type, ratings, and delivery time.</p>
<h4 id="heading-3-search-bar-for-restaurant-search"><strong>3. Search Bar for Restaurant Search</strong></h4>
<p>To improve the search functionality, we added a search bar that allows users to search for restaurants by name or location.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1715262830161/3f7e0a9d-9456-4187-a22f-5419076d4dba.png" alt class="image--center mx-auto" /></p>


### Revamping the Navbar and Adding Filter Buttons and Search Bar

In the journey of building our food app, today we focused on enhancing the user interface by revamping the navbar and adding a Login button. I also created filter button components with a search bar. While the logic is still in progress, let's dive into the UI improvements we made.

#### **1\. Revamped Navbar**

We started by revamping the navbar to improve navigation and make it more visually appealing. The new change in the Navbar includes a Login button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715262616916/606c1767-abf4-42ec-970e-6e4517a5a98a.png align="center")

#### **2\. Filter Button Components**

We added filter button components to allow users to filter restaurants based on various criteria such as cuisine type, ratings, and delivery time.

#### **3\. Search Bar for Restaurant Search**

To improve the search functionality, we added a search bar that allows users to search for restaurants by name or location.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715262830161/3f7e0a9d-9456-4187-a22f-5419076d4dba.png align="center")

Day -9 React with Me

Revamping the Navbar and Adding Filter Buttons and Search Bar

1. Revamped Navbar

2. Filter Button Components

3. Search Bar for Restaurant Search