diff --git a/webmarker/public/index.html b/webmarker/public/index.html
index b70f916..b188d84 100644
--- a/webmarker/public/index.html
+++ b/webmarker/public/index.html
@@ -11,7 +11,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Web Marker</title>
diff --git a/webmarker/src/App.js b/webmarker/src/App.js
index e2a0bd9..09730b0 100644
--- a/webmarker/src/App.js
+++ b/webmarker/src/App.js
@@ -34,9 +34,8 @@ function App() {
   return (
     <div className="App">
       <div className="head">
-        <input className="search" type="search" placeholder="Search for Name/Title/Tag" onChange={search}/>
-        <button className="add-btn"><span className="material-icons-outlined md-36" onClick={() => setIsAdding(true)}>add</span></button>
-        <button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
+        <input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
+        <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
       </div>
       <List data={filteredData} />
       {isAdding ? <AddModal onExit={exitAdding} /> : null}
diff --git a/webmarker/src/componets/AddModal.js b/webmarker/src/componets/AddModal.js
index f2282c2..1eaf63b 100644
--- a/webmarker/src/componets/AddModal.js
+++ b/webmarker/src/componets/AddModal.js
@@ -55,7 +55,7 @@ const AddModal = ({onExit}) => {
     }
 
     else {
-      alert('Please fill all fields and make sure url is valid.\n\n(i.e. starts with http/https)');
+      alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
     }
   }
 
@@ -76,7 +76,7 @@ const AddModal = ({onExit}) => {
           <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tag:</h3>
           <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/>
-          <button onClick={submitBookmark} className="upload-btn"><span className="material-icons-outlined md-36">upload</span></button>
+          <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
           <button className="cancel-btn">Cancel</button>
         </div>
       </div>
diff --git a/webmarker/src/componets/List.js b/webmarker/src/componets/List.js
index 314cfb0..1196c4a 100644
--- a/webmarker/src/componets/List.js
+++ b/webmarker/src/componets/List.js
@@ -43,7 +43,7 @@ const List = ({data}) => {
                     <td>{e.title}</td>
                     <td><a href={e.link}>{url.hostname}</a></td>
                     <td>{e.tag}</td>
-                    <td className="delete" onClick={() => deleteEntity(e._id)}><div>x</div></td>
+                    <td className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</td>
                 </tr>
             } catch (e) {
                 console.log(e)
diff --git a/webmarker/src/styles/App.css b/webmarker/src/styles/App.css
index f3e52b6..6dcfffa 100644
--- a/webmarker/src/styles/App.css
+++ b/webmarker/src/styles/App.css
@@ -10,32 +10,42 @@
 }
 
 .search {
-  border-radius: 10px;
+  font-family: 'Font Awesome 5 Free';
   font-size: 1.5rem;
   padding-left: 10px;
-  width: 40%;
+  border: none;
+  width: 50%;
+  color: white;
+  background-color:#273949;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }
 
-.search-btn {
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-  color: #1f2c38b6;
+.settings-btn:active, .add-btn:active {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.settings-btn {
-  border-radius: 10px;
-  color: #1f2c38b6;
+.search:focus {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 .add-btn {
-  border-radius: 10px;
-  color: #1f2c38b6;
+  font-family: 'Font Awesome 5 Free';
+  padding: 10px;
+  font-size: 1.5rem;
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  color: #ffffffb6;
+  background-color:#273949;
+  border: none;
   margin-left: auto;
   margin-right: 10px;
+  transition: background-color 0.1s;
+}
+
+.add-btn:hover {
+  background-color: rgb(76, 117, 170);
 }
 
 textarea:focus, input:focus{
   outline: none;
 }
-
-.material-icons-outlined.md-36 { font-size: 36px; }
diff --git a/webmarker/src/styles/List.css b/webmarker/src/styles/List.css
index b6712a1..047a1f8 100644
--- a/webmarker/src/styles/List.css
+++ b/webmarker/src/styles/List.css
@@ -13,7 +13,6 @@
 
 .table th {
   font-size: 1.6rem;
-  padding: 5px;
 }
 
 .table tbody tr:nth-of-type(2n-1) {
@@ -32,9 +31,18 @@
 }
 
 .delete {
-  background-color: rgb(255, 123, 123);
   color: white;
   cursor: pointer;
+  transition: background-color 0.1s;
+  font-family: 'Font Awesome 5 Free';
+}
+
+.delete:hover {
+  background-color: rgb(255, 123, 123);
+}
+
+.delete:active {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 .number {
diff --git a/webmarker/src/styles/Modal.css b/webmarker/src/styles/Modal.css
index 3db1fbc..ab8cf81 100644
--- a/webmarker/src/styles/Modal.css
+++ b/webmarker/src/styles/Modal.css
@@ -2,19 +2,19 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: rgba(49, 64, 73, 0.781);
+    background-color: rgba(39, 60, 78, 0.781);
     width: 100vw;
     height: 100vh;
 }
 
 .box {
-    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+    position: absolute;
     top: 20%;
     left: 20%;
     background-color: #1b2e3f;
     width: 60%;
     height: 60%;
-    border-radius: 10px;
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -29,28 +29,57 @@
 }
 
 .modal-input {
-    border-radius: 10px;
-    padding: 10px;
     font-size: 1.3rem;
+    padding: 10px;
+    border: none;
     width: 100%;
+    color: white;
+    background-color:#273949;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+
+.modal-input:focus {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 .upload-btn {
-    padding: 5px;
-    border-radius: 10px;
-    color: #1f2c38b6;
-    margin-top: 60px;
+    font-family: 'Font Awesome 5 Free';
+    font-size: 2rem;
+    padding: 10px;
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+    color: #ffffffb6;
+    background-color:#273949;
+    border: none;
+    margin-top: 50px;
     display: block;
     margin-left: auto;
     margin-right: auto;
+    transition: background-color 0.1s;
+}
+
+.upload-btn:hover {
+    background-color: rgb(76, 117, 170);
 }
 
 .cancel-btn {
     padding: 5px;
-    border-radius: 10px;
-    color: #1f2c38b6;
-    margin-top: 25px;
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+    color: #ffffffb6;
+    background-color:#273949;
+    border: none;
+    margin-top: 5px;
     display: block;
     margin-left: auto;
     margin-right: auto;
+    transition: background-color 0.1s;
+}
+
+.cancel-btn:hover {
+    background-color: rgb(255, 123, 123);
+}
+
+.upload-btn:active, .cancel-btn:active {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
\ No newline at end of file