diff --git a/package-lock.json b/package-lock.json
index 9504d19..9bbc2cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "react-dom": "^18.0.0",
         "react-lazyload": "^3.2.0",
         "react-loader-spinner": "^6.0.0-0",
+        "react-pro-sidebar": "^0.7.1",
         "react-scripts": "5.0.0",
         "react-select": "^5.3.2",
         "web-vitals": "^2.1.4"
@@ -2972,6 +2973,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4535,9 +4545,9 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dependencies": {
         "lodash": "^4.17.14"
       }
@@ -5293,6 +5303,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -6390,11 +6405,11 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "node_modules/ejs": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
-      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
       "dependencies": {
-        "jake": "^10.6.1"
+        "jake": "^10.8.5"
       },
       "bin": {
         "ejs": "bin/cli.js"
@@ -7496,11 +7511,30 @@
       }
     },
     "node_modules/filelist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
-      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "dependencies": {
-        "minimatch": "^3.0.4"
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/filesize": {
@@ -8906,11 +8940,11 @@
       }
     },
     "node_modules/jake": {
-      "version": "10.8.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.4.tgz",
-      "integrity": "sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA==",
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
       "dependencies": {
-        "async": "0.9.x",
+        "async": "^3.2.3",
         "chalk": "^4.0.2",
         "filelist": "^1.0.1",
         "minimatch": "^3.0.4"
@@ -8937,9 +8971,9 @@
       }
     },
     "node_modules/jake/node_modules/async": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-      "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
     "node_modules/jake/node_modules/chalk": {
       "version": "4.1.2",
@@ -13384,6 +13418,21 @@
         "react-dom": "^17.0.2"
       }
     },
+    "node_modules/react-pro-sidebar": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-0.7.1.tgz",
+      "integrity": "sha512-Iy1X8ce4t5Vqz4CsyzjwokGUE3/IObgmYzS0ins7/2eWKle0SMUPaWdgMKFIVjtVrMr5vmjPbRicq8FxnVaf8A==",
+      "dependencies": {
+        "@popperjs/core": "^2.4.0",
+        "classnames": "^2.2.6",
+        "react-slidedown": "^2.4.5",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13482,6 +13531,18 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-slidedown": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.7.tgz",
+      "integrity": "sha512-HGDfrqo70r1WVE0DwrySPdCT27/2wcZaJYh5kOnmuPSCtjDDJrNkDdn4Ep/cma2VVfwupeAGhbc2pbrGThU6VQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || 17",
+        "react-dom": "^16.3.0 || 17"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -13696,6 +13757,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -18310,6 +18376,11 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19480,9 +19551,9 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "requires": {
         "lodash": "^4.17.14"
       }
@@ -20039,6 +20110,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -20846,11 +20922,11 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "ejs": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
-      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
       "requires": {
-        "jake": "^10.6.1"
+        "jake": "^10.8.5"
       }
     },
     "electron-to-chromium": {
@@ -21652,11 +21728,29 @@
       }
     },
     "filelist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
-      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "requires": {
-        "minimatch": "^3.0.4"
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
       }
     },
     "filesize": {
@@ -22638,11 +22732,11 @@
       }
     },
     "jake": {
-      "version": "10.8.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.4.tgz",
-      "integrity": "sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA==",
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
       "requires": {
-        "async": "0.9.x",
+        "async": "^3.2.3",
         "chalk": "^4.0.2",
         "filelist": "^1.0.1",
         "minimatch": "^3.0.4"
@@ -22657,9 +22751,9 @@
           }
         },
         "async": {
-          "version": "0.9.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
         },
         "chalk": {
           "version": "4.1.2",
@@ -25722,6 +25816,17 @@
         "tslib": "^2.3.0"
       }
     },
+    "react-pro-sidebar": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-0.7.1.tgz",
+      "integrity": "sha512-Iy1X8ce4t5Vqz4CsyzjwokGUE3/IObgmYzS0ins7/2eWKle0SMUPaWdgMKFIVjtVrMr5vmjPbRicq8FxnVaf8A==",
+      "requires": {
+        "@popperjs/core": "^2.4.0",
+        "classnames": "^2.2.6",
+        "react-slidedown": "^2.4.5",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -25796,6 +25901,14 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-slidedown": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.7.tgz",
+      "integrity": "sha512-HGDfrqo70r1WVE0DwrySPdCT27/2wcZaJYh5kOnmuPSCtjDDJrNkDdn4Ep/cma2VVfwupeAGhbc2pbrGThU6VQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -25962,6 +26075,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
diff --git a/package.json b/package.json
index 2ec9a8e..583977a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^18.0.0",
     "react-lazyload": "^3.2.0",
     "react-loader-spinner": "^6.0.0-0",
+    "react-pro-sidebar": "^0.7.1",
     "react-scripts": "5.0.0",
     "react-select": "^5.3.2",
     "web-vitals": "^2.1.4"
diff --git a/src/App.js b/src/App.js
index 0d9d115..10938ff 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import filter from './modules/filterData';
 import concatTags from './modules/concatTags';
 import NoResults from './componets/NoResults';
 import Loader from './componets/Loader';
+import SideBar from './componets/SideBar';
 
 function App() {
   const [data, setData] = useState([]),
@@ -23,7 +24,8 @@ function App() {
     [tagsChecked, setTagsChecked] = useState(true),
     [sortBy, setSortBy] = useState('Default'),
     [loader, setLoader] = useState(false),
-    [lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true');
+    [lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true'),
+    [toggle, setToggle] = useState(true);
 
   function SetLoader(x) {
     setLoader(x);
@@ -61,6 +63,10 @@ function App() {
     setSortBy(e);
   }
 
+  function handleToggleSidebar() {
+      setToggle(!toggle)
+  }
+
   const filteredData = filter(data, searchQuery, nameChecked, tagsChecked, descriptionChecked);
   const tags = concatTags(data);
 
@@ -101,46 +107,48 @@ function App() {
   
   return (
     <div className="App">
-    <div className='content'>
-      <div className="head">
-        <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-        <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
-        <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
+      <SideBar handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
+      <div className='content'>
+        <div className="head">
+          <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
+          <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
+          <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
+          <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
+        </div>
+
+        {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
+
+        <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
+        <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
+        <List lightMode={lightMode} SetLoader={SetLoader} data={filteredData} tags={tags} reFetch={fetchData} />
+
+        {numberOfResults === 0 ? <NoResults /> : null}
+
+        {sortBox ? <Sort 
+          sortBy={sortByFunc}
+          onExit={exitSorting}
+        /> : null}
+
+        {filterBox ? <Filters 
+          nameChecked={nameChecked}
+          handleNameCheckbox={handleNameCheckbox}
+          descriptionChecked={descriptionChecked}
+          handleDescriptionCheckbox={handleDescriptionCheckbox}
+          tagsChecked={tagsChecked} 
+          handleTagsCheckbox={handleTagsCheckbox}
+          onExit={exitFilter}
+        /> : null}
+
+        {newBox ? <AddItem 
+          SetLoader={SetLoader}
+          onExit={exitAdding} 
+          reFetch={fetchData} 
+          lightMode={lightMode}
+          tags={() => tags} 
+        /> : null}
+
+        {loader ? <Loader lightMode={lightMode} /> : null}
       </div>
-
-      {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
-
-      <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
-      <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
-      <List lightMode={lightMode} SetLoader={SetLoader} data={filteredData} tags={tags} reFetch={fetchData} />
-
-      {numberOfResults === 0 ? <NoResults /> : null}
-
-      {sortBox ? <Sort 
-        sortBy={sortByFunc}
-        onExit={exitSorting}
-      /> : null}
-
-      {filterBox ? <Filters 
-        nameChecked={nameChecked}
-        handleNameCheckbox={handleNameCheckbox}
-        descriptionChecked={descriptionChecked}
-        handleDescriptionCheckbox={handleDescriptionCheckbox}
-        tagsChecked={tagsChecked} 
-        handleTagsCheckbox={handleTagsCheckbox}
-        onExit={exitFilter}
-       /> : null}
-
-      {newBox ? <AddItem 
-        SetLoader={SetLoader}
-        onExit={exitAdding} 
-        reFetch={fetchData} 
-        lightMode={lightMode}
-        tags={() => tags} 
-      /> : null}
-
-      {loader ? <Loader lightMode={lightMode} /> : null}
-    </div>
     </div>
   );
 }
diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
new file mode 100644
index 0000000..8d341c7
--- /dev/null
+++ b/src/componets/SideBar.js
@@ -0,0 +1,26 @@
+import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar';
+import 'react-pro-sidebar/dist/css/styles.css';
+import '../styles/SideBar.css';
+import { useState } from 'react';
+
+const SideBar = ({ handleToggleSidebar, toggle }) => {
+  return (
+    <ProSidebar 
+        toggled={toggle}
+        breakPoint="lg"
+        onToggle={handleToggleSidebar}
+        className='sidebar'>
+    <SidebarHeader>
+        LOGO
+    </SidebarHeader>
+    <SidebarContent>
+        CONTENT
+    </SidebarContent>
+    <SidebarFooter>
+        FOOTER
+    </SidebarFooter>
+    </ProSidebar>
+  )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/src/styles/App.css b/src/styles/App.css
index f78513b..6232a7d 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -7,7 +7,17 @@
 
 @media (max-width: 650px) {
   .search {
-    width: 200px;
+    width: 170px;
+  }
+}
+
+@media (min-width: 993px) {
+  .content {
+    margin-left: 270px;
+  }
+
+  .sidebar-btn {
+    display: none;
   }
 }
 
@@ -19,9 +29,6 @@
 .content {
   width: 100%;
   padding: 20px;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .head {
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
new file mode 100644
index 0000000..755281a
--- /dev/null
+++ b/src/styles/SideBar.css
@@ -0,0 +1,4 @@
+.sidebar {
+    height: 100vh;
+    position: fixed;
+}
\ No newline at end of file