diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
index 38a7b04..1168183 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
@@ -15,7 +15,7 @@ export default function AssignmentPreview({
     0
   );
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto ">
       <section>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Due Date</div>
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
index ac7e7a5..ef35643 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -21,6 +21,7 @@ import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuth
 import EditAssignmentHeader from "./EditAssignmentHeader";
 import { Spinner } from "@/components/Spinner";
 import { getAssignmentHelpString } from "./getAssignmentHelpString";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditAssignment({
   moduleName,
@@ -95,7 +96,7 @@ export default function EditAssignment({
           }
         }
         setError("");
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         setError(e.toString());
       }
@@ -120,47 +121,53 @@ export default function EditAssignment({
   ]);
 
   return (
-    <div className="h-full flex flex-col align-middle px-1">
-      <EditAssignmentHeader
-        moduleName={moduleName}
-        assignmentName={assignmentName}
-      />
-      <div className={"min-h-0 flex flex-row w-full flex-grow"}>
-        {showHelp && (
-          <pre className=" max-w-96">
-            <code>{getAssignmentHelpString(settings)}</code>
-          </pre>
-        )}
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="flex-1 h-full">
-          <div className="text-red-300">{error && error}</div>
-
-          <div className="px-3 h-full">
-            <ClientOnly>
-              <SuspenseAndErrorHandling showToast={false}>
-                {imageUpdateIsPending && (
-                  <div className="flex justify-center">
-                    <Spinner /> images being uploaded to canvas
-                  </div>
-                )}
-
-                <AssignmentPreview assignment={assignment} />
-              </SuspenseAndErrorHandling>
-            </ClientOnly>
+    <EditLayout
+      Header={
+        <EditAssignmentHeader
+          moduleName={moduleName}
+          assignmentName={assignmentName}
+        />
+      }
+      Body={
+        <>
+          {showHelp && (
+            <pre className=" max-w-96">
+              <code>{getAssignmentHelpString(settings)}</code>
+            </pre>
+          )}
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
           </div>
-        </div>
-      </div>
-      <ClientOnly>
-        <SuspenseAndErrorHandling>
-          <AssignmentFooterButtons
-            moduleName={moduleName}
-            assignmentName={assignmentName}
-            toggleHelp={() => setShowHelp((h) => !h)}
-          />
-        </SuspenseAndErrorHandling>
-      </ClientOnly>
-    </div>
+          <div className="flex-1 h-full">
+            <div className="text-red-300">{error && error}</div>
+
+            <div className="px-3 h-full ">
+              <ClientOnly>
+                <SuspenseAndErrorHandling showToast={false}>
+                  {imageUpdateIsPending && (
+                    <div className="flex justify-center">
+                      <Spinner /> images being uploaded to canvas
+                    </div>
+                  )}
+
+                  <AssignmentPreview assignment={assignment} />
+                </SuspenseAndErrorHandling>
+              </ClientOnly>
+            </div>
+          </div>
+        </>
+      }
+      Footer={
+        <ClientOnly>
+          <SuspenseAndErrorHandling>
+            <AssignmentFooterButtons
+              moduleName={moduleName}
+              assignmentName={assignmentName}
+              toggleHelp={() => setShowHelp((h) => !h)}
+            />
+          </SuspenseAndErrorHandling>
+        </ClientOnly>
+      }
+    />
   );
 }
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
index 200f01c..2ea5cb2 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
@@ -13,14 +13,14 @@ export default function EditAssignmentHeader({
   const { courseName } = useCourseContext();
   return (
     <div className="py-1 flex flex-row justify-start gap-3">
-      <Link className="btn btn-thin" href={getCourseUrl(courseName)} shallow={true}>
+      <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
         {courseName}
       </Link>
       <UpdateAssignmentName
         assignmentName={assignmentName}
         moduleName={moduleName}
       />
-      <div>{assignmentName}</div>
+      <div className="my-auto">{assignmentName}</div>
     </div>
   );
 }
diff --git a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
index f41fc13..9bb6b80 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
 import EditPageHeader from "./EditPageHeader";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditPage({
   moduleName,
@@ -67,17 +68,6 @@ export default function EditPage({
               previousPageName: pageName,
               courseName,
             });
-            // .then(() => {
-            //   if (updatedPage.name !== pageName)
-            //     router.replace(
-            //       getModuleItemUrl(
-            //         courseName,
-            //         moduleName,
-            //         "page",
-            //         updatedPage.name
-            //       )
-            //     );
-            // });
           } else {
             console.log(
               "client not authoritative, updating client with server page"
@@ -109,25 +99,31 @@ export default function EditPage({
   ]);
 
   return (
-    <div className="h-full flex flex-col">
-      <EditPageHeader pageName={pageName} moduleName={moduleName} />
-      <div className="columns-2 min-h-0 flex-1">
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="h-full">
-          <div className="text-red-300">{error && error}</div>
-          <div className="h-full overflow-y-auto">
-            <br />
-            <PagePreview page={page} />
+    <EditLayout
+      Header={<EditPageHeader pageName={pageName} moduleName={moduleName} />}
+      Body={
+        <div className="columns-2 min-h-0 flex-1">
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+          </div>
+          <div className="h-full">
+            <div className="text-red-300">{error && error}</div>
+            <div className="h-full overflow-y-auto">
+              <br />
+              <PagePreview page={page} />
+            </div>
           </div>
         </div>
-      </div>
-      {settings.canvasId && (
-        <ClientOnly>
-          <EditPageButtons pageName={pageName} moduleName={moduleName} />
-        </ClientOnly>
-      )}
-    </div>
-  );
+      }
+      Footer={
+        <>
+          {settings.canvasId && (
+            <ClientOnly>
+              <EditPageButtons pageName={pageName} moduleName={moduleName} />
+            </ClientOnly>
+          )}
+        </>
+      }
+    />
+  )
 }
diff --git a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
index 5a98876..d4c9baa 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -17,6 +17,7 @@ import { extractLabelValue } from "@/models/local/assignment/utils/markdownUtils
 import EditQuizHeader from "./EditQuizHeader";
 import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { EditLayout } from "@/components/EditLayout";
 
 const helpString = (settings: LocalCourseSettings) => {
   const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
@@ -148,31 +149,35 @@ export default function EditQuiz({
   ]);
 
   return (
-    <div className="h-full flex flex-col align-middle px-1">
-      <EditQuizHeader moduleName={moduleName} quizName={quizName} />
-      <div className={"min-h-96 h-full flex flex-row w-full"}>
-        {showHelp && (
-          <pre className=" max-w-96">
-            <code>{helpString(settings)}</code>
-          </pre>
-        )}
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="flex-1 h-full">
-          <div className="text-red-300">{error && error}</div>
-          <QuizPreview moduleName={moduleName} quizName={quizName} />
-        </div>
-      </div>
-      <ClientOnly>
-        <SuspenseAndErrorHandling>
-          <QuizButtons
-            moduleName={moduleName}
-            quizName={quizName}
-            toggleHelp={() => setShowHelp((h) => !h)}
-          />
-        </SuspenseAndErrorHandling>
-      </ClientOnly>
-    </div>
+    <EditLayout
+      Header={<EditQuizHeader moduleName={moduleName} quizName={quizName} />}
+      Body={
+        <>
+          {showHelp && (
+            <pre className=" max-w-96">
+              <code>{helpString(settings)}</code>
+            </pre>
+          )}
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+          </div>
+          <div className="flex-1 h-full">
+            <div className="text-red-300">{error && error}</div>
+            <QuizPreview moduleName={moduleName} quizName={quizName} />
+          </div>
+        </>
+      }
+      Footer={
+        <ClientOnly>
+          <SuspenseAndErrorHandling>
+            <QuizButtons
+              moduleName={moduleName}
+              quizName={quizName}
+              toggleHelp={() => setShowHelp((h) => !h)}
+            />
+          </SuspenseAndErrorHandling>
+        </ClientOnly>
+      }
+    />
   );
 }
diff --git a/src/app/course/[courseName]/page.tsx b/src/app/course/[courseName]/page.tsx
index 9c1aaa4..35eb9bd 100644
--- a/src/app/course/[courseName]/page.tsx
+++ b/src/app/course/[courseName]/page.tsx
@@ -11,7 +11,7 @@ export default async function CoursePage() {
       <div className="h-full flex flex-col">
         <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex sm:flex-row h-full flex-col">
+            <div className="flex sm:flex-row h-full flex-col max-w-[2400px] mx-auto">
               <div className="flex-1 h-full flex flex-col">
                 <CourseNavigation />
                 <CourseCalendar />
diff --git a/src/app/globals.css b/src/app/globals.css
index 8792228..8431c64 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -83,6 +83,7 @@ p {
 button,
 .btn {
   @apply font-bold py-1 px-3 rounded transition-all duration-200;
+  @apply cursor-pointer;
 }
 
 .btn-thin {
@@ -91,11 +92,12 @@ button,
 
 button:not(.unstyled):not(.btn-danger),
 .btn:not(.unstyled):not(.btn-danger) {
-  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+  @apply bg-blue-900/80 hover:bg-blue-800/80 text-blue-50;
+  @apply cursor-pointer;
 }
 
 .btn-danger {
-  @apply bg-red-800 hover:bg-red-900 text-red-100;
+  @apply bg-red-800/60 hover:bg-red-900 text-red-100;
 }
 
 .btn-outline {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4d9b072..bd2cdf6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,7 +26,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-screen sm:p-1">
+        <div className="bg-gray-950 h-screen text-slate-300 w-screen sm:p-1">
           <MyToaster />
           <Suspense>
             <Providers>
diff --git a/src/components/EditLayout.tsx b/src/components/EditLayout.tsx
new file mode 100644
index 0000000..3808a95
--- /dev/null
+++ b/src/components/EditLayout.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+export const EditLayout: FC<{
+  Header: ReactNode;
+  Body: ReactNode;
+  Footer: ReactNode;
+}> = ({ Header, Body, Footer }) => {
+  return (
+    <div className="h-full flex flex-col align-middle px-1 max-w-[2400px] mx-auto bg-gray-900 rounded">
+      {Header}
+      <div className="min-h-0 flex flex-row w-full flex-grow">
+        {Body}
+      </div>
+      {Footer}
+    </div>
+  );
+};
diff --git a/src/components/editor/MonacoEditor.css b/src/components/editor/MonacoEditor.css
index b7bd7f9..6252a83 100644
--- a/src/components/editor/MonacoEditor.css
+++ b/src/components/editor/MonacoEditor.css
@@ -5,8 +5,9 @@
 /* monaco editor */
 .monaco-editor-background,
 .monaco-editor .margin {
-  background-color: #020617 !important;
-  /* background-color: #18181b !important; */
+  /* background-color: #020617 !important; */
+  background-color: #030712 !important;
+  /* background-color: #101828 !important; */
 }
 .monaco-editor {
   position: absolute !important;