diff --git a/public/schedules/calendar24.json b/public/schedules/calendar24.json
index e9656e0..2e65069 100644
--- a/public/schedules/calendar24.json
+++ b/public/schedules/calendar24.json
@@ -129,7 +129,7 @@
     "date": "2024-09-02",
     "week_day": "Mon",
     "week_idx": 2,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "Homework 3",
     "hw_link": "https://example.com/homework/3",
     "hw_due_topic": "",
@@ -1629,7 +1629,7 @@
     "date": "2024-11-25",
     "week_day": "Mon",
     "week_idx": 14,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "",
     "hw_link": "",
     "hw_due_topic": "",
@@ -1654,7 +1654,7 @@
     "date": "2024-11-26",
     "week_day": "Tue",
     "week_idx": 14,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "",
     "hw_link": "",
     "hw_due_topic": "",
@@ -1679,7 +1679,7 @@
     "date": "2024-11-27",
     "week_day": "Wed",
     "week_idx": 14,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "",
     "hw_link": "",
     "hw_due_topic": "",
@@ -1704,7 +1704,7 @@
     "date": "2024-11-28",
     "week_day": "Thu",
     "week_idx": 14,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "",
     "hw_link": "",
     "hw_due_topic": "",
@@ -1729,7 +1729,7 @@
     "date": "2024-11-29",
     "week_day": "Fri",
     "week_idx": 14,
-    "dayoff": 0,
+    "dayoff": 1,
     "hw_topic": "",
     "hw_link": "",
     "hw_due_topic": "",
diff --git a/src/app/assignments/page.js b/src/app/assignments/page.js
index 1b9d81a..9d8a467 100644
--- a/src/app/assignments/page.js
+++ b/src/app/assignments/page.js
@@ -1,18 +1,306 @@
-import React from "react";
+import Markdown from "markdown-to-jsx";
+import getPostContent from "@/lib/getPostContent";
+
+const CourseBook = () => {
+  const slug = "syllabus";
+  const post = getPostContent(slug);
+  console.log("Hello");
 
-const AssignmentsPage = () => {
   return (
     <main>
-      <div className="mb-8 text-center relative w-full h-[24vh] bg-blue-500 ">
+      <div className="mb-8 text-center relative w-full h-[24vh] bg-blue-600 ">
         <div className="w-full z-10 flex flex-col items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           <h1 className="inline-block mt-6 font-semibold capitalize text-light text-2xl md:text-3xl lg:text-5xl !leading-normal relative w-5/6">
-            Assignments
+            MPs
           </h1>
         </div>
-        <div className="absolute top-0 left-0 right-0 bottom-0 h-full bg-amber/60 dark:bg-amber/40" />
+        <div className="absolute top-0 left-0 right-0 bottom-0 h-full bg-green/60 dark:bg-dark/40" />
+      </div>
+      <div className="flex mb-8 sm:flex-row flex-col">
+        <div className="w-full sm:w-4/12 sm:block mt-8 ml-24 text-base text-gray">
+          <h3 className="mb-2 sticky top-24 font-bold">Syllabus Nav</h3>
+          <ul className="ml-4 sticky top-32">
+            <li className="hover:text-accent mb-1.5">
+              <a href="#contact-information" className="ml-2">
+                <strong>Contact Information</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#learning-objectives" className="ml-2">
+                <strong>Learning Objectives</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#components" className="ml-2">
+                <strong>Components</strong>
+              </a>
+            </li>
+
+            <ul className="ml-4 text-sm">
+              <li className="hover:text-accent mb-1">
+                <a href="#lecture" className="ml-2">
+                  <strong>Lecture</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#lab" className="ml-2">
+                  <strong>Lab</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#homework" className="ml-2">
+                  <strong>Homework</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#mps" className="ml-2">
+                  <strong>MPs</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#homework" className="ml-2">
+                  <strong>Homework</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#exams" className="ml-2">
+                  <strong>Exams</strong>
+                </a>
+              </li>
+            </ul>
+
+            <li className="hover:text-accent mb-1.5">
+              <a href="#grades" className="ml-2">
+                <strong>Grades</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#how-to-get-points" className="ml-2">
+                <strong>How To Get Points</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#extension-policies" className="ml-2">
+                <strong>Extension Policies</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#how-to-get-help" className="ml-2">
+                <strong>How to Get Help</strong>
+              </a>
+            </li>
+            <ul className="ml-4 text-sm">
+              <li className="hover:text-accent mb-1">
+                <a href="#office-hours" className="ml-2">
+                  <strong>Office Hours</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#discuss-online-forum" className="ml-2">
+                  <strong>Discuss Online Forum</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#meet-with-the-professor" className="ml-2">
+                  <strong>Meet with the Professor</strong>
+                </a>
+              </li>
+            </ul>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#proffice-hours-professor-office-hours" className="ml-2">
+                <strong>Proffice Hours (Professor Office Hours)</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a
+                href="#collaborationacademic-integrity-policy"
+                className="ml-2"
+              >
+                <strong>Collaboration/Academic Integrity Policy</strong>
+              </a>
+            </li>
+            <ul className="ml-4 text-sm">
+              <li className="hover:text-accent mb-1">
+                <a href="#limited-collaboration-allowed" className="ml-2">
+                  <strong>Limited Collaboration Allowed</strong>
+                </a>
+              </li>
+              <li className="hover:text-accent mb-1">
+                <a href="#collaboration-not-allowed" className="ml-2">
+                  <strong>Collaboration NOT Allowed</strong>
+                </a>
+              </li>
+            </ul>
+            <li className="hover:text-accent mb-1.5">
+              <a
+                href="#commitment-to-diversity-equity-and-inclusion"
+                className="ml-2"
+              >
+                <strong>Commitment to Diversity, Equity, and Inclusion</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#students-with-disabilities" className="ml-2">
+                <strong>Students with Disabilities</strong>
+              </a>
+            </li>
+            <li className="hover:text-accent mb-1.5">
+              <a href="#statement-on-mental-health" className="ml-2">
+                <strong>Statement on Mental Health</strong>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className="w-full sm:w-7/12 mt-8 p-4">
+          <div className="mb-8 ">
+            <h1 className="text-3xl font-bold mb-4 text-accent">
+              Course Syllabus
+            </h1>
+            <Markdown
+              options={{
+                overrides: {
+                  h1: {
+                    component: "h1",
+                    props: {
+                      className: "text-2xl font-semibold mt-8 mb-2",
+                    },
+                  },
+                  h2: {
+                    component: "h2",
+                    props: {
+                      className: "text-xl font-semibold mt-6 mb-2",
+                    },
+                  },
+                  h3: {
+                    component: "h3",
+                    props: {
+                      className: "text-lg font-semibold mt-4 mb-2",
+                    },
+                  },
+                  h4: {
+                    component: "h4",
+                    props: {
+                      className: "text-base font-semibold mt-4 mb-2",
+                    },
+                  },
+                  p: {
+                    component: "p",
+                    props: {
+                      className:
+                        "mb-4 leading-9 text-black/80 font-medium text-lg ",
+                    },
+                  },
+                  a: {
+                    component: "a",
+                    props: {
+                      className: "text-accent hover:underline",
+                    },
+                  },
+                  ul: {
+                    component: "ul",
+                    props: {
+                      className: "list-disc ml-8 mb-4",
+                    },
+                  },
+                  ol: {
+                    component: "ol",
+                    props: {
+                      className:
+                        "list-decimal tracking-normal ml-8 mb-2 text-lg",
+                    },
+                  },
+                  li: {
+                    component: "li",
+                    props: {
+                      className: "mb-2 ml-4 tracking-normal text-lg",
+                    },
+                  },
+                  blockquote: {
+                    component: "blockquote",
+                    props: {
+                      className:
+                        "border-l-4 border-accent bg-gray-100 dark:bg-gray-800 p-2",
+                    },
+                  },
+                  code: {
+                    component: "code",
+                    props: {
+                      className:
+                        "bg-gray-100 dark:bg-gray-800 p-1 text-sm rounded",
+                    },
+                  },
+                  pre: {
+                    component: "pre",
+                    props: {
+                      className:
+                        "bg-gray-100 dark:bg-gray-800 p-2 text-sm rounded",
+                    },
+                  },
+                  strong: {
+                    component: "strong",
+                    props: {
+                      className: "font-semibold text-black",
+                    },
+                  },
+                  em: {
+                    component: "em",
+                    props: {
+                      className: "italic",
+                    },
+                  },
+                  table: {
+                    component: "table",
+                    props: {
+                      className: "table-auto w-full",
+                    },
+                  },
+                  thead: {
+                    component: "thead",
+                    props: {
+                      className: "bg-gray-100 dark:bg-gray-800",
+                    },
+                  },
+                  th: {
+                    component: "th",
+                    props: {
+                      className: "border dark:border-light p-2",
+                    },
+                  },
+                  td: {
+                    component: "td",
+                    props: {
+                      className: "border dark:border-light p-2",
+                    },
+                  },
+                  tbody: {
+                    component: "tbody",
+                    props: {
+                      className: "text-center",
+                    },
+                  },
+                  tr: {
+                    component: "tr",
+                    props: {
+                      className: "bg-gray-100 dark:bg-gray-800",
+                    },
+                  },
+                  img: {
+                    component: "img",
+                    props: {
+                      className: "w-full",
+                    },
+                  },
+                },
+              }}
+            >
+              {post.content}
+            </Markdown>
+          </div>
+        </div>
+        <div className="hidden sm:block w-1/12"></div>
       </div>
     </main>
   );
 };
 
-export default AssignmentsPage;
+export default CourseBook;
diff --git a/src/app/lectures/page.js b/src/app/lectures/page.js
index 7d500b0..435e1ef 100644
--- a/src/app/lectures/page.js
+++ b/src/app/lectures/page.js
@@ -141,25 +141,6 @@ const LecturesPage = () => {
           <div className="w-full max-w-[1000px] gap-2 mb-8">
             <p className="font-bold mb-5 text-2xl">Schedules: </p>
             <table className="table-fix w-full border-collapse ">
-              {/* <thead className="h-[50px]">
-                <tr>
-                  <th className="w-2/10 border border-b-2 border-x-gray/50 border-t-gray/50">
-                    Date
-                  </th>
-                  <th className="w-3/10 border border-b-2 border-x-gray/50 border-t-gray/50">
-                    Lecture Topic
-                  </th>
-                  <th className="w-2/10 border border-b-2 border-x-gray/50 border-t-gray/50">
-                    Homework & Lab
-                  </th>
-                  <th className="w-2/10 border border-b-2 border-x-gray/50 border-t-gray/50">
-                    MP & Quiz
-                  </th>
-                  <th className="w-1/10 border border-b-2 border-x-gray/50 border-t-gray/50">
-                    Deadline
-                  </th>
-                </tr>
-              </thead> */}
               <thead className="h-[60px]">
                 <tr>
                   <th className="w-[200px] border border-b-2 border-x-gray/50 border-t-gray/50">
@@ -191,6 +172,13 @@ const LecturesPage = () => {
                               ? "border border-x-gray/50  border-b-2"
                               : "border border-x-gray/50 border-b-gray/50"
                           }`}
+                          style={
+                            day.dayoff
+                              ? {
+                                  backgroundColor: "#a1a1a1",
+                                }
+                              : {}
+                          }
                         >
                           <span className="z-20 float-left -translate-x-1/2 -translate-y-5 top-10 border border-blue-500 rounded-xl px-3 py-1 bg-blue-500 font-medium text-white">
                             Week {day.week_idx}
@@ -207,6 +195,13 @@ const LecturesPage = () => {
                             ? "border border-x-gray/50  border-b-2"
                             : "border border-x-gray/50 border-b-gray/50"
                         }`}
+                        style={
+                          day.dayoff
+                            ? {
+                                backgroundColor: "#a1a1a1",
+                              }
+                            : {}
+                        }
                       >
                         <p className="ml-3">
                           {day.week_day}, {day.date}
@@ -220,7 +215,11 @@ const LecturesPage = () => {
                           : "border border-x-gray/50 border-b-gray/50"
                       }`}
                       style={
-                        day.lec_topic
+                        day.dayoff
+                          ? {
+                              backgroundColor: "#a1a1a1",
+                            }
+                          : day.lec_topic
                           ? {
                               backgroundColor: "rgb(99, 102, 241)",
                             }
@@ -242,7 +241,11 @@ const LecturesPage = () => {
                           : "border border-x-gray/50 border-b-gray/50"
                       }`}
                       style={
-                        day.hw_topic
+                        day.dayoff
+                          ? {
+                              backgroundColor: "#a1a1a1",
+                            }
+                          : day.hw_topic
                           ? {
                               backgroundColor: "rgb(59 130 246)",
                             }
@@ -275,7 +278,11 @@ const LecturesPage = () => {
                           : "border border-x-gray/50 border-b-gray/50"
                       }`}
                       style={
-                        day.mp_topic
+                        day.dayoff
+                          ? {
+                              backgroundColor: "#a1a1a1",
+                            }
+                          : day.mp_topic
                           ? {
                               backgroundColor: "rgb(34 197 94)",
                             }
@@ -308,7 +315,11 @@ const LecturesPage = () => {
                           : "border border-x-gray/50 border-b-gray/50"
                       }`}
                       style={
-                        day.hw_due_topic
+                        day.dayoff
+                          ? {
+                              backgroundColor: "#a1a1a1",
+                            }
+                          : day.hw_due_topic
                           ? {
                               backgroundColor: "rgb(59 130 246)",
                             }