diff --git a/nextjs/src/app/course/[courseName]/calendar/CalendarWeek.tsx b/nextjs/src/app/course/[courseName]/calendar/CalendarWeek.tsx
index bf68b4f..bd471cb 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarWeek.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CalendarWeek.tsx
@@ -23,7 +23,7 @@ export function CalendarWeek({
   const weekNumber = getWeekNumber(startDate, firstDateString);
   return (
     <div className="flex flex-row">
-      <div className="my-auto text-gray-400 w-6">
+      <div className="my-auto text-gray-400 w-6 sm:block hidden">
         {weekNumber.toString().padStart(2, "0")}
       </div>
       <div className="grid grid-cols-7 grow">
diff --git a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx b/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
index e434b0f..5af8753 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
@@ -31,10 +31,10 @@ export default function CourseCalendar() {
         border-gray-900
         rounded-lg
         bg-slate-950
-        p-1
+        sm:p-1
       "
     >
-      <div className="h-full overflow-y-scroll pe-1">
+      <div className="h-full overflow-y-scroll sm:pe-1">
         <CalendarItemsContextProvider>
           {months.map((month) => (
             <CalendarMonth key={month.month + "" + month.year} month={month} />
diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx
index c50b3ba..79d6fe0 100644
--- a/nextjs/src/app/course/[courseName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/page.tsx
@@ -13,12 +13,12 @@ export default async function CoursePage({}: {}) {
       <div className="h-full flex flex-col">
         <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex flex-row h-full">
+            <div className="flex sm:flex-row h-full flex-col">
               <div className="flex-1 h-full flex flex-col">
                 <CourseNavigation />
                 <CourseCalendar />
               </div>
-              <div className="w-96 p-3 h-full overflow-y-auto">
+              <div className="w-96 sm:p-3 h-full overflow-y-auto">
                 <CourseSettingsLink />
                 <ModuleList />
               </div>
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
index af35e14..e405f35 100644
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -27,7 +27,7 @@ export default async function RootLayout({
     <html lang="en">
       <head></head>
       <body className="flex justify-center">
-        <div className="bg-slate-900 h-screen text-slate-300 w-full p-1">
+        <div className="bg-slate-900 h-screen text-slate-300 w-full sm:p-1">
             <MyToaster />
             <Suspense>
               <Providers>
