diff --git a/src/session.rs b/src/session.rs
index 1891913..8351433 100644
--- a/src/session.rs
+++ b/src/session.rs
@@ -4,13 +4,13 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 
 #[derive(Debug, Clone, Eq, PartialEq, Serialize, Deserialize)]
-pub struct DatedSession {
+pub struct OldDatedSession {
   pub day: Day,
   pub session: Session,
   pub applying_exception: Option<Exception>,
 }
 
-impl Noted for DatedSession {
+impl Noted for OldDatedSession {
   fn get_note(&self) -> Option<&String> {
     match &self.applying_exception {
       Some(e) => e.get_note(),
@@ -19,6 +19,47 @@ impl Noted for DatedSession {
   }
 }
 
+#[derive(Debug, Clone, Eq, PartialEq, Serialize, Deserialize)]
+pub enum DatedSession {
+  Regular {
+    session: RegularSession,
+    day: Day,
+  },
+  Extra(ExtraSession),
+  Cancelled {
+    session: RegularSession,
+    day: Day,
+    exception: CancelException,
+  },
+  Altered {
+    session: RegularSession,
+    day: Day,
+    exception: AlterException,
+  },
+}
+
+impl DatedSession {
+  pub fn date(&self) -> &NaiveDate {
+    match self {
+      DatedSession::Regular { day, .. } => &day.date,
+      DatedSession::Extra(ExtraSession { date, .. }) => date,
+      DatedSession::Cancelled { day, .. } => &day.date,
+      DatedSession::Altered { day, .. } => &day.date,
+    }
+  }
+}
+
+impl Noted for DatedSession {
+  fn get_note(&self) -> Option<&String> {
+    match self {
+      DatedSession::Regular { session, .. } => session.get_note(),
+      DatedSession::Extra(session) => session.get_note(),
+      DatedSession::Cancelled { exception, .. } => exception.get_note(),
+      DatedSession::Altered { exception, .. } => exception.get_note(),
+    }
+  }
+}
+
 #[derive(Debug, Clone, Eq, PartialEq, Serialize, Deserialize)]
 pub enum Session {
   Regular(RegularSession),
@@ -43,13 +84,23 @@ impl Session {
       return Err(self);
     }
 
-    let dated_session = DatedSession {
-      applying_exception: match self {
-        Session::Regular(RegularSession { ref except, .. }) => except.get(&day.date).cloned(),
-        _ => None,
+    let dated_session = match self {
+      Session::Regular(session) => match session.except.get(&day.date) {
+        Some(exception) => match exception.clone() {
+          Exception::Cancel(exception) => DatedSession::Cancelled {
+            session,
+            day,
+            exception,
+          },
+          Exception::Alter(exception) => DatedSession::Altered {
+            session,
+            day,
+            exception,
+          },
+        },
+        None => DatedSession::Regular { session, day },
       },
-      session: self,
-      day,
+      Session::Extra(session) => DatedSession::Extra(session),
     };
     Ok(dated_session)
   }
diff --git a/src/webpage.rs b/src/webpage.rs
index 4195ba0..33e0f59 100644
--- a/src/webpage.rs
+++ b/src/webpage.rs
@@ -1,6 +1,6 @@
 use crate::localize_day;
-use crate::session::{RegularSession, Session};
-use crate::session_date_calculator::{DayIter, NthWeekday};
+use crate::session::{DatedSession, RegularSession, Session, WithNote};
+use crate::session_date_calculator::{Day, DayIter, NthWeekday};
 use chrono::Weekday;
 use leptos::prelude::*;
 use leptos::server_fn::request::browser::Request;
@@ -58,8 +58,12 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
       </div>
       <For
         each=move || dated_sessions.get()
-        key=|session| session.day.clone()
-        children=move |session| view! { <div class="box elem-background">{localize_day(&session.day)}</div> }
+        key=|session| *session.date()
+        children=move |session| {
+          view! {
+            <DatedSession session />
+          }
+        }
       />
       <div
         class="box button elem-background"
@@ -73,6 +77,59 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
   }
 }
 
+#[component]
+fn DatedSession(session: DatedSession) -> impl IntoView {
+  match session {
+    DatedSession::Regular { session, day, .. } => {
+      view! {
+        <div class="box elem-background">
+          <p class="small-text">"<Regulärer Termin>"</p>
+          <p><b>{localize_day(&day)}</b></p>
+          <p>{session.note}</p>
+        </div>
+      }.into_any()
+    }
+    DatedSession::Extra(session) => {
+      view! {
+        <div class="box highlighted-background">
+          <p class="small-text">"<Extra Probe>"</p>
+          <p><b>{localize_day(&session.date.into())}</b></p>
+          <p>{session.note}</p>
+        </div>
+      }.into_any()
+    }
+    DatedSession::Cancelled { session, day, .. } => {
+      view! {
+        <div class="box cancel-background">
+          <p class="small-text">"<Entfall>"</p>
+          <p class="strikethrough bold">{localize_day(&day)}</p>
+          <p>{session.note}</p>
+        </div>
+      }.into_any()
+    }
+    DatedSession::Altered { session, day, exception, .. } => {
+      let day = move || {
+        match exception.date.map(Day::from) {
+          None => view! { {localize_day(&day)} }.into_any(),
+          Some(new_day) => view! {
+            <span class="strikethrough">{localize_day(&day)}</span>
+            " "
+            {localize_day(&new_day)}
+          }.into_any(),
+        }
+      };
+      
+      view! {
+        <div class="box change-background">
+          <p class="small-text">"<Änderung>"</p>
+          <p class="bold">{day}</p>
+          <p>{exception.note.or(session.note)}</p>
+        </div>
+      }.into_any()
+    }
+  }
+}
+
 async fn load_config<T>(name: &str) -> Result<Option<T>, String>
 where
   T: for<'a> Deserialize<'a>,
@@ -106,10 +163,10 @@ pub struct SessionConfig {
 impl Default for SessionConfig {
   fn default() -> Self {
     Self {
-      motd: Some("Probe jeden ersten Sonntag im Monat um 10:00 Uhr und jeden dritten Dienstag im Monat um 18:30 Uhr".to_string()),
+      motd: Some("Jeder 1. Sonntag und 3. Dienstag im Monat".to_string()),
       sessions: vec![
-        RegularSession::from(NthWeekday::new(1, Weekday::Sun)).into(),
-        RegularSession::from(NthWeekday::new(3, Weekday::Tue)).into(),
+        RegularSession::from(NthWeekday::new(1, Weekday::Sun)).with_note("10:00 Uhr").into(),
+        RegularSession::from(NthWeekday::new(3, Weekday::Tue)).with_note("18:30 Uhr").into(),
       ],
     }
   }
diff --git a/styles.css b/styles.css
index 35db1f9..5763e7a 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,8 @@
 :root {
   --darkred: darkred;
   --darkgreen: #196e0a;
-  --gray: #292929;
+  --darkgray: #292929;
+  --gray: #606060;
   --white: white;
   --black: black;
   --red: red;
@@ -18,13 +19,16 @@ html, body {
   margin: 0;
   padding: 0;
 }
+p {
+  margin: 0;
+}
 @media screen and (max-width: 1000px) {
   body {
     font-size: 3rem;
   }
 }
 .background {
-  background-color: var(--gray);
+  background-color: var(--darkgray);
   color: var(--white);
   font-family: Arial, sans-serif;
   display: flex;
@@ -76,3 +80,14 @@ html, body {
 .change-background {
   background-color: var(--yellow);
 }
+.small-text {
+  color: var(--darkgray);
+  font-size: 1rem;
+  text-align: left;
+}
+.strikethrough {
+  text-decoration: line-through;
+}
+.bold {
+  font-weight: bold;
+}
\ No newline at end of file