diff --git a/src/components/Sidebar/SidebarDesign2/Vector.svg b/public/images/Vector44.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/Vector.svg
rename to public/images/Vector44.svg
diff --git a/src/components/Sidebar/SidebarDesign2/arrow-down.svg b/public/images/arrow-down12.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/arrow-down.svg
rename to public/images/arrow-down12.svg
diff --git a/src/components/Sidebar/SidebarDesign2/discount-shape.svg b/public/images/discount-shape.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/discount-shape.svg
rename to public/images/discount-shape.svg
diff --git a/src/components/Sidebar/SidebarDesign2/home-2.svg b/public/images/home-2.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/home-2.svg
rename to public/images/home-2.svg
diff --git a/src/components/Sidebar/SidebarDesign2/logout.svg b/public/images/logout22.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/logout.svg
rename to public/images/logout22.svg
diff --git a/src/components/Sidebar/SidebarDesign2/notification.svg b/public/images/notification.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/notification.svg
rename to public/images/notification.svg
diff --git a/src/components/Sidebar/SidebarDesign2/profile-pic.svg b/public/images/profile-pic22.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/profile-pic.svg
rename to public/images/profile-pic22.svg
diff --git a/src/components/Sidebar/SidebarDesign2/profilee.svg b/public/images/profileeeeee.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/profilee.svg
rename to public/images/profileeeeee.svg
diff --git a/src/components/Sidebar/SidebarDesign2/receipt-text.svg b/public/images/receipt-texdst.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/receipt-text.svg
rename to public/images/receipt-texdst.svg
diff --git a/src/components/Sidebar/SidebarDesign2/search-normal.svg b/public/images/search2222.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/search-normal.svg
rename to public/images/search2222.svg
diff --git a/src/components/Sidebar/SidebarDesign2/setting.svg b/public/images/setting222.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/setting.svg
rename to public/images/setting222.svg
diff --git a/src/components/Sidebar/SidebarDesign2/square.svg b/public/images/square.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/square.svg
rename to public/images/square.svg
diff --git a/src/components/Sidebar/SidebarDesign2/wallet-3.svg b/public/images/wallet-3.svg
similarity index 100%
rename from src/components/Sidebar/SidebarDesign2/wallet-3.svg
rename to public/images/wallet-3.svg
diff --git a/src/components/Feedback/index.js b/src/components/Feedback/index.js
index 55d6092..3e4d9c2 100644
--- a/src/components/Feedback/index.js
+++ b/src/components/Feedback/index.js
@@ -26,13 +26,17 @@ const Feedback = ({ feedbakTitle, feedbacks }) => {
               activeFeedback ? "pb-8" : "pb-0"
             } relative cursor-pointer transition-all duration-500`}
             key={index}
-            onClick={() => setActiveFeedback(item)}
+            // onClick={() => setActiveFeedback(item)}
+            onClick={() =>
+              setActiveFeedback(activeFeedback === item ? null : item)
+            }
           >
             <img
               src={item.icon}
               alt=""
               className="transition duration-300 transform hover:-translate-y-1 w-14 h-14"
             />
+
             <p
               className={`text-sm mt-3 transition-all duration-500 ${
                 activeFeedback === item ? "opacity-100" : "opacity-0"
diff --git a/src/components/Sidebar/SidebarDesign2/index.css b/src/components/Sidebar/SidebarDesign2/index.css
deleted file mode 100644
index 5007940..0000000
--- a/src/components/Sidebar/SidebarDesign2/index.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/src/components/Sidebar/SidebarDesign2/index.css.map b/src/components/Sidebar/SidebarDesign2/index.css.map
deleted file mode 100644
index 75f3b73..0000000
--- a/src/components/Sidebar/SidebarDesign2/index.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "AAAA,AAAA,aAAa,AAAA,mBAAmB,CAAC;EAC/B,OAAO,EAAE,IAAI;CACd;;AAED,6CAA6C;AAC7C,AAAA,aAAa,CAAC;EACZ,kBAAkB,EAAE,IAAI;EAAE,iBAAiB;EAC3C,eAAe,EAAE,IAAI;EAAE,aAAa;CACrC",
-    "sources": [
-        "index.scss"
-    ],
-    "names": [],
-    "file": "index.css"
-}
\ No newline at end of file
diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js
index af45607..d2ef6a8 100644
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@@ -1,22 +1,8 @@
 // it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2
 
 import React, { useState } from "react";
-
-import Switch from "../../Switch";
 import SearchBox from "../../SearchBox";
 
-import downwardArrow from "./arrow-down.svg";
-import profilePic from "./profile-pic.svg";
-import home from "./home-2.svg";
-import square from "./square.svg";
-import wallet from "./wallet-3.svg";
-import discount from "./discount-shape.svg";
-import receipt from "./receipt-text.svg";
-import profileIcon from "./profilee.svg";
-import setting from "./setting.svg";
-import logout from "./logout.svg";
-import notification from "./notification.svg";
-
 const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
 
@@ -26,12 +12,20 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
     >
       {/* profile */}
       <div className="flex flex-row items-center">
-        <img src={profilePic} alt="profile-pic" className="w-12 rounded-full" />
+        <img
+          src="images/profile-pic.svg"
+          alt="profile-pic"
+          className="w-12 rounded-full"
+        />
         <div className="flex flex-col flex-1 mx-3">
           <p className="text-blue-900 text-sm">{username}</p>
           <p className="text-blue-700 text-xs">{userJob}</p>
         </div>
-        <img src={downwardArrow} alt="arrow" className="w-5 cursor-pointer" />
+        <img
+          src="images/arrow-down12.svg"
+          alt="arrow"
+          className="w-5 cursor-pointer"
+        />
       </div>
       {/* search box */}
       <SearchBox searchBoxHolder={"my-4"} />
@@ -45,7 +39,7 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
               <div className="flex flex-row items-center">
                 {/* right active border */}
                 <div
-                  className={`absolute right-0  w-1 h-8 rounded transition duration-300 ease-linear ${
+                  className={`absolute right-0 w-1 h-8 rounded transition duration-300 ease-linear ${
                     activeDropdown === menuItem ? "bg-blue-600" : ""
                   }`}
                 ></div>
@@ -60,13 +54,13 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
                     )
                   }
                 >
-                  <img src={menuItem.icon} alt="" className="w-7 h-7" />
-                  <p className="text-blue-800 text-sm flex-1 mx-2">
+                  <img src={menuItem.icon} alt="" className="w-7" />
+                  <p className="text-blue-800 text-sm flex-1 mr-2">
                     {menuItem.title}
                   </p>
                   {menuItem.notification && (
                     <div
-                      className={`w-7 h-7 text-center flex flex-col items-center justify-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`}
+                      className={`w-7 flex flex-col items-center justify-center text-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`}
                     >
                       <span className=" text-blue-400 text-xs">
                         {menuItem.notification}
@@ -140,7 +134,7 @@ SidebarMenu.defaultProps = {
       title: "منوی کاربری برای شما",
       menuItems: [
         {
-          icon: home,
+          icon: "images/home-2.svg",
           title: "صفحه اصلی",
           borderRadius: "rounded",
           backgroundColor: "bg-gray-200",
@@ -149,7 +143,7 @@ SidebarMenu.defaultProps = {
           menuSubItems: [],
         },
         {
-          icon: square,
+          icon: "images/square.svg",
           title: "داشبود من",
           borderRadius: null,
           backgroundColor: null,
@@ -158,7 +152,7 @@ SidebarMenu.defaultProps = {
           menuSubItems: [],
         },
         {
-          icon: notification,
+          icon: "images/notification.svg",
           title: "مرکز اعلانات",
           borderRadius: "rounded-full",
           backgroundColor: "bg-transparent",
@@ -172,21 +166,21 @@ SidebarMenu.defaultProps = {
       title: "حسابداری و مالی",
       menuItems: [
         {
-          icon: wallet,
+          icon: "images/Vector44.svg",
           title: "کیف پول",
           borderRadius: null,
           backgroundColor: null,
           borderColor: null,
           notification: null,
-          leftIcon: downwardArrow,
+          leftIcon: "images/arrow-down12.svg",
           menuSubItems: [
-            { title: "کوپن ها", leftIcon: downwardArrow },
-            { title: "رسید ها", leftIcon: downwardArrow },
-            { title: "صندوق", leftIcon: downwardArrow },
+            { title: "کوپن ها", leftIcon: "images/arrow-down12.svg" },
+            { title: "رسید ها", leftIcon: "images/arrow-down12.svg" },
+            { title: "صندوق", leftIcon: "images/arrow-down12.svg" },
           ],
         },
         {
-          icon: discount,
+          icon: "images/arrow-down12.svg",
           title: "کوپن ها",
           borderRadius: "rounded-full",
           backgroundColor: "bg-transparent",
@@ -195,7 +189,7 @@ SidebarMenu.defaultProps = {
           menuSubItems: [],
         },
         {
-          icon: receipt,
+          icon: "images/receipt-texdst.svg",
           title: "رسید ها",
           borderRadius: null,
           backgroundColor: null,
@@ -209,7 +203,7 @@ SidebarMenu.defaultProps = {
       title: "حساب کاربری",
       menuItems: [
         {
-          icon: profileIcon,
+          icon: "images/profile-pic22.svg",
           title: "حساب کاربری",
           borderRadius: null,
           backgroundColor: null,
@@ -218,7 +212,7 @@ SidebarMenu.defaultProps = {
           menuSubItems: [],
         },
         {
-          icon: setting,
+          icon: "images/setting222.svg",
           title: "تنظیمات",
           borderRadius: null,
           backgroundColor: null,
@@ -227,7 +221,7 @@ SidebarMenu.defaultProps = {
           menuSubItems: [],
         },
         {
-          icon: logout,
+          icon: "images/logout22.svg",
           title: "خروج از حساب کاربری",
           borderRadius: null,
           backgroundColor: null,
@@ -238,6 +232,7 @@ SidebarMenu.defaultProps = {
       ],
     },
   ],
+
   username: "رستم پهلوان زاده",
   userJob: "مدیریت سامانه هوشمند",
 };
diff --git a/src/components/Sidebar/SidebarDesign2/index.scss b/src/components/Sidebar/SidebarDesign2/index.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Sidebar/SidebarMenu/index.js b/src/components/Sidebar/SidebarMenu/index.js
index e3e44a4..2cf10d9 100644
--- a/src/components/Sidebar/SidebarMenu/index.js
+++ b/src/components/Sidebar/SidebarMenu/index.js
@@ -1,7 +1,7 @@
 // it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu
 
 import React from "react";
-import Switch from "../../Switch";
+import Switch from "../../SwitchDesign/Switch";
 
 const COMPONENTS = {
   Switch: <Switch />,
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
new file mode 100644
index 0000000..d3dd161
--- /dev/null
+++ b/src/components/Sidebar/index.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import SidebarMenu from "./SidebarMenu";
+import SidebarDesign2 from "./SidebarDesign2";
+
+function Advertisements() {
+  const list = {
+    1: <SidebarMenu />,
+    2: <SidebarDesign2 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Advertisements;
diff --git a/src/components/SwitchDesign/Switch2/index.js b/src/components/SwitchDesign/Switch2/index.js
new file mode 100644
index 0000000..d279ea8
--- /dev/null
+++ b/src/components/SwitchDesign/Switch2/index.js
@@ -0,0 +1,15 @@
+// it has style inside index.scss ---> // Start Switch2 Component && end Switch2 Component
+
+import React from "react";
+
+export default function index() {
+  return (
+    <div className="switch">
+      <input type="checkbox" id="toggle" />
+      <label
+        className="relative w-[70px] h-[34px] rounded-full flex border-[3px] cursor-pointer"
+        for="toggle"
+      ></label>
+    </div>
+  );
+}
diff --git a/src/components/SwitchDesign/index.js b/src/components/SwitchDesign/index.js
index 8028d98..dd593ca 100644
--- a/src/components/SwitchDesign/index.js
+++ b/src/components/SwitchDesign/index.js
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import Switch from "./Switch";
+import Switch2 from "./Switch2";
 
 function SwitchDesign() {
   const list = {
     1: <Switch />,
+    2: <Switch2 />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/index.scss b/src/index.scss
index e59ee8e..d51fba5 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1160,3 +1160,42 @@ $success: #23c933;
 }
 
 // * end CheckBox Component
+
+// TODO  Start Switch2 Component
+
+.switch {
+  position: relative;
+  input[type="checkbox"] {
+    visibility: hidden;
+    position: absolute;
+    &:checked + label {
+      transform: rotate(0deg);
+      background-color: #000;
+      &:before {
+        transform: translateX(35.5px);
+        background-color: #fff;
+      }
+    }
+  }
+
+  label {
+    transition: transform 0.3s ease-in-out;
+    transform-origin: 50% 50%;
+
+    &:before {
+      transition: transform 0.3s ease;
+      transition-delay: 0s;
+      content: "";
+      display: block;
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background-color: #000;
+      border-radius: 50%;
+      top: 2px;
+      left: 3px;
+    }
+  }
+}
+
+// * end Switch2 Component
diff --git a/src/redux/data.js b/src/redux/data.js
index c9cf179..be2cc23 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -21,6 +21,7 @@ import Input from "../components/Input";
 import Navbar from "../components/Navbar";
 import SearchDesign from "../components/SearchDesign";
 import SwitchDesign from "../components/SwitchDesign";
+import Sidebar from "../components/Sidebar";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -544,6 +545,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Sidebar",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Sidebar",
+      component: <Sidebar />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",