diff --git a/src/componets/List.js b/src/componets/List.js
index 09402b9..917f248 100644
--- a/src/componets/List.js
+++ b/src/componets/List.js
@@ -42,7 +42,7 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
                             </div>
                             <div className='etc'>
                                 <ViewArchived className='view-archived' id={e._id} />
-                                <button className="edit-btn btn" onClick={() => edit(i)}>&#xf303;</button>
+                                <button className="btn edit-btn" onClick={() => edit(i)}>&#xf303;</button>
                             </div>
                         </div>
                     </LazyLoad>)
diff --git a/src/styles/App.css b/src/styles/App.css
index 30b56c0..f78513b 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -54,7 +54,6 @@
   font-size: 1.1rem;
   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;
-  background-color:#273949;
   border: none;
   transition: background-color 0.1s;
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index f398142..38e9bc5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -64,6 +64,11 @@ body {
 
 .btn {
   color: #ffffffb6;
+  background-color:#273949;
+}
+
+.edit-btn {
+  background-color: #1f2c38;
 }
 
 .no-results, .list-row {