diff --git a/nextjs/src/app/CourseList.tsx b/nextjs/src/app/CourseList.tsx
index 68e440a..7692889 100644
--- a/nextjs/src/app/CourseList.tsx
+++ b/nextjs/src/app/CourseList.tsx
@@ -9,7 +9,14 @@ export default function CourseList() {
     <div>
       {allSettings.map((settings) => (
         <div key={settings.name}>
-          <Link href={getCourseUrl(settings.name)} shallow={true}>
+          <Link
+            href={getCourseUrl(settings.name)}
+            shallow={true}
+            className="
+              font-bold text-xl block
+              transition-all hover:scale-105 hover:underline
+            "
+          >
             {settings.name}
           </Link>
         </div>
diff --git a/nextjs/src/app/newCourse/AddNewCourse.tsx b/nextjs/src/app/newCourse/AddNewCourse.tsx
index 4feb587..95d0375 100644
--- a/nextjs/src/app/newCourse/AddNewCourse.tsx
+++ b/nextjs/src/app/newCourse/AddNewCourse.tsx
@@ -9,7 +9,11 @@ export default function AddNewCourse() {
 
   return (
     <div>
-      <button onClick={() => setShowForm(true)}>Add New Course</button>
+      <div className="flex justify-center">
+        <button className="" onClick={() => setShowForm(true)}>
+          Add New Course
+        </button>
+      </div>
 
       <div className={" collapsible " + (showForm && "expand")}>
         <div className="border rounded-md p-3 m-3">
diff --git a/nextjs/src/app/page.tsx b/nextjs/src/app/page.tsx
index d450f49..db686e1 100644
--- a/nextjs/src/app/page.tsx
+++ b/nextjs/src/app/page.tsx
@@ -1,11 +1,21 @@
 import CourseList from "./CourseList";
 import AddNewCourse from "./newCourse/AddNewCourse";
+import TodaysLectures from "./todaysLectures/TodaysLectures";
 
 export default async function Home() {
   return (
     <main className="h-full flex justify-center overflow-auto">
-      <div>
-        <CourseList />
+      <div className="xl:w-[900px] mx-auto">
+        <br />
+        <br />
+        <br />
+        <br />
+        <div className=" flex justify-center">
+          <CourseList />
+        </div>
+        <br />
+        <br />
+        <TodaysLectures />
         <br />
         <br />
         <AddNewCourse />
diff --git a/nextjs/src/app/todaysLectures/OneCourseLectures.tsx b/nextjs/src/app/todaysLectures/OneCourseLectures.tsx
new file mode 100644
index 0000000..2e8ca6e
--- /dev/null
+++ b/nextjs/src/app/todaysLectures/OneCourseLectures.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
+import { getDateOnlyMarkdownString } from "@/models/local/timeUtils";
+import { getLecturePreviewUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { useCourseContext } from "../course/[courseName]/context/courseContext";
+
+export default function OneCourseLectures() {
+  const { courseName } = useCourseContext();
+  const { data: weeks } = useLecturesByWeekQuery();
+
+  const dayAsDate = new Date();
+  const dayAsString = getDateOnlyMarkdownString(dayAsDate);
+  const todaysLecture = weeks
+    .flatMap((w) => w.lectures)
+    .find((l) => l.date == dayAsString);
+  if (!todaysLecture) return <></>;
+  return (
+    <Link
+      href={getLecturePreviewUrl(courseName, dayAsString)}
+      className="
+        border-4 rounded-lg border-slate-500 
+        p-3 m-3 block text-end
+        bg-slate-950
+        transition-all hover:scale-110 hover:shadow-md
+      "
+    >
+      <span className="font-bold text-xl">{todaysLecture?.name}</span>
+      <br />
+      <span className="text-slate-500">{courseName}</span>
+    </Link>
+  );
+}
diff --git a/nextjs/src/app/todaysLectures/TodaysLectures.tsx b/nextjs/src/app/todaysLectures/TodaysLectures.tsx
new file mode 100644
index 0000000..e96bacd
--- /dev/null
+++ b/nextjs/src/app/todaysLectures/TodaysLectures.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useLocalCoursesSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import OneCourseLectures from "./OneCourseLectures";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import CourseContextProvider from "../course/[courseName]/context/CourseContextProvider";
+
+export default function TodaysLectures() {
+  const { data: allSettings } = useLocalCoursesSettingsQuery();
+  return (
+    <div className="w-full">
+      {/* <h3 className="text-center text-slate-400">todays lectures</h3> */}
+      <div className="flex justify-around w-full">
+        <SuspenseAndErrorHandling>
+          {allSettings.map((settings) => (
+            <div key={settings.name} className="flex-shrink">
+              <CourseContextProvider localCourseName={settings.name}>
+                <OneCourseLectures />
+              </CourseContextProvider>
+            </div>
+          ))}
+        </SuspenseAndErrorHandling>
+      </div>
+    </div>
+  );
+}