diff --git a/components/Sidebar/SidebarButton.tsx b/components/Sidebar/SidebarButton.tsx
index 7606055..0bad008 100644
--- a/components/Sidebar/SidebarButton.tsx
+++ b/components/Sidebar/SidebarButton.tsx
@@ -9,10 +9,10 @@ interface Props {
 export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
   return (
     <div
-      className="flex hover:bg-[#343541] py-2 px-4 rounded-md cursor-pointer w-[200px] items-center"
+      className="flex hover:bg-[#343541] py-2 px-2 rounded-md cursor-pointer w-full items-center"
       onClick={onClick}
     >
-      <div className="mr-3">{icon}</div>
+      <div className="mr-2">{icon}</div>
       <div>{text}</div>
     </div>
   );
diff --git a/components/Sidebar/SidebarSettings.tsx b/components/Sidebar/SidebarSettings.tsx
index e288745..38c42b3 100644
--- a/components/Sidebar/SidebarSettings.tsx
+++ b/components/Sidebar/SidebarSettings.tsx
@@ -1,4 +1,4 @@
-import { IconMoon, IconSun } from "@tabler/icons-react";
+import { IconMoon, IconSun, IconTrash } from "@tabler/icons-react";
 import { FC } from "react";
 import { SidebarButton } from "./SidebarButton";
 
@@ -9,10 +9,10 @@ interface Props {
 
 export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => {
   return (
-    <div className="flex flex-col items-center border-t border-neutral-500 py-4">
+    <div className="flex flex-col items-center border-t border-neutral-500 p-2 text-sm">
       <SidebarButton
         text={lightMode === "light" ? "Dark mode" : "Light mode"}
-        icon={lightMode === "light" ? <IconMoon /> : <IconSun />}
+        icon={lightMode === "light" ? <IconMoon size={16} /> : <IconSun size={16} />}
         onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")}
       />
     </div>