diff --git a/client/src/app/homepage/homepage.component.html b/client/src/app/homepage/homepage.component.html
index e821a8b..c6728c2 100644
--- a/client/src/app/homepage/homepage.component.html
+++ b/client/src/app/homepage/homepage.component.html
@@ -7,8 +7,7 @@
             <th class="bed-col text-center flower-header list-group-item-success">Bed</th>
         </tr>
         <tr *ngIf="(currentList | filterBy: {commonName: nav.currentCN}).length === 0">
-            <th class="flower-col flower-header text-center list-group-item-success">No flowers found for<br> "{{nav.currentCN}}"</th>
-            <th class="flower-col flower-header text-center list-group-item-success"><span class="x-icon"><i class="fa fa-window-close" aria-hidden="true"></i></span></th>
+            <th class="col-xs-12 flower-header text-center list-group-item-success">No flowers found for<br> "{{nav.currentCN}}"</th>
         </tr>
         <tr *ngFor="let each of currentList | filterBy: {commonName: nav.currentCN}">
             <td class="flower-col" (click)="this.goToPlant(['/plants', each.id])">
diff --git a/client/src/app/navbar/garden-navbar.component.html b/client/src/app/navbar/garden-navbar.component.html
index 6d6b5e4..8daf9ed 100644
--- a/client/src/app/navbar/garden-navbar.component.html
+++ b/client/src/app/navbar/garden-navbar.component.html
@@ -5,8 +5,11 @@
     </div>
     <div class="row search-tab">
         <div class="searchField col-xs-8">
-            <input type="text" placeholder="Find a flower" class="form-control search-field"
+            <form>
+            <input type="text" placeholder="Find a flower" name="searchbar" required class="form-control search-field search-box"
                    [(ngModel)]="currentCN">
+                <button class="close-icon" type="reset"></button>
+            </form>
         </div>
         <div class="col-xs-4 bed-tab">
             <select class="form-control bed-field" (change)="this.router.navigate(['/bed', this.bed])" [(ngModel)]="bed">
@@ -51,4 +54,40 @@
         border-radius: 20px;
     }
 
+    .close-icon {
+        border:1px solid transparent;
+        background-color: transparent;
+        display: inline-block;
+        vertical-align: middle;
+        outline: 0;
+        cursor: pointer;
+    }
+    .close-icon:after {
+        content: "x";
+        display: block;
+        width: 22px;
+        height: 22px;
+        position: absolute;
+        background-color: maroon;
+        z-index:1;
+        right: 35px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        /*padding: 2px;*/
+        border-radius: 50%;
+        text-align: center;
+        color: gold;
+        font-weight: bold;
+        font-size: 16px;
+        box-shadow: 0 0 2px gold;
+        cursor: pointer;
+    }
+    .search-box:not(:valid) ~ .close-icon {
+        display: none;
+    }
+
+    form {
+        margin-bottom: 0px;
+    }
 </style>
\ No newline at end of file
diff --git a/client/src/app/plants/bed.component.html b/client/src/app/plants/bed.component.html
index ccabf70..1719e77 100644
--- a/client/src/app/plants/bed.component.html
+++ b/client/src/app/plants/bed.component.html
@@ -5,8 +5,7 @@
         <strong>Flowers</strong>
     </li>
     <li class="text-center list-group-item flower-header list-group-item-success row" *ngIf="(plants | filterBy: {commonName: nav.currentCN}).length === 0">
-        <strong class="col-xs-9">No flowers found for <br>"{{nav.currentCN}}"</strong>
-        <span class="x-icon"><i class="fa fa-window-close" aria-hidden="true"></i></span>
+        <strong class="col-xs-12">No flowers found for <br>"{{nav.currentCN}}"</strong>
     </li>
     <li *ngFor="let plant of plants | filterBy: {commonName: nav.currentCN}"  class="list-group-item text-center">
         <!--Button is a hyperlink to a plant page "/plants/:plantID"-->
@@ -27,4 +26,8 @@
     a:active {
         background-color: #ffe87c;
     }
+
+    .center-not-found {
+        font-size: 18px;
+    }
 </style>
\ No newline at end of file