diff --git a/src/app/(frontend)/[tenant]/dashboard/workouts/page.tsx b/src/app/(frontend)/[tenant]/dashboard/workouts/page.tsx
index 60dfea2..967a560 100644
--- a/src/app/(frontend)/[tenant]/dashboard/workouts/page.tsx
+++ b/src/app/(frontend)/[tenant]/dashboard/workouts/page.tsx
@@ -3,14 +3,14 @@ import { DashboardContent, DashboardContentSection } from '@/components/Dashboar
 
 const WorkoutsPage = () => {
   return (
-    <DashboardContent className="grid grid-cols-2">
-      <DashboardContentSection className="col-span-1">
+    <DashboardContent className="grid grid-cols-1 xl:grid-cols-2">
+      <DashboardContentSection className="col-span-1 xl:max-w-lg md:ml-0">
         <h1>Workouts</h1>
       </DashboardContentSection>
-      <DashboardContentSection className="col-span-1">
+      <DashboardContentSection className="col-span-1 xl:max-w-lg md:mr-0">
         <h1>Exercises</h1>
       </DashboardContentSection>
-      <DashboardContentSection className="col-span-2">
+      <DashboardContentSection className="col-span-1 xl:col-span-2">
         <h1>Clients</h1>
       </DashboardContentSection>
     </DashboardContent>
diff --git a/src/components/Dashboard/DashboardContent.tsx b/src/components/Dashboard/DashboardContent.tsx
index 5db66f4..cb3e30c 100644
--- a/src/components/Dashboard/DashboardContent.tsx
+++ b/src/components/Dashboard/DashboardContent.tsx
@@ -9,7 +9,7 @@ type Props = {
 const DashboardContent = (props: Props) => {
   const { children, className } = props
   return (
-    <div className={cn('flex flex-1 flex-col gap-4 p-4 mx-auto w-full max-w-5xl', className || '')}>
+    <div className={cn('flex flex-1 flex-col gap-4 p-4 mx-auto w-full max-w-6xl', className || '')}>
       {children}
     </div>
   )