diff --git a/absences/absences.js b/absences/absences.js
index 388ed32..a99215d 100644
--- a/absences/absences.js
+++ b/absences/absences.js
@@ -89,14 +89,14 @@ async function transformAbsencesPage() {
           <div class="filter-content">
             <div class="filter-group">
               <label>
-                <span class="material-icons-round">date_range</span>
+                <img src="${chrome.runtime.getURL("icons/Calendar.svg")}" alt="Dátum" style="width: 24px; height: 24px;">
                 ${LanguageManager.t("absences.date")}
               </label>
               <input type="date" id="dateFilter" class="filter-input">
             </div>
             <div class="filter-group">
               <label>
-                <span class="material-icons-round">school</span>
+                <img src="${chrome.runtime.getURL("icons/Subject.svg")}" alt="Tantárgy" style="width: 24px; height: 24px;">
                 ${LanguageManager.t("absences.subject")}
               </label>
               <select id="subjectFilter" class="filter-input">
@@ -112,7 +112,7 @@ async function transformAbsencesPage() {
             </div>
             <div class="filter-group">
               <label>
-                <span class="material-icons-round">check_circle</span>
+                <img src="${chrome.runtime.getURL("icons/BadgeCheck.svg")}" alt="Igazolás" style="width: 24px; height: 24px;">
                 ${LanguageManager.t("absences.justification")}
               </label>
               <select id="justificationFilter" class="filter-input">
@@ -218,7 +218,7 @@ function generateAbsencesHTML(absences) {
             <span class="status-badge ${absence.justificationStatus}">
               ${
                 absence.justificationStatus === "justified"
-                  ? `<span class="material-icons-round">check_circle</span> ${LanguageManager.t("absences.justified")}`
+                  ? `<img src="${chrome.runtime.getURL("icons/BadgeCheck.svg")}" alt="Igazolt" style="width: 16px; height: 16px;"> ${LanguageManager.t("absences.justified")}`
                   : absence.justificationStatus === "unjustified"
                     ? `<span class="material-icons-round">cancel</span> ${LanguageManager.t("absences.unjustified")}`
                     : `<span class="material-icons-round">pending</span> ${LanguageManager.t("absences.pending")}`
diff --git a/icons/ArrowsExpandFull.svg b/icons/ArrowsExpandFull.svg
new file mode 100644
index 0000000..6f908c2
--- /dev/null
+++ b/icons/ArrowsExpandFull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="none" stroke="#A7DC22" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19h4m0 0v-4m0 4l-4-4M9 5H5m0 0v4m0-4l4 4m6-4h4m0 0v4m0-4l-4 4M9 19H5m0 0v-4m0 4l4-4"/></svg>
\ No newline at end of file
diff --git a/icons/BadgeCheck.svg b/icons/BadgeCheck.svg
new file mode 100644
index 0000000..9ac0d2b
--- /dev/null
+++ b/icons/BadgeCheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.054 2.344a3 3 0 0 1 3.892 0l1.271 1.084a1 1 0 0 0 .57.236l1.665.133a3 3 0 0 1 2.751 2.751l.133 1.666a1 1 0 0 0 .236.569l1.084 1.271a3 3 0 0 1 0 3.892l-1.084 1.271a1 1 0 0 0-.236.57l-.133 1.665a3 3 0 0 1-2.751 2.751l-1.666.133a1 1 0 0 0-.569.236l-1.271 1.084a3 3 0 0 1-3.892 0l-1.271-1.084a1 1 0 0 0-.57-.236l-1.665-.133a3 3 0 0 1-2.751-2.751l-.133-1.666a1 1 0 0 0-.236-.569l-1.084-1.271a3 3 0 0 1 0-3.892l1.084-1.271a1 1 0 0 0 .236-.57l.133-1.665a3 3 0 0 1 2.751-2.751l1.666-.133a1 1 0 0 0 .569-.236l1.271-1.084zm5.653 8.363a1 1 0 0 0-1.414-1.414L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z" fill="#A7DC22"/></g></svg>
\ No newline at end of file
diff --git a/icons/Calendar.svg b/icons/Calendar.svg
new file mode 100644
index 0000000..7d752b5
--- /dev/null
+++ b/icons/Calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill="#A7DC22" d="M4 7v2h16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2"/><path stroke="#A7DC22" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 5h2a2 2 0 0 1 2 2v2H4V7a2 2 0 0 1 2-2h2m8 0V3m0 2H8m0-2v2M4 9.5V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.5"/></g></svg>
\ No newline at end of file
diff --git a/icons/ChevronLeftCircle.svg b/icons/ChevronLeftCircle.svg
new file mode 100644
index 0000000..2bafa6b
--- /dev/null
+++ b/icons/ChevronLeftCircle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#A7DC22" fill-rule="evenodd" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m1.707-11.293a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L11.414 12z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/icons/ChevronRightCircle.svg b/icons/ChevronRightCircle.svg
new file mode 100644
index 0000000..c40a1f8
--- /dev/null
+++ b/icons/ChevronRightCircle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#A7DC22" fill-rule="evenodd" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18M10.293 9.707a1 1 0 1 1 1.414-1.414l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L12.586 12z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/icons/CloseCircle.svg b/icons/CloseCircle.svg
new file mode 100644
index 0000000..4116cde
--- /dev/null
+++ b/icons/CloseCircle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12zm8.207-3.207a1 1 0 0 0-1.414 1.414L10.586 12l-1.793 1.793a1 1 0 1 0 1.414 1.414L12 13.414l1.793 1.793a1 1 0 0 0 1.414-1.414L13.414 12l1.793-1.793a1 1 0 0 0-1.414-1.414L12 10.586l-1.793-1.793z" fill="#A7DC22"/></g></svg>
\ No newline at end of file
diff --git a/icons/Subject.svg b/icons/Subject.svg
new file mode 100644
index 0000000..94937ab
--- /dev/null
+++ b/icons/Subject.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.514 3.126a1 1 0 0 1 .972 0l9 5A1 1 0 0 1 22 9v7a1 1 0 1 1-2 0v-5.3l-1 .555v.004l-6.067 3.016a2 2 0 0 1-1.848-.035L2.357 9.479a1 1 0 0 0-.284-.103a1 1 0 0 1 .441-1.25l9-5zM5 13.199V17a1 1 0 0 0 .553.894l6 3a1 1 0 0 0 .894 0l6-3A1 1 0 0 0 19 17v-3.256l-6.083 2.844a2 2 0 0 1-1.805-.056L5 13.2z" fill="#A7DC22"/></g></svg>
\ No newline at end of file
diff --git a/timetable/timetable.css b/timetable/timetable.css
index d1bd9fc..d8f42a1 100644
--- a/timetable/timetable.css
+++ b/timetable/timetable.css
@@ -195,6 +195,31 @@ body {
   font-weight:500;
   line-height:130%;
 }
+.notice-header {
+  min-width:80px;
+}
+.notice-slot {
+  padding:4px 8px;
+  min-height:auto;
+}
+.special-day-notice {
+  background:#F99F50;
+  color:white;
+  padding:8px 12px;
+  border-radius:8px;
+  text-align:center;
+  box-shadow:0 1px 3px rgba(0,0,0,0.1);
+  font-size:0.85rem;
+}
+.special-day-notice .special-day-title {
+  font-weight:600;
+  margin-bottom:2px;
+}
+.special-day-notice .special-day-subtitle {
+  font-size:0.75rem;
+  opacity:0.9;
+  font-weight:400;
+}
 .time-slot {
   padding:12px;
   text-align:center;
@@ -660,6 +685,12 @@ body {
 .grid-header.active {
   display:flex !important;
 }
+.notice-slot {
+  display:none;
+}
+.notice-slot.active {
+  display:block;
+}
 .lesson-slot {
   display:none;
 }
diff --git a/timetable/timetable.js b/timetable/timetable.js
index f46dbe4..49d2173 100644
--- a/timetable/timetable.js
+++ b/timetable/timetable.js
@@ -172,6 +172,9 @@
       LanguageManager.t("timetable.friday"),
     ];
 
+    // Check if there are any special days to show notice row
+    const hasSpecialDays = specialDayLessons.length > 0;
+
     return `
       <div class="grid-header"></div>
       ${days
@@ -184,6 +187,27 @@
         `;
         })
         .join("")}
+      ${hasSpecialDays ? `
+        <div class="notice-header"></div>
+        ${Array(5)
+          .fill()
+          .map((_, dayIndex) => {
+            const specialDay = specialDayLessons.find(
+              (l) => l.day === dayIndex,
+            );
+            return `
+            <div class="notice-slot">
+              ${specialDay ? `
+                <div class="special-day-notice" style="background-color: ${specialDay.color || "#F99F50"}" data-lesson='${JSON.stringify(specialDay)}'>
+                  <div class="special-day-title">${specialDay.subject}</div>
+                  ${specialDay.testInfo ? `<div class="special-day-subtitle">${specialDay.testInfo}</div>` : ""}
+                </div>
+              ` : ""}
+            </div>
+          `;
+          })
+          .join("")}
+      ` : ""}
       ${times
         .map(
           (time, timeIndex) => `
@@ -194,21 +218,10 @@
             const dayLessons = regularLessons.filter(
               (l) => l.startTime === time && l.day === dayIndex,
             );
-            const specialDay = specialDayLessons.find(
-              (l) => l.day === dayIndex,
-            );
 
             return `
-            <div class="lesson-slot ${specialDay ? "special-day-slot" : ""}">
-              ${
-                specialDay && timeIndex === 0
-                  ? `
-                <div class="special-day-card" style="background-color: ${specialDay.color || "#F99F50"}" data-lesson='${JSON.stringify(specialDay)}'>
-                  <div class="special-day-title">${specialDay.subject}</div>
-                  ${specialDay.testInfo ? `<div class="special-day-subtitle">${specialDay.testInfo}</div>` : ""}
-                </div>
-              `
-                  : dayLessons
+            <div class="lesson-slot">
+              ${dayLessons
                       .map(
                         (lesson) => `
                 <div class="lesson-card ${lesson.isSubstituted ? "substituted" : ""} 
@@ -269,7 +282,7 @@
         <div class="modal-header">
           <h3 class="modal-title">${lesson.subject}</h3>
           <button class="modal-close">
-            <span class="material-icons-round">close</span>
+            <img src="${chrome.runtime.getURL("icons/CloseCircle.svg")}" alt="Bezárás" style="width: 24px; height: 24px;">
           </button>
         </div>
         <div class="modal-body">
@@ -570,6 +583,7 @@
       const gridHeaders = document.querySelectorAll(
         ".grid-header:not(:first-child)",
       );
+      const noticeSlots = document.querySelectorAll(".notice-slot");
       const lessonSlots = document.querySelectorAll(".lesson-slot");
 
       gridHeaders.forEach((header, index) => {
@@ -579,6 +593,13 @@
         );
       });
 
+      noticeSlots.forEach((slot, index) => {
+        slot.classList.toggle(
+          "active",
+          index === dayNavigationState.currentDayIndex,
+        );
+      });
+
       const timeSlots = document.querySelectorAll(".time-slot");
       timeSlots.forEach((timeSlot, timeIndex) => {
         const startIndex = timeIndex * 5;
@@ -891,15 +912,15 @@
               <div class="week-selector-container">
                 <div class="week-selector" id="week-selector">
                   <button class="week-nav-btn" id="prevWeekBtn" title="Előző hét">
-                    <span class="material-icons-round">chevron_left</span>
+                    <img src="${chrome.runtime.getURL("icons/ChevronLeftCircle.svg")}" alt="Előző" style="width: 24px; height: 24px;">
                   </button>
                   <div class="week-display" id="week-display">
                   </div>
                   <button class="week-nav-btn" id="nextWeekBtn" title="Következő hét">
-                    <span class="material-icons-round">chevron_right</span>
+                    <img src="${chrome.runtime.getURL("icons/ChevronRightCircle.svg")}" alt="Következő" style="width: 24px; height: 24px;">
                   </button>
                   <button class="expand-week-view-btn" id="expandWeekView" title="Teljes nézet">
-                    <span class="material-icons-round">open_in_full</span>
+                    <img src="${chrome.runtime.getURL("icons/ArrowsExpandFull.svg")}" alt="Teljes nézet" style="width: 18px; height: 18px;">
                   </button>
                 </div>
                 <div class="week-tooltip" id="week-tooltip"></div>
@@ -912,7 +933,7 @@
                 <div class="week-modal-header">
                   <h3></h3>
                   <button class="week-modal-close" id="closeWeekModal">
-                    <span class="material-icons-round">close</span>
+                    <img src="${chrome.runtime.getURL("icons/CloseCircle.svg")}" alt="Bezárás" style="width: 24px; height: 24px;">
                   </button>
                 </div>
                 <div class="week-modal-grid" id="weekModalGrid">
@@ -922,12 +943,12 @@
 
             <div class="day-navigation">
               <button class="day-nav-btn" id="prevDay">
-                <span class="material-icons-round">chevron_left</span>
+                <img src="${chrome.runtime.getURL("icons/ChevronLeftCircle.svg")}" alt="Előző" style="width: 24px; height: 24px;">
                 Előző
               </button>
               <button class="day-nav-btn" id="nextDay">
                 Következő
-                <span class="material-icons-round">chevron_right</span>
+                <img src="${chrome.runtime.getURL("icons/ChevronRightCircle.svg")}" alt="Következő" style="width: 24px; height: 24px;">
               </button>
             </div>