diff --git a/client/src/box.js b/client/src/box.js
index 683fcf3..e993164 100644
--- a/client/src/box.js
+++ b/client/src/box.js
@@ -1,32 +1,65 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Item from './item';
 
 const Box = ({ boxData, boxHandler, itemHandler }) => {
-    return (
-        <>
-            <li className="box" draggable='true'
-                onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
-                onDragOver={boxHandler.handleDragOver}
-                onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
-                {false && <span>{boxData.sort}</span>}
-                <h2 className="box-title">{boxData.name}</h2>
-                <h3 className='box-subtitle'>{boxData.description}</h3>
-                <div className='head-divider'></div>
-                <ul className="list-box-item">
-                    {boxData.item.map(((item, index) => {
-                        return <Item
-                            key={index}
-                            data={item}
-                            boxID={boxData._id}
-                            itemHandler={itemHandler} />
-                    }))}
-                </ul>
-                <button className="edit-box box-function" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
-                <button className="remove-box box-function" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
-                <button className="add-item item-function" onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
+    const menu = useRef(null);
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, []);
+    const handleClick = (event) => {
+        if (menu.current.contains(event.target)) return;
+        setShowMenu(false);
+    }
 
-            </li>
-        </>
+    const [showMenu, setShowMenu] = useState(false);
+    const handleBoxMenuClick = () => {
+        setShowMenu(true);
+    }
+    const moreMenu = () => {
+        return (
+            <ul className='menu-more-list box'>
+                <li className='menu-action' onClick={() => boxHandler.handleEdit(boxData._id)}>
+                    <span className='material-icons icon'>edit</span>
+                    <span className='label'>edit</span>
+                </li>
+                <li className='menu-action' onClick={() => boxHandler.handleRemove(boxData._id)}>
+                    <span className='material-icons icon'>delete</span>
+                    <span className='label'>remove</span>
+                </li>
+            </ul>
+        )
+    }
+    return (
+        <li className='box' draggable='true'
+            onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
+            onDragOver={boxHandler.handleDragOver}
+            onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
+            {false && <span>{boxData.sort}</span>}
+            <div ref={menu} className='menu-more-container'>{showMenu && moreMenu()}</div>
+            <div className='box-header'>
+                <div className='box-title-container'>
+                    <h2 className='box-title'>{boxData.name}</h2>
+                    <h3 className='box-subtitle'>{boxData.description}</h3>
+                </div>
+                <span className='menu-more box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
+            </div>
+            <div className='head-divider'></div>
+            <ul className='list-box-item'>
+                {boxData.item.map(((item, index) => {
+                    return <Item
+                        key={index}
+                        data={item}
+                        boxID={boxData._id}
+                        itemHandler={itemHandler} />
+                }))}
+            </ul>
+            <div className='menu-bottom'>
+                <span className='material-icons add' onClick={() => itemHandler.handleAdd(boxData._id)}>add</span>
+            </div>
+        </li>
     )
 }
 
diff --git a/client/src/item.js b/client/src/item.js
index 2c66191..0fb16f1 100644
--- a/client/src/item.js
+++ b/client/src/item.js
@@ -1,4 +1,4 @@
-import React, { useState, setState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 const Item = ({ data, itemHandler, boxID }) => {
     const menu = useRef(null);
     const handleClick = (event) => {
@@ -17,17 +17,23 @@ const Item = ({ data, itemHandler, boxID }) => {
     }
     const moreMenu = () => {
         return (
-            <div className='item-menu-more'>
-                <button className='item-function' onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
-                <button className='item-function' onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
-            </div>
+            <ul className='menu-more-list item'>
+                <li className='menu-action' onClick={() => itemHandler.handleEdit(boxID, data._id)}>
+                    <span className='material-icons icon'>edit</span>
+                    <span className='label'>edit</span>
+                </li>
+                <li className='menu-action' onClick={() => itemHandler.handleRemove(boxID, data._id)}>
+                    <span className='material-icons icon'>delete</span>
+                    <span className='label'>remove</span>
+                </li>
+            </ul>
         )
     }
     return (
         <li className='item'>
             <div ref={menu} className='item-menu-more-container'>{showMenu && moreMenu()}</div>
             <span className='item-name'>{data.name}</span>
-            <span className='item-menu material-icons' onClick={handleItemMenuClick}>
+            <span className='menu-more item material-icons' onClick={handleItemMenuClick}>
                 more_vert 
         </span>
         </li>
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 696d65a..0ce8814 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -23,16 +23,23 @@ h1, h2, h3, h4 {
     margin: 0;
     padding: 0;
 }
-button {
-border: none;
-padding: 0.4em;
-}
-button.box-function, button.item-function {
-    font-size: 1em;
-}
+
+
 button:hover {
     cursor: pointer;
 }
+.box-header {
+    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;
     line-height: 2rem;
@@ -51,10 +58,11 @@ ul.list-box {
     gap: 1em;
 }
 
-.box {
+li.box {
+    position: relative;
     height: min-content;
     width: 344px;
-    padding: 16px;
+    padding: 16px 0;
     background-color: white;
     border-radius: 4px;
     border-width: 1px;
@@ -67,52 +75,17 @@ ul.list-box {
     list-style: none;
 
 }
-.list-box-item {
-    margin: 1rem 0;
-    max-height: 200px;
-    overflow-y: scroll;
-}
-.list-box-item::-webkit-scrollbar {
-    width: 5px;
-}
-.list-box-item::-webkit-scrollbar-track {
-    background: #ddd;
-}
-.list-box-item::-webkit-scrollbar-thumb {
-    background: #666;
-}
-.item {
-    font-size: 0.75rem;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0.75rem;
-    list-style: none;
-}
 
-.head-divider {
-    margin: 1rem 0;
-    width: 100%;
-    height: 1px;
-    background-color: #e0e0e0;
+.item-menu-more-container {
+    z-index: 1;
 }
-
-.item-menu {
-    font-size: 1rem;
-    margin-right: 0;
-    margin-left: auto;
-}
-.item-menu:hover {
-    cursor: pointer;
-}
-.item-menu-more {
+.item-menu-more-list {
+    padding: 0;
+    width: 120px;
     position: absolute;
     margin: 0 10px 0 0;
     top: 2rem;
     right: 0;
-    height: 100px;
-    width: 75px;
     z-index: 1;
     background-color: white;
     border-radius: 4px;
@@ -123,8 +96,136 @@ ul.list-box {
         0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
         0px 0px 0px 0px rgba(0, 0, 0, 0.14),
         0px 0px 0px 0px rgba(0,0,0,.12);
+}
+.box-menu-action {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+.item-menu-action:hover {
+    cursor: pointer;
+    background-color: #F2F2F2;
+}
+.item-menu-action > .icon {
+    margin: 1rem 1rem;
+}
+.item-menu-action > .label {
+}
+
+
+
+.list-box-item {
+    padding: 0;
+    margin: 1rem 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+.list-box-item::-webkit-scrollbar {
+    width: 5px;
+}
+.list-box-item::-webkit-scrollbar-track {
+    background: #ddd;
+}
+.list-box-item::-webkit-scrollbar-thumb {
+    background: #666;
+}
+li.item {
+    font-size: 0.75rem;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
+    list-style: none;
+}
+li.item:hover {
+    background-color:#F2F2F2;
+}
+.head-divider {
+    margin: 16px;
+    width: auto;
+    height: 1px;
+    background-color: #e0e0e0;
+}
+.menu-more-container {
+    z-index: 1;
+}
+.menu-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1rem;
+}
+.add {
+    background-color: #f2f2f2;
+    padding: 0.75rem;
+    margin-right: 0;
+    margin-left: auto;
+    border-radius: 50%;
 
 }
-  .scroll1::-webkit-scrollbar-thumb {
-    background: #666; 
-  }
\ No newline at end of file
+.add:hover {
+    cursor: pointer;
+    background-color: #e0e0e0;
+}
+.menu-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.1rem;
+    margin-right: 0;
+    margin-left: auto;
+    border-radius: 50%;
+}
+.menu-more:hover {
+    background-color: #e0e0e0;
+}
+.menu-more.box {
+    font-size: 1.25rem;
+}
+.menu-more.item {
+    font-size: 1rem;
+}
+.menu-more:hover {
+    cursor: pointer;
+}
+.menu-more-list {
+    padding: 0;
+    position: absolute;
+    z-index: 1;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+}
+.menu-more-list.box {
+    width: 120px;
+    margin: 0 10px 0 0;
+    top: 4rem;
+    right: 0;
+}
+.menu-more-list.item {
+    width: 120px;
+    margin: 0 10px 0 0;
+    top: 2rem;
+    right: 0;
+}
+.menu-action {
+    z-index: inherit;
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+.menu-action:hover {
+    cursor: pointer;
+    background-color: #F2F2F2;
+}
+.menu-action > .icon {
+    margin: 1rem 1rem;
+}