diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 3517405c9..7a1a01552 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -160,7 +160,7 @@ export function Sidebar({
   }
 
   return (
-    <div className="overflow-y-scroll h-sidebar w-[300px] min-w-[300px] bg-gray-50 dark:bg-gray-800 cursor-pointer sticky top-[64px] self-start w-84">
+    <div className="overflow-y-scroll h-sidebar bg-gray-50 dark:bg-gray-800 cursor-pointer absolute top-[64px] self-start w-full z-20 xs:min-w-[133px] xs:w-[300px] xs:w-84 xs:sticky">
       <div className="flex">
         {/* <ToggleButton
             onClick={() => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 957141f55..fc9593c96 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
   ],
   prefix: '',
   theme: {
+    screens: {
+      xs: '540px',
+    },
     container: {
       center: true,
       padding: '2rem',
@@ -77,4 +80,4 @@ module.exports = {
     },
   },
   plugins: [require('tailwindcss-animate')],
-};
\ No newline at end of file
+};