diff --git a/css/styles.css b/css/styles.css
index e8f0ee1..6a8fae9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -60,14 +60,19 @@
     
   }
 
-.search input[type="submit"] {
+.search button[type=submit] {
     background: #FF9767;
     border: none;
     border-radius: 0 10px 10px 0;
-    display: inline-block;
+    /* display: inline-block; */
     padding: 0.4rem;
+    cursor: pointer;
 }
 
+.search button[type=submit]:hover {
+    background-color: #A082AE;
+} 
+
   .clear-button,
 .search-button {
   position: absolute;
diff --git a/index.html b/index.html
index 0ea3521..1d2fff6 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Load Styles -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/fontawesome.min.css" integrity="sha512-UuQ/zJlbMVAw/UU8vVBhnI4op+/tFOpQZVT+FormmIEhRSCnJWyHiBbEVgM4Uztsht41f3FzVWgLuwzUqOObKw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
     <link rel="stylesheet" href="css/reset.css" />
     <link rel="stylesheet" href="css/styles.css" />
   </head>
@@ -39,7 +41,10 @@
           <form class="search">
             <div class="input-group">
                 <input type="search" placeholder="Search Phoenix Public Library">
-                <input type="submit" value="XX ">
+                <!-- <input type="submit" class="fas fa-search" value=""> -->
+                <button type="submit">
+                  <i class="fas fa-search"></i>
+                </button>
             </div>
           </form>