diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index e770fade4..70ca3c644 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -8,6 +8,8 @@ import { Suspense } from 'react';
 import AuthWrapper from '@/components/AuthWrapper';
 import DocModal from '@/components/DocModal';
 
+import { FaBars } from 'react-icons/fa6';
+
 export const dynamic = 'force-dynamic';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -29,9 +31,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={inter.className}>
         <ThemeProvider>
           <AuthWrapper authRequired={authRequired}>
-            <div className="flex h-screen bg-gray-950">
-              <Sidebar />
-              <main className="flex-1 overflow-auto bg-gray-950 text-gray-100 relative">
+            <div className="flex h-screen bg-gray-950 group">
+              <label htmlFor="sidebar-toggle" className="hidden fixed inset-0 z-30 bg-gray-900/75 group-has-[#sidebar-toggle:checked]:block">
+              </label>
+              <Sidebar className="fixed top-0 left-0 z-40 w-56 h-screen transition-transform -translate-x-full sm:translate-x-0 group-has-[#sidebar-toggle:checked]:translate-x-0" />
+              <main className="flex-1 overflow-auto bg-gray-950 text-gray-100 relative sm:ml-56">
                 <Suspense>{children}</Suspense>
               </main>
             </div>
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index ca6a21cae..5534edc54 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link';
+import classNames from 'classnames';
 import { Home, Settings, BrainCircuit, Images, Plus } from 'lucide-react';
 import { FaXTwitter, FaDiscord, FaYoutube } from 'react-icons/fa6';
 
-const Sidebar = () => {
+const Sidebar = ({ className }) => {
   const navigation = [
     { name: 'Dashboard', href: '/dashboard', icon: Home },
     { name: 'New Job', href: '/jobs/new', icon: Plus },
@@ -16,7 +17,10 @@ const Sidebar = () => {
   const socialIconClass = 'w-5 h-5 text-gray-400 hover:text-white';
 
   return (
-    <div className="flex flex-col w-59 bg-gray-900 text-gray-100">
+    <div className={classNames(
+        'flex flex-col bg-gray-900 text-gray-100',
+        className,
+      )}>
       <div className="px-4 py-3">
         <h1 className="text-l">
           <img src="/ostris_logo.png" alt="Ostris AI Toolkit" className="w-auto h-7 mr-3 inline" />
diff --git a/ui/src/components/layout.tsx b/ui/src/components/layout.tsx
index c5cbef55c..75b9b7fbc 100644
--- a/ui/src/components/layout.tsx
+++ b/ui/src/components/layout.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { FaBars } from "react-icons/fa";
 
 interface Props {
   className?: string;
@@ -13,6 +14,11 @@ export const TopBar: React.FC<Props> = ({ children, className }) => {
         className,
       )}
     >
+      <label className="mr-2 cursor-pointer sm:hidden">
+        <input id="sidebar-toggle" type="checkbox" hidden />
+        <FaBars />
+      </label>
+
       {children ? children : null}
     </div>
   );
