diff --git a/package-lock.json b/package-lock.json
index 93fffbc..73a7899 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.0",
         "react-select": "^5.3.2",
+        "sass": "^1.53.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -8448,6 +8449,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14030,6 +14036,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.53.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
+      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -22432,6 +22454,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
       "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -26292,6 +26319,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.53.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
+      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
diff --git a/package.json b/package.json
index 3f7cb3d..4e18806 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-select": "^5.3.2",
+    "sass": "^1.53.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index c23eb77..c8f78aa 100644
--- a/src/componets/EditItem.js
+++ b/src/componets/EditItem.js
@@ -64,10 +64,12 @@ const EditItem = ({
       <div className="add-overlay" onClick={abort}></div>
       <div className="send-box">
         <div className="box">
-          <h2>Edit bookmark</h2>
+          <div className="title-delete-group">
+          <h2 className="edit-title">Edit bookmark</h2>
           <button className="delete" onClick={deleteItem}>
             &#xf2ed;
           </button>
+          </div>
           <div className="AddItem-content">
             <h3>
               Link:{" "}
diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index 077cba0..6d1dcc2 100644
--- a/src/componets/SideBar.js
+++ b/src/componets/SideBar.js
@@ -7,7 +7,8 @@ import {
   MenuItem,
   SubMenu,
 } from "react-pro-sidebar";
-import "react-pro-sidebar/dist/css/styles.css";
+// import "react-pro-sidebar/dist/css/styles.css";
+import "../styles/SideBar_S.scss";
 import "../styles/SideBar.css";
 import { Link } from "react-router-dom";
 
@@ -44,20 +45,23 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
       </SidebarHeader>
       <SidebarContent className="sidebar-content">
         <Menu iconShape="circle">
-          <MenuItem icon={<h2 className="sidebar-icon">&#xf015;</h2>}>
+          <MenuItem icon={<h2 className="sidebar-icon">&#xf49e;</h2>}>
             <Link to="/">
               <div className="menu-item">All</div>
             </Link>
           </MenuItem>
 
+          <MenuItem icon={<h2 className="sidebar-icon">&#xf01c;</h2>}>
+            <Link to="/collections/Unsorted">
+              <div className="menu-item">Unsorted</div>
+            </Link>
+          </MenuItem>
+
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
-            suffix={<span className="badge">{sortedCollections.length + 1}</span>}
+            suffix={<span className="badge">{sortedCollections.length}</span>}
             title={<div className="menu-item">Collections</div>}
           >
-            <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>
-              <Link className="sidebar-entity" to="/collections/Unsorted">Unsorted</Link>
-            </MenuItem>
             {sortedCollections.map((e, i) => {
               const path = `/collections/${e}`;
               return (
diff --git a/src/routes/Tags.js b/src/routes/Tags.js
index e15288f..1d2abb7 100644
--- a/src/routes/Tags.js
+++ b/src/routes/Tags.js
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
+const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
   const { tagId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
     return e.tag.includes(tagId);
@@ -13,7 +13,7 @@ const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}
-        lists={lists}
+        collections={collections}
         SetLoader={SetLoader}
         reFetch={reFetch}
       />
diff --git a/src/styles/List.css b/src/styles/List.css
index c381c30..52f13dd 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -172,9 +172,9 @@
 }
 
 .delete {
-  margin: 20px 20px 20px 0px;
-  background-color: #273949;
-  float: right;
+  margin-top: 20px;
+  margin-left: 10px;
+  display: inline;
   font-size: 1.1rem;
   width: 40px;
   height: 40px;
@@ -188,17 +188,13 @@
   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;
+  background-color: rgba(255, 75, 75, 0.8);
+  color: white;
   border: none;
-  transition: background-color 0.1s;
+  transition: box-shadow 0.1s;
 }
 
 .delete:hover {
-  background-color: rgba(255, 75, 75, 0.8);
-  color: #d8d8d8;
-}
-
-.delete:active {
   box-shadow: 0px 0px 10px rgb(255, 83, 140);
 }
 
@@ -216,4 +212,12 @@
   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;
   margin-top: 10px;
+}
+
+.edit-title {
+  display: inline;
+}
+
+.title-delete-group {
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index 54e0698..75d71e4 100644
--- a/src/styles/SideBar.css
+++ b/src/styles/SideBar.css
@@ -17,18 +17,11 @@
   text-decoration: underline;
 }
 
-.pro-sidebar-layout {
-  background: #384952;
-  text-shadow: none;
-  color: white;
-}
-
 .badge {
   padding: 3px 10px;
   font-size: 0.8rem;
   letter-spacing: 1px;
   border-radius: 14px;
-  background-color: rgb(52, 121, 181);
 }
 
 .sidebar-icon {
@@ -55,3 +48,8 @@
 .sidebar-item-prefix {
   font-family: "Font Awesome 5 Free";
 }
+
+.pro-sidebar-layout * {
+  color: white;
+  text-shadow: none;
+}
diff --git a/src/styles/SideBar_S.scss b/src/styles/SideBar_S.scss
new file mode 100644
index 0000000..48c4bc8
--- /dev/null
+++ b/src/styles/SideBar_S.scss
@@ -0,0 +1,4 @@
+$sidebar-bg-color: #373737;
+$submenu-bg-color: #373737;
+
+@import '~react-pro-sidebar/dist/scss/styles.scss';
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 6f71356..dce6689 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -23,11 +23,6 @@ body {
   content: "";
 }
 
-.delete {
-  background-color: #1f2c38;
-  color: #ffffffb6;
-}
-
 .no-results {
   background-color: #1f2c38;
 }
@@ -111,11 +106,6 @@ body {
   color: gray;
 }
 
-.light .delete {
-  background-color: lightyellow;
-  color: rgb(176, 176, 176);
-}
-
 .light input {
   background-color: lightyellow;
   color: black;