diff --git a/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx b/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
index 3061e53..5bd6a0d 100644
--- a/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
+++ b/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
@@ -16,6 +16,7 @@ import { useCourseContext } from "../../context/courseContext";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { Lecture } from "@/models/local/lecture";
 import { useAuthoritativeUpdates } from "../../utils/useAuthoritativeUpdates";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditLecture({ lectureDay }: { lectureDay: string }) {
   const { courseName } = useCourseContext();
@@ -66,7 +67,7 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
           }
         }
         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());
       }
@@ -85,21 +86,22 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
     textUpdate,
     updateLecture,
   ]);
-
   return (
-    <div className="h-full flex flex-col">
-      <EditLectureTitle lectureDay={lectureDay} />
-      <div className="sm:columns-2 min-h-0 flex-1">
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+    <EditLayout
+      Header={<EditLectureTitle lectureDay={lectureDay} />}
+      Body={
+        <div className="sm: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 sm:block none overflow-auto">
+            <div className="text-red-300">{error && error}</div>
+            {lecture && <LecturePreview lecture={lecture} />}
+          </div>
         </div>
-        <div className="h-full sm:block none overflow-auto">
-          <div className="text-red-300">{error && error}</div>
-          {lecture && <LecturePreview lecture={lecture} />}
-        </div>
-      </div>
-      <LectureButtons lectureDay={lectureDay} />
-    </div>
+      }
+      Footer={<LectureButtons lectureDay={lectureDay} />}
+    />
   );
 }
 
diff --git a/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx b/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
index d21b7b8..4d87578 100644
--- a/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
+++ b/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
@@ -42,8 +42,8 @@ export default function LecturePreviewPage({
         <div
           className="
             w-full max-w-screen-lg 
-            border-slate-700 border-4 rounded-md
-            p-3 overflow-auto
+            border-slate-700 border-4 rounded-md bg-gray-900/50
+            p-3 overflow-auto 
           "
         >
           <LecturePreview lecture={lecture} />
diff --git a/src/services/htmlMarkdownUtils.ts b/src/services/htmlMarkdownUtils.ts
index d737f21..d29d7ad 100644
--- a/src/services/htmlMarkdownUtils.ts
+++ b/src/services/htmlMarkdownUtils.ts
@@ -23,7 +23,7 @@ const mermaidExtension = {
   },
   renderer(token: { text: string }) {
     const base64 = btoa(token.text);
-    const url = `https://mermaid.ink/img/${base64}?type=png`
+    const url = `https://mermaid.ink/img/${base64}?type=svg`
     console.log(token.text, url);
     return `<img src="${url}" alt="Mermaid diagram" />`;
   },