diff --git a/client/src/app.js b/client/src/app.js
index 001906c..47751b8 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -12,7 +12,7 @@ function App() {
   const [boxID, setBoxID] = useState(undefined);
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
-  
+
   const [showModalBox, setShowModalBox] = useState(false);
   const [showModalItem, setShowModalItem] = useState(false);
 
@@ -43,8 +43,8 @@ function App() {
       box.name.toLowerCase().includes(finalFilter) ||
       box.description.toLowerCase().includes(finalFilter) ||
       box.item.some(item =>
-          (item.name && item.name.toLowerCase().includes(finalFilter)) ||
-          (item.description && item.description.toLowerCase().includes(finalFilter))
+        (item.name && item.name.toLowerCase().includes(finalFilter)) ||
+        (item.description && item.description.toLowerCase().includes(finalFilter))
       )
     )
     setFilteredData(filtered);
@@ -94,7 +94,7 @@ function App() {
 
   const sortBox = async (target, source) => {
     try {
-      const response = await axios.put(`${api.baseApiUrl}/${source._id}/sort`,target);
+      const response = await axios.put(`${api.baseApiUrl}/${source._id}/sort`, target);
       setData(response.data);
     }
     catch (error) {
@@ -167,10 +167,10 @@ function App() {
     const elements = [...event.currentTarget.parentElement.children];
     const targetIndex = elements.indexOf(targetElement);
     const sourceIndex = elements.indexOf(sourceElement);
-    if(dragTarget._id !== dragSource._id) {
+    if (dragTarget._id !== dragSource._id) {
 
-      const target = Object.assign(dragTarget, {sort: targetIndex});
-      const source = Object.assign(dragSource, {sort: sourceIndex});
+      const target = Object.assign(dragTarget, { sort: targetIndex });
+      const source = Object.assign(dragSource, { sort: sourceIndex });
       await sortBox(target, source);
     }
     return false;
@@ -295,7 +295,9 @@ function App() {
     const filterText = event.target.value;
     setFilter(filterText);
   }
-
+  const handleClearFilter = () => {
+    setFilter('');
+  }
   const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
       <input id="id" name="id" value={boxID} readOnly hidden></input>
@@ -328,8 +330,18 @@ function App() {
     <>
       {<Modal show={showModalItem} edit={editItemBool} content={itemForm} handleClose={handleModalCloseItem} />}
       {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} handleClose={handleModalCloseBox} />}
-      <label htmlFor="box-filter">filter:</label>
-      <input type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
+
+
+      <div className='header-container'>
+        <span className='filter-container'>
+          <span className='material-icons icon'>search</span>
+          <input spellCheck='false' className='filter' type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
+          <span className='material-icons icon clear' onClick={handleClearFilter}>clear</span>
+        </span>
+        {<button className='button' onClick={handleAddBox}>new box</button>}
+
+      </div>
+      <div className='body-container'>
       <ul className="list-box">
         {filteredData.map((box, index) => {
           return (
@@ -342,7 +354,8 @@ function App() {
           );
         })}
       </ul>
-      {<button onClick={handleAddBox}>add box</button>}
+      </div>
+      
     </>
   );
 }
diff --git a/client/src/modal.js b/client/src/modal.js
index 124d494..528edd1 100644
--- a/client/src/modal.js
+++ b/client/src/modal.js
@@ -12,9 +12,6 @@ const Modal = ({show, content, handleClose}) => {
             <div className='modal-content'>
                 {content}
             </div>
-            <div className='modal-actions'>
-                <button type='button' onClick={handleClose}>close</button>
-            </div>
         </div>
     : null;
 }
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 0ce8814..c6dbbc9 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -1,15 +1,22 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-
+:root {
+    --black_light: #9aa0a6;
+    --black_dark: #212121;
+    --white_light:#fafafa;
+    --white_darker: #e0e0e0;
+}
 html, body {
     margin: 0;
 }
 
 html {
-    background-color: #FAFAFA;
-    color: #212121;
+    background-color: var(--white_light);
+    color: var(--black_dark)
+}
+.body-container {
+    margin-left: 2em;
 }
-
 form > fieldset > label {
     display: flex;
 }
@@ -23,8 +30,42 @@ h1, h2, h3, h4 {
     margin: 0;
     padding: 0;
 }
-
-
+.filter-container {
+    margin: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    width: 344px;
+    height: 44px;
+    background-color: white;
+    font-size: 1rem;
+    border-radius: 2rem;
+    border: 1px solid #dfe1e5;
+}
+.filter-container > span.icon {
+    font-size: 1rem;
+    margin: 0 0.75rem 0 1rem;
+    color: var(--black_light);
+}
+.filter-container > span.icon.clear {
+    margin-left: auto;
+}
+.filter-container > span.icon.clear:hover {
+    cursor: pointer;
+    color: var(--black_dark);
+}
+.filter {
+    width: 100%;
+    font-weight: lighter;
+    border: none;
+    height: 100%;
+    font-size: 1rem;
+}
+.filter:focus {
+    outline: none;
+}
+.filter::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
 button:hover {
     cursor: pointer;
 }
@@ -32,16 +73,13 @@ button:hover {
     display: flex;
     align-items: center;
     padding: 0 16px;
-}
-.box-title-container {
-
 }
 .box-menu-container {
     margin-right: 1em;
     margin-left: auto;
 }
 .box-title {
-    font-size: 1.25rem;
+    font-size: 1rem;
     line-height: 2rem;
 }
 .box-subtitle {
@@ -53,7 +91,7 @@ button:hover {
 ul.list-box {
     padding: 10px;
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     margin: 0;
     gap: 1em;
 }
@@ -61,13 +99,13 @@ ul.list-box {
 li.box {
     position: relative;
     height: min-content;
-    width: 344px;
+    width: auto;
     padding: 16px 0;
     background-color: white;
     border-radius: 4px;
     border-width: 1px;
     border-style: solid;
-    border-color: #e0e0e0;
+    border-color: var(--white_darker);
     box-shadow: 
         0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
         0px 0px 0px 0px rgba(0, 0, 0, 0.14),
@@ -91,7 +129,7 @@ li.box {
     border-radius: 4px;
     border-width: 1px;
     border-style: solid;
-    border-color: #e0e0e0;
+    border-color: var(--white_darker);
     box-shadow: 
         0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
         0px 0px 0px 0px rgba(0, 0, 0, 0.14),
@@ -105,16 +143,11 @@ li.box {
 
 .item-menu-action:hover {
     cursor: pointer;
-    background-color: #F2F2F2;
+    background-color: var(--white_light);
 }
 .item-menu-action > .icon {
     margin: 1rem 1rem;
 }
-.item-menu-action > .label {
-}
-
-
-
 .list-box-item {
     padding: 0;
     margin: 1rem 0;
@@ -136,17 +169,17 @@ li.item {
     position: relative;
     align-items: center;
     justify-content: flex-start;
-    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
+    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
     list-style: none;
 }
 li.item:hover {
-    background-color:#F2F2F2;
+    background-color: var(--white_light)
 }
 .head-divider {
     margin: 16px;
     width: auto;
     height: 1px;
-    background-color: #e0e0e0;
+    background-color: var(--white_darker);
 }
 .menu-more-container {
     z-index: 1;
@@ -158,7 +191,7 @@ li.item:hover {
     margin-right: 1rem;
 }
 .add {
-    background-color: #f2f2f2;
+    background-color: var(--white_light);
     padding: 0.75rem;
     margin-right: 0;
     margin-left: auto;
@@ -167,7 +200,7 @@ li.item:hover {
 }
 .add:hover {
     cursor: pointer;
-    background-color: #e0e0e0;
+    background-color: var(--white_darker);
 }
 .menu-more {
     display: flex;
@@ -179,7 +212,7 @@ li.item:hover {
     border-radius: 50%;
 }
 .menu-more:hover {
-    background-color: #e0e0e0;
+    background-color: var(--white_darker);
 }
 .menu-more.box {
     font-size: 1.25rem;
@@ -198,7 +231,7 @@ li.item:hover {
     border-radius: 4px;
     border-width: 1px;
     border-style: solid;
-    border-color: #e0e0e0;
+    border-color: var(--white_darker);
     box-shadow: 
         0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
         0px 0px 0px 0px rgba(0, 0, 0, 0.14),
@@ -224,8 +257,31 @@ li.item:hover {
 }
 .menu-action:hover {
     cursor: pointer;
-    background-color: #F2F2F2;
+    background-color: var(--white_darker);
 }
 .menu-action > .icon {
     margin: 1rem 1rem;
 }
+button.button  {
+    height: 2.5rem;
+    display: flex;
+    font-size: .875rem;
+    text-transform: uppercase;
+    padding: 0.75rem;
+    align-items: center;
+    justify-content: center;
+    min-width: 64px;
+    background-color: var(--white_light);
+    border: 1px solid var(--black_light);
+    border-radius: 4px;
+}
+
+button.button:hover {
+    background-color: var(--white_darker);
+}
+
+.header-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index 3cc90cc..fd4263d 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -8,10 +8,15 @@
     align-items: center;
     height: 100%;
     width: 100%;
-    background-color: rgba(0,0,0,0.2);
+    background-color: rgba(0, 0, 0, 0.32)
 }
 .modal-content {
     width: 80%;
     height: 90%;
-    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 11px 15px -7px
+     rgba(0,0,0,.2),
+     0 24px 38px 3px rgba(0,0,0,.14), 
+     0 9px 46px 8px rgba(0,0,0,.12);
+    background: #fff;
 }
\ No newline at end of file