diff --git a/absences/absences.css b/absences/absences.css
index 4cc4980..dce2c48 100644
--- a/absences/absences.css
+++ b/absences/absences.css
@@ -1,551 +1,484 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", serif !important;
-  min-height: 100vh;
-  font-size: 16px;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif !important;
+  min-height:100vh;
+  font-size:16px;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   body {
-    font-size: 14px;
-  }
+  font-size:14px;
 }
-
-.kreta-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+}.kreta-container {
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
 }
-
 .kreta-header {
-  padding: clamp(1rem, 3vw, 2rem);
-  display: grid;
-  grid-template-columns: minmax(300px, 400px) 1fr minmax(200px, 300px);
-  align-items: center;
-  gap: 1rem;
+  padding:clamp(1rem,3vw,2rem);
+  display:grid;
+  grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
+  align-items:center;
+  gap:1rem;
 }
-
-@media (max-width: 1200px) {
+@media (max-width:1200px) {
   .kreta-header {
-    grid-template-columns: minmax(250px, 350px) 1fr minmax(180px, 250px);
-  }
+  grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
 }
-
-@media (max-width: 768px) {
+}@media (max-width:768px) {
   .kreta-header {
-    grid-template-columns: 1fr auto auto;
-    grid-template-areas: 
-      "school toggle user"
+  grid-template-columns:1fr auto auto;
+  grid-template-areas:"school toggle user"
       "nav nav nav";
-    padding: 1rem;
-    gap: 0.5rem;
-  }
+  padding:1rem;
+  gap:0.5rem;
 }
-
-.school-info {
-  margin: 0;
+}.school-info {
+  margin:0;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .school-info {
-    grid-area: school;
-    max-width: none;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
+  grid-area:school;
+  max-width:none;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
 }
-
-.logo-text {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0 0 0.5rem;
-  display: flex;
-  align-items: center;
+}.logo-text {
+  color:var(--text-primary);
+  font-size:24px;
+  font-weight:600;
+  margin:0 0 0.5rem;
+  display:flex;
+  align-items:center;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .logo-text {
-    margin: 0;
-    font-size: 20px;
-  }
+  margin:0;
+  font-size:20px;
 }
-
-.logo {
-  width: 24px;
-  border-radius: 8px;
-  margin-right: 0.5rem;
+}.logo {
+  width:24px;
+  border-radius:8px;
+  margin-right:0.5rem;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  font-size: 14px;
+  color:var(--text-secondary);
+  font-size:14px;
 }
-
 .school-details span {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
+  display:block;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  max-width:300px;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .school-details span {
-    max-width: 200px;
-  }
-  
-  .school-details {
-    font-size: 12px;
-  }
+  max-width:200px;
 }
-
-.user-profile {
-  position: relative;
-  justify-self: flex-end;
+.school-details {
+  font-size:12px;
 }
-
-@media (max-width: 768px) {
+}.user-profile {
+  position:relative;
+  justify-self:flex-end;
+}
+@media (max-width:768px) {
   .user-profile {
-    grid-area: user;
-  }
+  grid-area:user;
 }
-
-.user-dropdown-btn {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.2s;
+}.user-dropdown-btn {
+  display:flex;
+  align-items:center;
+  gap:1rem;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
-
 .user-dropdown-btn:hover {
-  background: var(--card-card);
+  background:var(--card-card);
 }
-
 .user-info {
-  text-align: right;
+  text-align:right;
 }
-
 .user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.5rem;
-  background: var(--card-card);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  width: 200px;
-  display: none;
-  z-index: 1000;
+  position:absolute;
+  top:100%;
+  right:0;
+  margin-top:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
+  width:200px;
+  display:none;
+  z-index:1000;
 }
-
 .user-dropdown.show {
-  display: block;
-  animation: dropdownShow 0.2s ease;
+  display:block;
+  animation:dropdownShow 0.2s ease;
 }
-
 .dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
+  padding:0.75rem 1rem;
+  color:var(--text-primary);
+  text-decoration:none;
+  transition:background-color 0.2s;
 }
-
 .dropdown-item:hover {
-  background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
-
-
 .kreta-main {
-  flex: 1;
-  padding: clamp(1rem, 3vw, 2rem);
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
+  flex:1;
+  padding:clamp(1rem,3vw,2rem);
+  max-width:1200px;
+  margin:0 auto;
+  width:100%;
 }
-
-
 .filter-card {
-  background: var(--card-card);
-  border-radius: 24px;
-  padding: 20px;
-  margin-bottom: 24px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  border-radius:24px;
+  padding:20px;
+  margin-bottom:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .filter-header {
-  margin-bottom: 16px;
+  margin-bottom:16px;
 }
-
 .filter-header h2 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  background-color: var(--card-card);
+  font-size:18px;
+  font-weight:600;
+  color:var(--text-primary);
+  background-color:var(--card-card);
 }
-
 .filter-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
+  gap:16px;
 }
-
 .filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  display:flex;
+  flex-direction:column;
+  gap:8px;
 }
-
 .filter-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-secondary);
-  font-size: 14px;
+  display:flex;
+  align-items:center;
+  gap:8px;
+  color:var(--text-secondary);
+  font-size:14px;
 }
-
 .filter-input {
-  padding: 10px;
-  border: none;
-  border-radius: 8px;
-  background: var(--button-secondaryFill);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  transition: all 0.2s ease;
+  padding:10px;
+  border:none;
+  border-radius:8px;
+  background:var(--button-secondaryFill);
+  color:var(--text-primary);
+  font-family:inherit;
+  font-size:14px;
+  transition:all 0.2s ease;
 }
-
 .filter-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--accent-accent);
+  outline:none;
+  box-shadow:0 0 0 2px var(--accent-accent);
 }
-
-
 .stats-overview {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 24px;
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
+  gap:16px;
+  margin-bottom:24px;
 }
-
 .stat-card {
-  background: var(--card-card);
-  border-radius: 16px;
-  padding: 20px;
-  text-align: center;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-  transition: transform 0.2s ease;
+  background:var(--card-card);
+  border-radius:16px;
+  padding:20px;
+  text-align:center;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  transition:transform 0.2s ease;
 }
-
 .stat-card:hover {
-  transform: translateY(-2px);
+  transform:translateY(-2px);
 }
-
 .stat-number {
-  font-size: 32px;
-  font-weight: 700;
-  color: var(--accent-accent);
-  margin-bottom: 8px;
+  font-size:32px;
+  font-weight:700;
+  color:var(--accent-accent);
+  margin-bottom:8px;
 }
-
 .stat-label {
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
+  color:var(--text-secondary);
+  font-size:14px;
+  font-weight:500;
 }
-
 .absences-container {
-  background: var(--card-card);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  border-radius:16px;
+  overflow:hidden;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .absences-table {
-  width: 100%;
-  border-collapse: collapse;
+  width:100%;
+  border-collapse:collapse;
 }
-
 .table-header {
-  background: var(--accent-15);
-  border-bottom: 1px solid var(--accent-30);
+  background:var(--accent-15);
+  border-bottom:1px solid var(--accent-30);
 }
-
 .table-header th {
-  padding: 16px;
-  text-align: left;
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  padding:16px;
+  text-align:left;
+  font-weight:600;
+  color:var(--text-primary);
+  font-size:14px;
+  text-transform:uppercase;
+  letter-spacing:0.5px;
 }
-
 .table-row {
-  border-bottom: 1px solid var(--accent-15);
-  transition: background-color 0.2s ease;
+  border-bottom:1px solid var(--accent-15);
+  transition:background-color 0.2s ease;
 }
-
 .table-row:hover {
-  background: var(--accent-10);
+  background:var(--accent-10);
 }
-
 .table-row:last-child {
-  border-bottom: none;
+  border-bottom:none;
 }
-
 .table-cell {
-  padding: 16px;
-  color: var(--text-primary);
-  vertical-align: middle;
+  padding:16px;
+  color:var(--text-primary);
+  vertical-align:middle;
 }
-
 .date-cell {
-  font-weight: 600;
-  color: var(--accent-accent);
+  font-weight:600;
+  color:var(--accent-accent);
 }
-
 .lesson-cell {
-  text-align: center;
-  font-weight: 500;
+  text-align:center;
+  font-weight:500;
 }
-
 .subject-cell {
-  font-weight: 600;
+  font-weight:600;
 }
-
 .topic-cell {
-  color: var(--text-secondary);
-  font-size: 14px;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color:var(--text-secondary);
+  font-size:14px;
+  max-width:200px;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
-
 .status-cell {
-  text-align: center;
+  text-align:center;
 }
-
 .status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  display:inline-flex;
+  align-items:center;
+  gap:4px;
+  padding:6px 12px;
+  border-radius:20px;
+  font-size:12px;
+  font-weight:600;
+  text-transform:uppercase;
+  letter-spacing:0.5px;
 }
-
 .status-badge.justified {
-  background: var(--grades-4-bg);
-  color: var(--grades-4);
+  background:var(--grades-4-bg);
+  color:var(--grades-4);
 }
-
 .status-badge.unjustified {
-  background: var(--grades-1-bg);
-  color: var(--grades-1);
+  background:var(--grades-1-bg);
+  color:var(--grades-1);
 }
-
 .status-badge.pending {
-  background: var(--grades-3-bg);
-  color: var(--grades-3);
+  background:var(--grades-3-bg);
+  color:var(--grades-3);
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .absences-table {
-    font-size: 14px;
-  }
-  
-  .table-header th,
-  .table-cell {
-    padding: 12px 8px;
-  }
-  
-  .topic-cell {
-    max-width: 120px;
-  }
-  
-  .stats-overview {
-    grid-template-columns: repeat(2, 1fr);
-  }
+  font-size:14px;
 }
-
-@media (max-width: 480px) {
-  .absences-table,
-  .table-header,
-  .table-row {
-    display: block;
-  }
-  
-  .table-header {
-    display: none;
-  }
-  
-  .table-row {
-    margin-bottom: 16px;
-    border: 1px solid var(--accent-15);
-    border-radius: 12px;
-    padding: 16px;
-    background: var(--card-card);
-  }
-  
-  .table-cell {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-    border-bottom: 1px solid var(--accent-15);
-  }
-  
-  .table-cell:last-child {
-    border-bottom: none;
-  }
-  
-  .table-cell::before {
-    content: attr(data-label);
-    font-weight: 600;
-    color: var(--text-secondary);
-    font-size: 12px;
-    text-transform: uppercase;
-  }
-  
-  .stats-overview {
-    grid-template-columns: 1fr;
-  }
+.table-header th,.table-cell {
+  padding:12px 8px;
 }
-
-.absence-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.topic-cell {
+  max-width:120px;
+}
+.stats-overview {
+  grid-template-columns:repeat(2,1fr);
+}
+}@media (max-width:480px) {
+  .absences-table,.table-header,.table-row {
+  display:block;
+}
+.table-header {
+  display:none;
+}
+.date-group {
+  margin-bottom:24px;
+}
+.date-group-header {
+  background:var(--accent-accent);
+  color:white;
+  padding:12px 16px;
+  border-radius:12px 12px 0 0;
+  font-weight:600;
+  font-size:16px;
+  margin-bottom:0;
+}
+.date-group-content {
+  background:var(--card-card);
+  border:1px solid var(--accent-15);
+  border-radius:0 0 12px 12px;
+  overflow:hidden;
+}
+.table-row {
+  width:100%;
+  margin-bottom:0;
+  border:none;
+  border-bottom:1px solid var(--accent-15);
+  border-radius:0;
+  padding:16px;
+  background:transparent;
+}
+.table-row:last-child {
+  border-bottom:none;
+}
+.table-cell {
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  padding:6px 0;
+  border-bottom:1px solid var(--accent-15);
+}
+.table-cell:last-child {
+  border-bottom:none;
+}
+.table-cell::before {
+  content:attr(data-label);
+  font-weight:600;
+  color:var(--text-secondary);
+  font-size:12px;
+  text-transform:uppercase;
+  flex-shrink:0;
+}
+.topic-cell {
+  max-width:none;
+  white-space:normal;
+  text-overflow:initial;
+  overflow:visible;
+  text-align:right;
+  flex:1;
+}
+.stats-overview {
+  grid-template-columns:1fr;
+}
+}.absence-details {
+  display:flex;
+  flex-direction:column;
+  gap:4px;
 }
-
 .absence-subject {
-  font-weight: 600;
-  color: var(--text-primary);
+  font-weight:600;
+  color:var(--text-primary);
 }
-
 .absence-topic {
-  color: var(--text-secondary);
-  font-size: 14px;
+  color:var(--text-secondary);
+  font-size:14px;
 }
-
 .absence-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  font-weight: 500;
+  display:flex;
+  align-items:center;
+  gap:4px;
+  font-size:14px;
+  font-weight:500;
 }
-
 .absence-status.justified {
-  color: var(--grades-4);
+  color:var(--grades-4);
 }
-
 .absence-status.unjustified {
-  color: var(--grades-1);
+  color:var(--grades-1);
 }
-
 .absence-status.pending {
-  color: var(--grades-3);
+  color:var(--grades-3);
 }
-
-
 .loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--background);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background:var(--background);
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  z-index:9999;
 }
-
 .loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 2rem;
-  border-radius: 24px;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:1rem;
+  padding:2rem;
+  border-radius:24px;
 }
-
 .loading-text {
-  color: var(--Text-Primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
+  color:var(--Text-Primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
 }
-
 .loading-text2 {
-  align-self: stretch;
-  color: var(--Text-Secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  align-self:stretch;
+  color:var(--Text-Secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .loading-logo {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-  border-radius: 8px;
+  width:48px;
+  height:48px;
+  margin-bottom:1rem;
+  border-radius:8px;
 }
-
-
 @keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
 }
-
-@keyframes dropdownShow {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@keyframes dropdownShow {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
+}
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@keyframes spin {
+  to {
+  transform:rotate(360deg);
 }
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
 }
\ No newline at end of file
diff --git a/absences/absences.js b/absences/absences.js
index 64c02c4..388ed32 100644
--- a/absences/absences.js
+++ b/absences/absences.js
@@ -1,25 +1,30 @@
 async function collectAbsencesData() {
   const basicData = {
     schoolInfo: {
-      name: cookieManager.get('schoolName') || 'Iskola',
-      id: cookieManager.get('schoolCode') || ''
+      name: cookieManager.get("schoolName") || "Iskola",
+      id: cookieManager.get("schoolCode") || "",
     },
     userData: {
-      name: cookieManager.get('userName') || 'Felhasználó',
-      time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
-    }
+      name: cookieManager.get("userName") || "Felhasználó",
+      time:
+        document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+        "45:00",
+    },
   };
 
   try {
     const currentDomain = window.location.hostname;
-    const response = await fetch(`https://${currentDomain}/api/HianyzasokApi/GetHianyzasGrid?sort=MulasztasDatum-desc&page=1&pageSize=100&group=&filter=&data=%7B%7D&_=${Date.now()}`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json, text/javascript, */*; q=0.01',
-        'X-Requested-With': 'XMLHttpRequest'
-      }
-    });
+    const response = await fetch(
+      `https://${currentDomain}/api/HianyzasokApi/GetHianyzasGrid?sort=MulasztasDatum-desc&page=1&pageSize=100&group=&filter=&data=%7B%7D&_=${Date.now()}`,
+      {
+        method: "GET",
+        credentials: "include",
+        headers: {
+          Accept: "application/json, text/javascript, */*; q=0.01",
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      },
+    );
 
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -29,33 +34,33 @@ async function collectAbsencesData() {
     const absences = [];
 
     if (apiData.Data && Array.isArray(apiData.Data)) {
-      apiData.Data.forEach(item => {
+      apiData.Data.forEach((item) => {
         const date = new Date(item.MulasztasDatum);
-        const formattedDate = `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}.`;
+        const formattedDate = `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getDate().toString().padStart(2, "0")}.`;
 
-        let justificationStatus = 'pending';
+        let justificationStatus = "pending";
         if (item.Igazolt_BOOL === true) {
-          justificationStatus = 'justified';
+          justificationStatus = "justified";
         } else if (item.Igazolt_BOOL === false && item.IgazolasTipus !== null) {
-          justificationStatus = 'unjustified';
+          justificationStatus = "unjustified";
         }
 
         absences.push({
           date: formattedDate,
-          lesson: item.Oraszam?.toString() || '',
-          subject: item.Targy || '',
-          topic: item.Tema || '',
-          type: item.MulasztasTipus_DNAME || '',
+          lesson: item.Oraszam?.toString() || "",
+          subject: item.Targy || "",
+          topic: item.Tema || "",
+          type: item.MulasztasTipus_DNAME || "",
           justified: item.Igazolt_BOOL === true,
           justificationStatus: justificationStatus,
-          purposeful: item.TanoraiCeluMulasztas_BNAME || '',
-          justificationType: item.IgazolasTipus_DNAME || ''
+          purposeful: item.TanoraiCeluMulasztas_BNAME || "",
+          justificationType: item.IgazolasTipus_DNAME || "",
         });
       });
     }
 
     const groupedAbsences = {};
-    absences.forEach(absence => {
+    absences.forEach((absence) => {
       if (!groupedAbsences[absence.date]) {
         groupedAbsences[absence.date] = [];
       }
@@ -64,7 +69,7 @@ async function collectAbsencesData() {
 
     return { basicData, absences, groupedAbsences };
   } catch (error) {
-    console.error('Hiba az API hívás során:', error);
+    console.error("Hiba az API hívás során:", error);
     return { basicData, absences: [], groupedAbsences: {} };
   }
 }
@@ -79,38 +84,42 @@ async function transformAbsencesPage() {
       <main class="kreta-main">
         <div class="filter-card">
           <div class="filter-header">
-            <h2>${LanguageManager.t('absences.filter_title')}</h2>
+            <h2>${LanguageManager.t("absences.filter_title")}</h2>
           </div>
           <div class="filter-content">
             <div class="filter-group">
               <label>
                 <span class="material-icons-round">date_range</span>
-                ${LanguageManager.t('absences.date')}
+                ${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>
-                ${LanguageManager.t('absences.subject')}
+                ${LanguageManager.t("absences.subject")}
               </label>
               <select id="subjectFilter" class="filter-input">
-                <option value="">${LanguageManager.t('absences.all_subjects')}</option>
-                ${[...new Set(absences.map(a => a.subject))].sort().map(subject =>
-                  `<option value="${subject}">${subject}</option>`
-                ).join('')}
+                <option value="">${LanguageManager.t("absences.all_subjects")}</option>
+                ${[...new Set(absences.map((a) => a.subject))]
+                  .sort()
+                  .map(
+                    (subject) =>
+                      `<option value="${subject}">${subject}</option>`,
+                  )
+                  .join("")}
               </select>
             </div>
             <div class="filter-group">
               <label>
                 <span class="material-icons-round">check_circle</span>
-                ${LanguageManager.t('absences.justification')}
+                ${LanguageManager.t("absences.justification")}
               </label>
               <select id="justificationFilter" class="filter-input">
-                <option value="">${LanguageManager.t('absences.all_types')}</option>
-                <option value="justified">${LanguageManager.t('absences.justified')}</option>
-                <option value="unjustified">${LanguageManager.t('absences.unjustified')}</option>
-                <option value="pending">${LanguageManager.t('absences.pending')}</option>
+                <option value="">${LanguageManager.t("absences.all_types")}</option>
+                <option value="justified">${LanguageManager.t("absences.justified")}</option>
+                <option value="unjustified">${LanguageManager.t("absences.unjustified")}</option>
+                <option value="pending">${LanguageManager.t("absences.pending")}</option>
               </select>
             </div>
           </div>
@@ -119,19 +128,19 @@ async function transformAbsencesPage() {
         <div class="stats-overview">
           <div class="stat-card">
             <div class="stat-number">${absences.length}</div>
-            <div class="stat-label">${LanguageManager.t('absences.total_absences')}</div>
+            <div class="stat-label">${LanguageManager.t("absences.total_absences")}</div>
           </div>
           <div class="stat-card">
-            <div class="stat-number">${absences.filter(a => a.justificationStatus === 'justified').length}</div>
-            <div class="stat-label">${LanguageManager.t('absences.justified')}</div>
+            <div class="stat-number">${absences.filter((a) => a.justificationStatus === "justified").length}</div>
+            <div class="stat-label">${LanguageManager.t("absences.justified")}</div>
           </div>
           <div class="stat-card">
-            <div class="stat-number">${absences.filter(a => a.justificationStatus === 'unjustified').length}</div>
-            <div class="stat-label">${LanguageManager.t('absences.unjustified')}</div>
+            <div class="stat-number">${absences.filter((a) => a.justificationStatus === "unjustified").length}</div>
+            <div class="stat-label">${LanguageManager.t("absences.unjustified")}</div>
           </div>
           <div class="stat-card">
-            <div class="stat-number">${absences.filter(a => a.justificationStatus === 'pending').length}</div>
-            <div class="stat-label">${LanguageManager.t('absences.pending')}</div>
+            <div class="stat-number">${absences.filter((a) => a.justificationStatus === "pending").length}</div>
+            <div class="stat-label">${LanguageManager.t("absences.pending")}</div>
           </div>
         </div>
 
@@ -139,42 +148,15 @@ async function transformAbsencesPage() {
           <table class="absences-table">
             <thead class="table-header">
               <tr>
-                <th>${LanguageManager.t('absences.date')}</th>
-                <th>${LanguageManager.t('absences.lesson')}</th>
-                <th>${LanguageManager.t('absences.subject')}</th>
-                <th>${LanguageManager.t('absences.topic')}</th>
-                <th>${LanguageManager.t('absences.status')}</th>
+                <th>${LanguageManager.t("absences.date")}</th>
+                <th>${LanguageManager.t("absences.lesson")}</th>
+                <th>${LanguageManager.t("absences.subject")}</th>
+                <th>${LanguageManager.t("absences.topic")}</th>
+                <th>${LanguageManager.t("absences.status")}</th>
               </tr>
             </thead>
             <tbody>
-              ${absences.map(absence => `
-                <tr class="table-row" 
-                    data-subject="${absence.subject}"
-                    data-justified="${absence.justified}"
-                    data-date="${absence.date}">
-                  <td class="table-cell date-cell" data-label="${LanguageManager.t('absences.date')}">
-                    ${absence.date}
-                  </td>
-                  <td class="table-cell lesson-cell" data-label="${LanguageManager.t('absences.lesson')}">
-                    ${absence.lesson}.
-                  </td>
-                  <td class="table-cell subject-cell" data-label="${LanguageManager.t('absences.subject')}">
-                    ${absence.subject}
-                  </td>
-                  <td class="table-cell topic-cell" data-label="${LanguageManager.t('absences.topic')}" title="${absence.topic}">
-                    ${absence.topic}
-                  </td>
-                  <td class="table-cell status-cell" data-label="${LanguageManager.t('absences.status')}">
-                    <span class="status-badge ${absence.justificationStatus}">
-                      ${absence.justificationStatus === 'justified' ? 
-                        `<span class="material-icons-round">check_circle</span> ${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')}`}
-                    </span>
-                  </td>
-                </tr>
-              `).join('')}
+              ${generateAbsencesHTML(absences)}
             </tbody>
           </table>
         </div>
@@ -182,30 +164,180 @@ async function transformAbsencesPage() {
     </div>
   `;
 
-  createTemplate.importFonts();
+  
   setupUserDropdown();
   setupMobileNavigation();
 
   setupEventListeners();
   setupFilters();
-  
+
   loadingScreen.hide();
 }
 
+function generateAbsencesHTML(absences) {
+  const groupedByDate = absences.reduce((groups, absence) => {
+    const date = absence.date;
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(absence);
+    return groups;
+  }, {});
+
+  const sortedDates = Object.keys(groupedByDate).sort(
+    (a, b) => new Date(b) - new Date(a),
+  );
+
+  let html = "";
+
+  sortedDates.forEach((date) => {
+    const dateAbsences = groupedByDate[date];
+
+    html += `<tr class="date-group-divider" style="display: none;"></tr>`;
+
+    dateAbsences.forEach((absence) => {
+      html += `
+        <tr class="table-row" 
+            data-subject="${absence.subject}"
+            data-justified="${absence.justified}"
+            data-date="${absence.date}"
+            data-date-group="${date}">
+          <td class="table-cell date-cell" data-label="${LanguageManager.t("absences.date")}">
+            ${absence.date}
+          </td>
+          <td class="table-cell lesson-cell" data-label="${LanguageManager.t("absences.lesson")}">
+            ${absence.lesson}.
+          </td>
+          <td class="table-cell subject-cell" data-label="${LanguageManager.t("absences.subject")}">
+            ${absence.subject}
+          </td>
+          <td class="table-cell topic-cell" data-label="${LanguageManager.t("absences.topic")}" title="${absence.topic}">
+            ${absence.topic}
+          </td>
+          <td class="table-cell status-cell" data-label="${LanguageManager.t("absences.status")}">
+            <span class="status-badge ${absence.justificationStatus}">
+              ${
+                absence.justificationStatus === "justified"
+                  ? `<span class="material-icons-round">check_circle</span> ${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")}`
+              }
+            </span>
+          </td>
+        </tr>
+      `;
+    });
+  });
+
+  return html;
+}
+
 function setupEventListeners() {
+  function setupMobileGrouping() {
+    if (window.innerWidth <= 480) {
+      createMobileGroups();
+    } else {
+      removeMobileGroups();
+    }
+  }
+
+  window.addEventListener("resize", setupMobileGrouping);
+
+  setupMobileGrouping();
+}
+
+function createMobileGroups() {
+  const tbody = document.querySelector(".absences-table tbody");
+  if (!tbody) return;
+
+  removeMobileGroups();
+
+  const rows = Array.from(tbody.querySelectorAll(".table-row"));
+  const groupedRows = {};
+
+  rows.forEach((row) => {
+    const date = row.dataset.date;
+    if (!groupedRows[date]) {
+      groupedRows[date] = [];
+    }
+    groupedRows[date].push(row);
+  });
+
+  const sortedDates = Object.keys(groupedRows).sort(
+    (a, b) => new Date(b) - new Date(a),
+  );
+
+  tbody.innerHTML = "";
+
+  sortedDates.forEach((date) => {
+    const dateRows = groupedRows[date];
+
+    const dateGroup = document.createElement("div");
+    dateGroup.className = "date-group";
+
+    const dateHeader = document.createElement("div");
+    dateHeader.className = "date-group-header";
+    dateHeader.textContent = date;
+
+    const dateContent = document.createElement("div");
+    dateContent.className = "date-group-content";
+
+    dateRows.forEach((row) => {
+      dateContent.appendChild(row);
+    });
+
+    dateGroup.appendChild(dateHeader);
+    dateGroup.appendChild(dateContent);
+    tbody.appendChild(dateGroup);
+  });
+}
+
+function removeMobileGroups() {
+  const tbody = document.querySelector(".absences-table tbody");
+  if (!tbody) return;
+
+  const dateGroups = tbody.querySelectorAll(".date-group");
+  if (dateGroups.length === 0) return;
+
+  const allRows = [];
+  dateGroups.forEach((group) => {
+    const rows = group.querySelectorAll(".table-row");
+    rows.forEach((row) => allRows.push(row));
+  });
+
+  tbody.innerHTML = "";
+  allRows.forEach((row) => tbody.appendChild(row));
+}
+
+function updateDateGroupsVisibility() {
+  if (window.innerWidth > 480) return;
+
+  const dateGroups = document.querySelectorAll(".date-group");
+
+  dateGroups.forEach((group) => {
+    const visibleRows = group.querySelectorAll(
+      '.table-row[style=""], .table-row:not([style])',
+    );
+
+    if (visibleRows.length > 0) {
+      group.style.display = "";
+    } else {
+      group.style.display = "none";
+    }
+  });
 }
 
 function setupFilters() {
   try {
     const filters = {
-      dateFilter: document.getElementById('dateFilter'),
-      subject: document.getElementById('subjectFilter'),
-      justified: document.getElementById('justificationFilter')
+      dateFilter: document.getElementById("dateFilter"),
+      subject: document.getElementById("subjectFilter"),
+      justified: document.getElementById("justificationFilter"),
     };
 
-    
     if (!filters.dateFilter || !filters.subject || !filters.justified) {
-      console.warn('Some filter elements were not found in the DOM');
+      console.warn("Some filter elements were not found in the DOM");
       return;
     }
 
@@ -216,32 +348,34 @@ function setupFilters() {
         const justified = filters.justified.value;
         const selectedDate = dateFilterValue ? new Date(dateFilterValue) : null;
 
-        document.querySelectorAll('.table-row').forEach(row => {
+        document.querySelectorAll(".table-row").forEach((row) => {
           const dateStr = row.dataset.date;
-          const dateParts = dateStr.split('.');
-          
+          const dateParts = dateStr.split(".");
+
           if (dateParts.length < 3) {
             console.error(`Invalid date format: ${dateStr}`);
             return;
           }
-          
+
           const parsedYear = parseInt(dateParts[0].trim(), 10);
           const parsedMonth = parseInt(dateParts[1].trim(), 10) - 1;
           const parsedDay = parseInt(dateParts[2].trim(), 10);
-          
+
           if (isNaN(parsedDay) || isNaN(parsedMonth) || isNaN(parsedYear)) {
             console.error(`Invalid date components: ${dateStr}`);
             return;
           }
-          
+
           const rowDate = new Date(parsedYear, parsedMonth, parsedDay);
-          
+
           let showRow = true;
 
           if (selectedDate) {
-            if (rowDate.getFullYear() !== selectedDate.getFullYear() ||
-                rowDate.getMonth() !== selectedDate.getMonth() ||
-                rowDate.getDate() !== selectedDate.getDate()) {
+            if (
+              rowDate.getFullYear() !== selectedDate.getFullYear() ||
+              rowDate.getMonth() !== selectedDate.getMonth() ||
+              rowDate.getDate() !== selectedDate.getDate()
+            ) {
               showRow = false;
             }
           }
@@ -251,72 +385,83 @@ function setupFilters() {
           }
 
           if (justified) {
-            const statusElement = row.querySelector('.status-badge');
+            const statusElement = row.querySelector(".status-badge");
             const hasStatus = statusElement.classList.contains(justified);
             if (!hasStatus) showRow = false;
           }
 
-          row.style.display = showRow ? '' : 'none';
+          row.style.display = showRow ? "" : "none";
         });
 
+        updateDateGroupsVisibility();
         updateStatistics();
       } catch (err) {
-        
-        console.error('Error during filtering absences:', err);
+        console.error("Error during filtering absences:", err);
       }
     };
-    
-    
-    Object.values(filters).forEach(filter => {
+
+    Object.values(filters).forEach((filter) => {
       try {
         if (filter) {
-          filter.addEventListener('change', filterAbsences);
+          filter.addEventListener("change", filterAbsences);
         }
       } catch (err) {
-        if (err.message && err.message.includes('Extension context invalidated')) {
-          console.warn('Extension context invalidated during event listener setup');
+        if (
+          err.message &&
+          err.message.includes("Extension context invalidated")
+        ) {
+          console.warn(
+            "Extension context invalidated during event listener setup",
+          );
         } else {
-          console.error('Error setting up filter event listener:', err);
+          console.error("Error setting up filter event listener:", err);
         }
       }
     });
-    
-    
+
     filterAbsences();
   } catch (err) {
-    
-    if (err.message && err.message.includes('Extension context invalidated')) {
-      console.warn('Extension context invalidated during filter setup');
+    if (err.message && err.message.includes("Extension context invalidated")) {
+      console.warn("Extension context invalidated during filter setup");
     } else {
-      console.error('Error setting up filters:', err);
+      console.error("Error setting up filters:", err);
     }
   }
 }
 
 function updateStatistics() {
   try {
-    const visibleRows = document.querySelectorAll('.table-row:not([style*="display: none"])');
+    const visibleRows = document.querySelectorAll(
+      '.table-row:not([style*="display: none"])',
+    );
     const totalVisible = visibleRows.length;
-    const justifiedVisible = Array.from(visibleRows).filter(row => 
-      row.querySelector('.status-badge.justified')).length;
-    const unjustifiedVisible = Array.from(visibleRows).filter(row => 
-      row.querySelector('.status-badge.unjustified')).length;
-    const pendingVisible = Array.from(visibleRows).filter(row => 
-      row.querySelector('.status-badge.pending')).length;
+    const justifiedVisible = Array.from(visibleRows).filter((row) =>
+      row.querySelector(".status-badge.justified"),
+    ).length;
+    const unjustifiedVisible = Array.from(visibleRows).filter((row) =>
+      row.querySelector(".status-badge.unjustified"),
+    ).length;
+    const pendingVisible = Array.from(visibleRows).filter((row) =>
+      row.querySelector(".status-badge.pending"),
+    ).length;
 
-    const statCards = document.querySelectorAll('.stat-card');
-    if (statCards[0]) statCards[0].querySelector('.stat-number').textContent = totalVisible;
-    if (statCards[1]) statCards[1].querySelector('.stat-number').textContent = justifiedVisible;
-    if (statCards[2]) statCards[2].querySelector('.stat-number').textContent = unjustifiedVisible;
-    if (statCards[3]) statCards[3].querySelector('.stat-number').textContent = pendingVisible;
+    const statCards = document.querySelectorAll(".stat-card");
+    if (statCards[0])
+      statCards[0].querySelector(".stat-number").textContent = totalVisible;
+    if (statCards[1])
+      statCards[1].querySelector(".stat-number").textContent = justifiedVisible;
+    if (statCards[2])
+      statCards[2].querySelector(".stat-number").textContent =
+        unjustifiedVisible;
+    if (statCards[3])
+      statCards[3].querySelector(".stat-number").textContent = pendingVisible;
   } catch (err) {
-    console.error('Error updating statistics:', err);
+    console.error("Error updating statistics:", err);
   }
 }
 
-
-if (window.location.href.includes('/Hianyzas/Hianyzasok')) {
-  transformAbsencesPage().catch(error => {
-    console.error(LanguageManager.t('absences.page_transform_error'), error);
+if (window.location.href.includes("/Hianyzas/Hianyzasok")) {
+  transformAbsencesPage().catch((error) => {
+    console.error(LanguageManager.t("absences.page_transform_error"), error);
   });
 }
\ No newline at end of file
diff --git a/dashboard/dashboard.js b/dashboard/dashboard.js
index 3461725..a72fc8d 100644
--- a/dashboard/dashboard.js
+++ b/dashboard/dashboard.js
@@ -1,44 +1,63 @@
 const DashboardUtils = {
   formatGradeValue(value) {
-    const trimmedValue = value?.trim() || '';
-    if (trimmedValue.toLowerCase() === 'szöveges') {
-      return 'Sz';
+    const trimmedValue = value?.trim() || "";
+    if (trimmedValue.toLowerCase() === "szöveges") {
+      return "Sz";
     }
     return trimmedValue;
   },
 
   parseDate(dateStr) {
-    return dateStr?.trim() || '';
+    return dateStr?.trim() || "";
   },
 
   formatHungarianDate(dateStr) {
-    if (!dateStr) return '';
-    
-    const dateParts = dateStr.trim().split('.');
+    if (!dateStr) return "";
+
+    const dateParts = dateStr.trim().split(".");
     if (dateParts.length < 3) return dateStr;
-    
+
     const month = parseInt(dateParts[1], 10);
     const day = parseInt(dateParts[2], 10);
-    
+
     if (isNaN(month) || month < 1 || month > 12) return dateStr;
 
-    if (typeof window.LanguageManager !== 'undefined') {
+    if (typeof window.LanguageManager !== "undefined") {
       const monthKeys = [
-        'months.january', 'months.february', 'months.march', 'months.april',
-        'months.may', 'months.june', 'months.july', 'months.august',
-        'months.september', 'months.october', 'months.november', 'months.december'
+        "months.january",
+        "months.february",
+        "months.march",
+        "months.april",
+        "months.may",
+        "months.june",
+        "months.july",
+        "months.august",
+        "months.september",
+        "months.october",
+        "months.november",
+        "months.december",
       ];
       const monthName = window.LanguageManager.t(monthKeys[month - 1]);
       return `${monthName} ${day}.`;
     }
 
     const monthKeys = [
-      'months.january', 'months.february', 'months.march', 'months.april', 'months.may', 'months.june',
-      'months.july', 'months.august', 'months.september', 'months.october', 'months.november', 'months.december'
+      "months.january",
+      "months.february",
+      "months.march",
+      "months.april",
+      "months.may",
+      "months.june",
+      "months.july",
+      "months.august",
+      "months.september",
+      "months.october",
+      "months.november",
+      "months.december",
     ];
-    
+
     return `${LanguageManager.t(monthKeys[month - 1])} ${day}.`;
-  }
+  },
 };
 
 class DashboardDataManager {
@@ -48,175 +67,216 @@ class DashboardDataManager {
       absences: [],
       notes: [],
       upcomingExams: [],
-      news: []
+      news: [],
     };
   }
 
   extractGradeData() {
-    const gradeRows = document.querySelectorAll('#legutobbiErtekelesek tr:not(:first-child)');
-    
-    this.dashboardData.grades = Array.from(gradeRows).map(row => {
-      const gradeValue = row.querySelector('span[style*="font-size: 200%"]')?.textContent;
-      const gradeInfo = row.querySelector('span[style*="float: right"]')?.textContent;
-      
-      if (!gradeValue || !gradeInfo) return null;
+    const gradeRows = document.querySelectorAll(
+      "#legutobbiErtekelesek tr:not(:first-child)",
+    );
 
-      const [fullSubject, date] = gradeInfo.split('\n').map(str => str.trim());
-      const { subject, type, dateInSubject } = this.parseSubjectInformation(fullSubject);
+    this.dashboardData.grades = Array.from(gradeRows)
+      .map((row) => {
+        const gradeValue = row.querySelector(
+          'span[style*="font-size: 200%"]',
+        )?.textContent;
+        const gradeInfo = row.querySelector(
+          'span[style*="float: right"]',
+        )?.textContent;
 
-      return {
-        value: DashboardUtils.formatGradeValue(gradeValue),
-        subject,
-        date: DashboardUtils.parseDate(date),
-        type: type || LanguageManager.t('dashboard.evaluation'),
-        dateInSubject: dateInSubject || null
-      };
-    }).filter(Boolean);
+        if (!gradeValue || !gradeInfo) return null;
+
+        const [fullSubject, date] = gradeInfo
+          .split("\n")
+          .map((str) => str.trim());
+        const { subject, type, dateInSubject } =
+          this.parseSubjectInformation(fullSubject);
+
+        return {
+          value: DashboardUtils.formatGradeValue(gradeValue),
+          subject,
+          date: DashboardUtils.parseDate(date),
+          type: type || LanguageManager.t("dashboard.evaluation"),
+          dateInSubject: dateInSubject || null,
+        };
+      })
+      .filter(Boolean);
   }
 
   parseSubjectInformation(fullSubject) {
-    const hungarianMonths = ['január', 'február', 'március', 'április', 'május', 'június', 
-                            'július', 'augusztus', 'szeptember', 'október', 'november', 'december'];
-    const monthPattern = hungarianMonths.join('|');
-    const datePattern = new RegExp(`(${monthPattern})\\s+(\\d{1,2})\\.?$`, 'i');
+    const hungarianMonths = [
+      "január",
+      "február",
+      "március",
+      "április",
+      "május",
+      "június",
+      "július",
+      "augusztus",
+      "szeptember",
+      "október",
+      "november",
+      "december",
+    ];
+    const monthPattern = hungarianMonths.join("|");
+    const datePattern = new RegExp(`(${monthPattern})\\s+(\\d{1,2})\\.?$`, "i");
     const dateMatch = fullSubject.match(datePattern);
-    
+
     if (dateMatch) {
       const subjectPart = fullSubject.substring(0, dateMatch.index).trim();
       const datePart = dateMatch[0].trim();
       return {
         subject: subjectPart,
-        type: '',
-        dateInSubject: datePart
+        type: "",
+        dateInSubject: datePart,
       };
     }
 
     const months = [
-      LanguageManager.t('months.january'), LanguageManager.t('months.february'), LanguageManager.t('months.march'), 
-      LanguageManager.t('months.april'), LanguageManager.t('months.may'), LanguageManager.t('months.june'),
-      LanguageManager.t('months.july'), LanguageManager.t('months.august'), LanguageManager.t('months.september'), 
-      LanguageManager.t('months.october'), LanguageManager.t('months.november'), LanguageManager.t('months.december')
+      LanguageManager.t("months.january"),
+      LanguageManager.t("months.february"),
+      LanguageManager.t("months.march"),
+      LanguageManager.t("months.april"),
+      LanguageManager.t("months.may"),
+      LanguageManager.t("months.june"),
+      LanguageManager.t("months.july"),
+      LanguageManager.t("months.august"),
+      LanguageManager.t("months.september"),
+      LanguageManager.t("months.october"),
+      LanguageManager.t("months.november"),
+      LanguageManager.t("months.december"),
     ];
-    const fallbackMonthPattern = new RegExp(months.join('|'), 'i');
+    const fallbackMonthPattern = new RegExp(months.join("|"), "i");
     const monthMatch = fullSubject.match(fallbackMonthPattern);
-    
+
     if (monthMatch) {
       const monthIndex = fullSubject.lastIndexOf(monthMatch[0]);
       return {
         subject: fullSubject.substring(0, monthIndex).trim(),
-        type: fullSubject.substring(monthIndex).trim()
+        type: fullSubject.substring(monthIndex).trim(),
       };
     }
-    
-    return { subject: fullSubject, type: '' };
+
+    return { subject: fullSubject, type: "" };
   }
 
   extractAbsenceData() {
-    const absenceRows = document.querySelectorAll('#legutobbiMulasztasok tr:not(:first-child)');
-    
-    this.dashboardData.absences = Array.from(absenceRows).map(row => {
-      const spans = row.querySelectorAll('span');
-      if (spans.length < 4) return null;
+    const absenceRows = document.querySelectorAll(
+      "#legutobbiMulasztasok tr:not(:first-child)",
+    );
 
-      return {
-        date: spans[0]?.textContent?.trim() || '',
-        day: spans[2]?.textContent?.trim() || '',
-        type: spans[1]?.textContent?.trim() || '',
-        count: spans[3]?.textContent?.trim() || ''
-      };
-    }).filter(Boolean);
+    this.dashboardData.absences = Array.from(absenceRows)
+      .map((row) => {
+        const spans = row.querySelectorAll("span");
+        if (spans.length < 4) return null;
+
+        return {
+          date: spans[0]?.textContent?.trim() || "",
+          day: spans[2]?.textContent?.trim() || "",
+          type: spans[1]?.textContent?.trim() || "",
+          count: spans[3]?.textContent?.trim() || "",
+        };
+      })
+      .filter(Boolean);
   }
 
   extractNoteData() {
-    const noteRows = document.querySelectorAll('#legutobbiFeljegyzesek tr:not(:first-child)');
-    
-    this.dashboardData.notes = Array.from(noteRows).map(row => {
-      const spans = row.querySelectorAll('span');
-      if (spans.length < 3) return null;
+    const noteRows = document.querySelectorAll(
+      "#legutobbiFeljegyzesek tr:not(:first-child)",
+    );
 
-      return {
-        title: spans[0]?.textContent?.trim() || '',
-        author: spans[1]?.textContent?.trim() || '',
-        date: spans[2]?.textContent?.trim() || ''
-      };
-    }).filter(Boolean);
+    this.dashboardData.notes = Array.from(noteRows)
+      .map((row) => {
+        const spans = row.querySelectorAll("span");
+        if (spans.length < 3) return null;
+
+        return {
+          title: spans[0]?.textContent?.trim() || "",
+          author: spans[1]?.textContent?.trim() || "",
+          date: spans[2]?.textContent?.trim() || "",
+        };
+      })
+      .filter(Boolean);
   }
 
   extractExamData() {
-    const examRows = document.querySelectorAll('#legutobbiBejelentettSzamonkeres tr:not(:first-child)');
-    
-    this.dashboardData.upcomingExams = Array.from(examRows).map(row => {
-      const spans = row.querySelectorAll('span');
-      if (spans.length < 4) return null;
+    const examRows = document.querySelectorAll(
+      "#legutobbiBejelentettSzamonkeres tr:not(:first-child)",
+    );
 
-      return {
-        date: spans[0]?.textContent?.trim() || '',
-        subject: spans[1]?.textContent?.trim() || '',
-        day: spans[2]?.textContent?.trim() || '',
-        type: spans[3]?.textContent?.trim() || ''
-      };
-    }).filter(Boolean);
+    this.dashboardData.upcomingExams = Array.from(examRows)
+      .map((row) => {
+        const spans = row.querySelectorAll("span");
+        if (spans.length < 4) return null;
+
+        return {
+          date: spans[0]?.textContent?.trim() || "",
+          subject: spans[1]?.textContent?.trim() || "",
+          day: spans[2]?.textContent?.trim() || "",
+          type: spans[3]?.textContent?.trim() || "",
+        };
+      })
+      .filter(Boolean);
   }
 
   async extractNewsData() {
-    
     try {
       const timestamp = Date.now();
       const apiUrl = `https://${window.location.hostname}/Intezmeny/Faliujsag/GetMoreEntries?startindex=0&range=10&_=${timestamp}`;
-      
+
       const response = await fetch(apiUrl, {
-        method: 'GET',
-        credentials: 'include',
+        method: "GET",
+        credentials: "include",
         headers: {
-          'Accept': 'application/json, text/javascript, */*; q=0.01',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
+          Accept: "application/json, text/javascript, */*; q=0.01",
+          "X-Requested-With": "XMLHttpRequest",
+        },
       });
-      
+
       if (!response.ok) {
         throw new Error(`API request failed with status: ${response.status}`);
       }
-      
+
       const data = await response.json();
-      
+
       if (!data.FaliujsagElemek || !Array.isArray(data.FaliujsagElemek)) {
         return;
       }
-      
+
       data.FaliujsagElemek.forEach((item, index) => {
-        let formattedDate = '';
+        let formattedDate = "";
         if (item.DatumNap && item.DatumHonap && item.DatumEv) {
           formattedDate = `${item.DatumEv}. ${item.DatumHonap} ${item.DatumNap}.`;
         } else if (item.Idopont) {
-          const match = item.Idopont.match(/\/Date\((\d+)\)\//); 
+          const match = item.Idopont.match(/\/Date\((\d+)\)\//);
           if (match) {
             const timestamp = parseInt(match[1]);
             const date = new Date(timestamp);
-            formattedDate = date.toLocaleDateString('hu-HU');
+            formattedDate = date.toLocaleDateString("hu-HU");
           }
         }
-        
+
         if (!formattedDate) {
-          formattedDate = new Date().toLocaleDateString('hu-HU');
+          formattedDate = new Date().toLocaleDateString("hu-HU");
         }
 
-        let cleanContent = item.EsemenySzovege || '';
-        cleanContent = cleanContent.replace(/<[^>]*>/g, '');
-        cleanContent = cleanContent.replace(/\r\n/g, ' ');
-        cleanContent = cleanContent.replace(/\s+/g, ' ').trim();
-        
+        let cleanContent = item.EsemenySzovege || "";
+        cleanContent = cleanContent.replace(/<[^>]*>/g, "");
+        cleanContent = cleanContent.replace(/\r\n/g, " ");
+        cleanContent = cleanContent.replace(/\s+/g, " ").trim();
+
         const newsItem = {
           title: item.EsemenyCime || `Hír ${index + 1}`,
-          content: cleanContent || 'Nincs elérhető tartalom',
+          content: cleanContent || "Nincs elérhető tartalom",
           date: formattedDate,
-          author: `${item.Nev || 'Ismeretlen'} (${item.Munkakor || 'Ismeretlen'})`
+          author: `${item.Nev || "Ismeretlen"} (${item.Munkakor || "Ismeretlen"})`,
         };
-        
+
         this.dashboardData.news.push(newsItem);
       });
-      
     } catch (error) {
-      console.error('❌ Error fetching news from API:', error);
+      console.error("❌ Error fetching news from API:", error);
     }
   }
 
@@ -235,13 +295,16 @@ class DashboardRenderer {
     this.data = {
       ...data,
       schoolInfo: {
-        name: cookieManager.get(COOKIE_KEYS.SCHOOL_NAME) || DEFAULT_VALUES.SCHOOL,
-        id: cookieManager.get(COOKIE_KEYS.SCHOOL_CODE) || ''
+        name:
+          cookieManager.get(COOKIE_KEYS.SCHOOL_NAME) || DEFAULT_VALUES.SCHOOL,
+        id: cookieManager.get(COOKIE_KEYS.SCHOOL_CODE) || "",
       },
       userData: {
         name: cookieManager.get(COOKIE_KEYS.USER_NAME) || DEFAULT_VALUES.USER,
-        time: document.querySelector('.usermenu_timer')?.textContent?.trim() || DEFAULT_VALUES.TIMER
-      }
+        time:
+          document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+          DEFAULT_VALUES.TIMER,
+      },
     };
     this.schoolNameFull = `${this.data.schoolInfo.id} - ${this.data.schoolInfo.name}`;
     this.shortenedSchoolName = helper.shortenSchoolName(this.schoolNameFull);
@@ -261,7 +324,9 @@ class DashboardRenderer {
     `;
   }
   createNewsCard() {
-    const newsItems = this.data.news.map(news => `
+    const newsItems = this.data.news
+      .map(
+        (news) => `
       <div class="widget-item news-item">
         <div class="widget-row">
           <div class="widget-details news-details">
@@ -269,18 +334,27 @@ class DashboardRenderer {
             <div class="widget-content news-content">${news.content}</div>
           </div>
           <div class="widget-meta">
-            ${news.date ? `<div class="widget-date news-date">${news.date}</div>` : ''}
-            ${news.author ? `<div class="widget-author news-author">${news.author}</div>` : ''}
+            ${news.date ? `<div class="widget-date news-date">${news.date}</div>` : ""}
+            ${news.author ? `<div class="widget-author news-author">${news.author}</div>` : ""}
           </div>
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
-    return this.createCard(LanguageManager.t('dashboard.news'), newsItems || LanguageManager.t('dashboard.not_supported'), '/Intezmeny/Faliujsag', LanguageManager.t('dashboard.all_news'));
+    return this.createCard(
+      LanguageManager.t("dashboard.news"),
+      newsItems || LanguageManager.t("dashboard.not_supported"),
+      "/Intezmeny/Faliujsag",
+      LanguageManager.t("dashboard.all_news"),
+    );
   }
 
   createGradeCard() {
-    const gradeItems = this.data.grades.map(grade => `
+    const gradeItems = this.data.grades
+      .map(
+        (grade) => `
       <div class="widget-item grade-item">
         <div class="widget-row grade-row">
           <div class="grade grade-${grade.value}">${grade.value}</div>
@@ -288,62 +362,96 @@ class DashboardRenderer {
             <div class="widget-title subject-name">${grade.subject}</div>
             <div class="grade-type-with-date">
               <div class="widget-subtitle grade-type">${grade.type}</div>
-              ${grade.dateInSubject || grade.date ? `<div class="widget-subtitle grade-date">${grade.dateInSubject || grade.date}</div>` : ''}
+              ${grade.dateInSubject || grade.date ? `<div class="widget-subtitle grade-date">${grade.dateInSubject || grade.date}</div>` : ""}
             </div>
           </div>
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
-    return this.createCard(LanguageManager.t('dashboard.grades'), gradeItems, '/TanuloErtekeles/Osztalyzatok', LanguageManager.t('dashboard.all_grades'));
+    return this.createCard(
+      LanguageManager.t("dashboard.grades"),
+      gradeItems,
+      "/TanuloErtekeles/Osztalyzatok",
+      LanguageManager.t("dashboard.all_grades"),
+    );
   }
 
   createAbsenceCard() {
-    const absenceItems = this.data.absences.map(absence => `
+    const absenceItems = this.data.absences
+      .map(
+        (absence) => `
       <div class="widget-item absence-item">
         <div class="widget-row">
           <div class="widget-details absence-details">
             <div class="widget-title absence-type">${absence.type}</div>
             <div class="widget-subtitle absence-date">${absence.date}</div>
           </div>
-          ${absence.day ? `<div class="widget-date">${absence.day}</div>` : ''}
+          ${absence.day ? `<div class="widget-date">${absence.day}</div>` : ""}
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
-    return this.createCard(LanguageManager.t('dashboard.absences'), absenceItems, '/Hianyzas/Hianyzasok', LanguageManager.t('dashboard.all_absences'));
+    return this.createCard(
+      LanguageManager.t("dashboard.absences"),
+      absenceItems,
+      "/Hianyzas/Hianyzasok",
+      LanguageManager.t("dashboard.all_absences"),
+    );
   }
 
   createNoteCard() {
-    const noteItems = this.data.notes.map(note => `
+    const noteItems = this.data.notes
+      .map(
+        (note) => `
       <div class="widget-item note-item">
         <div class="widget-row">
           <div class="widget-details note-details">
             <div class="widget-title note-title">${note.title}</div>
             <div class="widget-subtitle note-date">${note.date}</div>
           </div>
-          ${note.author ? `<div class="widget-author note-author">${note.author}</div>` : ''}
+          ${note.author ? `<div class="widget-author note-author">${note.author}</div>` : ""}
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
-    return this.createCard(LanguageManager.t('dashboard.notes'), noteItems, '/TanuloErtekeles/InformaciokFeljegyzesek', LanguageManager.t('dashboard.all_messages'));
+    return this.createCard(
+      LanguageManager.t("dashboard.notes"),
+      noteItems,
+      "/TanuloErtekeles/InformaciokFeljegyzesek",
+      LanguageManager.t("dashboard.all_messages"),
+    );
   }
 
   createExamCard() {
-    const examItems = this.data.upcomingExams.map(exam => `
+    const examItems = this.data.upcomingExams
+      .map(
+        (exam) => `
       <div class="widget-item exam-item">
         <div class="widget-row">
           <div class="widget-details exam-details">
             <div class="widget-title exam-subject">${exam.subject}</div>
-            <div class="widget-subtitle exam-type">${exam.type || ''}</div>
+            <div class="widget-subtitle exam-type">${exam.type || ""}</div>
           </div>
           <div class="widget-date exam-date">${DashboardUtils.formatHungarianDate(exam.date)}</div>
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
-    return this.createCard(LanguageManager.t('dashboard.exams'), examItems, '/Tanulo/TanuloBejelentettSzamonkeresek', LanguageManager.t('dashboard.all_exams'));
+    return this.createCard(
+      LanguageManager.t("dashboard.exams"),
+      examItems,
+      "/Tanulo/TanuloBejelentettSzamonkeresek",
+      LanguageManager.t("dashboard.all_exams"),
+    );
   }
 
   createCard(title, content, linkHref, linkText) {
@@ -353,7 +461,7 @@ class DashboardRenderer {
           <h2 class="widget-card-title">${title}</h2>
         </div>
         <div class="widget-content card-content">
-          ${content || `<div class="widget-empty">${LanguageManager.t('dashboard.not_supported')}</div>`}
+          ${content || `<div class="widget-empty">${LanguageManager.t("dashboard.not_supported")}</div>`}
         </div>
         <div class="widget-footer">
           <a href="${linkHref}" class="widget-link more-link">
@@ -385,36 +493,40 @@ class DashboardApplication {
   }
 
   async init() {
-    if (!window.location.href.includes('/Intezmeny/Faliujsag')) {
+    if (!window.location.href.includes("/Intezmeny/Faliujsag")) {
       return;
     }
 
-    while (typeof window.LanguageManager === 'undefined' || 
-           !window.LanguageManager.t('dashboard.grades') || 
-           window.LanguageManager.t('dashboard.grades') === 'dashboard.grades') {
-      await new Promise(resolve => setTimeout(resolve, 50));
+    while (
+      typeof window.LanguageManager === "undefined" ||
+      !window.LanguageManager.t("dashboard.grades") ||
+      window.LanguageManager.t("dashboard.grades") === "dashboard.grades"
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
     }
 
-    while (!document.querySelector('.faliujsag-lista, #faliujsagLista')) {
-      await new Promise(resolve => setTimeout(resolve, 100));
+    while (!document.querySelector(".faliujsag-lista, #faliujsagLista")) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
     let newsItemsFound = false;
     let attempts = 0;
     const maxAttempts = 50;
-    
+
     while (!newsItemsFound && attempts < maxAttempts) {
-      const newsContainer = document.querySelector('.faliujsag-lista, #faliujsagLista');
+      const newsContainer = document.querySelector(
+        ".faliujsag-lista, #faliujsagLista",
+      );
       if (newsContainer) {
         const possibleSelectors = [
-          '.nb-item',
-          '.news-item', 
-          '.faliujsag-item',
-          '.list-group-item',
-          'li',
+          ".nb-item",
+          ".news-item",
+          ".faliujsag-item",
+          ".list-group-item",
+          "li",
           'div[class*="item"]',
-          'div[class*="news"]'
+          'div[class*="news"]',
         ];
-        
+
         for (const selector of possibleSelectors) {
           const items = newsContainer.querySelectorAll(selector);
           if (items.length > 0) {
@@ -422,30 +534,33 @@ class DashboardApplication {
             break;
           }
         }
-        
+
         if (!newsItemsFound) {
-          if (newsContainer.children.length > 0 || newsContainer.textContent.trim().length > 0) {
+          if (
+            newsContainer.children.length > 0 ||
+            newsContainer.textContent.trim().length > 0
+          ) {
             newsItemsFound = true;
           }
         }
       }
-      
+
       if (!newsItemsFound) {
         attempts++;
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
       }
     }
-  
+
     try {
       const dataManager = new DashboardDataManager();
       const dashboardData = await dataManager.extractAllData();
-      createTemplate.importFonts();
+      
       const renderer = new DashboardRenderer(dashboardData);
       renderer.render();
     } catch (error) {
-      console.error('Error initializing dashboard:', error);
+      console.error("Error initializing dashboard:", error);
     }
   }
 }
 
-new DashboardApplication();
\ No newline at end of file
+new DashboardApplication();
diff --git a/fonts/Icons.woff2 b/fonts/Icons.woff2
new file mode 100644
index 0000000..e9e305f
Binary files /dev/null and b/fonts/Icons.woff2 differ
diff --git a/forgotpassword/forgotpassword.css b/forgotpassword/forgotpassword.css
index e18884b..33e629f 100644
--- a/forgotpassword/forgotpassword.css
+++ b/forgotpassword/forgotpassword.css
@@ -1,290 +1,57 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+body.maintenance-mode {
+  margin:0;
+  padding:0;
+  height:100vh;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--background);
+  color:var(--text-primary);
+  font-family:'Figtree',sans-serif;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-  min-height: 100vh;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background-color:var(--background) !important;
 }
-
-.forgot-container {
-  width: 90%;
-  max-width: 500px;
-  padding: 20px;
-  margin: 0 auto;
+.maintenance-container {
+  text-align:center;
+  padding:2rem;
+  border-radius:8px;
+  background-color:var(--card-card);
+  box-shadow:0 var(--shadow-blur) 6px var(--accent-shadow);
+  max-width:600px;
+  width:90%;
 }
-
-.forgot-card {
-  background: var(--card-card);
-  padding: 24px;
-  margin-bottom: 16px;
-  border-radius: 24px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+.maintenance-logo {
+  width:128px;
+  height:128px;
+  margin:0 auto 2rem;
 }
-
-.forgot-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin: 16px 0;
-  background: var(--card-card) !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
+.maintenance-title {
+  font-size:1.5rem;
+  font-weight:600;
+  margin-bottom:1rem;
+  color:var(--accent-accent);
+  font-family:'Montserrat',sans-serif;
 }
-
-.logo-text {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
+.maintenance-message {
+  font-size:1rem;
+  line-height:1.5;
+  margin-bottom:1.5rem;
+  color:var(--text-primary);
+  font-family:'Figtree',sans-serif;
 }
-
-.logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+.maintenance-footer {
+  font-size:0.875rem;
+  color:var(--text-secondary);
+  margin-top:2rem;
+  font-family:'Figtree',sans-serif;
 }
-
-.forgot-title {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  margin-bottom: 24px;
+.maintenance-cactus {
+  position:fixed;
+  bottom:0px;
+  right:20px;
+  width:120px;
+  height:120px;
+  opacity:1;
+  z-index:1000;
 }
-
-.forgot-form {
-  width: 100%;
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.logo-text {
-  color: var(--icon);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 16px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  width: 24px;
-  border-radius: 8px;
-  margin-right: 8px;
-}
-
-.forgot-card {
-  background: var(--card);
-  padding: 24px;
-  border-radius: 24px;
-  margin-bottom: 16px;
-}
-
-.forgot-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--primary);
-  margin-bottom: 24px;
-  text-align: center;
-}
-
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-  font-family: Montserrat;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.form-control {
-  display: flex;
-  height: 48px;
-  padding: 0px 14px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 12px;
-  background: var(--accent-15) !important;
-  border: 0px solid var(--accent-15) !important;
-  color: var(--text-primary) !important;
-  width: 100%;
-  font-size: 16px;
-  transition: border-color 0.2s ease;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--accent-accent) !important;
-}
-
-.form-control::placeholder {
-  color: var(--text-secondary) !important;
-}
-
-.form-control.error {
-  border-color: var(--error-accent) !important;
-  background: var(--error-card) !important;
-}
-
-.error-message {
-  color: var(--error-text);
-  font-size: 14px;
-  margin-top: 4px;
-  display: none;
-}
-
-.error-message.show {
-  display: block;
-  animation: fadeIn 0.2s ease;
-  border-color: var(--accent);
-}
-
-.form-actions {
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.help-link {
-  color: var(--text-primary);
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.2s ease;
-  text-align: center;
-}
-
-.help-link:hover {
-  color: var(--text-teritary);
-}
-
-.btn-submit {
-  width: 100%;
-  padding: 12px;
-  background: var(--accent-accent);
-  color: white;
-  border: none;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  font-family: "Montserrat", serif;
-  cursor: pointer;
-  transition: background 0.2s ease;
-  position: relative;
-}
-
-.btn-submit:hover {
-  background: var(--text-teritary);
-}
-
-.btn-submit:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.message {
-  padding: 12px 16px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-  font-size: 14px;
-  font-weight: 500;
-  animation: fadeIn 0.3s ease;
-  text-align: center;
-}
-
-.message.success {
-  background: var(--success-card);
-  color: var(--success-text);
-  border: 1px solid var(--success-accent);
-}
-
-.message.error {
-  background: var(--error-card);
-  color: var(--error-text);
-  border: 1px solid var(--error-accent);
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@media (max-width: 480px) {
-  .forgot-container {
-    padding: 16px;
-  }
-  
-  .forgot-card {
-    padding: 20px;
-  }
-  
-  .forgot-header {
-    margin-bottom: 20px;
-  }
-  
-  .logo-text {
-    font-size: 18px;
-  }
-  
-  .forgot-title {
-    font-size: 20px;
-  }
-  
-  .form-control {
-    height: 44px;
-    font-size: 14px;
-  }
-  
-  .btn-submit {
-    padding: 10px;
-    font-size: 14px;
-  }
-  
-  .help-link {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 600px) {
-  .forgot-container {
-    padding: 16px;
-  }
-  
-  .forgot-card {
-    padding: 20px;
-  }
-  
-  .form-actions {
-    flex-direction: column;
-    gap: 16px;
-    align-items: stretch;
-  }
-}
\ No newline at end of file
diff --git a/forgotpassword/forgotpassword.js b/forgotpassword/forgotpassword.js
index 4265069..92d0b70 100644
--- a/forgotpassword/forgotpassword.js
+++ b/forgotpassword/forgotpassword.js
@@ -1,46 +1,47 @@
 (() => {
   const renderRecaptcha = () => {
-    const container = document.getElementById('recaptcha-container');
-    if (container && typeof grecaptcha !== 'undefined' && grecaptcha.render) {
+    const container = document.getElementById("recaptcha-container");
+    if (container && typeof grecaptcha !== "undefined" && grecaptcha.render) {
       try {
-        grecaptcha.render('recaptcha-container', {
-          'sitekey': '6LfKURIqAAAAAD5bF2evQ-_Sf6MRrOkUEBwb_mMy',
-          'theme': 'light'
+        grecaptcha.render("recaptcha-container", {
+          sitekey: "6LfKURIqAAAAAD5bF2evQ-_Sf6MRrOkUEBwb_mMy",
+          theme: "light",
         });
       } catch (error) {
-        console.error('Error rendering reCAPTCHA:', error);
+        console.error("Error rendering reCAPTCHA:", error);
       }
     }
   };
 
   const loadDependencies = async () => {
-    if (typeof cookieManager === 'undefined') {
-      const cookieScript = document.createElement('script');
-      cookieScript.src = chrome.runtime.getURL('tools/cookieManager.js');
+    if (typeof cookieManager === "undefined") {
+      const cookieScript = document.createElement("script");
+      cookieScript.src = chrome.runtime.getURL("tools/cookieManager.js");
       document.head.appendChild(cookieScript);
-      
-      await new Promise(resolve => {
+
+      await new Promise((resolve) => {
         cookieScript.onload = resolve;
       });
     }
-    
-    if (typeof LanguageManager === 'undefined') {
-      const langScript = document.createElement('script');
-      langScript.src = chrome.runtime.getURL('global/language.js');
+
+    if (typeof LanguageManager === "undefined") {
+      const langScript = document.createElement("script");
+      langScript.src = chrome.runtime.getURL("global/language.js");
       document.head.appendChild(langScript);
-      
-      await new Promise(resolve => {
+
+      await new Promise((resolve) => {
         langScript.onload = resolve;
       });
 
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
 
     if (!document.querySelector('script[src*="recaptcha"]')) {
       await new Promise((resolve) => {
         window.onRecaptchaLoad = resolve;
-        const script = document.createElement('script');
-        script.src = 'https://www.google.com/recaptcha/api.js?hl=hu&onload=onRecaptchaLoad&render=explicit';
+        const script = document.createElement("script");
+        script.src =
+          "https://www.google.com/recaptcha/api.js?hl=hu&onload=onRecaptchaLoad&render=explicit";
         document.head.appendChild(script);
       });
     }
@@ -64,7 +65,7 @@
         <div class="forgot-card">
           <header class="forgot-header">
             <p class="logo-text">
-              <img src="${chrome.runtime.getURL('images/firka_logo.png')}" alt="Firka" class="logo">
+              <img src="${chrome.runtime.getURL("images/firka_logo.png")}" alt="Firka" class="logo">
               Firka
             </p>
           </header>
@@ -106,14 +107,20 @@
 
   const transformForgotPasswordPage = async () => {
     await loadDependencies();
-    
-    const isDarkMode = localStorage.getItem('darkMode') === 'true';
-    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
-    
+
+    const isDarkMode = localStorage.getItem("darkMode") === "true";
+    document.documentElement.setAttribute(
+      "data-theme",
+      isDarkMode ? "dark" : "light",
+    );
+
     chrome.runtime.onMessage.addListener((message) => {
-      if (message.action === 'toggleTheme') {
-        document.documentElement.setAttribute('data-theme', message.darkMode ? 'dark' : 'light');
-        localStorage.setItem('darkMode', message.darkMode);
+      if (message.action === "toggleTheme") {
+        document.documentElement.setAttribute(
+          "data-theme",
+          message.darkMode ? "dark" : "light",
+        );
+        localStorage.setItem("darkMode", message.darkMode);
       }
     });
 
@@ -121,34 +128,34 @@
 
     let attempts = 0;
     const maxAttempts = 50;
-    
+
     const waitForLanguageManager = () => {
       return new Promise((resolve) => {
         const checkLanguageManager = () => {
           attempts++;
-          if (typeof LanguageManager !== 'undefined' && LanguageManager.t) {
+          if (typeof LanguageManager !== "undefined" && LanguageManager.t) {
             setTimeout(resolve, 200);
           } else if (attempts < maxAttempts) {
             setTimeout(checkLanguageManager, 100);
           } else {
-            console.warn('LanguageManager not available, using fallback texts');
+            console.warn("LanguageManager not available, using fallback texts");
             resolve();
           }
         };
         checkLanguageManager();
       });
     };
-    
+
     await waitForLanguageManager();
 
-    if (typeof LanguageManager !== 'undefined' && LanguageManager.t) {
-      const elements = document.querySelectorAll('[data-i18n]');
-      elements.forEach(element => {
-        const key = element.getAttribute('data-i18n');
+    if (typeof LanguageManager !== "undefined" && LanguageManager.t) {
+      const elements = document.querySelectorAll("[data-i18n]");
+      elements.forEach((element) => {
+        const key = element.getAttribute("data-i18n");
         const translation = LanguageManager.t(key);
-        
+
         if (translation && translation !== key) {
-          const attr = element.getAttribute('data-i18n-attr');
+          const attr = element.getAttribute("data-i18n-attr");
           if (attr) {
             element.setAttribute(attr, translation);
           } else {
@@ -157,172 +164,184 @@
         }
       });
     }
-    
+
     setTimeout(() => {
       renderRecaptcha();
     }, 500);
-    
+
     setupFormValidation();
   };
-  
-    const setupFormValidation = () => {
-      const form = document.getElementById('forgotForm');
-      const inputs = form.querySelectorAll('.form-control');
-  
-      inputs.forEach(input => {
-        
-        input.addEventListener('input', () => {
-          validateInput(input);
-        });
-  
-        
-        input.addEventListener('blur', () => {
-          validateInput(input, true);
-        });
-      });
-  
-      form.addEventListener('submit', handleSubmit);
-    };
-  
-    const validateInput = (input, showError = false) => {
-      const isValid = input.value.trim().length > 0;
-      const errorElement = input.nextElementSibling;
-      
-      if (!isValid && showError) {
-        input.classList.add('error');
-        errorElement?.classList.add('show');
-      } else {
-        input.classList.remove('error');
-        errorElement?.classList.remove('show');
-      }
-      
-      return isValid;
-    };
-  
-    const showMessage = (message, isError = false) => {
-      const existingMessage = document.querySelector('.message');
-      if (existingMessage) {
-        existingMessage.remove();
-      }
 
-      const messageDiv = document.createElement('div');
-      messageDiv.className = `message ${isError ? 'error' : 'success'}`;
-      messageDiv.textContent = message;
-      
-      const form = document.getElementById('forgotForm');
-      form.insertBefore(messageDiv, form.firstChild);
+  const setupFormValidation = () => {
+    const form = document.getElementById("forgotForm");
+    const inputs = form.querySelectorAll(".form-control");
 
-      setTimeout(() => {
-        if (messageDiv.parentNode) {
-          messageDiv.remove();
-        }
-      }, 5000);
-    };
-
-    const validateEmail = (email) => {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      return emailRegex.test(email);
-    };
-
-    const handleSubmit = async (event) => {
-      event.preventDefault();
-      
-      const form = event.target;
-      const inputs = form.querySelectorAll('.form-control[required]');
-      let isValid = true;
-      
-      inputs.forEach(input => {
-        if (!validateInput(input, true)) {
-          isValid = false;
-        }
+    inputs.forEach((input) => {
+      input.addEventListener("input", () => {
+        validateInput(input);
       });
 
-      const emailInput = form.querySelector('#EmailCim');
-      if (emailInput.value && !validateEmail(emailInput.value)) {
-        emailInput.classList.add('error');
-        const errorElement = emailInput.nextElementSibling;
-        if (errorElement) {
-          errorElement.textContent = LanguageManager.t('forgotpassword.invalid_email');
-          errorElement.classList.add('show');
-        }
+      input.addEventListener("blur", () => {
+        validateInput(input, true);
+      });
+    });
+
+    form.addEventListener("submit", handleSubmit);
+  };
+
+  const validateInput = (input, showError = false) => {
+    const isValid = input.value.trim().length > 0;
+    const errorElement = input.nextElementSibling;
+
+    if (!isValid && showError) {
+      input.classList.add("error");
+      errorElement?.classList.add("show");
+    } else {
+      input.classList.remove("error");
+      errorElement?.classList.remove("show");
+    }
+
+    return isValid;
+  };
+
+  const showMessage = (message, isError = false) => {
+    const existingMessage = document.querySelector(".message");
+    if (existingMessage) {
+      existingMessage.remove();
+    }
+
+    const messageDiv = document.createElement("div");
+    messageDiv.className = `message ${isError ? "error" : "success"}`;
+    messageDiv.textContent = message;
+
+    const form = document.getElementById("forgotForm");
+    form.insertBefore(messageDiv, form.firstChild);
+
+    setTimeout(() => {
+      if (messageDiv.parentNode) {
+        messageDiv.remove();
+      }
+    }, 5000);
+  };
+
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const form = event.target;
+    const inputs = form.querySelectorAll(".form-control[required]");
+    let isValid = true;
+
+    inputs.forEach((input) => {
+      if (!validateInput(input, true)) {
         isValid = false;
       }
+    });
 
-      let recaptchaResponse = '';
-      if (typeof grecaptcha !== 'undefined') {
-        recaptchaResponse = grecaptcha.getResponse();
-        if (!recaptchaResponse) {
-          showMessage(LanguageManager.t('forgotpassword.recaptcha_required'), true);
-          isValid = false;
-        }
-      } else {
-        showMessage('reCAPTCHA nem töltődött be. Kérjük, frissítse az oldalt!', true);
+    const emailInput = form.querySelector("#EmailCim");
+    if (emailInput.value && !validateEmail(emailInput.value)) {
+      emailInput.classList.add("error");
+      const errorElement = emailInput.nextElementSibling;
+      if (errorElement) {
+        errorElement.textContent = LanguageManager.t(
+          "forgotpassword.invalid_email",
+        );
+        errorElement.classList.add("show");
+      }
+      isValid = false;
+    }
+
+    let recaptchaResponse = "";
+    if (typeof grecaptcha !== "undefined") {
+      recaptchaResponse = grecaptcha.getResponse();
+      if (!recaptchaResponse) {
+        showMessage(
+          LanguageManager.t("forgotpassword.recaptcha_required"),
+          true,
+        );
         isValid = false;
       }
+    } else {
+      showMessage(
+        "reCAPTCHA nem töltődött be. Kérjük, frissítse az oldalt!",
+        true,
+      );
+      isValid = false;
+    }
 
-      if (!isValid) {
-        return;
+    if (!isValid) {
+      return;
+    }
+
+    const submitButton = form.querySelector(".btn-submit");
+    const originalText = submitButton.textContent;
+    submitButton.disabled = true;
+    submitButton.textContent = LanguageManager.t("loading.text") || "Küldés...";
+
+    try {
+      const formData = new FormData(form);
+
+      if (typeof grecaptcha !== "undefined") {
+        formData.append("ReCaptcha", grecaptcha.getResponse());
       }
 
-      const submitButton = form.querySelector('.btn-submit');
-      const originalText = submitButton.textContent;
-      submitButton.disabled = true;
-      submitButton.textContent = LanguageManager.t('loading.text') || 'Küldés...';
-
-      try {
-        const formData = new FormData(form);
-
-        if (typeof grecaptcha !== 'undefined') {
-          formData.append('ReCaptcha', grecaptcha.getResponse());
-        }
-        
-        const response = await fetch('/Adminisztracio/ElfelejtettJelszo/LinkKuldes', {
-          method: 'POST',
+      const response = await fetch(
+        "/Adminisztracio/ElfelejtettJelszo/LinkKuldes",
+        {
+          method: "POST",
           body: formData,
           headers: {
-            'X-Requested-With': 'XMLHttpRequest'
-          }
-        });
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        },
+      );
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
 
-        const result = await response.json();
+      const result = await response.json();
 
-        if (result.Success) {
-          showMessage(LanguageManager.t('forgotpassword.success_message'));
+      if (result.Success) {
+        showMessage(LanguageManager.t("forgotpassword.success_message"));
 
-          form.reset();
+        form.reset();
 
-          if (typeof grecaptcha !== 'undefined') {
-            grecaptcha.reset();
-          }
-
-          setTimeout(() => {
-            window.location.href = '/Adminisztracio/Login';
-          }, 3000);
-        } else {
-          showMessage(result.Message || LanguageManager.t('forgotpassword.error_message'), true);
-
-          if (typeof grecaptcha !== 'undefined') {
-            grecaptcha.reset();
-          }
-        }
-      } catch (error) {
-        console.error('Password reset error:', error);
-        showMessage(LanguageManager.t('forgotpassword.error_message'), true);
-
-        if (typeof grecaptcha !== 'undefined') {
+        if (typeof grecaptcha !== "undefined") {
+          grecaptcha.reset();
+        }
+
+        setTimeout(() => {
+          window.location.href = "/Adminisztracio/Login";
+        }, 3000);
+      } else {
+        showMessage(
+          result.Message || LanguageManager.t("forgotpassword.error_message"),
+          true,
+        );
+
+        if (typeof grecaptcha !== "undefined") {
           grecaptcha.reset();
         }
-      } finally {
-        submitButton.disabled = false;
-        submitButton.textContent = originalText;
       }
-    };
-    
-    if (window.location.href.includes('/Adminisztracio/ElfelejtettJelszo')) {
-      transformForgotPasswordPage().catch(console.error);
+    } catch (error) {
+      console.error("Password reset error:", error);
+      showMessage(LanguageManager.t("forgotpassword.error_message"), true);
+
+      if (typeof grecaptcha !== "undefined") {
+        grecaptcha.reset();
+      }
+    } finally {
+      submitButton.disabled = false;
+      submitButton.textContent = originalText;
     }
-  })();
\ No newline at end of file
+  };
+
+  if (window.location.href.includes("/Adminisztracio/ElfelejtettJelszo")) {
+    transformForgotPasswordPage().catch(console.error);
+  }
+})();
diff --git a/global/language.js b/global/language.js
index e9c7857..9441a9d 100644
--- a/global/language.js
+++ b/global/language.js
@@ -1,131 +1,185 @@
-(function() {
-    let currentLanguage = 'hu';
-    let translations = {};
-    
-    async function setLanguage(language) {
+(function () {
+  let currentLanguage = "hu";
+  let translations = {};
+
+  async function setLanguage(language) {
+    try {
+      currentLanguage = language;
+
+      cookieManager.set("languagePreference", language);
+      localStorage.setItem("languagePreference", language);
+
+      await loadTranslations(language);
+      applyTranslations();
+
+      window.dispatchEvent(
+        new CustomEvent("languageChanged", {
+          detail: { language: language },
+        }),
+      );
+
+      chrome.runtime
+        .sendMessage({
+          action: "languageChanged",
+          language: language,
+        })
+        .catch(() => {});
+    } catch (error) {}
+  }
+
+  async function loadTranslations(language) {
+    try {
+      const url = chrome.runtime.getURL(`i18n/${language}.json`);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to load ${language}.json - Status: ${response.status}`,
+        );
+      }
+      translations = await response.json();
+    } catch (error) {
+      if (language !== "hu") {
         try {
-            currentLanguage = language;
-            
-            cookieManager.set('languagePreference', language);
-            localStorage.setItem('languagePreference', language);
-            
-            await loadTranslations(language);
-            applyTranslations();
-            
-
-            window.dispatchEvent(new CustomEvent('languageChanged', {
-                detail: { language: language }
-            }));
-            
-            chrome.runtime.sendMessage({
-                action: 'languageChanged',
-                language: language
-            }).catch(() => {});
-        } catch (error) {}
+          const fallbackUrl = chrome.runtime.getURL("i18n/hu.json");
+          const response = await fetch(fallbackUrl);
+          translations = await response.json();
+        } catch (fallbackError) {}
+      }
     }
-    
-    async function loadTranslations(language) {
-        try {
-            const url = chrome.runtime.getURL(`i18n/${language}.json`);
-            const response = await fetch(url);
-            if (!response.ok) {
-                throw new Error(`Failed to load ${language}.json - Status: ${response.status}`);
-            }
-            translations = await response.json();
-        } catch (error) {
-            if (language !== 'hu') {
-                try {
-                    const fallbackUrl = chrome.runtime.getURL('i18n/hu.json');
-                    const response = await fetch(fallbackUrl);
-                    translations = await response.json();
-                } catch (fallbackError) {}
-            }
+  }
+
+  function applyTranslations() {
+    const elements = document.querySelectorAll("[data-i18n]");
+
+    elements.forEach((element) => {
+      const key = element.getAttribute("data-i18n");
+      const translation = getTranslation(key);
+
+      if (translation && translation !== key) {
+        const attr = element.getAttribute("data-i18n-attr");
+        if (attr) {
+          element.setAttribute(attr, translation);
+        } else {
+          element.textContent = translation;
         }
-    }
-    
-    function applyTranslations() {
-        const elements = document.querySelectorAll('[data-i18n]');
-        
-        elements.forEach(element => {
-            const key = element.getAttribute('data-i18n');
-            const translation = getTranslation(key);
-            
-            if (translation && translation !== key) {
-
-                const attr = element.getAttribute('data-i18n-attr');
-                if (attr) {
-                    element.setAttribute(attr, translation);
-                } else {
-                    element.textContent = translation;
-                }
-            }
-        });
-    }
-    
-    function getTranslation(keyPath, fallback = '') {
-        const keys = keyPath.split('.');
-        let value = translations;
-        
-        for (const key of keys) {
-            if (value && typeof value === 'object' && key in value) {
-                value = value[key];
-            } else {
-
-                return fallback || keyPath;
-            }
-        }
-        
-        return typeof value === 'string' ? value : fallback || keyPath;
-    }
-    
-    async function initializeLanguage() {
-        const cookieLanguage = cookieManager.get('languagePreference');
-        const localStorageLanguage = localStorage.getItem('languagePreference');
-        
-        const language = cookieLanguage || localStorageLanguage || 'hu';
-        
-        await setLanguage(language);
-        
-
-        if (cookieLanguage !== localStorageLanguage) {
-            if (cookieLanguage) {
-                localStorage.setItem('languagePreference', cookieLanguage);
-            } else if (localStorageLanguage) {
-                cookieManager.set('languagePreference', localStorageLanguage);
-            }
-        }
-    }
-    
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initializeLanguage);
-    } else {
-        initializeLanguage();
-    }
-    
-
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-        if (message.action === 'changeLanguage') {
-            setLanguage(message.language);
-            sendResponse({ success: true });
-        }
-        
-        if (message.action === 'getLanguage') {
-            sendResponse({ language: currentLanguage });
-        }
-        
-        return true;
+      }
     });
-    
+  }
 
-    window.LanguageManager = {
-        getCurrentLanguage: () => currentLanguage,
-        changeLanguage: setLanguage,
-        t: getTranslation,
-        getAvailableLanguages: () => [
-            { code: 'hu', name: 'Magyar' },
-            { code: 'en', name: 'English' }
-        ]
-    };
-    
-})();
\ No newline at end of file
+  function getTranslation(keyPath, fallback = "") {
+    const keys = keyPath.split(".");
+    let value = translations;
+
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = value[key];
+      } else {
+        return fallback || keyPath;
+      }
+    }
+
+    return typeof value === "string" ? value : fallback || keyPath;
+  }
+
+  async function initializeLanguage() {
+    const cookieLanguage = cookieManager.get("languagePreference");
+    const localStorageLanguage = localStorage.getItem("languagePreference");
+
+    const language = cookieLanguage || localStorageLanguage || "hu";
+
+    await setLanguage(language);
+    loadTranslationsForPage();
+
+    if (cookieLanguage !== localStorageLanguage) {
+      if (cookieLanguage) {
+        localStorage.setItem("languagePreference", cookieLanguage);
+      } else if (localStorageLanguage) {
+        cookieManager.set("languagePreference", localStorageLanguage);
+      }
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeLanguage);
+  } else {
+    initializeLanguage();
+  }
+
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action === "changeLanguage") {
+      setLanguage(message.language);
+      sendResponse({ success: true });
+    }
+
+    if (message.action === "getLanguage") {
+      sendResponse({ language: currentLanguage });
+    }
+
+    return true;
+  });
+
+  function loadTranslationsForPage() {
+    try {
+      applyTranslations();
+      
+      // Figyeljük a DOM változásokat és alkalmazzuk a fordításokat új elemekre
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach((node) => {
+              if (node.nodeType === Node.ELEMENT_NODE) {
+                const elementsWithI18n = node.querySelectorAll ? node.querySelectorAll('[data-i18n]') : [];
+                elementsWithI18n.forEach((element) => {
+                  const key = element.getAttribute('data-i18n');
+                  const translation = getTranslation(key);
+                  
+                  if (translation && translation !== key) {
+                    const attr = element.getAttribute('data-i18n-attr');
+                    if (attr) {
+                      element.setAttribute(attr, translation);
+                    } else {
+                      element.textContent = translation;
+                    }
+                  }
+                });
+                
+                // Ha maga az elem is tartalmaz data-i18n attribútumot
+                if (node.hasAttribute && node.hasAttribute('data-i18n')) {
+                  const key = node.getAttribute('data-i18n');
+                  const translation = getTranslation(key);
+                  
+                  if (translation && translation !== key) {
+                    const attr = node.getAttribute('data-i18n-attr');
+                    if (attr) {
+                      node.setAttribute(attr, translation);
+                    } else {
+                      node.textContent = translation;
+                    }
+                  }
+                }
+              }
+            });
+          }
+        });
+      });
+      
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    } catch (error) {
+      console.error('Error loading translations for page:', error);
+    }
+  }
+
+  window.LanguageManager = {
+    getCurrentLanguage: () => currentLanguage,
+    changeLanguage: setLanguage,
+    t: getTranslation,
+    loadTranslationsForPage: loadTranslationsForPage,
+    getAvailableLanguages: () => [
+      { code: "hu", name: "Magyar" },
+      { code: "en", name: "English" },
+    ],
+  };
+})();
diff --git a/global/maintenance.css b/global/maintenance.css
index a09347c..33e629f 100644
--- a/global/maintenance.css
+++ b/global/maintenance.css
@@ -1,89 +1,57 @@
-@font-face {
-    font-family: 'Montserrat';
-    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-Regular.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'Montserrat';
-    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-Medium.woff2') format('woff2');
-    font-weight: 500;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Montserrat';
-    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-SemiBold.woff2') format('woff2');
-    font-weight: 600;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Figtree';
-    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Figtree-Regular.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-  }
-
 body.maintenance-mode {
-    margin: 0;
-    padding: 0;
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--background);
-    color: var(--text-primary);
-    font-family: 'Figtree', sans-serif;
+  margin:0;
+  padding:0;
+  height:100vh;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--background);
+  color:var(--text-primary);
+  font-family:'Figtree',sans-serif;
 }
-
 body {
-    background-color: var(--background) !important;
+  background-color:var(--background) !important;
 }
-
 .maintenance-container {
-    text-align: center;
-    padding: 2rem;
-    border-radius: 8px;
-    background-color: var(--card-card);
-    box-shadow: 0 var(--shadow-blur) 6px var(--accent-shadow);
-    max-width: 600px;
-    width: 90%;
+  text-align:center;
+  padding:2rem;
+  border-radius:8px;
+  background-color:var(--card-card);
+  box-shadow:0 var(--shadow-blur) 6px var(--accent-shadow);
+  max-width:600px;
+  width:90%;
 }
-
 .maintenance-logo {
-    width: 128px;
-    height: 128px;
-    margin: 0 auto 2rem;
+  width:128px;
+  height:128px;
+  margin:0 auto 2rem;
 }
-
 .maintenance-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--accent-accent);
-    font-family: 'Montserrat', sans-serif;
+  font-size:1.5rem;
+  font-weight:600;
+  margin-bottom:1rem;
+  color:var(--accent-accent);
+  font-family:'Montserrat',sans-serif;
 }
-
 .maintenance-message {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-bottom: 1.5rem;
-    color: var(--text-primary);
-    font-family: 'Figtree', sans-serif;
+  font-size:1rem;
+  line-height:1.5;
+  margin-bottom:1.5rem;
+  color:var(--text-primary);
+  font-family:'Figtree',sans-serif;
 }
-
 .maintenance-footer {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    margin-top: 2rem;
-    font-family: 'Figtree', sans-serif;
+  font-size:0.875rem;
+  color:var(--text-secondary);
+  margin-top:2rem;
+  font-family:'Figtree',sans-serif;
 }
-
 .maintenance-cactus {
-    position: fixed;
-    bottom: 0px;
-    right: 20px;
-    width: 120px;
-    height: 120px;
-    opacity: 1;
-    z-index: 1000;
-}
\ No newline at end of file
+  position:fixed;
+  bottom:0px;
+  right:20px;
+  width:120px;
+  height:120px;
+  opacity:1;
+  z-index:1000;
+}
diff --git a/global/maintenance.js b/global/maintenance.js
index 5e01f30..1ffaf88 100644
--- a/global/maintenance.js
+++ b/global/maintenance.js
@@ -1,99 +1,111 @@
 function loadMaintenanceCSS() {
-    const maintenanceCSS = document.createElement('link');
-    maintenanceCSS.rel = 'stylesheet';
-    maintenanceCSS.href = chrome.runtime.getURL('global/maintenance.css');
-    document.head.appendChild(maintenanceCSS);
+  const maintenanceCSS = document.createElement("link");
+  maintenanceCSS.rel = "stylesheet";
+  maintenanceCSS.href = chrome.runtime.getURL("global/maintenance.css");
+  document.head.appendChild(maintenanceCSS);
 }
 
 function checkMaintenancePage() {
-    const maintenanceContent = document.querySelector('.login_content');
-    const bodyText = document.body ? document.body.textContent : '';
+  const maintenanceContent = document.querySelector(".login_content");
+  const bodyText = document.body ? document.body.textContent : "";
 
-    const specificMaintenanceMessage = 'Kedves Felhasználók! A KRÉTA rendszer jelenleg frissítés alatt van, hamarosan újra elérhetővé válik. Köszönjük türelmüket és megértésüket! KRÉTA Csapat';
-    const hasSpecificMessage = bodyText.includes('Kedves Felhasználók!') && 
-                              bodyText.includes('A KRÉTA rendszer jelenleg frissítés alatt van') && 
-                              bodyText.includes('KRÉTA Csapat');
+  const specificMaintenanceMessage =
+    "Kedves Felhasználók! A KRÉTA rendszer jelenleg frissítés alatt van, hamarosan újra elérhetővé válik. Köszönjük türelmüket és megértésüket! KRÉTA Csapat";
+  const hasSpecificMessage =
+    bodyText.includes("Kedves Felhasználók!") &&
+    bodyText.includes("A KRÉTA rendszer jelenleg frissítés alatt van") &&
+    bodyText.includes("KRÉTA Csapat");
 
-    const hasGeneralMaintenance = maintenanceContent && 
-                                 (maintenanceContent.textContent.includes('frissítés alatt') || 
-                                  maintenanceContent.textContent.includes('under maintenance'));
-    
-    if (hasSpecificMessage || hasGeneralMaintenance) {
-        const body = document.body;
-        const mainLogo = chrome.runtime.getURL('images/firka_logo_128.png');
-        const cactusImage = chrome.runtime.getURL('images/cactus.png');
+  const hasGeneralMaintenance =
+    maintenanceContent &&
+    (maintenanceContent.textContent.includes("frissítés alatt") ||
+      maintenanceContent.textContent.includes("under maintenance"));
 
-        const removeLoadingElements = () => {
-            const loadingScreen = document.querySelector('.loading-screen');
-            if (loadingScreen) loadingScreen.remove();
-            
-            const kretaProgressBar = document.querySelector('#KretaProgressBar');
-            if (kretaProgressBar) kretaProgressBar.remove();
-            
-            const modalBackground = document.querySelector('.modalBckgroundMain');
-            if (modalBackground) modalBackground.remove();
+  if (hasSpecificMessage || hasGeneralMaintenance) {
+    const body = document.body;
+    const mainLogo = chrome.runtime.getURL("images/firka_logo_128.png");
+    const cactusImage = chrome.runtime.getURL("images/cactus.png");
 
-            const overlays = document.querySelectorAll('.modalBckgroundMain, .loading-screen, #KretaProgressBar');
-            overlays.forEach(overlay => overlay.remove());
-        };
-        
-        removeLoadingElements();
-        setTimeout(removeLoadingElements, 100);
+    const removeLoadingElements = () => {
+      const loadingScreen = document.querySelector(".loading-screen");
+      if (loadingScreen) loadingScreen.remove();
 
-        const existingStyles = document.querySelectorAll('link[rel="stylesheet"], style');
-        existingStyles.forEach(style => style.remove());
+      const kretaProgressBar = document.querySelector("#KretaProgressBar");
+      if (kretaProgressBar) kretaProgressBar.remove();
 
-        body.innerHTML = '';
-        body.classList.add('maintenance-mode');
-        body.classList.add('theme-enabled');
-        body.classList.add('loaded');
-        
-        
-        loadMaintenanceCSS();
-        
-        
-        const container = document.createElement('div');
-        container.className = 'maintenance-container';
-        
-        const logo = document.createElement('img');
-        logo.src = mainLogo;
-        logo.alt = 'Firka Logo';
-        logo.className = 'maintenance-logo';
-        
-        const title = document.createElement('h1');
-        title.className = 'maintenance-title';
-        title.textContent = window.LanguageManager ? window.LanguageManager.t('maintenance.title') : 'Karbantartás';
-        
-        const messageDiv = document.createElement('div');
-        messageDiv.className = 'maintenance-message';
-        
-        const paragraph1 = document.createElement('p');
-        paragraph1.textContent = window.LanguageManager ? window.LanguageManager.t('maintenance.message1') : 'A KRÉTA rendszer jelenleg frissítés alatt van, hamarosan újra elérhetővé válik.';
-        
-        const paragraph2 = document.createElement('p');
-        paragraph2.textContent = window.LanguageManager ? window.LanguageManager.t('maintenance.message2') : 'Köszönjük türelmüket és megértésüket!';
-        
-        const footer = document.createElement('div');
-        footer.className = 'maintenance-footer';
-        footer.textContent = window.LanguageManager ? window.LanguageManager.t('maintenance.team') : 'KRÉTA Csapat';
+      const modalBackground = document.querySelector(".modalBckgroundMain");
+      if (modalBackground) modalBackground.remove();
 
-        const cactus = document.createElement('img');
-        cactus.src = cactusImage;
-        cactus.alt = 'Cactus';
-        cactus.className = 'maintenance-cactus';
-        
-        
-        messageDiv.appendChild(paragraph1);
-        messageDiv.appendChild(paragraph2);
-        
-        container.appendChild(logo);
-        container.appendChild(title);
-        container.appendChild(messageDiv);
-        container.appendChild(footer);
-        
-        body.appendChild(container);
-        body.appendChild(cactus);
-    }
+      const overlays = document.querySelectorAll(
+        ".modalBckgroundMain, .loading-screen, #KretaProgressBar",
+      );
+      overlays.forEach((overlay) => overlay.remove());
+    };
+
+    removeLoadingElements();
+    setTimeout(removeLoadingElements, 100);
+
+    const existingStyles = document.querySelectorAll(
+      'link[rel="stylesheet"], style',
+    );
+    existingStyles.forEach((style) => style.remove());
+
+    body.innerHTML = "";
+    body.classList.add("maintenance-mode");
+    body.classList.add("theme-enabled");
+    body.classList.add("loaded");
+
+    loadMaintenanceCSS();
+
+    const container = document.createElement("div");
+    container.className = "maintenance-container";
+
+    const logo = document.createElement("img");
+    logo.src = mainLogo;
+    logo.alt = "Firka Logo";
+    logo.className = "maintenance-logo";
+
+    const title = document.createElement("h1");
+    title.className = "maintenance-title";
+    title.textContent = window.LanguageManager
+      ? window.LanguageManager.t("maintenance.title")
+      : "Karbantartás";
+
+    const messageDiv = document.createElement("div");
+    messageDiv.className = "maintenance-message";
+
+    const paragraph1 = document.createElement("p");
+    paragraph1.textContent = window.LanguageManager
+      ? window.LanguageManager.t("maintenance.message1")
+      : "A KRÉTA rendszer jelenleg frissítés alatt van, hamarosan újra elérhetővé válik.";
+
+    const paragraph2 = document.createElement("p");
+    paragraph2.textContent = window.LanguageManager
+      ? window.LanguageManager.t("maintenance.message2")
+      : "Köszönjük türelmüket és megértésüket!";
+
+    const footer = document.createElement("div");
+    footer.className = "maintenance-footer";
+    footer.textContent = window.LanguageManager
+      ? window.LanguageManager.t("maintenance.team")
+      : "KRÉTA Csapat";
+
+    const cactus = document.createElement("img");
+    cactus.src = cactusImage;
+    cactus.alt = "Cactus";
+    cactus.className = "maintenance-cactus";
+
+    messageDiv.appendChild(paragraph1);
+    messageDiv.appendChild(paragraph2);
+
+    container.appendChild(logo);
+    container.appendChild(title);
+    container.appendChild(messageDiv);
+    container.appendChild(footer);
+
+    body.appendChild(container);
+    body.appendChild(cactus);
+  }
 }
 
-document.addEventListener('DOMContentLoaded', checkMaintenancePage);
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", checkMaintenancePage);
diff --git a/global/navigation.css b/global/navigation.css
index e3058c7..3b99094 100644
--- a/global/navigation.css
+++ b/global/navigation.css
@@ -1,401 +1,331 @@
 .kreta-header {
-  padding: clamp(1rem, 3vw, 2rem);
-  display: grid;
-  grid-template-columns: minmax(300px, 400px) 1fr minmax(200px, 300px);
-  align-items: center;
-  gap: 1rem;
-  background-color: var(--background);
+  padding:clamp(1rem,3vw,2rem);
+  display:grid;
+  grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
+  align-items:center;
+  gap:1rem;
+  background-color:var(--background);
 }
-
-
 .school-info {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
+  margin:0;
+  display:flex;
+  flex-direction:column;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0 0 0.5rem;
-  display: flex;
-  align-items: center;
+  color:var(--text-primary);
+  font-size:24px;
+  font-weight:600;
+  margin:0 0 0.5rem;
+  display:flex;
+  align-items:center;
 }
-
 .logo {
-  width: 24px;
-  height: 24px;
-  border-radius: 8px;
-  margin-right: 0.5rem;
+  width:24px;
+  height:24px;
+  border-radius:8px;
+  margin-right:0.5rem;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color:var(--text-secondary);
+  font-size:14px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
 }
-
-
 .kreta-nav {
-  padding: 0 clamp(0.5rem, 3vw, 1.5rem);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
+  padding:0 clamp(0.5rem,3vw,1.5rem);
+  position:sticky;
+  top:0;
+  z-index:100;
+  display:flex;
+  justify-content:center;
 }
-
 .nav-links {
-  display: flex;
-  gap: clamp(0.5rem, 2vw, 1rem);
-  padding: 0.25rem;
-  align-items: center;
+  display:flex;
+  gap:clamp(0.5rem,2vw,1rem);
+  padding:0.25rem;
+  align-items:center;
 }
-
 .nav-item {
-  display: flex;
-  align-items: center;
-  padding: clamp(0.5rem, 1.5vw, 1rem) 0.5rem;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-weight: 500;
-  white-space: nowrap;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  text-decoration: none;
+  display:flex;
+  align-items:center;
+  padding:clamp(0.5rem,1.5vw,1rem) 0.5rem;
+  color:var(--text-secondary);
+  text-decoration:none;
+  font-weight:500;
+  white-space:nowrap;
+  border-radius:8px;
+  transition:all 0.2s ease;
+  gap:0.5rem;
+  text-decoration:none;
 }
 .nav-item.active {
-  display: flex;
-  padding: 8px 14px 8px 12px;
-  align-items: center;
-  gap: 8px;
-  border-radius: 20px;
-  background: var(--button-secondaryFill);
-  box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
+  display:flex;
+  padding:8px 14px 8px 12px;
+  align-items:center;
+  gap:8px;
+  border-radius:20px;
+  background:var(--button-secondaryFill);
+  box-shadow:0px 1px var(--shadow-blur,2px) 0px var(--accent-shadow);
 }
-
 .nav-item:hover {
-    color: var(--text-primary);
-    background-color: var(--hover);
-    border-radius: 8px;
-    text-decoration: none;
+  color:var(--text-primary);
+  background-color:var(--hover);
+  border-radius:8px;
+  text-decoration:none;
 }
 .nav-item.active:hover {
-  color: var(--accent-accent);
-  background-color: var(--accent-hover);
-  text-decoration: none;
+  color:var(--accent-accent);
+  background-color:var(--accent-hover);
+  text-decoration:none;
 }
-
-.nav-item img,
-.nav-item svg {
-  width: 24px;
-  height: 24px;
+.nav-item img,.nav-item svg {
+  width:24px;
+  height:24px;
 }
-
 .nav-item.active svg path {
-  fill: var(--accent-accent);
+  fill:var(--accent-accent);
 }
-
-
 .user-profile {
-  position: relative;
-  justify-self: flex-end;
+  position:relative;
+  justify-self:flex-end;
 }
-
 .user-dropdown-btn {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:1rem;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
-
 .user-dropdown-btn:hover {
-  background: var(--hover);
+  background:var(--hover);
 }
-
 .user-info {
-  text-align: right;
+  text-align:right;
 }
-
 .user-name {
-  display: block;
-  color: var(--text-primary);
-  font-size: 16px;
+  display:block;
+  color:var(--text-primary);
+  font-size:16px;
 }
-
 .nav-logout-timer {
-  display: block;
-  color: var(--text-secondary);
-  font-size: 14px;
+  display:block;
+  color:var(--text-secondary);
+  font-size:14px;
 }
-
 .user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.5rem;
-  background: var(--card-card);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  width: 200px;
-  display: none;
-  z-index: 1000;
+  position:absolute;
+  top:100%;
+  right:0;
+  margin-top:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
+  width:200px;
+  display:none;
+  z-index:1000;
 }
-
 .user-dropdown.show {
-  display: block;
-  animation: dropdownShow 0.2s ease;
+  display:block;
+  animation:dropdownShow 0.2s ease;
 }
-
 .dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
+  padding:0.75rem 1rem;
+  color:var(--text-primary);
+  text-decoration:none;
+  transition:background-color 0.2s;
 }
-
 .dropdown-item:hover {
-  background: var(--hover);
-  color: var(--accent-accent);
-  border-radius: 8px;
+  background:var(--hover);
+  color:var(--accent-accent);
+  border-radius:8px;
 }
-
-
 @keyframes dropdownShow {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
 }
-
-
-@media (max-width: 1200px) {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@media (max-width:1200px) {
   .kreta-header {
-    grid-template-columns: minmax(250px, 350px) 1fr minmax(180px, 250px);
-  }
+  grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
 }
-
-/* Hamburger menu styles */
+}/* Hamburger menu styles */
 .nav-toggle {
-  display: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.2s;
+  display:none;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
-
 .nav-toggle:hover {
-  background: var(--hover);
+  background:var(--hover);
 }
-
 .nav-toggle svg {
-  width: 24px;
-  height: 24px;
-  fill: var(--text-primary);
+  width:24px;
+  height:24px;
+  fill:var(--text-primary);
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .kreta-header {
-    grid-template-columns: 1fr auto auto;
-    grid-template-areas: 
-      "school toggle user"
+  grid-template-columns:1fr auto auto;
+  grid-template-areas:"school toggle user"
       "nav nav nav";
-    padding: 1rem;
-    gap: 0.5rem;
-  }
-
-  .nav-toggle {
-    display: block;
-    grid-area: toggle;
-  }
-
-  .school-info {
-    grid-area: school;
-    max-width: none;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .logo-text {
-    margin: 0;
-    font-size: 18px;
-  }
-
-  .school-details {
-    font-size: 11px;
-    max-width: 200px;
-  }
-
-  .kreta-nav {
-    grid-area: nav;
-    padding: 0;
-    margin-top: 0.5rem;
-    display: none;
-  }
-
-  .kreta-nav.show {
-    display: flex;
-    animation: slideDown 0.3s ease;
-  }
-
-  .kreta-nav::-webkit-scrollbar {
-    display: none;
-  }
-
-  .nav-links {
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5rem;
-    background: var(--card-card);
-    border-radius: 12px;
-    padding: 1rem;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-  }
-
-  .nav-item {
-    width: 100%;
-    justify-content: flex-start;
-    padding: 0.75rem;
-    font-size: 14px;
-  }
-
-  .user-profile {
-    grid-area: user;
-  }
-
-  .user-info {
-    text-align: right;
-    max-width: 120px;
-  }
-
-  .user-name {
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nav-logout-timer {
-    font-size: 11px;
-  }
+  padding:1rem;
+  gap:0.5rem;
 }
-
-@media (max-width: 480px) {
+.nav-toggle {
+  display:block;
+  grid-area:toggle;
+}
+.school-info {
+  grid-area:school;
+  max-width:none;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+}
+.logo-text {
+  margin:0;
+  font-size:18px;
+}
+.school-details {
+  font-size:11px;
+  max-width:200px;
+}
+.kreta-nav {
+  grid-area:nav;
+  padding:0;
+  margin-top:0.5rem;
+  display:none;
+}
+.kreta-nav.show {
+  display:flex;
+  animation:slideDown 0.3s ease;
+}
+.kreta-nav::-webkit-scrollbar {
+  display:none;
+}
+.nav-links {
+  flex-direction:column;
+  width:100%;
+  gap:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  padding:1rem;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+}
+.nav-item {
+  width:100%;
+  justify-content:flex-start;
+  padding:0.75rem;
+  font-size:14px;
+}
+.user-profile {
+  grid-area:user;
+}
+.user-info {
+  text-align:right;
+  max-width:120px;
+}
+.user-name {
+  font-size:13px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.nav-logout-timer {
+  font-size:11px;
+}
+}@media (max-width:480px) {
   .kreta-header {
-    grid-template-columns: 1fr auto auto;
-    grid-template-areas: 
-      "school toggle user"
+  grid-template-columns:1fr auto auto;
+  grid-template-areas:"school toggle user"
       "nav nav nav";
-    padding: 0.75rem;
-    gap: 0.25rem;
-  }
-
-  .school-info {
-    min-width: 0;
-    flex: 1;
-  }
-
-  .logo-text {
-    font-size: 16px;
-  }
-
-  .school-details {
-    font-size: 10px;
-    max-width: 150px;
-  }
-
-  .kreta-nav {
-    display: none;
-  }
-
-  .kreta-nav.show {
-    display: flex;
-    animation: slideDown 0.3s ease;
-  }
-
-  .nav-links {
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5rem;
-    background: var(--card-card);
-    border-radius: 12px;
-    padding: 1rem;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-  }
-
-  .nav-item {
-    width: 100%;
-    justify-content: flex-start;
-    padding: 0.75rem;
-    font-size: 14px;
-  }
-
-  .user-info {
-    max-width: 100px;
-  }
-
-  .user-name {
-    font-size: 12px;
-  }
-
-  .nav-logout-timer {
-    font-size: 10px;
-  }
+  padding:0.75rem;
+  gap:0.25rem;
 }
-
-@media (max-width: 360px) {
+.school-info {
+  min-width:0;
+  flex:1;
+}
+.logo-text {
+  font-size:16px;
+}
+.school-details {
+  font-size:10px;
+  max-width:150px;
+}
+.kreta-nav {
+  display:none;
+}
+.kreta-nav.show {
+  display:flex;
+  animation:slideDown 0.3s ease;
+}
+.nav-links {
+  flex-direction:column;
+  width:100%;
+  gap:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  padding:1rem;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+}
+.nav-item {
+  width:100%;
+  justify-content:flex-start;
+  padding:0.75rem;
+  font-size:14px;
+}
+.user-info {
+  max-width:100px;
+}
+.user-name {
+  font-size:12px;
+}
+.nav-logout-timer {
+  font-size:10px;
+}
+}@media (max-width:360px) {
   .kreta-header {
-    padding: 0.5rem;
-  }
-
-  .logo-text {
-    font-size: 14px;
-  }
-
-  .school-details {
-    font-size: 9px;
-    max-width: 120px;
-  }
-
-  .user-info {
-    max-width: 80px;
-  }
-
-  .user-name {
-    font-size: 11px;
-  }
-
-  .nav-logout-timer {
-    font-size: 9px;
-  }
+  padding:0.5rem;
 }
-
-@keyframes slideDown {
+.logo-text {
+  font-size:14px;
+}
+.school-details {
+  font-size:9px;
+  max-width:120px;
+}
+.user-info {
+  max-width:80px;
+}
+.user-name {
+  font-size:11px;
+}
+.nav-logout-timer {
+  font-size:9px;
+}
+}@keyframes slideDown {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
+}
+to {
+  opacity:1;
+  transform:translateY(0);
+}
 }
\ No newline at end of file
diff --git a/global/navigation.js b/global/navigation.js
index 1f709c0..a5c6343 100644
--- a/global/navigation.js
+++ b/global/navigation.js
@@ -1,122 +1,124 @@
 const COOKIE_KEYS = {
-    SCHOOL_NAME: 'schoolName',
-    SCHOOL_CODE: 'schoolCode',
-    USER_NAME: 'userName',
-    SCHOOL_SUBDOMAIN: 'schoolSubdomain'
+  SCHOOL_NAME: "schoolName",
+  SCHOOL_CODE: "schoolCode",
+  USER_NAME: "userName",
+  SCHOOL_SUBDOMAIN: "schoolSubdomain",
 };
 
 const DEFAULT_VALUES = {
-    SCHOOL: LanguageManager.t('navigation.school_default'),
-    USER: LanguageManager.t('navigation.user_default'),
-    TIMER: '45:00'
+  SCHOOL: LanguageManager.t("navigation.school_default"),
+  USER: LanguageManager.t("navigation.user_default"),
+  TIMER: "45:00",
 };
 
 function updateHeaderInfo() {
-    const schoolName = document.querySelector('.nav-school-name');
-    const userName = document.querySelector('.nav-user-name');
-    const logoutTimer = document.querySelector('.nav-logout-timer');
-    
-    const userData = {
-        schoolName: cookieManager.get(COOKIE_KEYS.SCHOOL_NAME) || DEFAULT_VALUES.SCHOOL,
-        schoolId: cookieManager.get(COOKIE_KEYS.SCHOOL_CODE) || '',
-        name: cookieManager.get(COOKIE_KEYS.USER_NAME) || DEFAULT_VALUES.USER,
-        time: document.querySelector('.usermenu_timer')?.textContent?.trim() || DEFAULT_VALUES.TIMER
-    };
-    
-    if (schoolName) {
-        schoolName.textContent = `${userData.schoolId} - ${userData.schoolName}`;
-    }
-    
-    if (userName) {
-        userName.textContent = userData.name;
-    }
-    
-    if (logoutTimer) {
-        startLogoutTimer(userData.time);
-    }
+  const schoolName = document.querySelector(".nav-school-name");
+  const userName = document.querySelector(".nav-user-name");
+  const logoutTimer = document.querySelector(".nav-logout-timer");
+
+  const userData = {
+    schoolName:
+      cookieManager.get(COOKIE_KEYS.SCHOOL_NAME) || DEFAULT_VALUES.SCHOOL,
+    schoolId: cookieManager.get(COOKIE_KEYS.SCHOOL_CODE) || "",
+    name: cookieManager.get(COOKIE_KEYS.USER_NAME) || DEFAULT_VALUES.USER,
+    time:
+      document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+      DEFAULT_VALUES.TIMER,
+  };
+
+  if (schoolName) {
+    schoolName.textContent = `${userData.schoolId} - ${userData.schoolName}`;
+  }
+
+  if (userName) {
+    userName.textContent = userData.name;
+  }
+
+  if (logoutTimer) {
+    startLogoutTimer(userData.time);
+  }
 }
 
 function startLogoutTimer(timeString) {
-    const startTime = parseInt(timeString?.match(/\d+/)?.[0] || "45");
-    let timeLeft = startTime * 60;
-    const timerElement = document.querySelector('.nav-logout-timer');
-    
-    const updateTimer = () => {
-        const minutes = Math.floor(timeLeft / 60);
-        const seconds = timeLeft % 60;
-        timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-        
-        if (timeLeft <= 0) {
-            window.location.href = '/Home/Logout';
-        }
-        timeLeft--;
-    };
+  const startTime = parseInt(timeString?.match(/\d+/)?.[0] || "45");
+  let timeLeft = startTime * 60;
+  const timerElement = document.querySelector(".nav-logout-timer");
 
-    updateTimer();
-    setInterval(updateTimer, 1000);
+  const updateTimer = () => {
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+    timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+
+    if (timeLeft <= 0) {
+      window.location.href = "/Home/Logout";
+    }
+    timeLeft--;
+  };
+
+  updateTimer();
+  setInterval(updateTimer, 1000);
 }
 
-
-document.addEventListener('DOMContentLoaded', () => {
-    updateHeaderInfo();
+document.addEventListener("DOMContentLoaded", () => {
+  updateHeaderInfo();
 });
 
 function setupUserDropdown() {
-    const userBtn = document.querySelector('.user-dropdown-btn');
-    const userDropdown = document.querySelector('.user-dropdown');
-    
-    userBtn?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        userDropdown?.classList.toggle('show');
-    });
+  const userBtn = document.querySelector(".user-dropdown-btn");
+  const userDropdown = document.querySelector(".user-dropdown");
 
-    document.addEventListener('click', () => {
-        userDropdown?.classList.remove('show');
-    });
+  userBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    userDropdown?.classList.toggle("show");
+  });
+
+  document.addEventListener("click", () => {
+    userDropdown?.classList.remove("show");
+  });
 }
 
 function setupSettingsButton() {
-    document.getElementById('settingsBtn')?.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const url = chrome.runtime.getURL('settings/index.html');
-        window.open(url, '_blank', 'width=400,height=600');
-    });
+  document.getElementById("settingsBtn")?.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const url = chrome.runtime.getURL("settings/index.html");
+    window.open(url, "_blank", "width=400,height=600");
+  });
 }
 
 function setupMobileNavigation() {
-    setTimeout(() => {
-        const navToggle = document.querySelector('.nav-toggle');
-        const nav = document.querySelector('.kreta-nav');
-        
-        if (!navToggle || !nav) {
-            return;
-        }
-        
-        navToggle.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            nav.classList.toggle('show');
-        });
+  setTimeout(() => {
+    const navToggle = document.querySelector(".nav-toggle");
+    const nav = document.querySelector(".kreta-nav");
 
-        document.addEventListener('click', (e) => {
-            if (!nav.contains(e.target) && !navToggle.contains(e.target)) {
-                nav.classList.remove('show');
-            }
-        });
+    if (!navToggle || !nav) {
+      return;
+    }
 
-        const navItems = document.querySelectorAll('.nav-item');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                nav.classList.remove('show');
-            });
-        });
-    }, 100);
+    navToggle.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      nav.classList.toggle("show");
+    });
+
+    document.addEventListener("click", (e) => {
+      if (!nav.contains(e.target) && !navToggle.contains(e.target)) {
+        nav.classList.remove("show");
+      }
+    });
+
+    const navItems = document.querySelectorAll(".nav-item");
+    navItems.forEach((item) => {
+      item.addEventListener("click", () => {
+        nav.classList.remove("show");
+      });
+    });
+  }, 100);
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-    updateHeaderInfo();
-    setupUserDropdown();
-    setupSettingsButton();
-    setupMobileNavigation();
+document.addEventListener("DOMContentLoaded", () => {
+  updateHeaderInfo();
+  setupUserDropdown();
+  setupSettingsButton();
+  setupMobileNavigation();
 });
diff --git a/global/theme.css b/global/theme.css
index 465964d..e8983d1 100644
--- a/global/theme.css
+++ b/global/theme.css
@@ -1,178 +1,163 @@
 :root {
-  --background: #DAE4F7;
-  --background-0: #dae4f700;
-  --success: var(--grades-4);
-  --shadow-blur: 2px;
-  --text-primary: #050B15;
-  --text-secondary: #050b15cc;
-  --text-teritary: #050b1580;
-  --card-card: #EDF3FF;
-  --card-translucent: #edf3ff80;
-  --button-secondaryFill: #FBFCFF;
-  --accent-accent: #3673EE;
-  --accent-secondary: #1C469A;
-  --accent-shadow: #1c469a26;
-  --accent-15: #3673ee26;
-  --warning-accent: var(--grades-2);
-  --warning-text: #8F531B;
-  --warning-15: #ffa04626;
-  --warning-card: #FAEBDC;
-  --error-accent: var(--grades-1);
-  --error-text: #8F1B4F;
-  --error-15: #FF54A126;
-  --error-card: #FADCE9;
-  --grades-1: #FF54A1;
-  --grades-2: #FFA046;
-  --grades-3: #F9CF00;
-  --grades-4: #92EA3B;
-  --grades-5: #22CCAD;
-  --grades-background-1: #FF54A126;
-  --grades-background-2: #FFA04626;
-  --grades-background-3: #F9CF0026;
-  --grades-background-4: #92EA3B26;
-  --grades-background-5: #22CCAD26;
+  --background:#DAE4F7;
+  --background-0:#dae4f700;
+  --success:var(--grades-4);
+  --shadow-blur:2px;
+  --text-primary:#050B15;
+  --text-secondary:#050b15cc;
+  --text-teritary:#050b1580;
+  --card-card:#EDF3FF;
+  --card-translucent:#edf3ff80;
+  --button-secondaryFill:#FBFCFF;
+  --accent-accent:#3673EE;
+  --accent-secondary:#1C469A;
+  --accent-shadow:#1c469a26;
+  --accent-15:#3673ee26;
+  --warning-accent:var(--grades-2);
+  --warning-text:#8F531B;
+  --warning-15:#ffa04626;
+  --warning-card:#FAEBDC;
+  --error-accent:var(--grades-1);
+  --error-text:#8F1B4F;
+  --error-15:#FF54A126;
+  --error-card:#FADCE9;
+  --grades-1:#FF54A1;
+  --grades-2:#FFA046;
+  --grades-3:#F9CF00;
+  --grades-4:#92EA3B;
+  --grades-5:#22CCAD;
+  --grades-background-1:#FF54A126;
+  --grades-background-2:#FFA04626;
+  --grades-background-3:#F9CF0026;
+  --grades-background-4:#92EA3B26;
+  --grades-background-5:#22CCAD26;
 }
-
-
 :root[data-theme="light-green"] {
-  --background: #FAFFF0;
-  --background-0: #fafff000;
-  --success: var(--grades-4);
-  --shadow-blur: 2px;
-  --text-primary: #394C0A;
-  --text-secondary: #394c0acc;
-  --text-teritary: #394c0a80;
-  --card-card: #F3FBDE;
-  --card-translucent: #f3fbde80;
-  --button-secondaryFill: #FEFFFD;
-  --accent-accent: #A7DC22;
-  --accent-secondary: #6E8F1B;
-  --accent-shadow: #647e2226;
-  --accent-15: #a7dc2226;
-  --warning-accent: var(--grades-2);
-  --warning-text: #8F531B;
-  --warning-15: #ffa04626;
-  --warning-card: #FAEBDC;
-  --error-accent: var(--grades-1);
-  --error-text: #8F1B4F;
-  --error-15: #FF54A126;
-  --error-card: #FADCE9;
-  --grades-1: #FF54A1;
-  --grades-2: #FFA046;
-  --grades-3: #F9CF00;
-  --grades-4: #92EA3B;
-  --grades-5: #22CCAD;
-  --grades-background-1: #FF54A126;
-  --grades-background-2: #FFA04626;
-  --grades-background-3: #F9CF0026;
-  --grades-background-4: #92EA3B26;
-  --grades-background-5: #22CCAD26;
+  --background:#FAFFF0;
+  --background-0:#fafff000;
+  --success:var(--grades-4);
+  --shadow-blur:2px;
+  --text-primary:#394C0A;
+  --text-secondary:#394c0acc;
+  --text-teritary:#394c0a80;
+  --card-card:#F3FBDE;
+  --card-translucent:#f3fbde80;
+  --button-secondaryFill:#FEFFFD;
+  --accent-accent:#A7DC22;
+  --accent-secondary:#6E8F1B;
+  --accent-shadow:#647e2226;
+  --accent-15:#a7dc2226;
+  --warning-accent:var(--grades-2);
+  --warning-text:#8F531B;
+  --warning-15:#ffa04626;
+  --warning-card:#FAEBDC;
+  --error-accent:var(--grades-1);
+  --error-text:#8F1B4F;
+  --error-15:#FF54A126;
+  --error-card:#FADCE9;
+  --grades-1:#FF54A1;
+  --grades-2:#FFA046;
+  --grades-3:#F9CF00;
+  --grades-4:#92EA3B;
+  --grades-5:#22CCAD;
+  --grades-background-1:#FF54A126;
+  --grades-background-2:#FFA04626;
+  --grades-background-3:#F9CF0026;
+  --grades-background-4:#92EA3B26;
+  --grades-background-5:#22CCAD26;
 }
-
-
 :root[data-theme="dark-blue"] {
-  --background: #070A0E;
-  --background-0: #070a0e00;
-  --success: var(--grades-4);
-  --shadow-blur: 0;
-  --text-primary: #EBF1FD;
-  --text-secondary: #ebf1fdcc;
-  --text-teritary: #ebf1fd80;
-  --card-card: #0F131B;
-  --card-translucent: #0f131b80;
-  --button-secondaryFill: #131822;
-  --accent-accent: #3673EE;
-  --accent-secondary: #AEC8FC;
-  --accent-shadow: #0000;
-  --accent-15: #3673ee26;
-  --warning-accent: var(--grades-2);
-  --warning-text: #f0b37a;
-  --warning-15: #ffa04626;
-  --warning-card: #201203;
-  --error-accent: var(--grades-1);
-  --error-text: #f59ec5;
-  --error-15: #ff54a126;
-  --error-card: #1e030f;
-  --grades-1: #FF54A1;
-  --grades-2: #FFA046;
-  --grades-3: #F9CF00;
-  --grades-4: #92EA3B;
-  --grades-5: #22CCAD;
-  --grades-background-1: #FF54A126;
-  --grades-background-2: #FFA04626;
-  --grades-background-3: #F9CF0026;
-  --grades-background-4: #92EA3B26;
-  --grades-background-5: #22CCAD26;
+  --background:#070A0E;
+  --background-0:#070a0e00;
+  --success:var(--grades-4);
+  --shadow-blur:0;
+  --text-primary:#EBF1FD;
+  --text-secondary:#ebf1fdcc;
+  --text-teritary:#ebf1fd80;
+  --card-card:#0F131B;
+  --card-translucent:#0f131b80;
+  --button-secondaryFill:#131822;
+  --accent-accent:#3673EE;
+  --accent-secondary:#AEC8FC;
+  --accent-shadow:#0000;
+  --accent-15:#3673ee26;
+  --warning-accent:var(--grades-2);
+  --warning-text:#f0b37a;
+  --warning-15:#ffa04626;
+  --warning-card:#201203;
+  --error-accent:var(--grades-1);
+  --error-text:#f59ec5;
+  --error-15:#ff54a126;
+  --error-card:#1e030f;
+  --grades-1:#FF54A1;
+  --grades-2:#FFA046;
+  --grades-3:#F9CF00;
+  --grades-4:#92EA3B;
+  --grades-5:#22CCAD;
+  --grades-background-1:#FF54A126;
+  --grades-background-2:#FFA04626;
+  --grades-background-3:#F9CF0026;
+  --grades-background-4:#92EA3B26;
+  --grades-background-5:#22CCAD26;
 }
-
-
 :root[data-theme="dark-green"] {
-  --background: #0D1202;
-  --background-0: #0E130200;
-  --success: var(--grades-4);
-  --shadow-blur: 0;
-  --text-primary: #EAF7CC;
-  --text-secondary: #EAF7CCCC;
-  --text-teritary: #EAF7CC80;
-  --card-card: #141905;
-  --card-translucent: #14190580;
-  --button-secondaryFill: #20290b;
-  --accent-accent: #A7DC22;
-  --accent-secondary: #CBEE71;
-  --accent-shadow: #0000;
-  --accent-15: #a7dc2226;
-  --warning-accent: var(--grades-2);
-  --warning-text: #f0b37a;
-  --warning-15: #ffa04626;
-  --warning-card: #201203;
-  --error-accent: var(--grades-1);
-  --error-text: #f59ec5;
-  --error-15: #ff54a126;
-  --error-card: #1e030f;
-  --grades-1: #FF54A1;
-  --grades-2: #FFA046;
-  --grades-3: #F9CF00;
-  --grades-4: #92EA3B;
-  --grades-5: #22CCAD;
-  --grades-background-1: #FF54A126;
-  --grades-background-2: #FFA04626;
-  --grades-background-3: #F9CF0026;
-  --grades-background-4: #92EA3B26;
-  --grades-background-5: #22CCAD26;
+  --background:#0D1202;
+  --background-0:#0E130200;
+  --success:var(--grades-4);
+  --shadow-blur:0;
+  --text-primary:#EAF7CC;
+  --text-secondary:#EAF7CCCC;
+  --text-teritary:#EAF7CC80;
+  --card-card:#141905;
+  --card-translucent:#14190580;
+  --button-secondaryFill:#20290b;
+  --accent-accent:#A7DC22;
+  --accent-secondary:#CBEE71;
+  --accent-shadow:#0000;
+  --accent-15:#a7dc2226;
+  --warning-accent:var(--grades-2);
+  --warning-text:#f0b37a;
+  --warning-15:#ffa04626;
+  --warning-card:#201203;
+  --error-accent:var(--grades-1);
+  --error-text:#f59ec5;
+  --error-15:#ff54a126;
+  --error-card:#1e030f;
+  --grades-1:#FF54A1;
+  --grades-2:#FFA046;
+  --grades-3:#F9CF00;
+  --grades-4:#92EA3B;
+  --grades-5:#22CCAD;
+  --grades-background-1:#FF54A126;
+  --grades-background-2:#FFA04626;
+  --grades-background-3:#F9CF0026;
+  --grades-background-4:#92EA3B26;
+  --grades-background-5:#22CCAD26;
 }
-
-
 html {
-  background-color: var(--background) !important;
-  color: var(--text-primary) !important;
+  background-color:var(--background) !important;
+  color:var(--text-primary) !important;
 }
-
 body {
-  background-color: var(--background) !important;
-  color: var(--text-primary) !important;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  min-height: 100vh;
+  background-color:var(--background) !important;
+  color:var(--text-primary) !important;
+  transition:background-color 0.2s ease,color 0.2s ease;
+  min-height:100vh;
 }
-
-
 * {
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;
 }
-
 ::-webkit-scrollbar {
-  width: clamp(4px, 1vw, 8px);
-  height: clamp(4px, 1vw, 8px);
+  width:clamp(4px,1vw,8px);
+  height:clamp(4px,1vw,8px);
 }
-
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background:var(--background);
 }
-
 ::-webkit-scrollbar-thumb {
-  background: var(--text-secondary);
-  border-radius: 4px;
+  background:var(--text-secondary);
+  border-radius:4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-primary);
-}
\ No newline at end of file
+  background:var(--text-primary);
+}
diff --git a/global/theme.js b/global/theme.js
index 5eb82df..e09df5f 100644
--- a/global/theme.js
+++ b/global/theme.js
@@ -1,132 +1,202 @@
 (() => {
-    function setTheme(theme) {
-        try {
-            const actualTheme = theme === 'default' ? 'light-blue' : theme;
-            
-            document.documentElement.setAttribute('data-theme', actualTheme);
-            cookieManager.set('themePreference', actualTheme);
-            localStorage.setItem('themePreference', actualTheme);
-            
-            chrome.runtime.sendMessage({
-                action: 'themeChanged',
-                theme: actualTheme
-            }).catch(() => {
+  function setTheme(theme) {
+    try {
+      const actualTheme = theme === "default" ? "light-blue" : theme;
 
-            });
-        } catch (error) {
-            console.error('Error setting theme:', error);
-        }
+      document.documentElement.setAttribute("data-theme", actualTheme);
+      cookieManager.set("themePreference", actualTheme);
+      localStorage.setItem("themePreference", actualTheme);
+
+      chrome.runtime
+        .sendMessage({
+          action: "themeChanged",
+          theme: actualTheme,
+        })
+        .catch(() => {});
+    } catch (error) {
+      console.error("Error setting theme:", error);
     }
-    
-    function setPageTitleAndFavicon() {
-        try {
-            document.title = 'Firka - KRÉTA';
+  }
 
-            const existingFavicons = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');
-            existingFavicons.forEach(link => link.remove());
-
-            if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.getURL) {
-                const favicon = document.createElement('link');
-                favicon.rel = 'icon';
-                favicon.type = 'image/png';
-                favicon.href = chrome.runtime.getURL('images/firka_logo_128.png');
-                document.head.appendChild(favicon);
-
-                const shortcutIcon = document.createElement('link');
-                shortcutIcon.rel = 'shortcut icon';
-                shortcutIcon.type = 'image/png';
-                shortcutIcon.href = chrome.runtime.getURL('images/firka_logo_128.png');
-                document.head.appendChild(shortcutIcon);
-            }
-        } catch (error) {
-            console.error('Error setting page title and favicon:', error);
+  function importFonts() {
+    try {
+      const fontFaces = `
+        @font-face {
+          font-family: 'Montserrat';
+          font-style: normal;
+          font-weight: 400;
+          src: url('${chrome.runtime.getURL('fonts/Montserrat-Regular.woff2')}') format('woff2');
+          font-display: swap;
         }
-    }
-    
-    function initializeTheme() {
-        const cookieTheme = cookieManager.get('themePreference');
-        const localStorageTheme = localStorage.getItem('themePreference');
-        
-        const theme = cookieTheme || localStorageTheme || 'light-green';
-        
-        setTheme(theme);
-        setPageTitleAndFavicon();
-        
-        if (cookieTheme !== localStorageTheme) {
-            if (cookieTheme) {
-                localStorage.setItem('themePreference', cookieTheme);
-            } else if (localStorageTheme) {
-                cookieManager.set('themePreference', localStorageTheme);
-            }
+        @font-face {
+          font-family: 'Montserrat';
+          font-style: normal;
+          font-weight: 500;
+          src: url('${chrome.runtime.getURL('fonts/Montserrat-Medium.woff2')}') format('woff2');
+          font-display: swap;
         }
+        @font-face {
+          font-family: 'Montserrat';
+          font-style: normal;
+          font-weight: 600;
+          src: url('${chrome.runtime.getURL('fonts/Montserrat-SemiBold.woff2')}') format('woff2');
+          font-display: swap;
+        }
+        @font-face {
+          font-family: 'Figtree';
+          font-style: normal;
+          font-weight: 400;
+          src: url('${chrome.runtime.getURL('fonts/Figtree-Regular.woff2')}') format('woff2');
+          font-display: swap;
+        }
+      `;
+
+      const styleElement = document.createElement('style');
+      styleElement.textContent = fontFaces;
+      document.head.appendChild(styleElement);
+
+      const iconFontFace = `
+        @font-face {
+          font-family: 'Material Icons Round';
+          font-style: normal;
+          font-weight: 400;
+          src: url('${chrome.runtime.getURL('fonts/Icons.woff2')}') format('woff2');
+          font-display: swap;
+        }
+      `;
+      
+      const iconStyleElement = document.createElement('style');
+      iconStyleElement.textContent = iconFontFace;
+      document.head.appendChild(iconStyleElement);
+    } catch (error) {
+      console.error("Error importing fonts:", error);
     }
-    
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initializeTheme);
-    } else {
-        initializeTheme();
+  }
+
+  function setPageTitleAndFavicon() {
+    try {
+      document.title = "Firka - KRÉTA";
+
+      const existingFavicons = document.querySelectorAll(
+        'link[rel="icon"], link[rel="shortcut icon"]',
+      );
+      existingFavicons.forEach((link) => link.remove());
+
+      if (
+        typeof chrome !== "undefined" &&
+        chrome.runtime &&
+        chrome.runtime.getURL
+      ) {
+        const favicon = document.createElement("link");
+        favicon.rel = "icon";
+        favicon.type = "image/png";
+        favicon.href = chrome.runtime.getURL("images/firka_logo_128.png");
+        document.head.appendChild(favicon);
+
+        const shortcutIcon = document.createElement("link");
+        shortcutIcon.rel = "shortcut icon";
+        shortcutIcon.type = "image/png";
+        shortcutIcon.href = chrome.runtime.getURL("images/firka_logo_128.png");
+        document.head.appendChild(shortcutIcon);
+      }
+    } catch (error) {
+      console.error("Error setting page title and favicon:", error);
+    }
+  }
+
+  function initializeTheme() {
+    const cookieTheme = cookieManager.get("themePreference");
+    const localStorageTheme = localStorage.getItem("themePreference");
+
+    const theme = cookieTheme || localStorageTheme || "light-green";
+
+    setTheme(theme);
+    setPageTitleAndFavicon();
+    importFonts();
+
+    if (cookieTheme !== localStorageTheme) {
+      if (cookieTheme) {
+        localStorage.setItem("themePreference", cookieTheme);
+      } else if (localStorageTheme) {
+        cookieManager.set("themePreference", localStorageTheme);
+      }
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeTheme);
+  } else {
+    initializeTheme();
+  }
+
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action === "changeTheme") {
+      setTheme(message.theme);
+      sendResponse({ success: true });
     }
 
-    
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-        if (message.action === 'changeTheme') {
-            setTheme(message.theme);
-            sendResponse({ success: true });
-        }
-        
-        if (message.action === 'getTheme') {
-            const currentTheme = document.documentElement.getAttribute('data-theme') || 'light-green';
-            sendResponse({ theme: currentTheme });
-        }
+    if (message.action === "getTheme") {
+      const currentTheme =
+        document.documentElement.getAttribute("data-theme") || "light-green";
+      sendResponse({ theme: currentTheme });
+    }
 
-        return true;
+    return true;
+  });
+
+  let titleCheckTimeout;
+
+  const observer = new MutationObserver((mutations) => {
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const savedTheme =
+      cookieManager.get("themePreference") ||
+      localStorage.getItem("themePreference");
+
+    if (
+      (!currentTheme && savedTheme) ||
+      (currentTheme !== savedTheme && savedTheme)
+    ) {
+      setTheme(savedTheme);
+    }
+
+    const titleChanged = mutations.some(
+      (mutation) =>
+        mutation.type === "childList" &&
+        mutation.target === document.head &&
+        Array.from(mutation.addedNodes).some(
+          (node) => node.tagName === "TITLE",
+        ),
+    );
+
+    if (titleChanged || document.title !== "Firka - KRÉTA") {
+      clearTimeout(titleCheckTimeout);
+      titleCheckTimeout = setTimeout(() => {
+        if (document.title !== "Firka - KRÉTA") {
+          setPageTitleAndFavicon();
+        }
+      }, 100);
+    }
+  });
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"],
+      });
+      observer.observe(document.head, {
+        childList: true,
+        subtree: true,
+      });
     });
-
-    let titleCheckTimeout;
-
-    const observer = new MutationObserver((mutations) => {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const savedTheme = cookieManager.get('themePreference') || localStorage.getItem('themePreference');
-        
-        if ((!currentTheme && savedTheme) || (currentTheme !== savedTheme && savedTheme)) {
-            setTheme(savedTheme);
-        }
-
-        const titleChanged = mutations.some(mutation => 
-            mutation.type === 'childList' && 
-            mutation.target === document.head &&
-            Array.from(mutation.addedNodes).some(node => node.tagName === 'TITLE')
-        );
-
-        if (titleChanged || document.title !== 'Firka - KRÉTA') {
-            clearTimeout(titleCheckTimeout);
-            titleCheckTimeout = setTimeout(() => {
-                if (document.title !== 'Firka - KRÉTA') {
-                    setPageTitleAndFavicon();
-                }
-            }, 100);
-        }
+  } else {
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
     });
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
-            observer.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-            observer.observe(document.head, {
-                childList: true,
-                subtree: true
-            });
-        });
-    } else {
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme']
-        });
-        observer.observe(document.head, {
-            childList: true,
-            subtree: true
-        });
-    }
-})();
\ No newline at end of file
+    observer.observe(document.head, {
+      childList: true,
+      subtree: true,
+    });
+  }
+})();
diff --git a/grades/grades.css b/grades/grades.css
index 6535032..347d696 100644
--- a/grades/grades.css
+++ b/grades/grades.css
@@ -1,900 +1,826 @@
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-    margin: 0;
-    padding: 0;
-    color: var(--text-primary);
-    background-color: var(--background) !important;
-    font-family: "Montserrat", serif !important;
-    min-height: 100vh;
-    font-size: 16px;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif !important;
+  min-height:100vh;
+  font-size:16px;
 }
 .kreta-container {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
 }
 .grades-chart {
-    width: 100%;
-    height: 320px;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  width:100%;
+  height:320px;
+  margin-bottom:1.5rem;
+  padding:1rem;
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
 }
 .overall-averages {
-    padding: 1.5rem;
-    background: var(--card-card);
-    border-radius: 24px;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-    width: 100%;
+  padding:1.5rem;
+  background:var(--card-card);
+  border-radius:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  width:100%;
 }
 .average-details {
-    display: flex;
-    gap: 2rem;
-    justify-content: center;
+  display:flex;
+  gap:2rem;
+  justify-content:center;
 }
 .average-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+  display:flex;
+  align-items:center;
+  gap:1rem;
 }
 .average-label {
-    color: var(--text-secondary);
-    font-size: 1.1rem;
-    font-weight: 500;
+  color:var(--text-secondary);
+  font-size:1.1rem;
+  font-weight:500;
 }
 .average-value {
-    font-size: 1.5rem;
-    font-weight: 600;
+  font-size:1.5rem;
+  font-weight:600;
 }
 .average-value.warning {
-    color: var(--error-accent);
+  color:var(--error-accent);
 }
-
 .grades-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
-    gap: 1.5rem;
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
+  gap:1.5rem;
 }
 .subject-card {
-    background: var(--card-card);
-    border-radius: 24px;
-    padding: 1.5rem;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  border-radius:24px;
+  padding:1.5rem;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
 .subject-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    width: 100%;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  margin-bottom:0.5rem;
+  width:100%;
 }
-
 .subject-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  width:100%;
 }
 .subject-title h3 {
-    padding: 1rem;
-    margin-bottom: 0px !important;
-    margin-top: 0px !important;
-    color: var(--text-primary);
-    font-family: Montserrat;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
+  padding:1rem;
+  margin-bottom:0px !important;
+  margin-top:0px !important;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
 .subject-averages .average-circle {
-    display: flex;
-    width: 48px;
-    height: 26px;
-    padding: 6px 8px;
-    justify-content: center;
-    align-items: center;
-    gap: 14px;
-    border-radius: 16px;
-    background-color: var(--background-secondary);
+  display:flex;
+  width:48px;
+  height:26px;
+  padding:6px 8px;
+  justify-content:center;
+  align-items:center;
+  gap:14px;
+  border-radius:16px;
+  background-color:var(--background-secondary);
 }
 .subject-averages .class-average[data-grade="1"] {
-    border: 2px solid var(--grades-1);
-    color: var(--grades-1);
+  border:2px solid var(--grades-1);
+  color:var(--grades-1);
 }
 .subject-averages .class-average[data-grade="2"] {
-    border: 2px solid var(--grades-2);
-    color: var(--grades-2);
+  border:2px solid var(--grades-2);
+  color:var(--grades-2);
 }
 .subject-averages .class-average[data-grade="3"] {
-    border: 2px solid var(--grades-3);
-    color: var(--grades-3);
+  border:2px solid var(--grades-3);
+  color:var(--grades-3);
 }
 .subject-averages .class-average[data-grade="4"] {
-    border: 2px solid var(--grades-4);
-    color: var(--grades-4);
+  border:2px solid var(--grades-4);
+  color:var(--grades-4);
 }
 .subject-averages .class-average[data-grade="5"] {
-    border: 2px solid var(--grades-5);
-    color: var(--grades-5);
-}.subject-averages .average-label {
-    font-size: 0.625rem;
-    color: var(--text-secondary);
+  border:2px solid var(--grades-5);
+  color:var(--grades-5);
+}
+.subject-averages .average-label {
+  font-size:0.625rem;
+  color:var(--text-secondary);
 }
 .subject-averages .average-value {
-    font-size: 0.875rem;
-    font-weight: 600;
+  font-size:0.875rem;
+  font-weight:600;
 }
-
-.subject-averages .my-average[data-grade] .average-value,
-.subject-averages .class-average[data-grade] .average-value {
-    color: inherit;
+.subject-averages .my-average[data-grade] .average-value,.subject-averages .class-average[data-grade] .average-value {
+  color:inherit;
 }
-
 .subject-averages {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
+  display:flex;
+  gap:0.75rem;
+  align-items:center;
 }
-
 .grades-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    overflow: hidden;
-    max-height: calc(71.5px* 5 - 10px);
-    position: relative;
+  display:flex;
+  flex-direction:column;
+  gap:1rem;
+  overflow:hidden;
+  max-height:calc(71.5px* 5 - 10px);
+  position:relative;
 }
-
 .grades-list.scrollable {
-    overflow-y: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  overflow-y:auto;
+  scrollbar-width:none;
+  -ms-overflow-style:none;
 }
-
 .grades-list.scrollable::-webkit-scrollbar {
-    display: none;
+  display:none;
 }
-
 .grades-list::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 30px;
-    height: 6px;
-    background: radial-gradient(circle, var(--text-secondary) 1px, transparent 1px);
-    background-size: 8px 6px;
-    background-repeat: repeat-x;
-    opacity: 0;
-    transition: opacity 0.3s ease;
+  content:'';
+  position:absolute;
+  bottom:-10px;
+  left:50%;
+  transform:translateX(-50%);
+  width:30px;
+  height:6px;
+  background:radial-gradient(circle,var(--text-secondary) 1px,transparent 1px);
+  background-size:8px 6px;
+  background-repeat:repeat-x;
+  opacity:0;
+  transition:opacity 0.3s ease;
 }
-
 .grades-list.has-more::after {
-    opacity: 1;
+  opacity:1;
 }
 .grade-item {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1rem;
-    padding: 1rem;
-    border-radius: 12px;
-    align-items: start;
-    position: relative;
-    background-color: var(--card-card);
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  gap:1rem;
+  padding:1rem;
+  border-radius:12px;
+  align-items:start;
+  position:relative;
+  background-color:var(--card-card);
 }
 .grade-value {
-    display: flex;
-    width: 24px;
-    height: 24px;
-    padding: 7.5px 0px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 12px;
-    font-family: Montserrat;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    text-align: center;
+  display:flex;
+  width:24px;
+  height:24px;
+  padding:7.5px 0px;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  border-radius:12px;
+  font-family:Montserrat;
+  font-size:18px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
+  text-align:center;
 }
 .grade-details {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  display:flex;
+  flex-direction:column;
+  gap:0.25rem;
 }
 .grade-theme {
-    overflow: hidden;
-    color: var(--text-primary);
-    text-overflow: ellipsis;
-    font-family: Figtree;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 130%;
+  overflow:hidden;
+  color:var(--text-primary);
+  text-overflow:ellipsis;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:130%;
 }
-.grade-meta, .grade-date {
-    overflow: hidden;
-    color: var(--text-secondary);
-    text-overflow: ellipsis;
-    font-family: Figtree;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 130%;
+.grade-meta,.grade-date {
+  overflow:hidden;
+  color:var(--text-secondary);
+  text-overflow:ellipsis;
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .grade-date {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    text-align: center;
+  position:absolute;
+  top:1rem;
+  right:1rem;
+  text-align:center;
 }
-
 .grade-1 .grade-value {
-    background-color: var(--grades-background-1);
-    color: var(--grades-1);
+  background-color:var(--grades-background-1);
+  color:var(--grades-1);
 }
 .grade-2 .grade-value {
-    background-color: var(--grades-background-2);
-    color: var(--grades-2);
+  background-color:var(--grades-background-2);
+  color:var(--grades-2);
 }
 .grade-3 .grade-value {
-    background-color: var(--grades-background-3);
-    color: var(--grades-3);
+  background-color:var(--grades-background-3);
+  color:var(--grades-3);
 }
 .grade-4 .grade-value {
-    background-color: var(--grades-background-4);
-    color: var(--grades-4);
+  background-color:var(--grades-background-4);
+  color:var(--grades-4);
 }
 .grade-5 .grade-value {
-    background-color: var(--grades-background-5);
-    color: var(--grades-5);
+  background-color:var(--grades-background-5);
+  color:var(--grades-5);
 }
-
 .semester-grade {
-    background-color: var(--button-secondaryFill) !important;
-    border: 2px solid var(--accent-accent) !important;
-    position: relative;
-    padding-top: 1.5rem !important;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background-color:var(--button-secondaryFill) !important;
+  border:2px solid var(--accent-accent) !important;
+  position:relative;
+  padding-top:1.5rem !important;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
 .semester-grade::before {
-    content: "Félévi értékelés";
-    position: absolute;
-    top: 0.25rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--accent-accent);
-    color: var(--button-secondaryFill);
-    padding: 2px 12px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-    white-space: nowrap;
-    z-index: 1;
+  content:"Félévi értékelés";
+  position:absolute;
+  top:0.25rem;
+  left:50%;
+  transform:translateX(-50%);
+  background:var(--accent-accent);
+  color:var(--button-secondaryFill);
+  padding:2px 12px;
+  border-radius:12px;
+  font-size:12px;
+  font-weight:500;
+  white-space:nowrap;
+  z-index:1;
 }
-
 .user-profile {
-    position: relative;
-    justify-self: flex-end;
+  position:relative;
+  justify-self:flex-end;
 }
 .user-dropdown-btn {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 8px;
-    transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:1rem;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
 .user-dropdown-btn:hover {
-    background: var(--card-card);
+  background:var(--card-card);
 }
 .user-info {
-    text-align: right;
+  text-align:right;
 }
-
 .user-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 0.5rem;
-    background: var(--card-card);
-    border-radius: 12px;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-    width: 200px;
-    display: none;
-    z-index: 1000;
+  position:absolute;
+  top:100%;
+  right:0;
+  margin-top:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  width:200px;
+  display:none;
+  z-index:1000;
 }
 .user-dropdown.show {
-    display: block;
-    animation: dropdownShow 0.2s ease;
+  display:block;
+  animation:dropdownShow 0.2s ease;
 }
 .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    color: var(--text-primary);
-    text-decoration: none;
-    transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
+  padding:0.75rem 1rem;
+  color:var(--text-primary);
+  text-decoration:none;
+  transition:background-color 0.2s;
 }
 .dropdown-item:hover {
-    background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
-
 .kreta-main {
-    flex: 1;
-    padding: clamp(1rem, 3vw, 2rem);
-    max-width: 1400px;
-    margin: 0 auto;
-    width: 100%;
+  flex:1;
+  padding:clamp(1rem,3vw,2rem);
+  max-width:1400px;
+  margin:0 auto;
+  width:100%;
 }
-
 @keyframes dropdownShow {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+  opacity:0;
+  transform:translateY(-10px);
+}
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@media (max-width:768px) {
+  body {
+  font-size:14px;
 }
-
-@media (max-width: 768px) {
-    body {
-        font-size: 14px;
-    }
 .average-details {
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-    }
+  flex-direction:column;
+  align-items:center;
+  gap:1rem;
 }
-
-.material-icons-round {
-    font-size: 20px;
-    vertical-align: middle;
+}.material-icons-round {
+  font-size:20px;
+  vertical-align:middle;
 }
-
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  width:8px;
+  height:8px;
 }
 ::-webkit-scrollbar-track {
-    background: var(--background);
+  background:var(--background);
 }
 ::-webkit-scrollbar-thumb {
-    background: var(--text-secondary);
-    border-radius: 4px;
+  background:var(--text-secondary);
+  border-radius:4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--text-primary);
+  background:var(--text-primary);
 }
-
 .chart-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 1rem;
-    position: relative;
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  padding:1rem;
+  position:relative;
 }
-
 .chart-title {
-    white-space: nowrap;
-    color: var(--text-primary);
-    font-family: Montserrat;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
+  white-space:nowrap;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
-
 .chart-averages {
-    display: flex;
-    gap: 1rem;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
+  display:flex;
+  gap:1rem;
+  position:absolute;
+  top:1rem;
+  right:1rem;
 }
-
 .average-circle {
-    display: flex;
-    width: 48px;
-    height: 26px;
-    padding: 6px 8px;
-    justify-content: center;
-    align-items: center;
-    gap: 14px;
-    border-radius: 16px;
+  display:flex;
+  width:48px;
+  height:26px;
+  padding:6px 8px;
+  justify-content:center;
+  align-items:center;
+  gap:14px;
+  border-radius:16px;
 }
-.average-circle[data-grade="1"],
-.my-average[data-grade="1"] {
-    background-color: var(--grades-background-1);
-    color: var(--grades-1);
+.average-circle[data-grade="1"],.my-average[data-grade="1"] {
+  background-color:var(--grades-background-1);
+  color:var(--grades-1);
 }
 .class-average[data-grade="1"] {
-    background-color: transparent;
-    border: 2px solid var(--grades-1);
-    color: var(--grades-1);
+  background-color:transparent;
+  border:2px solid var(--grades-1);
+  color:var(--grades-1);
 }
-
-.average-circle[data-grade="2"],
-.my-average[data-grade="2"] {
-    background-color: var(--grades-background-2);
-    color: var(--grades-2);
+.average-circle[data-grade="2"],.my-average[data-grade="2"] {
+  background-color:var(--grades-background-2);
+  color:var(--grades-2);
 }
 .class-average[data-grade="2"] {
-    background-color: transparent;
-    border: 2px solid var(--grades-2);
-    color: var(--grades-2);
+  background-color:transparent;
+  border:2px solid var(--grades-2);
+  color:var(--grades-2);
 }
-
-.average-circle[data-grade="3"],
-.my-average[data-grade="3"] {
-    background-color: var(--grades-background-3);
-    color: var(--grades-3);
+.average-circle[data-grade="3"],.my-average[data-grade="3"] {
+  background-color:var(--grades-background-3);
+  color:var(--grades-3);
 }
 .class-average[data-grade="3"] {
-    background-color: transparent;
-    border: 2px solid var(--grades-3);
-    color: var(--grades-3);
+  background-color:transparent;
+  border:2px solid var(--grades-3);
+  color:var(--grades-3);
 }
-
-.average-circle[data-grade="4"],
-.my-average[data-grade="4"] {
-    background-color: var(--grades-background-4);
-    color: var(--grades-4);
+.average-circle[data-grade="4"],.my-average[data-grade="4"] {
+  background-color:var(--grades-background-4);
+  color:var(--grades-4);
 }
 .class-average[data-grade="4"] {
-    background-color: transparent;
-    border: 2px solid var(--grades-4);
-    color: var(--grades-4);
+  background-color:transparent;
+  border:2px solid var(--grades-4);
+  color:var(--grades-4);
 }
-
-.average-circle[data-grade="5"],
-.my-average[data-grade="5"] {
-    background-color: var(--grades-background-5);
-    color: var(--grades-5);
+.average-circle[data-grade="5"],.my-average[data-grade="5"] {
+  background-color:var(--grades-background-5);
+  color:var(--grades-5);
 }
 .class-average[data-grade="5"] {
-    background-color: transparent;
-    border: 2px solid var(--grades-5);
-    color: var(--grades-5);
+  background-color:transparent;
+  border:2px solid var(--grades-5);
+  color:var(--grades-5);
 }
 .average-circle .average-label {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
+  font-size:0.75rem;
+  color:var(--text-secondary);
 }
-
 .average-circle .average-value {
-    text-align: center;
-    font-family: Figtree;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 130%;
+  text-align:center;
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .grade-distribution {
-    display: flex;
-    gap: 1rem;
-    padding: 1rem;
+  display:flex;
+  gap:1rem;
+  padding:1rem;
 }
-
 .grade-count {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 8px 4px 4px;
-    border-radius: 16px;
-    border: 1px solid var(--accent-15);
+  display:flex;
+  align-items:center;
+  gap:6px;
+  padding:4px 8px 4px 4px;
+  border-radius:16px;
+  border:1px solid var(--accent-15);
 }
-
 .grade-count .grade-value {
-    font-weight: 700;
-    text-align: center;
-    font-family: Montserrat;
-    font-size: 18px;
-    font-style: normal;
-    line-height: 130%;
+  font-weight:700;
+  text-align:center;
+  font-family:Montserrat;
+  font-size:18px;
+  font-style:normal;
+  line-height:130%;
 }
 .grade-count .grade-amount {
-    color: var(--text-primary);
-    text-align: center;
-    font-family: Montserrat;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 130%;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:14px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
+}
+.grade-count.grade-1 {
+  color:var(--grades-1);
+}
+.grade-count.grade-2 {
+  color:var(--grades-2);
+}
+.grade-count.grade-3 {
+  color:var(--grades-3);
+}
+.grade-count.grade-4 {
+  color:var(--grades-4);
+}
+.grade-count.grade-5 {
+  color:var(--grades-5);
 }
-
-.grade-count.grade-1 { color: var(--grades-1); }
-.grade-count.grade-2 { color: var(--grades-2); }
-.grade-count.grade-3 { color: var(--grades-3); }
-.grade-count.grade-4 { color: var(--grades-4); }
-.grade-count.grade-5 { color: var(--grades-5); }
-
 .grades-overview {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    margin-bottom: 2rem;
-    align-items: stretch;
-    overflow-y: auto;
+  display:grid;
+  grid-template-columns:1fr auto;
+  margin-bottom:2rem;
+  align-items:stretch;
+  overflow-y:auto;
 }
 .semester-grades {
-    width: 300px;
-    height: 400px;
-    padding: 1.5rem;
-    background: var(--card-card);
-    border-radius: 24px;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-    display: flex;
-    flex-direction: column;
+  width:300px;
+  height:400px;
+  padding:1.5rem;
+  background:var(--card-card);
+  border-radius:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  display:flex;
+  flex-direction:column;
 }
 .semester-grades h3 {
-    padding: 1rem;
-    margin-bottom: 0px !important;
-    margin-top: 0px !important;
-    color: var(--text-primary);
-    font-family: Montserrat;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
+  padding:1rem;
+  margin-bottom:0px !important;
+  margin-top:0px !important;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
 .semester-grade-item {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1rem;
-    padding: 1rem;
-    border-radius: 12px;
-    align-items: center;
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  gap:1rem;
+  padding:1rem;
+  border-radius:12px;
+  align-items:center;
 }
 .semester-grade-item:hover {
-    background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
 .semester-grades-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    overflow-y: auto;
-    padding-right: 0.5rem;
-    flex: 1;
-    margin: -0.5rem 0;
+  display:flex;
+  flex-direction:column;
+  gap:1rem;
+  overflow-y:auto;
+  padding-right:0.5rem;
+  flex:1;
+  margin:-0.5rem 0;
 }
 .semester-grade-subject {
-    overflow: hidden;
-    color: var(--text-primary);
-    text-overflow: ellipsis;
-    font-family: Figtree;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 130%;
+  overflow:hidden;
+  color:var(--text-primary);
+  text-overflow:ellipsis;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:130%;
 }
 .semester-grade-value {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 16px;
-    font-weight: 700;
-    font-size: 22px;
+  width:32px;
+  height:32px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:16px;
+  font-weight:700;
+  font-size:22px;
 }
-.semester-grade-item.grade-1 .semester-grade-value { 
-    background-color: var(--grades-background-1);
-    color: var(--grades-1); 
+.semester-grade-item.grade-1 .semester-grade-value {
+  background-color:var(--grades-background-1);
+  color:var(--grades-1);
 }
-.semester-grade-item.grade-2 .semester-grade-value { 
-    background-color: var(--grades-background-2);
-    color: var(--grades-2); 
+.semester-grade-item.grade-2 .semester-grade-value {
+  background-color:var(--grades-background-2);
+  color:var(--grades-2);
 }
-.semester-grade-item.grade-3 .semester-grade-value { 
-    background-color: var(--grades-background-3);
-    color: var(--grades-3); 
+.semester-grade-item.grade-3 .semester-grade-value {
+  background-color:var(--grades-background-3);
+  color:var(--grades-3);
 }
-.semester-grade-item.grade-4 .semester-grade-value { 
-    background-color: var(--grades-background-4);
-    color: var(--grades-4); 
+.semester-grade-item.grade-4 .semester-grade-value {
+  background-color:var(--grades-background-4);
+  color:var(--grades-4);
 }
-.semester-grade-item.grade-5 .semester-grade-value { 
-    background-color: var(--grades-background-5);
-    color: var(--grades-5); 
+.semester-grade-item.grade-5 .semester-grade-value {
+  background-color:var(--grades-background-5);
+  color:var(--grades-5);
 }
-
 .year-end-grades {
-    width: 300px;
-    height: 400px;
-    padding: 1.5rem;
-    background: var(--card-card);
-    border-radius: 24px;
-    box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-    display: flex;
-    flex-direction: column;
+  width:300px;
+  height:400px;
+  padding:1.5rem;
+  background:var(--card-card);
+  border-radius:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  display:flex;
+  flex-direction:column;
 }
 .year-end-grades h3 {
-    padding: 1rem;
-    margin-bottom: 0px !important;
-    margin-top: 0px !important;
-    color: var(--text-primary);
-    font-family: Montserrat;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
+  padding:1rem;
+  margin-bottom:0px !important;
+  margin-top:0px !important;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
 .year-end-grade-item {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1rem;
-    padding: 1rem;
-    border-radius: 12px;
-    align-items: center;
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  gap:1rem;
+  padding:1rem;
+  border-radius:12px;
+  align-items:center;
 }
 .year-end-grade-item:hover {
-    background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
 .year-end-grades-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    overflow-y: auto;
-    padding-right: 0.5rem;
-    flex: 1;
-    margin: -0.5rem 0;
+  display:flex;
+  flex-direction:column;
+  gap:1rem;
+  overflow-y:auto;
+  padding-right:0.5rem;
+  flex:1;
+  margin:-0.5rem 0;
 }
 .year-end-grade-subject {
-    overflow: hidden;
-    color: var(--text-primary);
-    text-overflow: ellipsis;
-    font-family: Figtree;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 130%;
+  overflow:hidden;
+  color:var(--text-primary);
+  text-overflow:ellipsis;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:130%;
 }
 .year-end-grade-value {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 16px;
-    font-weight: 700;
-    font-size: 22px;
+  width:32px;
+  height:32px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:16px;
+  font-weight:700;
+  font-size:22px;
 }
-.year-end-grade-item.grade-1 .year-end-grade-value { 
-    background-color: var(--grades-background-1);
-    color: var(--grades-1); 
+.year-end-grade-item.grade-1 .year-end-grade-value {
+  background-color:var(--grades-background-1);
+  color:var(--grades-1);
 }
-.year-end-grade-item.grade-2 .year-end-grade-value { 
-    background-color: var(--grades-background-2);
-    color: var(--grades-2); 
+.year-end-grade-item.grade-2 .year-end-grade-value {
+  background-color:var(--grades-background-2);
+  color:var(--grades-2);
 }
-.year-end-grade-item.grade-3 .year-end-grade-value { 
-    background-color: var(--grades-background-3);
-    color: var(--grades-3); 
+.year-end-grade-item.grade-3 .year-end-grade-value {
+  background-color:var(--grades-background-3);
+  color:var(--grades-3);
 }
-.year-end-grade-item.grade-4 .year-end-grade-value { 
-    background-color: var(--grades-background-4);
-    color: var(--grades-4); 
+.year-end-grade-item.grade-4 .year-end-grade-value {
+  background-color:var(--grades-background-4);
+  color:var(--grades-4);
 }
-.year-end-grade-item.grade-5 .year-end-grade-value { 
-    background-color: var(--grades-background-5);
-    color: var(--grades-5); 
+.year-end-grade-item.grade-5 .year-end-grade-value {
+  background-color:var(--grades-background-5);
+  color:var(--grades-5);
 }
-
 .year-end-grade {
-    border: 2px solid var(--accent-primary) !important;
-    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2) !important;
+  border:2px solid var(--accent-primary) !important;
+  box-shadow:0 0 0 2px rgba(var(--accent-primary-rgb),0.2) !important;
 }
-
-@media (max-width: 1200px) {
-    .chart-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1rem;
-    }
-    
-    .chart-averages {
-        position: static;
-        align-self: flex-end;
-    }
-    
-    .grade-distribution {
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    
-    .grades-chart {
-        overflow-x: auto;
-    }
+@media (max-width:1200px) {
+  .chart-header {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:1rem;
 }
-
-@media (max-width: 1024px) {
-    .grades-overview {
-        grid-template-columns: 1fr;
-    }
-    
-    .semester-grades {
-        width: 100%;
-        height: auto;
-        max-height: 400px;
-    }
-    
-    .year-end-grades {
-        width: 100%;
-        height: auto;
-        max-height: 400px;
-    }
-
-    .overall-averages {
-        width: 100%;
-    }
+.chart-averages {
+  position:static;
+  align-self:flex-end;
+}
+.grade-distribution {
+  flex-wrap:wrap;
+  justify-content:center;
+}
+.grades-chart {
+  overflow-x:auto;
+}
+}@media (max-width:1024px) {
+  .grades-overview {
+  grid-template-columns:1fr;
+}
+.semester-grades {
+  width:100%;
+  height:auto;
+  max-height:400px;
+}
+.year-end-grades {
+  width:100%;
+  height:auto;
+  max-height:400px;
+}
+.overall-averages {
+  width:100%;
+}
+}@media (max-width:768px) {
+  .grades-chart {
+  height:250px;
+  padding:0.75rem;
+  margin-bottom:1rem;
+}
+.chart-header {
+  padding:0.75rem;
+}
+.chart-averages {
+  gap:0.5rem;
+}
+.average-circle {
+  width:40px;
+  height:22px;
+  padding:4px 6px;
+}
+.average-circle .average-value {
+  font-size:12px;
+}
+.grade-distribution {
+  gap:0.5rem;
+  padding:0.75rem;
+  overflow-x:auto;
+  flex-wrap:nowrap;
+}
+.grade-count {
+  padding:3px 6px 3px 3px;
+  flex-shrink:0;
+}
+.grade-count .grade-value {
+  font-size:16px;
+}
+.grade-count .grade-amount {
+  font-size:12px;
+}
+.semester-grades {
+  padding:1rem;
+  width:100%;
+  min-width:0;
+}
+.semester-grades h3 {
+  padding:0.5rem;
+  font-size:14px;
+}
+.semester-grade-item {
+  padding:0.75rem;
+  gap:0.75rem;
+}
+.semester-grade-value {
+  width:28px;
+  height:28px;
+  font-size:18px;
+}
+.semester-grade-subject {
+  font-size:14px;
+}
+.year-end-grades {
+  padding:1rem;
+  width:100%;
+  min-width:0;
+}
+.year-end-grades h3 {
+  padding:0.5rem;
+  font-size:14px;
+}
+.year-end-grade-item {
+  padding:0.75rem;
+  gap:0.75rem;
+}
+.year-end-grade-value {
+  width:28px;
+  height:28px;
+  font-size:18px;
+}
+.year-end-grade-subject {
+  font-size:14px;
+}
+.overall-averages {
+  padding:1rem;
+  overflow-x:auto;
+}
+}@media (max-width:480px) {
+  .grades-chart {
+  height:180px;
+  padding:0.5rem;
+}
+.chart-header {
+  padding:0.5rem;
+  flex-direction:column;
+  align-items:stretch;
+}
+.chart-averages {
+  gap:0.25rem;
+}
+.average-circle {
+  width:36px;
+  height:20px;
+  padding:2px 4px;
+}
+.average-circle .average-value {
+  font-size:11px;
+}
+.grade-distribution {
+  padding:0.5rem;
+  gap:0.25rem;
+}
+.semester-grades {
+  padding:0.75rem;
+}
+.year-end-grades {
+  padding:0.75rem;
+}
+.overall-averages {
+  padding:0.75rem;
+}
+.grades-overview {
+  gap:1rem;
+  margin-bottom:1rem;
 }
-
-@media (max-width: 768px) {
-    .grades-chart {
-        height: 250px;
-        padding: 0.75rem;
-        margin-bottom: 1rem;
-    }
-    
-    .chart-header {
-        padding: 0.75rem;
-    }
-    
-    .chart-averages {
-        gap: 0.5rem;
-    }
-    
-    .average-circle {
-        width: 40px;
-        height: 22px;
-        padding: 4px 6px;
-    }
-    
-    .average-circle .average-value {
-        font-size: 12px;
-    }
-    
-    .grade-distribution {
-        gap: 0.5rem;
-        padding: 0.75rem;
-        overflow-x: auto;
-        flex-wrap: nowrap;
-    }
-    
-    .grade-count {
-        padding: 3px 6px 3px 3px;
-        flex-shrink: 0;
-    }
-    
-    .grade-count .grade-value {
-        font-size: 16px;
-    }
-    
-    .grade-count .grade-amount {
-        font-size: 12px;
-    }
-    
-    .semester-grades {
-        padding: 1rem;
-        width: 100%;
-        min-width: 0;
-    }
-    
-    .semester-grades h3 {
-        padding: 0.5rem;
-        font-size: 14px;
-    }
-    
-    .semester-grade-item {
-        padding: 0.75rem;
-        gap: 0.75rem;
-    }
-    
-    .semester-grade-value {
-        width: 28px;
-        height: 28px;
-        font-size: 18px;
-    }
-    
-    .semester-grade-subject {
-        font-size: 14px;
-    }
-    
-    .year-end-grades {
-        padding: 1rem;
-        width: 100%;
-        min-width: 0;
-    }
-    
-    .year-end-grades h3 {
-        padding: 0.5rem;
-        font-size: 14px;
-    }
-    
-    .year-end-grade-item {
-        padding: 0.75rem;
-        gap: 0.75rem;
-    }
-    
-    .year-end-grade-value {
-        width: 28px;
-        height: 28px;
-        font-size: 18px;
-    }
-    
-    .year-end-grade-subject {
-        font-size: 14px;
-    }
-    
-    .overall-averages {
-         padding: 1rem;
-         overflow-x: auto;
-     }
- }
-
-@media (max-width: 480px) {
-    .grades-chart {
-        height: 180px;
-        padding: 0.5rem;
-    }
-    
-    .chart-header {
-        padding: 0.5rem;
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .chart-averages {
-        gap: 0.25rem;
-    }
-    
-    .average-circle {
-        width: 36px;
-        height: 20px;
-        padding: 2px 4px;
-    }
-    
-    .average-circle .average-value {
-        font-size: 11px;
-    }
-    
-    .grade-distribution {
-        padding: 0.5rem;
-        gap: 0.25rem;
-    }
-    
-    .semester-grades {
-        padding: 0.75rem;
-    }
-    
-    .year-end-grades {
-        padding: 0.75rem;
-    }
-    
-    .overall-averages {
-        padding: 0.75rem;
-    }
-    
-    .grades-overview {
-        gap: 1rem;
-        margin-bottom: 1rem;
-    }
 }
\ No newline at end of file
diff --git a/grades/grades.js b/grades/grades.js
index dbf44d6..2e6f3c0 100644
--- a/grades/grades.js
+++ b/grades/grades.js
@@ -1,290 +1,352 @@
 (() => {
-    async function transformGradesPage() {
-        try {
-            const tanuloIdElement = document.querySelector('#TanuloId');
-            const tanuloId = tanuloIdElement ? tanuloIdElement.value : '772481';
-            
-            const gradesData = await fetchGradesFromAPI(tanuloId);
-            const studentAverage = calculateOverallAverage(gradesData.subjects);
-            const classAverage = calculateOverallClassAverage(gradesData.subjects);
+  async function transformGradesPage() {
+    try {
+      const tanuloIdElement = document.querySelector("#TanuloId");
+      const tanuloId = tanuloIdElement ? tanuloIdElement.value : "772481";
 
-            window.currentGradesData = gradesData;
+      const gradesData = await fetchGradesFromAPI(tanuloId);
+      const studentAverage = calculateOverallAverage(gradesData.subjects);
+      const classAverage = calculateOverallClassAverage(gradesData.subjects);
 
-            document.body.innerHTML = generatePageHTML(gradesData, studentAverage, classAverage);
+      window.currentGradesData = gradesData;
 
-            createTemplate.importFonts();
-            setupUserDropdown();
-            setupMobileNavigation();
+      document.body.innerHTML = generatePageHTML(
+        gradesData,
+        studentAverage,
+        classAverage,
+      );
 
-            const script = document.createElement('script');
-            script.src = chrome.runtime.getURL('grades/chart.js');
-            document.head.appendChild(script);
+      
+      setupUserDropdown();
+      setupMobileNavigation();
 
-            script.onload = () => {
-                setupGradesChart(gradesData.subjects);
-            };
+      const script = document.createElement("script");
+      script.src = chrome.runtime.getURL("grades/chart.js");
+      document.head.appendChild(script);
 
-            setupEventListeners();
-            setupGradesListScrolling();
-            loadingScreen.hide();
+      script.onload = () => {
+        setupGradesChart(gradesData.subjects);
+      };
 
-        } catch (error) {
-            console.error('Error loading grades:', error);
-            loadingScreen.hide();
-        }
+      setupEventListeners();
+      setupGradesListScrolling();
+      loadingScreen.hide();
+    } catch (error) {
+      console.error("Error loading grades:", error);
+      loadingScreen.hide();
+    }
+  }
+
+  async function fetchGradesFromAPI(tanuloId) {
+    try {
+      const currentDomain = window.location.origin;
+      const apiUrl = `${currentDomain}/api/TanuloErtekelesByTanuloApi/GetTanuloErtekelesByTanuloGridTanuloView?sort=&group=&filter=&data=%7B%22tanuloId%22%3A%22${tanuloId}%22%2C%22oktatasiNevelesiFeladatId%22%3A%227895%22%2C%22isOsztalyAtlagMegjelenik%22%3A%22True%22%7D&_=${Date.now()}`;
+
+      const response = await fetch(apiUrl, {
+        method: "GET",
+        credentials: "include",
+        headers: {
+          Accept: "application/json, text/javascript, */*; q=0.01",
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return processAPIGradesData(data);
+    } catch (error) {
+      console.error("Error fetching grades from API:", error);
+      return extractGradesDataFromDOM();
+    }
+  }
+
+  function processAPIGradesData(apiData) {
+    const subjects = [];
+
+    if (!apiData.Data || !Array.isArray(apiData.Data)) {
+      return {
+        schoolInfo: {
+          id: cookieManager.get("schoolCode") || "",
+          name: cookieManager.get("schoolName") || "Iskola",
+        },
+        userData: {
+          name: cookieManager.get("userName") || "Felhasználó",
+          time:
+            document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+            "45:00",
+        },
+        subjects: [],
+      };
     }
 
-    async function fetchGradesFromAPI(tanuloId) {
-        try {
-            const currentDomain = window.location.origin;
-            const apiUrl = `${currentDomain}/api/TanuloErtekelesByTanuloApi/GetTanuloErtekelesByTanuloGridTanuloView?sort=&group=&filter=&data=%7B%22tanuloId%22%3A%22${tanuloId}%22%2C%22oktatasiNevelesiFeladatId%22%3A%227895%22%2C%22isOsztalyAtlagMegjelenik%22%3A%22True%22%7D&_=${Date.now()}`;
-            
-            const response = await fetch(apiUrl, {
-                method: 'GET',
-                credentials: 'include',
-                headers: {
-                    'Accept': 'application/json, text/javascript, */*; q=0.01',
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            const data = await response.json();
-            return processAPIGradesData(data);
-        } catch (error) {
-            console.error('Error fetching grades from API:', error);
-            return extractGradesDataFromDOM();
-        }
-    }
-
-    function processAPIGradesData(apiData) {
-        const subjects = [];
-        
-        if (!apiData.Data || !Array.isArray(apiData.Data)) {
-            return {
-                schoolInfo: {
-                    id: cookieManager.get('schoolCode') || '',
-                    name: cookieManager.get('schoolName') || 'Iskola'
-                },
-                userData: {
-                    name: cookieManager.get('userName') || 'Felhasználó',
-                    time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
-                },
-                subjects: []
-            };
-        }
-
-        apiData.Data.forEach(subject => {
-            if (subject.TantargyNev && subject.TantargyNev !== 'Magatartás/Szorgalom') {
-                const grades = [];
-                const monthFields = [
-                    'Szeptember', 'Oktober', 'November', 'December', 
-                    'JanuarI', 'I', 'JanuarII', 'Februar', 'Marcius', 
-                    'Aprilis', 'Majus', 'Junius', 'Julius', 'Augusztus', 'II'
-                ];
-
-                monthFields.forEach(month => {
-                    const monthData = subject[month];
-                    if (monthData && monthData.trim() !== '') {
-                        const gradeMatches = monthData.match(/<span[^>]*data-tanuloertekelesid[^>]*>([^<]+)<\/span>/g);
-                        if (gradeMatches) {
-                            gradeMatches.forEach(gradeHtml => {
-                                const gradeValue = gradeHtml.match(/>([^<]+)<\/span>/)?.[1]?.trim();
-                                if (gradeValue && gradeValue !== '-' && !gradeValue.includes('%')) {
-                                    const dateMatch = gradeHtml.match(/data-datum='([^']*)'/);
-                                    const typeMatch = gradeHtml.match(/data-tipusmod='([^']*)'/);
-                                    const themeMatch = gradeHtml.match(/data-ertekelestema='([^']*)'/);
-                                    const weightMatch = gradeHtml.match(/data-suly='([^']*)'/);
-                                    const teacherMatch = gradeHtml.match(/data-ertekelonyomtatasinev='([^']*)'/);
-
-                                    const theme = themeMatch ? themeMatch[1].replace('Téma: ', '').replace(/&#\d+;/g, (match) => {
-                                        const code = match.match(/\d+/)[0];
-                                        return String.fromCharCode(code);
-                                    }) : '';
-
-                                    const teacher = teacherMatch ? teacherMatch[1].replace(/&#\d+;/g, (match) => {
-                                        const code = match.match(/\d+/)[0];
-                                        return String.fromCharCode(code);
-                                    }) : '';
-
-                                    const type = typeMatch ? typeMatch[1].replace(/&#\d+;/g, (match) => {
-                                        const code = match.match(/\d+/)[0];
-                                        return String.fromCharCode(code);
-                                    }) : '';
-
-                                    grades.push({
-                                        value: gradeValue,
-                                        date: dateMatch ? dateMatch[1] : '',
-                                        type: type,
-                                        theme: theme,
-                                        weight: weightMatch ? weightMatch[1] : '',
-                                        teacher: teacher,
-                                        isSemesterGrade: type.toLowerCase().includes('félévi') ||
-                                            theme.toLowerCase().includes('félévi'),
-                                        isYearEndGrade: type.toLowerCase().includes('évvégi') ||
-                                            theme.toLowerCase().includes('évvégi') ||
-                                            type.toLowerCase().includes('év végi') ||
-                                            theme.toLowerCase().includes('év végi')
-                                    });
-                                }
-                            });
-                        }
-                    }
-                });
-
-                if (grades.length > 0) {
-                    subjects.push({
-                        name: subject.TantargyNev,
-                        grades: grades,
-                        average: subject.Atlag || 0,
-                        classAverage: subject.OsztalyAtlag || 0
-                    });
-                }
-            }
-        });
-
-        return {
-            schoolInfo: {
-                id: cookieManager.get('schoolCode') || '',
-                name: cookieManager.get('schoolName') || 'Iskola'
-            },
-            userData: {
-                name: cookieManager.get('userName') || 'Felhasználó',
-                time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
-            },
-            subjects: subjects
-        };
-    }
-
-    function extractGradesDataFromDOM() {
-        const subjects = [];
-        const rows = document.querySelectorAll('#Osztalyzatok_7895TanuloErtekelesByTanuloGrid tbody tr');
-
-        rows.forEach(row => {
-            const cells = row.querySelectorAll('td');
-            if (cells.length >= 17) {
-                const subjectName = cells[2].textContent.trim();
-                if (subjectName && subjectName !== 'Magatartás/Szorgalom') {
-                    const grades = [];
-                    const months = [
-                        LanguageManager.t('grades.september'), 
-                        LanguageManager.t('grades.october'), 
-                        LanguageManager.t('grades.november'), 
-                        LanguageManager.t('grades.december'), 
-                        LanguageManager.t('grades.january_1'), 
-                        LanguageManager.t('grades.january_2'), 
-                        LanguageManager.t('grades.february'), 
-                        LanguageManager.t('grades.march'), 
-                        LanguageManager.t('grades.april'), 
-                        LanguageManager.t('grades.may'), 
-                        LanguageManager.t('grades.june_1'), 
-                        LanguageManager.t('grades.june_2')
-                    ];
-
-                    months.forEach((month, index) => {
-                        const gradeElements = cells[index + 3].querySelectorAll('span[data-tanuloertekelesid]');
-                        gradeElements.forEach(element => {
-                            const gradeText = element.textContent.trim();
-                            if (gradeText && gradeText !== '-' && !gradeText.includes('%')) {
-                                const type = element.getAttribute('data-tipusmod') || '';
-                                const theme = element.getAttribute('data-ertekelestema') || '';
-                                const dataType = element.getAttribute('data-tipus') || '';
-                                
-                                grades.push({
-                                    value: gradeText,
-                                    date: element.getAttribute('data-datum'),
-                                    type: type,
-                                    theme: theme.replace('Téma: ', ''),
-                                    weight: element.getAttribute('data-suly'),
-                                    teacher: element.getAttribute('data-ertekelonyomtatasinev'),
-                                    isSemesterGrade: type.toLowerCase().includes('félévi') ||
-                                        theme.toLowerCase().includes('félévi') ||
-                                        dataType.toLowerCase().includes('félévi'),
-                                    isYearEndGrade: type.toLowerCase().includes('évvégi') ||
-                                        theme.toLowerCase().includes('évvégi') ||
-                                        type.toLowerCase().includes('év végi') ||
-                                        theme.toLowerCase().includes('év végi') ||
-                                        dataType.toLowerCase().includes('évvégi') ||
-                                        dataType.toLowerCase().includes('év végi')
-                                });
-                            }
-                        });
-                    });
-
-                    const avgText = cells[16].textContent.trim();
-                    const classAvgText = cells[17].textContent.trim();
-
-                    const average = avgText !== '-' ? parseFloat(avgText.replace(',', '.')) : 0;
-                    const classAvg = classAvgText !== '-' ? parseFloat(classAvgText.replace(',', '.')) : 0;
-
-                    if (grades.length > 0) {
-                        subjects.push({
-                            name: subjectName,
-                            grades: grades,
-                            average: average || 0,
-                            classAverage: classAvg || 0
-                        });
-                    }
-                }
-            }
-        });
-
-        return {
-            schoolInfo: {
-                id: cookieManager.get('schoolCode') || '',
-                name: cookieManager.get('schoolName') || 'Iskola'
-            },
-            userData: {
-                name: cookieManager.get('userName') || 'Felhasználó',
-                time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
-            },
-            subjects: subjects
-        };
-    }
-
-    function calculateOverallAverage(subjects) {
-        const validSubjects = subjects.filter(s => s.average > 0);
-        if (validSubjects.length === 0) return 0;
-
-        return validSubjects.reduce((sum, s) => sum + s.average, 0) / validSubjects.length;
-    }
-
-    function calculateOverallClassAverage(subjects) {
-        const validSubjects = subjects.filter(s => s.classAverage > 0);
-        if (validSubjects.length === 0) return 0;
-        return validSubjects.reduce((sum, s) => sum + s.classAverage, 0) / validSubjects.length;
-    }
-
-    function shortenEvaluationName(name, maxLength = 30) {
-        if (!name) return '';
-        if (name.length <= maxLength) return name;
-        return name.substring(0, maxLength - 3) + '...';
-    }
-
-    function generateGradeItem(grade) {
-        const semesterClass = grade.isSemesterGrade ? 'semester-grade' : '';
-        const yearEndClass = grade.isYearEndGrade ? 'year-end-grade' : '';
-        const dateObj = new Date(grade.date);
-        const monthNames = [
-            LanguageManager.t('months.january'), 
-            LanguageManager.t('months.february'), 
-            LanguageManager.t('months.march'), 
-            LanguageManager.t('months.april'), 
-            LanguageManager.t('months.may'), 
-            LanguageManager.t('months.june'), 
-            LanguageManager.t('months.july'), 
-            LanguageManager.t('months.august'), 
-            LanguageManager.t('months.september'), 
-            LanguageManager.t('months.october'), 
-            LanguageManager.t('months.november'), 
-            LanguageManager.t('months.december')
+    apiData.Data.forEach((subject) => {
+      if (
+        subject.TantargyNev &&
+        subject.TantargyNev !== "Magatartás/Szorgalom"
+      ) {
+        const grades = [];
+        const monthFields = [
+          "Szeptember",
+          "Oktober",
+          "November",
+          "December",
+          "JanuarI",
+          "I",
+          "JanuarII",
+          "Februar",
+          "Marcius",
+          "Aprilis",
+          "Majus",
+          "Junius",
+          "Julius",
+          "Augusztus",
+          "II",
         ];
-        const formattedDate = `${monthNames[dateObj.getMonth()]} ${dateObj.getDate()}`;
-        const shortenedTheme = shortenEvaluationName(grade.theme);
-        return `
+
+        monthFields.forEach((month) => {
+          const monthData = subject[month];
+          if (monthData && monthData.trim() !== "") {
+            const gradeMatches = monthData.match(
+              /<span[^>]*data-tanuloertekelesid[^>]*>([^<]+)<\/span>/g,
+            );
+            if (gradeMatches) {
+              gradeMatches.forEach((gradeHtml) => {
+                const gradeValue = gradeHtml
+                  .match(/>([^<]+)<\/span>/)?.[1]
+                  ?.trim();
+                if (
+                  gradeValue &&
+                  gradeValue !== "-" &&
+                  !gradeValue.includes("%")
+                ) {
+                  const dateMatch = gradeHtml.match(/data-datum='([^']*)'/);
+                  const typeMatch = gradeHtml.match(/data-tipusmod='([^']*)'/);
+                  const themeMatch = gradeHtml.match(
+                    /data-ertekelestema='([^']*)'/,
+                  );
+                  const weightMatch = gradeHtml.match(/data-suly='([^']*)'/);
+                  const teacherMatch = gradeHtml.match(
+                    /data-ertekelonyomtatasinev='([^']*)'/,
+                  );
+
+                  const theme = themeMatch
+                    ? themeMatch[1]
+                        .replace("Téma: ", "")
+                        .replace(/&#\d+;/g, (match) => {
+                          const code = match.match(/\d+/)[0];
+                          return String.fromCharCode(code);
+                        })
+                    : "";
+
+                  const teacher = teacherMatch
+                    ? teacherMatch[1].replace(/&#\d+;/g, (match) => {
+                        const code = match.match(/\d+/)[0];
+                        return String.fromCharCode(code);
+                      })
+                    : "";
+
+                  const type = typeMatch
+                    ? typeMatch[1].replace(/&#\d+;/g, (match) => {
+                        const code = match.match(/\d+/)[0];
+                        return String.fromCharCode(code);
+                      })
+                    : "";
+
+                  grades.push({
+                    value: gradeValue,
+                    date: dateMatch ? dateMatch[1] : "",
+                    type: type,
+                    theme: theme,
+                    weight: weightMatch ? weightMatch[1] : "",
+                    teacher: teacher,
+                    isSemesterGrade:
+                      type.toLowerCase().includes("félévi") ||
+                      theme.toLowerCase().includes("félévi"),
+                    isYearEndGrade:
+                      type.toLowerCase().includes("évvégi") ||
+                      theme.toLowerCase().includes("évvégi") ||
+                      type.toLowerCase().includes("év végi") ||
+                      theme.toLowerCase().includes("év végi"),
+                  });
+                }
+              });
+            }
+          }
+        });
+
+        if (grades.length > 0) {
+          subjects.push({
+            name: subject.TantargyNev,
+            grades: grades,
+            average: subject.Atlag || 0,
+            classAverage: subject.OsztalyAtlag || 0,
+          });
+        }
+      }
+    });
+
+    return {
+      schoolInfo: {
+        id: cookieManager.get("schoolCode") || "",
+        name: cookieManager.get("schoolName") || "Iskola",
+      },
+      userData: {
+        name: cookieManager.get("userName") || "Felhasználó",
+        time:
+          document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+          "45:00",
+      },
+      subjects: subjects,
+    };
+  }
+
+  function extractGradesDataFromDOM() {
+    const subjects = [];
+    const rows = document.querySelectorAll(
+      "#Osztalyzatok_7895TanuloErtekelesByTanuloGrid tbody tr",
+    );
+
+    rows.forEach((row) => {
+      const cells = row.querySelectorAll("td");
+      if (cells.length >= 17) {
+        const subjectName = cells[2].textContent.trim();
+        if (subjectName && subjectName !== "Magatartás/Szorgalom") {
+          const grades = [];
+          const months = [
+            LanguageManager.t("grades.september"),
+            LanguageManager.t("grades.october"),
+            LanguageManager.t("grades.november"),
+            LanguageManager.t("grades.december"),
+            LanguageManager.t("grades.january_1"),
+            LanguageManager.t("grades.january_2"),
+            LanguageManager.t("grades.february"),
+            LanguageManager.t("grades.march"),
+            LanguageManager.t("grades.april"),
+            LanguageManager.t("grades.may"),
+            LanguageManager.t("grades.june_1"),
+            LanguageManager.t("grades.june_2"),
+          ];
+
+          months.forEach((month, index) => {
+            const gradeElements = cells[index + 3].querySelectorAll(
+              "span[data-tanuloertekelesid]",
+            );
+            gradeElements.forEach((element) => {
+              const gradeText = element.textContent.trim();
+              if (gradeText && gradeText !== "-" && !gradeText.includes("%")) {
+                const type = element.getAttribute("data-tipusmod") || "";
+                const theme = element.getAttribute("data-ertekelestema") || "";
+                const dataType = element.getAttribute("data-tipus") || "";
+
+                grades.push({
+                  value: gradeText,
+                  date: element.getAttribute("data-datum"),
+                  type: type,
+                  theme: theme.replace("Téma: ", ""),
+                  weight: element.getAttribute("data-suly"),
+                  teacher: element.getAttribute("data-ertekelonyomtatasinev"),
+                  isSemesterGrade:
+                    type.toLowerCase().includes("félévi") ||
+                    theme.toLowerCase().includes("félévi") ||
+                    dataType.toLowerCase().includes("félévi"),
+                  isYearEndGrade:
+                    type.toLowerCase().includes("évvégi") ||
+                    theme.toLowerCase().includes("évvégi") ||
+                    type.toLowerCase().includes("év végi") ||
+                    theme.toLowerCase().includes("év végi") ||
+                    dataType.toLowerCase().includes("évvégi") ||
+                    dataType.toLowerCase().includes("év végi"),
+                });
+              }
+            });
+          });
+
+          const avgText = cells[16].textContent.trim();
+          const classAvgText = cells[17].textContent.trim();
+
+          const average =
+            avgText !== "-" ? parseFloat(avgText.replace(",", ".")) : 0;
+          const classAvg =
+            classAvgText !== "-"
+              ? parseFloat(classAvgText.replace(",", "."))
+              : 0;
+
+          if (grades.length > 0) {
+            subjects.push({
+              name: subjectName,
+              grades: grades,
+              average: average || 0,
+              classAverage: classAvg || 0,
+            });
+          }
+        }
+      }
+    });
+
+    return {
+      schoolInfo: {
+        id: cookieManager.get("schoolCode") || "",
+        name: cookieManager.get("schoolName") || "Iskola",
+      },
+      userData: {
+        name: cookieManager.get("userName") || "Felhasználó",
+        time:
+          document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+          "45:00",
+      },
+      subjects: subjects,
+    };
+  }
+
+  function calculateOverallAverage(subjects) {
+    const validSubjects = subjects.filter((s) => s.average > 0);
+    if (validSubjects.length === 0) return 0;
+
+    return (
+      validSubjects.reduce((sum, s) => sum + s.average, 0) /
+      validSubjects.length
+    );
+  }
+
+  function calculateOverallClassAverage(subjects) {
+    const validSubjects = subjects.filter((s) => s.classAverage > 0);
+    if (validSubjects.length === 0) return 0;
+    return (
+      validSubjects.reduce((sum, s) => sum + s.classAverage, 0) /
+      validSubjects.length
+    );
+  }
+
+  function shortenEvaluationName(name, maxLength = 30) {
+    if (!name) return "";
+    if (name.length <= maxLength) return name;
+    return name.substring(0, maxLength - 3) + "...";
+  }
+
+  function generateGradeItem(grade) {
+    const semesterClass = grade.isSemesterGrade ? "semester-grade" : "";
+    const yearEndClass = grade.isYearEndGrade ? "year-end-grade" : "";
+    const dateObj = new Date(grade.date);
+    const monthNames = [
+      LanguageManager.t("months.january"),
+      LanguageManager.t("months.february"),
+      LanguageManager.t("months.march"),
+      LanguageManager.t("months.april"),
+      LanguageManager.t("months.may"),
+      LanguageManager.t("months.june"),
+      LanguageManager.t("months.july"),
+      LanguageManager.t("months.august"),
+      LanguageManager.t("months.september"),
+      LanguageManager.t("months.october"),
+      LanguageManager.t("months.november"),
+      LanguageManager.t("months.december"),
+    ];
+    const formattedDate = `${monthNames[dateObj.getMonth()]} ${dateObj.getDate()}`;
+    const shortenedTheme = shortenEvaluationName(grade.theme);
+    return `
       <div class="grade-item grade-${grade.value} ${semesterClass} ${yearEndClass}">
         <div class="grade-value">${grade.value}</div>
         <div class="grade-details">
@@ -294,34 +356,37 @@
         <div class="grade-date">${formattedDate}</div>
       </div>
     `;
-    }
+  }
 
-    function calculateGradeDistribution(subjects) {
-        const distribution = {1: 0, 2: 0, 3: 0, 4: 0, 5: 0};
-        subjects.forEach(subject => {
-            subject.grades.forEach(grade => {
-                const value = parseInt(grade.value);
-                if (value >= 1 && value <= 5 && !grade.value.includes('%')) {
-                    distribution[value]++;
-                }
-            });
-        });
-        return distribution;
-    }
+  function calculateGradeDistribution(subjects) {
+    const distribution = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+    subjects.forEach((subject) => {
+      subject.grades.forEach((grade) => {
+        const value = parseInt(grade.value);
+        if (value >= 1 && value <= 5 && !grade.value.includes("%")) {
+          distribution[value]++;
+        }
+      });
+    });
+    return distribution;
+  }
 
-    function generatePageHTML(data, studentAverage, classAverage) {
-        const totalGrades = data.subjects.reduce((sum, subject) => sum + subject.grades.length, 0);
-        const gradeDistribution = calculateGradeDistribution(data.subjects);
-        const semesterGrades = extractSemesterGrades(data.subjects);
-        const yearEndGrades = extractYearEndGrades(data.subjects);
+  function generatePageHTML(data, studentAverage, classAverage) {
+    const totalGrades = data.subjects.reduce(
+      (sum, subject) => sum + subject.grades.length,
+      0,
+    );
+    const gradeDistribution = calculateGradeDistribution(data.subjects);
+    const semesterGrades = extractSemesterGrades(data.subjects);
+    const yearEndGrades = extractYearEndGrades(data.subjects);
 
-        const studentGradeLevel = Math.floor(studentAverage) || 0;
-        const classGradeLevel = Math.floor(classAverage) || 0;
+    const studentGradeLevel = Math.floor(studentAverage) || 0;
+    const classGradeLevel = Math.floor(classAverage) || 0;
 
-        schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
-        shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
+    schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
+    shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
 
-        return `
+    return `
       <div class="kreta-container">
         ${createTemplate.header()}
 
@@ -329,16 +394,20 @@
           <div class="grades-overview">
             <div class="overall-averages card">
               <div class="chart-header">
-                <div class="chart-title">${LanguageManager.t('grades.chart_title')} (${totalGrades}db)</div>
+                <div class="chart-title">${LanguageManager.t("grades.chart_title")} (${totalGrades}db)</div>
                 <div class="chart-averages">
                   <div class="average-circle my-average" data-grade="${studentGradeLevel}">
-                    <span class="average-value ${studentAverage < 2 && studentAverage > 0 ? 'warning' : ''}">${studentAverage > 0 ? studentAverage.toFixed(2) : '-'}</span>
+                    <span class="average-value ${studentAverage < 2 && studentAverage > 0 ? "warning" : ""}">${studentAverage > 0 ? studentAverage.toFixed(2) : "-"}</span>
                   </div>
-                  ${classAverage > 0 ? `
+                  ${
+                    classAverage > 0
+                      ? `
                   <div class="average-circle class-average" data-grade="${classGradeLevel}">
                     <span class="average-value">${classAverage.toFixed(2)}</span>
                   </div>
-                  ` : ''}
+                  `
+                      : ""
+                  }
                 </div>
               </div>
               <div class="grades-chart">
@@ -346,29 +415,40 @@
               </div>
               <div class="grade-distribution">
                 ${Object.entries(gradeDistribution)
-                  .map(([grade, count]) => `
+                  .map(
+                    ([grade, count]) => `
                     <div class="grade-count grade-${grade}">
                       <span class="grade-value">${grade}</span>
                       <span class="grade-amount">${count}</span>
                     </div>
-                  `).join('')}
+                  `,
+                  )
+                  .join("")}
               </div>
             </div>
-            ${yearEndGrades.length > 0 ? `
+            ${
+              yearEndGrades.length > 0
+                ? `
                 <div class="year-end-grades card">
                     <div class="grades-summary-header">
-                        <h3>${LanguageManager.t('grades.year_end_evaluations')}</h3>
+                        <h3>${LanguageManager.t("grades.year_end_evaluations")}</h3>
                     </div>
                     <div class="year-end-grades-list">
-                        ${yearEndGrades.map(grade => `
+                        ${yearEndGrades
+                          .map(
+                            (grade) => `
                             <div class="year-end-grade-item grade-${grade.value}">
                                 <div class="year-end-grade-value">${grade.value}</div>
                                 <div class="year-end-grade-subject">${grade.subject}</div>
                             </div>
-                        `).join('')}
+                        `,
+                          )
+                          .join("")}
                     </div>
                 </div>
-            ` : ''}
+            `
+                : ""
+            }
           </div>
           <div class="grades-grid">
             ${generateSubjectCards(data.subjects)}
@@ -376,257 +456,330 @@
         </main>
       </div>
     `;
-    }
+  }
 
-    function extractSemesterGrades(subjects) {
-        const semesterGrades = [];
-        subjects.forEach(subject => {
-            const semesterGrade = subject.grades.find(grade => grade.isSemesterGrade);
-            if (semesterGrade) {
-                semesterGrades.push({
-                    subject: subject.name,
-                    value: semesterGrade.value,
-                    date: semesterGrade.date
-                });
-            }
+  function extractSemesterGrades(subjects) {
+    const semesterGrades = [];
+    subjects.forEach((subject) => {
+      const semesterGrade = subject.grades.find(
+        (grade) => grade.isSemesterGrade,
+      );
+      if (semesterGrade) {
+        semesterGrades.push({
+          subject: subject.name,
+          value: semesterGrade.value,
+          date: semesterGrade.date,
         });
-        return semesterGrades;
-    }
+      }
+    });
+    return semesterGrades;
+  }
 
-    function extractYearEndGrades(subjects) {
-        const yearEndGrades = [];
-        subjects.forEach(subject => {
-            const yearEndGrade = subject.grades.find(grade => grade.isYearEndGrade);
-            if (yearEndGrade) {
-                yearEndGrades.push({
-                    subject: subject.name,
-                    value: yearEndGrade.value,
-                    date: yearEndGrade.date
-                });
-            }
+  function extractYearEndGrades(subjects) {
+    const yearEndGrades = [];
+    subjects.forEach((subject) => {
+      const yearEndGrade = subject.grades.find((grade) => grade.isYearEndGrade);
+      if (yearEndGrade) {
+        yearEndGrades.push({
+          subject: subject.name,
+          value: yearEndGrade.value,
+          date: yearEndGrade.date,
         });
-        return yearEndGrades;
-    }
+      }
+    });
+    return yearEndGrades;
+  }
 
-    function calculateGradePoints(subjects) {
-        const allGrades = [];
+  function calculateGradePoints(subjects) {
+    const allGrades = [];
 
-        subjects.forEach(subject => {
-            subject.grades.forEach(grade => {
-                const date = new Date(grade.date);
-                const value = parseInt(grade.value);
-                const weight = parseInt(grade.weight?.match(/\d+/)?.[0] || '100') / 100;
-                if (date && value && weight && !grade.value.includes('%')) {
-                    allGrades.push({
-                        date,
-                        value,
-                        weight
-                    });
-                }
-            });
-        });
+    subjects.forEach((subject) => {
+      subject.grades.forEach((grade) => {
+        const date = new Date(grade.date);
+        const value = parseInt(grade.value);
+        const weight = parseInt(grade.weight?.match(/\d+/)?.[0] || "100") / 100;
+        if (date && value && weight && !grade.value.includes("%")) {
+          allGrades.push({
+            date,
+            value,
+            weight,
+          });
+        }
+      });
+    });
 
+    allGrades.sort((a, b) => a.date - b.date);
 
-        allGrades.sort((a, b) => a.date - b.date);
+    let totalWeight = 0;
+    let weightedSum = 0;
+    return allGrades.map((grade) => {
+      totalWeight += grade.weight;
+      weightedSum += grade.value * grade.weight;
+      return {
+        date: grade.date.toISOString(),
+        grade: grade.value,
+        average: weightedSum / totalWeight,
+      };
+    });
+  }
 
+  function setupGradesChart(subjects) {
+    const ctx = document.getElementById("gradesChart");
+    if (!ctx) return;
 
-        let totalWeight = 0;
-        let weightedSum = 0;
-        return allGrades.map(grade => {
-            totalWeight += grade.weight;
-            weightedSum += grade.value * grade.weight;
-            return {
-                date: grade.date.toISOString(),
-                grade: grade.value,
-                average: weightedSum / totalWeight
-            };
-        });
-    }
+    const gradePoints = calculateGradePoints(subjects);
 
-    function setupGradesChart(subjects) {
-        const ctx = document.getElementById('gradesChart');
-        if (!ctx) return;
-
-        const gradePoints = calculateGradePoints(subjects);
-
-        new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: gradePoints.map((_, index) => ''),
-                datasets: [{
-                    label: 'Átlag',
-                    data: gradePoints.map(p => p.average),
-                    borderWidth: 5,
-                    tension: 0.5,
-                    segment: {
-                        borderColor: ctx => {
-                            const curr = ctx.p1.parsed.y;
-                            if (!curr) return 'transparent';
-                            const color = getComputedStyle(document.documentElement).getPropertyValue(
-                                curr < 2 ? '--grades-1' :
-                                curr < 2.5 ? '--grades-2' :
-                                curr < 3.5 ? '--grades-3' :
-                                curr < 4.5 ? '--grades-4' : '--grades-5'
-                            ).trim() + '80';
-                            return color;
-                        }
-                    },
-                    fill: true,
-                    backgroundColor: function(context) {
-                        const chart = context.chart;
-                        const {ctx, chartArea} = chart;
-                        if (!chartArea) return null;
-
-                        const gradientBg = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
-
-
-                        gradientBg.addColorStop(0, getComputedStyle(document.documentElement).getPropertyValue('--grades-1').trim() + '30');
-                        gradientBg.addColorStop(0.2, getComputedStyle(document.documentElement).getPropertyValue('--grades-2').trim() + '30');
-                        gradientBg.addColorStop(0.4, getComputedStyle(document.documentElement).getPropertyValue('--grades-3').trim() + '30');
-                        gradientBg.addColorStop(0.6, getComputedStyle(document.documentElement).getPropertyValue('--grades-4').trim() + '30');
-                        gradientBg.addColorStop(0.8, getComputedStyle(document.documentElement).getPropertyValue('--grades-5').trim() + '30');
-
-                        return gradientBg;
-                    },
-                    pointBackgroundColor: context => {
-                        const value = context.raw;
-                        return getComputedStyle(document.documentElement).getPropertyValue(
-                            value < 2 ? '--grades-1' :
-                            value < 2.5 ? '--grades-2' :
-                            value < 3.5 ? '--grades-3' :
-                            value < 4.5 ? '--grades-4' : '--grades-5'
-                        ).trim();
-                    },
-                    pointRadius: 0,
-                    pointHoverRadius: 0
-                }]
+    new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: gradePoints.map((_, index) => ""),
+        datasets: [
+          {
+            label: "Átlag",
+            data: gradePoints.map((p) => p.average),
+            borderWidth: 5,
+            tension: 0.5,
+            segment: {
+              borderColor: (ctx) => {
+                const curr = ctx.p1.parsed.y;
+                if (!curr) return "transparent";
+                const color =
+                  getComputedStyle(document.documentElement)
+                    .getPropertyValue(
+                      curr < 2
+                        ? "--grades-1"
+                        : curr < 2.5
+                          ? "--grades-2"
+                          : curr < 3.5
+                            ? "--grades-3"
+                            : curr < 4.5
+                              ? "--grades-4"
+                              : "--grades-5",
+                    )
+                    .trim() + "80";
+                return color;
+              },
             },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    y: {
-                        min: 1,
-                        max: 5,
-                        ticks: {
-                            stepSize: 1,
-                            color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary')
-                        },
-                        grid: {
-                            color: getComputedStyle(document.documentElement).getPropertyValue('--text-teritary') + '20',
-                            lineWidth: 1,
-                            borderDash: [5, 5]
-                        }
-                    },
-                    x: {
-                        display: false
-                    }
-                },
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--card-card'),
-                        titleColor: getComputedStyle(document.documentElement).getPropertyValue('--text-primary'),
-                        bodyColor: getComputedStyle(document.documentElement).getPropertyValue('--text-primary'),
-                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--text-teritary') + '20',
-                        borderWidth: 1,
-                        padding: 12,
-                        displayColors: false,
-                        callbacks: {
-                            title: () => '',
-                            label: context => `Átlag: ${context.raw.toFixed(2)}`
-                        }
-                    }
-                }
-            }
-        });
-    }
+            fill: true,
+            backgroundColor: function (context) {
+              const chart = context.chart;
+              const { ctx, chartArea } = chart;
+              if (!chartArea) return null;
 
-    function generateSubjectCards(subjects) {
-        const sortedSubjects = [...subjects].sort((a, b) => a.grades.length - b.grades.length);
+              const gradientBg = ctx.createLinearGradient(
+                0,
+                chartArea.bottom,
+                0,
+                chartArea.top,
+              );
 
-        return sortedSubjects.map(subject => {
-            const regularGrades = subject.grades.filter(grade => !grade.isSemesterGrade).reverse();
-            const myGrade = Math.floor(subject.average) || 0;
-            const classGrade = Math.floor(subject.classAverage) || 0;
+              gradientBg.addColorStop(
+                0,
+                getComputedStyle(document.documentElement)
+                  .getPropertyValue("--grades-1")
+                  .trim() + "30",
+              );
+              gradientBg.addColorStop(
+                0.2,
+                getComputedStyle(document.documentElement)
+                  .getPropertyValue("--grades-2")
+                  .trim() + "30",
+              );
+              gradientBg.addColorStop(
+                0.4,
+                getComputedStyle(document.documentElement)
+                  .getPropertyValue("--grades-3")
+                  .trim() + "30",
+              );
+              gradientBg.addColorStop(
+                0.6,
+                getComputedStyle(document.documentElement)
+                  .getPropertyValue("--grades-4")
+                  .trim() + "30",
+              );
+              gradientBg.addColorStop(
+                0.8,
+                getComputedStyle(document.documentElement)
+                  .getPropertyValue("--grades-5")
+                  .trim() + "30",
+              );
 
-            return `
+              return gradientBg;
+            },
+            pointBackgroundColor: (context) => {
+              const value = context.raw;
+              return getComputedStyle(document.documentElement)
+                .getPropertyValue(
+                  value < 2
+                    ? "--grades-1"
+                    : value < 2.5
+                      ? "--grades-2"
+                      : value < 3.5
+                        ? "--grades-3"
+                        : value < 4.5
+                          ? "--grades-4"
+                          : "--grades-5",
+                )
+                .trim();
+            },
+            pointRadius: 0,
+            pointHoverRadius: 0,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            min: 1,
+            max: 5,
+            ticks: {
+              stepSize: 1,
+              color: getComputedStyle(
+                document.documentElement,
+              ).getPropertyValue("--text-secondary"),
+            },
+            grid: {
+              color:
+                getComputedStyle(document.documentElement).getPropertyValue(
+                  "--text-teritary",
+                ) + "20",
+              lineWidth: 1,
+              borderDash: [5, 5],
+            },
+          },
+          x: {
+            display: false,
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          tooltip: {
+            backgroundColor: getComputedStyle(
+              document.documentElement,
+            ).getPropertyValue("--card-card"),
+            titleColor: getComputedStyle(
+              document.documentElement,
+            ).getPropertyValue("--text-primary"),
+            bodyColor: getComputedStyle(
+              document.documentElement,
+            ).getPropertyValue("--text-primary"),
+            borderColor:
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--text-teritary",
+              ) + "20",
+            borderWidth: 1,
+            padding: 12,
+            displayColors: false,
+            callbacks: {
+              title: () => "",
+              label: (context) => `Átlag: ${context.raw.toFixed(2)}`,
+            },
+          },
+        },
+      },
+    });
+  }
+
+  function generateSubjectCards(subjects) {
+    const sortedSubjects = [...subjects].sort(
+      (a, b) => a.grades.length - b.grades.length,
+    );
+
+    return sortedSubjects
+      .map((subject) => {
+        const regularGrades = subject.grades
+          .filter((grade) => !grade.isSemesterGrade)
+          .reverse();
+        const myGrade = Math.floor(subject.average) || 0;
+        const classGrade = Math.floor(subject.classAverage) || 0;
+
+        return `
         <div class="subject-card card">
           <div class="subject-header">
             <div class="subject-title">
               <h3>${subject.name}</h3>
             </div>
             <div class="subject-averages">
-              <div class="average-circle my-average ${subject.average < 2 && subject.average > 0 ? 'warning' : ''}" data-grade="${myGrade}">
-                <span class="average-value">${subject.average > 0 ? subject.average.toFixed(2) : '-'}</span>
+              <div class="average-circle my-average ${subject.average < 2 && subject.average > 0 ? "warning" : ""}" data-grade="${myGrade}">
+                <span class="average-value">${subject.average > 0 ? subject.average.toFixed(2) : "-"}</span>
               </div>
-              ${subject.classAverage > 0 ? `
+              ${
+                subject.classAverage > 0
+                  ? `
               <div class="average-circle class-average" data-grade="${classGrade}">
                 <span class="average-value">${subject.classAverage.toFixed(2)}</span>
               </div>
-              ` : ''}
+              `
+                  : ""
+              }
             </div>
           </div>
           <div class="grades-list">
-            ${regularGrades.map(generateGradeItem).join('')}
+            ${regularGrades.map(generateGradeItem).join("")}
           </div>
         </div>
       `;
-        }).join('');
-    }
+      })
+      .join("");
+  }
 
-    function setupEventListeners() {
-        const timerEl = document.getElementById('logoutTimer');
-        if (timerEl) {
-            const startTime = parseInt(timerEl.textContent?.match(/\d+/)?.[0] || "45");
-            let timeLeft = startTime * 60;
+  function setupEventListeners() {
+    const timerEl = document.getElementById("logoutTimer");
+    if (timerEl) {
+      const startTime = parseInt(
+        timerEl.textContent?.match(/\d+/)?.[0] || "45",
+      );
+      let timeLeft = startTime * 60;
 
-            const updateTimer = () => {
-                const minutes = Math.floor(timeLeft / 60);
-                const seconds = timeLeft % 60;
-                timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-                timeLeft--;
+      const updateTimer = () => {
+        const minutes = Math.floor(timeLeft / 60);
+        const seconds = timeLeft % 60;
+        timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+        timeLeft--;
 
-                if (timeLeft < 0) {
-                    window.location.href = chrome.runtime.getURL('logout/logout.html');
-                }
-            };
-
-            setInterval(updateTimer, 1000);
+        if (timeLeft < 0) {
+          window.location.href = chrome.runtime.getURL("logout/logout.html");
         }
-    }
+      };
 
-    function setupGradesListScrolling() {
-        const gradesLists = document.querySelectorAll('.grades-list');
-        
-        gradesLists.forEach(list => {
-            const checkScrollable = () => {
-                if (list.scrollHeight > list.clientHeight) {
-                    list.classList.add('scrollable', 'has-more');
-                    
-                    const handleScroll = () => {
-                        const isAtBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 5;
-                        if (isAtBottom) {
-                            list.classList.remove('has-more');
-                        } else {
-                            list.classList.add('has-more');
-                        }
-                    };
-                    
-                    list.addEventListener('scroll', handleScroll);
-                    handleScroll();
-                } else {
-                    list.classList.remove('scrollable', 'has-more');
-                }
-            };
-            
-            checkScrollable();
-        });
+      setInterval(updateTimer, 1000);
     }
-    
-    if (window.location.href.includes('/TanuloErtekeles/Osztalyzatok')) {
-        transformGradesPage();
-    }
-})();
\ No newline at end of file
+  }
+
+  function setupGradesListScrolling() {
+    const gradesLists = document.querySelectorAll(".grades-list");
+
+    gradesLists.forEach((list) => {
+      const checkScrollable = () => {
+        if (list.scrollHeight > list.clientHeight) {
+          list.classList.add("scrollable", "has-more");
+
+          const handleScroll = () => {
+            const isAtBottom =
+              list.scrollTop + list.clientHeight >= list.scrollHeight - 5;
+            if (isAtBottom) {
+              list.classList.remove("has-more");
+            } else {
+              list.classList.add("has-more");
+            }
+          };
+
+          list.addEventListener("scroll", handleScroll);
+          handleScroll();
+        } else {
+          list.classList.remove("scrollable", "has-more");
+        }
+      };
+
+      checkScrollable();
+    });
+  }
+
+  if (window.location.href.includes("/TanuloErtekeles/Osztalyzatok")) {
+    transformGradesPage();
+  }
+})();
diff --git a/homework/homework.css b/homework/homework.css
index b6746fe..a4de72d 100644
--- a/homework/homework.css
+++ b/homework/homework.css
@@ -269,37 +269,145 @@ body {
   opacity: 0.9;
 }
 
-
-.homework-list {
-  display: flex;
-  flex-direction: column;
+.stats-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 16px;
+  margin-bottom: 24px;
 }
 
-.homework-date-group {
+.stat-card {
+  background: var(--card-card);
+  border-radius: 16px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  transition: transform 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--accent-accent);
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.stat-card.urgent .stat-number {
+  color: #ff4757;
+}
+
+.stat-card.completed .stat-number {
+  color: #2ed573;
+}
+
+.homework-container {
   background: var(--card-card);
   border-radius: 24px;
   overflow: hidden;
-  animation: fadeIn 0.3s ease;
   box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
 
-.date-header {
-  padding: 16px;
-  color: var(--text-primary);
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.homework-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.homework-count {
-  margin-left: auto;
-  background: var(--accent-accent);
-  color: var(--button-secondaryFill);
-  padding: 4px 8px;
-  border-radius: 12px;
+.table-header {
+  background: var(--accent-15);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.table-header th {
+  padding: 16px;
+  text-align: left;
   font-size: 14px;
+  border-bottom: 1px solid var(--accent-15);
+}
+
+.table-row {
+  border-bottom: 1px solid var(--accent-15);
+  transition: background-color 0.2s ease;
+}
+
+.table-row:hover {
+  background-color: var(--accent-15);
+}
+
+.table-row.due-tomorrow {
+  background-color: rgba(255, 71, 87, 0.1);
+}
+
+.table-row.due-tomorrow:hover {
+  background-color: rgba(255, 71, 87, 0.2);
+}
+
+.table-cell {
+  padding: 16px;
+  vertical-align: top;
+  border-bottom: 1px solid var(--accent-15);
+}
+
+.date-cell {
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 120px;
+}
+
+.subject-cell {
+  font-weight: 500;
+  color: var(--accent-accent);
+  min-width: 120px;
+}
+
+.description-cell {
+  max-width: 300px;
+  word-wrap: break-word;
+  line-height: 1.4;
+}
+
+.teacher-cell {
+  color: var(--text-secondary);
+  font-style: italic;
+  min-width: 120px;
+}
+
+.status-cell {
+  text-align: center;
+  min-width: 100px;
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.status-badge.pending {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #ffc107;
+}
+
+.status-badge.urgent {
+  background-color: rgba(255, 71, 87, 0.2);
+  color: #ff4757;
+}
+
+.status-badge.completed {
+  background-color: rgba(46, 213, 115, 0.2);
+  color: #2ed573;
 }
 
 .homework-list-items {
@@ -398,6 +506,104 @@ body {
     flex-direction: column;
     gap: 0.25rem;
   }
+  
+  .stats-overview {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .table-cell {
+    padding: 12px;
+    font-size: 14px;
+  }
+  
+  .description-cell {
+    max-width: 200px;
+  }
+}
+
+@media (max-width: 480px) {
+  .homework-container {
+    overflow-x: hidden;
+  }
+  
+  .homework-table,
+  .table-header,
+  .table-row,
+  .table-cell {
+    display: block;
+  }
+  
+  .table-header {
+    display: none;
+  }
+  
+  .date-group {
+    margin-bottom: 24px;
+  }
+  
+  .date-group-header {
+    background: var(--accent-accent);
+    color: white;
+    padding: 12px 16px;
+    font-weight: 600;
+    font-size: 16px;
+    border-radius: 12px 12px 0 0;
+    margin-bottom: 0;
+  }
+  
+  .date-group-content {
+    background: var(--card-card);
+    border: 1px solid var(--accent-15);
+    border-radius: 0 0 12px 12px;
+    overflow: hidden;
+  }
+  
+  .table-row {
+    display: block;
+    width: 100%;
+    margin-bottom: 0;
+    padding: 16px;
+    border-bottom: 1px solid var(--accent-15);
+    background: var(--card-card);
+  }
+  
+  .table-row:last-child {
+    border-bottom: none;
+  }
+  
+  .table-cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--accent-15);
+  }
+  
+  .table-cell:last-child {
+    border-bottom: none;
+  }
+  
+  .table-cell::before {
+    content: attr(data-label);
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 12px;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+  
+  .description-cell {
+    max-width: none;
+    white-space: normal;
+    text-overflow: initial;
+    overflow: visible;
+    text-align: right;
+    flex: 1;
+  }
+  
+  .stats-overview {
+    grid-template-columns: 1fr;
+  }
 }
 
 @keyframes fadeIn {
diff --git a/homework/homework.js b/homework/homework.js
index 17ab8f9..5c20ae2 100644
--- a/homework/homework.js
+++ b/homework/homework.js
@@ -2,62 +2,64 @@ async function fetchHomeworkData() {
   try {
     const currentDomain = window.location.hostname;
     const apiUrl = `https://${currentDomain}/api/TanuloHaziFeladatApi/GetTanulotHaziFeladatGrid?sort=HaziFeladatHatarido-asc&page=1&pageSize=100&group=&filter=&data=%7B%22RegiHaziFeladatokElrejtese%22%3Afalse%7D&_=${Date.now()}`;
-    
+
     const response = await fetch(apiUrl, {
-      method: 'GET',
-      credentials: 'include',
+      method: "GET",
+      credentials: "include",
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
     });
 
     if (!response.ok) {
-      throw new Error('Network response was not ok');
+      throw new Error("Network response was not ok");
     }
 
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error('Error fetching homework data:', error);
+    console.error("Error fetching homework data:", error);
     return { Data: [], Total: 0 };
   }
 }
 
 async function collectHomeworkData() {
   const apiData = await fetchHomeworkData();
-  
+
   const basicData = {
     schoolInfo: {
-      name: cookieManager.get('schoolName') || 'Iskola',
-      id: cookieManager.get('schoolCode') || ''
+      name: cookieManager.get("schoolName") || "Iskola",
+      id: cookieManager.get("schoolCode") || "",
     },
     userData: {
-      name: cookieManager.get('userName') || 'Felhasználó',
-      time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
-    }
+      name: cookieManager.get("userName") || "Felhasználó",
+      time:
+        document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+        "45:00",
+    },
   };
 
   const homeworkItems = [];
-  
+
   if (apiData.Data && Array.isArray(apiData.Data)) {
-    apiData.Data.forEach(item => {
+    apiData.Data.forEach((item) => {
       homeworkItems.push({
         id: item.ID,
-        subject: item.TantargyNev || '',
-        teacher: item.TanarNeve || '',
-        description: item.HaziFeladatSzoveg || '',
+        subject: item.TantargyNev || "",
+        teacher: item.TanarNeve || "",
+        description: item.HaziFeladatSzoveg || "",
         createdDate: formatApiDate(item.HaziFeladatRogzitesDatuma),
         deadline: formatApiDate(item.HaziFeladatHatarido),
         completed: item.MegoldottHF_BOOL || false,
-        classGroup: item.OsztalyCsoport || ''
+        classGroup: item.OsztalyCsoport || "",
       });
     });
   }
 
   const groupedHomework = {};
-  homeworkItems.forEach(homework => {
-    const deadlineDate = homework.deadline.split(' ')[0];
+  homeworkItems.forEach((homework) => {
+    const deadlineDate = homework.deadline.split(" ")[0];
     if (!groupedHomework[deadlineDate]) {
       groupedHomework[deadlineDate] = [];
     }
@@ -68,24 +70,24 @@ async function collectHomeworkData() {
 }
 
 function formatApiDate(dateString) {
-  if (!dateString) return '';
-  
+  if (!dateString) return "";
+
   try {
     const date = new Date(dateString);
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+
     const dayNames = [
-      LanguageManager.t('common.sunday'), 
-      LanguageManager.t('common.monday'), 
-      LanguageManager.t('common.tuesday'), 
-      LanguageManager.t('common.wednesday'), 
-      LanguageManager.t('common.thursday'), 
-      LanguageManager.t('common.friday'), 
-      LanguageManager.t('common.saturday')
+      LanguageManager.t("common.sunday"),
+      LanguageManager.t("common.monday"),
+      LanguageManager.t("common.tuesday"),
+      LanguageManager.t("common.wednesday"),
+      LanguageManager.t("common.thursday"),
+      LanguageManager.t("common.friday"),
+      LanguageManager.t("common.saturday"),
     ];
     const dayName = dayNames[date.getDay()];
-    
+
     return `${month}.${day}. (${dayName})`;
   } catch (error) {
     return dateString;
@@ -94,32 +96,29 @@ function formatApiDate(dateString) {
 
 function isTomorrow(dateStr) {
   if (!dateStr) return false;
-  
-  
-  const parts = dateStr.split('.');
+
+  const parts = dateStr.split(".");
   if (parts.length < 3) return false;
-  
+
   const year = parseInt(parts[0].trim());
   const month = parseInt(parts[1].trim()) - 1;
   const day = parseInt(parts[2].trim());
-  
+
   const homeworkDate = new Date(year, month, day);
-  
-  
+
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
   tomorrow.setHours(0, 0, 0, 0);
-  
-  
+
   const dayAfterTomorrow = new Date(tomorrow);
   dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 1);
-  
-  
+
   return homeworkDate >= tomorrow && homeworkDate < dayAfterTomorrow;
 }
 
 async function transformHomeworkPage() {
-  const { basicData, homeworkItems, groupedHomework } = await collectHomeworkData();
+  const { basicData, homeworkItems, groupedHomework } =
+    await collectHomeworkData();
 
   document.body.innerHTML = `
     <div class="kreta-container">
@@ -128,52 +127,90 @@ async function transformHomeworkPage() {
       <main class="kreta-main">
         <div class="filter-card">
           <div class="filter-header">
-            <h2>${LanguageManager.t('homework.filter_title')}</h2>
+            <h2>${LanguageManager.t("homework.filter_title")}</h2>
           </div>
           <div class="filter-content">
             <div class="filter-group">
               <label>
                 <!--<span class="material-icons-round">subject</span>-->
-                ${LanguageManager.t('homework.subject')}
+                ${LanguageManager.t("homework.subject")}
               </label>
               <select id="subjectFilter">
-                <option value="">${LanguageManager.t('homework.all_subjects')}</option>
-                ${[...new Set(homeworkItems.map(item => item.subject))]
+                <option value="">${LanguageManager.t("homework.all_subjects")}</option>
+                ${[...new Set(homeworkItems.map((item) => item.subject))]
                   .sort()
-                  .map(subject => `<option value="${subject}">${subject}</option>`)
-                  .join('')}
+                  .map(
+                    (subject) =>
+                      `<option value="${subject}">${subject}</option>`,
+                  )
+                  .join("")}
               </select>
             </div>
             <div class="filter-group">
               <label>
                 <!--<span class="material-icons-round">person</span>-->
-                ${LanguageManager.t('homework.teacher')}
+                ${LanguageManager.t("homework.teacher")}
               </label>
               <select id="teacherFilter">
-                <option value="">${LanguageManager.t('homework.all_teachers')}</option>
-                ${[...new Set(homeworkItems.map(item => item.teacher))]
+                <option value="">${LanguageManager.t("homework.all_teachers")}</option>
+                ${[...new Set(homeworkItems.map((item) => item.teacher))]
                   .sort()
-                  .map(teacher => `<option value="${teacher}">${teacher}</option>`)
-                  .join('')}
+                  .map(
+                    (teacher) =>
+                      `<option value="${teacher}">${teacher}</option>`,
+                  )
+                  .join("")}
               </select>
             </div>
             <div class="filter-group">
               <label>
                 <!--<span class="material-icons-round">date_range</span>-->
-                ${LanguageManager.t('homework.due_date')}
+                ${LanguageManager.t("homework.due_date")}
               </label>
               <select id="deadlineFilter">
-                <option value="">${LanguageManager.t('homework.all_deadlines')}</option>
-                <option value="tomorrow">${LanguageManager.t('homework.tomorrow_deadline')}</option>
-                <option value="thisWeek">${LanguageManager.t('homework.this_week')}</option>
-                <option value="nextWeek">${LanguageManager.t('homework.next_week')}</option>
+                <option value="">${LanguageManager.t("homework.all_deadlines")}</option>
+                <option value="tomorrow">${LanguageManager.t("homework.tomorrow_deadline")}</option>
+                <option value="thisWeek">${LanguageManager.t("homework.this_week")}</option>
+                <option value="nextWeek">${LanguageManager.t("homework.next_week")}</option>
               </select>
             </div>
           </div>
         </div>
 
-        <div class="homework-list" id="homeworkList">
-          ${renderHomeworkList(groupedHomework)}
+        <div class="stats-overview" id="statsOverview">
+          <div class="stat-card">
+            <div class="stat-number" id="totalHomework">0</div>
+            <div class="stat-label">${LanguageManager.t("homework.total_homework")}</div>
+          </div>
+          <div class="stat-card urgent">
+            <div class="stat-number" id="urgentHomework">0</div>
+            <div class="stat-label">${LanguageManager.t("homework.urgent_homework")}</div>
+          </div>
+          <div class="stat-card completed">
+            <div class="stat-number" id="completedHomework">0</div>
+            <div class="stat-label">${LanguageManager.t("homework.completed_homework")}</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-number" id="pendingHomework">0</div>
+            <div class="stat-label">${LanguageManager.t("homework.pending_homework")}</div>
+          </div>
+        </div>
+
+        <div class="homework-container">
+          <table class="homework-table" id="homeworkTable">
+            <thead class="table-header">
+              <tr>
+                <th>${LanguageManager.t("homework.due_date")}</th>
+                <th>${LanguageManager.t("homework.subject")}</th>
+                <th>${LanguageManager.t("homework.description")}</th>
+                <th>${LanguageManager.t("homework.teacher")}</th>
+                <th>${LanguageManager.t("homework.status")}</th>
+              </tr>
+            </thead>
+            <tbody id="homeworkTableBody">
+              ${generateHomeworkHTML(homeworkItems)}
+            </tbody>
+          </table>
         </div>
       </main>
     </div>
@@ -182,253 +219,312 @@ async function transformHomeworkPage() {
   setupFilters(homeworkItems, groupedHomework);
   setupUserDropdown();
   setupMobileNavigation();
+  setupMobileGrouping();
+  updateStatistics();
   loadingScreen.hide();
 }
 
-function renderHomeworkList(groupedHomework) {
-  const sortedDates = Object.keys(groupedHomework).sort((a, b) => {
-    const partsA = a.split('.');
-    const partsB = b.split('.');
-    
-    const monthA = parseInt(partsA[0]) - 1;
-    const dayA = parseInt(partsA[1]);
-    const monthB = parseInt(partsB[0]) - 1;
-    const dayB = parseInt(partsB[1]);
-    
-    const currentYear = new Date().getFullYear();
-    const currentMonth = new Date().getMonth();
-
-    const yearA = monthA < currentMonth ? currentYear + 1 : currentYear;
-    const yearB = monthB < currentMonth ? currentYear + 1 : currentYear;
-    
-    const dateA = new Date(yearA, monthA, dayA);
-    const dateB = new Date(yearB, monthB, dayB);
-    
-    return dateB - dateA;
+function generateHomeworkHTML(homeworkItems) {
+  const sortedHomework = homeworkItems.sort((a, b) => {
+    const dateA = new Date(
+      a.deadline.split(" ")[0].split(".").reverse().join("-"),
+    );
+    const dateB = new Date(
+      b.deadline.split(" ")[0].split(".").reverse().join("-"),
+    );
+    return dateA - dateB;
   });
 
-  if (sortedDates.length === 0) {
-    return `
-      <div class="empty-state">
-        <p>${LanguageManager.t('homework.no_homework')}</p>
-      </div>
-    `;
-  }
+  return sortedHomework
+    .map((homework) => {
+      const isUrgent = isTomorrow(homework.deadline);
+      const status = homework.completed
+        ? "completed"
+        : isUrgent
+          ? "urgent"
+          : "pending";
+      const statusText = homework.completed
+        ? LanguageManager.t("homework.completed")
+        : isUrgent
+          ? LanguageManager.t("homework.urgent")
+          : LanguageManager.t("homework.pending");
 
-  return sortedDates.map(date => {
-    const homeworkItems = groupedHomework[date];
-    return `
-      <div class="homework-date-group" data-date="${date}">
-        <div class="date-header">
-          <h3>${formatDateHeader(date)}</h3>
-          <span class="homework-count">${homeworkItems.length} ${LanguageManager.t('homework.items') || 'feladat'}</span>
-        </div>
-        <div class="homework-list-items">
-          ${homeworkItems.map(homework => {
-            const isTomorrowClass = isTomorrow(homework.deadline) ? 'due-tomorrow' : '';
-            const urgentClass = isTomorrow(homework.deadline) ? 'urgent' : '';
-            
-            return `
-              <div class="homework-item ${isTomorrowClass}" data-subject="${homework.subject}" data-teacher="${homework.teacher}">
-                <div class="homework-details">
-                  <div class="homework-subject">${homework.subject}</div>
-                  <div class="homework-content">${homework.description}</div>
-                  <div class="homework-teacher">${homework.teacher}</div>
-                </div>
-              </div>
-            `;
-          }).join('')}
-        </div>
-      </div>
+      return `
+      <tr class="table-row ${isUrgent ? "due-tomorrow" : ""}" 
+          data-subject="${homework.subject}" 
+          data-teacher="${homework.teacher}"
+          data-deadline="${homework.deadline}">
+        <td class="table-cell date-cell" data-label="${LanguageManager.t("homework.due_date")}:">${homework.deadline}</td>
+        <td class="table-cell subject-cell" data-label="${LanguageManager.t("homework.subject")}:">${homework.subject}</td>
+        <td class="table-cell description-cell" data-label="${LanguageManager.t("homework.description")}:">${homework.description}</td>
+        <td class="table-cell teacher-cell" data-label="${LanguageManager.t("homework.teacher")}:">${homework.teacher}</td>
+        <td class="table-cell status-cell" data-label="${LanguageManager.t("homework.status")}:">
+          <span class="status-badge ${status}">${statusText}</span>
+        </td>
+      </tr>
     `;
-  }).join('');
+    })
+    .join("");
 }
 
 function formatDateHeader(dateStr) {
-  if (!dateStr) return '';
-  
+  if (!dateStr) return "";
+
   const today = new Date();
   today.setHours(0, 0, 0, 0);
-  
+
   const tomorrow = new Date(today);
   tomorrow.setDate(tomorrow.getDate() + 1);
-  
-  const parts = dateStr.split('.');
+
+  const parts = dateStr.split(".");
   if (parts.length < 2) return dateStr;
-  
+
   const month = parseInt(parts[0].trim()) - 1;
   const day = parseInt(parts[1].trim());
   const currentYear = today.getFullYear();
-  
+
   const date = new Date(currentYear, month, day);
-  
+
   if (date.toDateString() === today.toDateString()) {
-    return LanguageManager.t('common.today') + ' - ' + dateStr;
+    return LanguageManager.t("common.today") + " - " + dateStr;
   } else if (date.toDateString() === tomorrow.toDateString()) {
-    return LanguageManager.t('common.tomorrow') + ' - ' + dateStr;
+    return LanguageManager.t("common.tomorrow") + " - " + dateStr;
   }
-  
+
   const weekdays = [
-    LanguageManager.t('common.sunday'), 
-    LanguageManager.t('common.monday'), 
-    LanguageManager.t('common.tuesday'), 
-    LanguageManager.t('common.wednesday'), 
-    LanguageManager.t('common.thursday'), 
-    LanguageManager.t('common.friday'), 
-    LanguageManager.t('common.saturday')
+    LanguageManager.t("common.sunday"),
+    LanguageManager.t("common.monday"),
+    LanguageManager.t("common.tuesday"),
+    LanguageManager.t("common.wednesday"),
+    LanguageManager.t("common.thursday"),
+    LanguageManager.t("common.friday"),
+    LanguageManager.t("common.saturday"),
   ];
   return `${weekdays[date.getDay()]} - ${dateStr}`;
 }
 
 function formatDate(dateStr) {
-  if (!dateStr) return '';
+  if (!dateStr) return "";
   return dateStr;
 }
 
 function setupFilters(homeworkItems, groupedHomework) {
-  const subjectFilter = document.getElementById('subjectFilter');
-  const teacherFilter = document.getElementById('teacherFilter');
-  const deadlineFilter = document.getElementById('deadlineFilter');
-  const applyFilterBtn = document.getElementById('applyFilterBtn');
-  const resetFilterBtn = document.getElementById('resetFilterBtn');
-  
-  
+  const subjectFilter = document.getElementById("subjectFilter");
+  const teacherFilter = document.getElementById("teacherFilter");
+  const deadlineFilter = document.getElementById("deadlineFilter");
+
   const applyFilters = () => {
     const selectedSubject = subjectFilter.value;
     const selectedTeacher = teacherFilter.value;
     const selectedDeadline = deadlineFilter.value;
-    
-    
-    const homeworkElements = document.querySelectorAll('.homework-item');
-    const dateGroups = document.querySelectorAll('.homework-date-group');
-    
-    
-    dateGroups.forEach(group => {
-      group.style.display = 'none';
-    });
-    
-    
-    homeworkElements.forEach(item => {
-      const subject = item.getAttribute('data-subject');
-      const teacher = item.getAttribute('data-teacher');
-      const dateGroup = item.closest('.homework-date-group');
-      const dateStr = dateGroup.getAttribute('data-date');
-      
-      let showItem = true;
-      
-      
+
+    const tableRows = document.querySelectorAll(".table-row");
+
+    tableRows.forEach((row) => {
+      const subject = row.getAttribute("data-subject");
+      const teacher = row.getAttribute("data-teacher");
+      const deadline = row.getAttribute("data-deadline");
+
+      let showRow = true;
+
       if (selectedSubject && subject !== selectedSubject) {
-        showItem = false;
+        showRow = false;
       }
-      
-      
+
       if (selectedTeacher && teacher !== selectedTeacher) {
-        showItem = false;
+        showRow = false;
       }
-      
-      
+
       if (selectedDeadline) {
-        const parts = dateStr.split('.');
-        if (parts.length >= 3) {
-          const year = parseInt(parts[0].trim());
-          const month = parseInt(parts[1].trim()) - 1;
-          const day = parseInt(parts[2].trim());
-          const date = new Date(year, month, day);
-          
+        const parts = deadline.split(" ")[0].split(".");
+        if (parts.length >= 2) {
+          const month = parseInt(parts[0].trim()) - 1;
+          const day = parseInt(parts[1].trim());
+          const currentYear = new Date().getFullYear();
+          const date = new Date(currentYear, month, day);
+
           const today = new Date();
           today.setHours(0, 0, 0, 0);
-          
+
           const tomorrow = new Date(today);
           tomorrow.setDate(tomorrow.getDate() + 1);
-          
-          
+
           const startOfWeek = new Date(today);
           const dayOfWeek = today.getDay() || 7;
           startOfWeek.setDate(today.getDate() - dayOfWeek + 1);
-          
+
           const endOfWeek = new Date(startOfWeek);
           endOfWeek.setDate(startOfWeek.getDate() + 6);
-          
-          
+
           const startOfNextWeek = new Date(endOfWeek);
           startOfNextWeek.setDate(endOfWeek.getDate() + 1);
-          
+
           const endOfNextWeek = new Date(startOfNextWeek);
           endOfNextWeek.setDate(startOfNextWeek.getDate() + 6);
-          
-          if (selectedDeadline === 'tomorrow' && date.toDateString() !== tomorrow.toDateString()) {
-            showItem = false;
-          } else if (selectedDeadline === 'thisWeek' && (date < startOfWeek || date > endOfWeek)) {
-            showItem = false;
-          } else if (selectedDeadline === 'nextWeek' && (date < startOfNextWeek || date > endOfNextWeek)) {
-            showItem = false;
+
+          if (
+            selectedDeadline === "tomorrow" &&
+            date.toDateString() !== tomorrow.toDateString()
+          ) {
+            showRow = false;
+          } else if (
+            selectedDeadline === "thisWeek" &&
+            (date < startOfWeek || date > endOfWeek)
+          ) {
+            showRow = false;
+          } else if (
+            selectedDeadline === "nextWeek" &&
+            (date < startOfNextWeek || date > endOfNextWeek)
+          ) {
+            showRow = false;
           }
         }
       }
-      
-      
-      item.style.display = showItem ? 'block' : 'none';
-      
-      
-      if (showItem) {
-        dateGroup.style.display = 'block';
-      }
+
+      row.style.display = showRow ? "" : "none";
     });
-    
-    
-    const visibleItems = document.querySelectorAll('.homework-item[style="display: block"]');
-    const homeworkList = document.getElementById('homeworkList');
-    
-    
-    let emptyState = homeworkList.querySelector('.empty-state');
-    if (!emptyState) {
-      emptyState = document.createElement('div');
-      emptyState.className = 'empty-state';
-      emptyState.innerHTML = `<p>${LanguageManager.t('homework.no_matching_homework')}</p>`;
-      homeworkList.appendChild(emptyState);
-    }
-    
-    
-    if (visibleItems.length === 0) {
-      emptyState.style.display = 'block';
-    } else {
-      emptyState.style.display = 'none';
-    }
+
+    updateDateGroupsVisibility();
+    updateStatistics();
   };
-  
-  
+
   const resetFilters = () => {
-    subjectFilter.value = '';
-    teacherFilter.value = '';
-    deadlineFilter.value = '';
-    
-    
-    document.querySelectorAll('.homework-item').forEach(item => {
-      item.style.display = 'block';
+    subjectFilter.value = "";
+    teacherFilter.value = "";
+    deadlineFilter.value = "";
+
+    document.querySelectorAll(".table-row").forEach((row) => {
+      row.style.display = "";
     });
-    
-    document.querySelectorAll('.homework-date-group').forEach(group => {
-      group.style.display = 'block';
-    });
-    
-    
-    const homeworkList = document.getElementById('homeworkList');
-    const existingEmptyState = homeworkList.querySelector('.empty-state');
-    if (existingEmptyState) {
-      homeworkList.removeChild(existingEmptyState);
-    }
+
+    updateDateGroupsVisibility();
+    updateStatistics();
   };
-  
-  
-  subjectFilter.addEventListener('change', applyFilters);
-  teacherFilter.addEventListener('change', applyFilters);
-  deadlineFilter.addEventListener('change', applyFilters);
+
+  subjectFilter.addEventListener("change", applyFilters);
+  teacherFilter.addEventListener("change", applyFilters);
+  deadlineFilter.addEventListener("change", applyFilters);
 }
 
+function updateStatistics() {
+  const visibleRows = document.querySelectorAll(
+    '.table-row:not([style*="display: none"])',
+  );
 
+  let totalCount = 0;
+  let urgentCount = 0;
+  let completedCount = 0;
+  let pendingCount = 0;
 
-if (window.location.href.includes('/Tanulo/TanuloHaziFeladat')) {
-  transformHomeworkPage().catch(error => {
-    console.error('Error transforming homework page:', error);
+  visibleRows.forEach((row) => {
+    totalCount++;
+
+    if (row.classList.contains("due-tomorrow")) {
+      urgentCount++;
+    }
+
+    const statusBadge = row.querySelector(".status-badge");
+    if (statusBadge) {
+      if (statusBadge.classList.contains("completed")) {
+        completedCount++;
+      } else if (statusBadge.classList.contains("pending")) {
+        pendingCount++;
+      }
+    }
   });
-}
\ No newline at end of file
+
+  document.getElementById("totalHomework").textContent = totalCount;
+  document.getElementById("urgentHomework").textContent = urgentCount;
+  document.getElementById("completedHomework").textContent = completedCount;
+  document.getElementById("pendingHomework").textContent = pendingCount;
+}
+
+function setupMobileGrouping() {
+  function handleResize() {
+    if (window.innerWidth <= 480) {
+      createMobileGroups();
+    } else {
+      removeMobileGroups();
+    }
+  }
+
+  window.addEventListener("resize", handleResize);
+  handleResize();
+}
+
+function createMobileGroups() {
+  const tableBody = document.getElementById("homeworkTableBody");
+  const rows = Array.from(tableBody.querySelectorAll(".table-row"));
+
+  if (rows.length === 0) return;
+
+  const groupedByDate = {};
+
+  rows.forEach((row) => {
+    const deadline = row.getAttribute("data-deadline");
+    const dateKey = deadline.split(" ")[0];
+
+    if (!groupedByDate[dateKey]) {
+      groupedByDate[dateKey] = [];
+    }
+    groupedByDate[dateKey].push(row);
+  });
+
+  tableBody.innerHTML = "";
+
+  Object.keys(groupedByDate)
+    .sort()
+    .forEach((date) => {
+      const dateGroup = document.createElement("div");
+      dateGroup.className = "date-group";
+      dateGroup.setAttribute("data-date", date);
+
+      const header = document.createElement("div");
+      header.className = "date-group-header";
+      header.textContent = formatDateHeader(date);
+
+      const content = document.createElement("div");
+      content.className = "date-group-content";
+
+      groupedByDate[date].forEach((row) => {
+        content.appendChild(row);
+      });
+
+      dateGroup.appendChild(header);
+      dateGroup.appendChild(content);
+      tableBody.appendChild(dateGroup);
+    });
+}
+
+function removeMobileGroups() {
+  const tableBody = document.getElementById("homeworkTableBody");
+  const dateGroups = tableBody.querySelectorAll(".date-group");
+
+  if (dateGroups.length === 0) return;
+
+  const allRows = [];
+  dateGroups.forEach((group) => {
+    const rows = group.querySelectorAll(".table-row");
+    rows.forEach((row) => allRows.push(row));
+  });
+
+  tableBody.innerHTML = "";
+  allRows.forEach((row) => tableBody.appendChild(row));
+}
+
+function updateDateGroupsVisibility() {
+  const dateGroups = document.querySelectorAll(".date-group");
+
+  dateGroups.forEach((group) => {
+    const visibleRows = group.querySelectorAll(
+      '.table-row:not([style*="display: none"])',
+    );
+    group.style.display = visibleRows.length > 0 ? "block" : "none";
+  });
+}
+
+if (window.location.href.includes("/Tanulo/TanuloHaziFeladat")) {
+  transformHomeworkPage().catch((error) => {
+    console.error("Error transforming homework page:", error);
+  });
+}
diff --git a/i18n/en.json b/i18n/en.json
index 660d4c1..9c4e5e7 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -115,7 +115,8 @@
     "wednesday": "Wednesday",
     "thursday": "Thursday",
     "friday": "Friday",
-    "found_current_week": "Found current week"
+    "found_current_week": "Found current week",
+    "open_homework": "Open homework"
   },
   "homework": {
     "title": "Homework",
@@ -133,7 +134,15 @@
     "no_filtered_homework": "No homework matching the filter criteria.",
     "teacher": "Teacher",
     "no_matching_homework": "No homework matching the filter criteria.",
-    "items": "items"
+    "items": "items",
+    "status": "Status",
+    "total_homework": "Total homework",
+    "urgent_homework": "Urgent homework",
+    "completed_homework": "Completed homework",
+    "pending_homework": "Pending homework",
+    "completed": "Completed",
+    "urgent": "Urgent",
+    "pending": "Pending"
   },
   "absences": {
     "title": "Absences",
diff --git a/i18n/hu.json b/i18n/hu.json
index 6716643..ca693b1 100644
--- a/i18n/hu.json
+++ b/i18n/hu.json
@@ -115,25 +115,34 @@
     "wednesday": "Szerda",
     "thursday": "Csütörtök",
     "friday": "Péntek",
-    "found_current_week": "Megtalált jelenlegi hét"
+    "found_current_week": "Megtalált jelenlegi hét",
+    "open_homework": "Ugrás a házi feladatokhoz"
   },
   "homework": {
     "title": "Házi feladatok",
     "due_date": "Határidő",
     "subject": "Tantárgy",
     "description": "Leírás",
-    "filter_title": "Szűrés",
-    "all_subjects": "Összes tantárgy",
-    "all_teachers": "Összes tanár",
-    "all_deadlines": "Összes határidő",
+    "filter_title": "Szűrő",
+    "all_subjects": "Minden tantárgy",
+    "all_teachers": "Minden tanár",
+    "all_deadlines": "Minden határidő",
     "tomorrow_deadline": "Holnapi határidő",
     "this_week": "Ezen a héten",
-    "next_week": "Jövő héten",
+    "next_week": "Következő héten",
     "no_homework": "Nincs megjeleníthető házi feladat.",
     "no_filtered_homework": "Nincs a szűrési feltételeknek megfelelő házi feladat.",
     "teacher": "Tanár",
     "no_matching_homework": "Nincs a szűrési feltételeknek megfelelő házi feladat.",
-    "items": "feladat"
+    "items": "elem",
+    "status": "Állapot",
+    "total_homework": "Összes feladat",
+    "urgent_homework": "Sürgős feladat",
+    "completed_homework": "Befejezett feladat",
+    "pending_homework": "Függőben lévő feladat",
+    "completed": "Befejezve",
+    "urgent": "Sürgős",
+    "pending": "Függőben"
   },
   "absences": {
     "title": "Hiányzások",
diff --git a/login/login.css b/login/login.css
index 6d0c1b2..b7c94b4 100644
--- a/login/login.css
+++ b/login/login.css
@@ -1,360 +1,313 @@
 :root {
-  --icon-invert: 0.1;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 0.1;
+  --icon-invert:0.1;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:0.1;
 }
-
-
 :root[data-theme="light-green"] {
-  --icon-invert: 0.1;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 0.1;
+  --icon-invert:0.1;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:0.1;
 }
-
-
 :root[data-theme="dark-blue"] {
-  --icon-invert: 0.9;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 1;
+  --icon-invert:0.9;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:1;
 }
-
-
 :root[data-theme="dark-green"] {
-  --icon-invert: 0.9;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 1;
+  --icon-invert:0.9;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:1;
 }
-
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-  min-height: 100vh;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
+  min-height:100vh;
+  font-size:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .login-container {
-  width: 90%;
-  max-width: 500px;
-  padding: 20px;
-  margin: 0 auto;
+  width:90%;
+  max-width:500px;
+  padding:20px;
+  margin:0 auto;
 }
-
 .login-card {
-  background: var(--card-card);
-  padding: 24px;
-  margin-bottom: 16px;
-  border-radius: 24px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  padding:24px;
+  margin-bottom:16px;
+  border-radius:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .card-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin: 16px 0;
-  background: var(--card-card) !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+  margin:16px 0;
+  background:var(--card-card) !important;
+  border-bottom:1px solid rgba(0,0,0,0) !important;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
 }
-
 .logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width:48px;
+  height:48px;
+  border-radius:12px;
 }
-
 .school-name {
-  color: var(--text-secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .login-form {
-  width: 100%;
+  width:100%;
 }
-
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom:16px;
 }
-
 .form-control {
-  display: flex;
-  height: 48px;
-  padding: 0px 14px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 12px;
-  background: var(--accent-15) !important;
-  border: 0px solid var(--accent-15) !important;
-  color: var(--text-primary) !important;
+  display:flex;
+  height:48px;
+  padding:0px 14px;
+  align-items:center;
+  gap:10px;
+  align-self:stretch;
+  border-radius:12px;
+  background:var(--accent-15) !important;
+  border:0px solid var(--accent-15) !important;
+  color:var(--text-primary) !important;
 }
-
 .form-control:focus {
-  outline: none;
-  border-color: var(--accent-accent) !important;
+  outline:none;
+  border-color:var(--accent-accent) !important;
 }
-
 .form-control::placeholder {
-  color: var(--text-secondary) !important;
+  color:var(--text-secondary) !important;
 }
-
 .password-group {
-  position: relative;
+  position:relative;
 }
-
 .show-password {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position:absolute;
+  right:12px;
+  top:50%;
+  transform:translateY(-50%);
+  background:none;
+  border:none;
+  padding:4px;
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .icon-eye {
-  width: 20px;
-  height: 20px;
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
-  filter: invert(var(--icon-invert)) sepia(var(--icon-sepia)) saturate(var(--icon-saturate)) hue-rotate(var(--icon-hue-rotate)) brightness(var(--icon-brightness));
+  width:20px;
+  height:20px;
+  opacity:0.6;
+  transition:opacity 0.2s ease;
+  filter:invert(var(--icon-invert)) sepia(var(--icon-sepia)) saturate(var(--icon-saturate)) hue-rotate(var(--icon-hue-rotate)) brightness(var(--icon-brightness));
 }
-
 .show-password:hover .icon-eye {
-  opacity: 1;
+  opacity:1;
 }
-
 .form-actions {
-  margin-top: 24px;
+  margin-top:24px;
 }
-
 .help-links {
-  margin-top: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
+  margin-top:16px;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
 }
-
 .help-link {
-  color: var(--text-primary);
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.2s ease;
+  color:var(--text-primary);
+  font-size:14px;
+  font-weight:500;
+  text-decoration:none;
+  transition:color 0.2s ease;
 }
-
 .help-link:hover {
-  color: var(--text-teritary);
+  color:var(--text-teritary);
 }
-
 .btn-login {
-  width: 100%;
-  padding: 12px;
-  background: var(--accent-accent);
-  color: white;
-  border: none;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  font-family: "Montserrat", serif;
-  cursor: pointer;
-  transition: background 0.2s ease;
-  position: relative;
+  width:100%;
+  padding:12px;
+  background:var(--accent-accent);
+  color:white;
+  border:none;
+  border-radius:12px;
+  font-size:16px;
+  font-weight:600;
+  font-family:"Montserrat",serif;
+  cursor:pointer;
+  transition:background 0.2s ease;
+  position:relative;
 }
-
 .btn-login:hover {
-  background: var(--text-teritary);
+  background:var(--text-teritary);
 }
-
 .btn-login:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
+  opacity:0.7;
+  cursor:not-allowed;
 }
-
 .btn-text {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  letter-spacing: -0.3px;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:18px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
+  letter-spacing:-0.3px;
 }
-
 .system-message {
-  display: flex;
-  padding: 20px;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  align-self: stretch;
-  border-radius: 24px;
-  background: var(--card-card);
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  display:flex;
+  padding:20px;
+  flex-direction:column;
+  align-items:center;
+  gap:12px;
+  align-self:stretch;
+  border-radius:24px;
+  background:var(--card-card);
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .system-message h4 {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
 }
-
 .system-message p {
-  color: var(--text-secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .login-footer {
-  align-self: stretch;
-  color: var(--text-secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  align-self:stretch;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .privacy-link {
-  align-self: stretch;
-  color: var(--text-secondary);
-  text-align: center;
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
-  text-decoration: none;
+  align-self:stretch;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
+  text-decoration:none;
 }
-
 .privacy-link:hover {
-  color: var(--text-teritary);
+  color:var(--text-teritary);
 }
-
-
 .form-control.error {
-  border-color: var(--error-accent) !important;
-  background: var(--error-card) !important;
+  border-color:var(--error-accent) !important;
+  background:var(--error-card) !important;
 }
-
 .error-message {
-  color: var(--error-text);
-  font-size: 14px;
-  margin-top: 4px;
-  display: none;
+  color:var(--error-text);
+  font-size:14px;
+  margin-top:4px;
+  display:none;
 }
-
 .error-message.show {
-  display: block;
-  animation: fadeIn 0.2s ease;
+  display:block;
+  animation:fadeIn 0.2s ease;
 }
-
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+  opacity:0;
+  transform:translateY(-4px);
 }
-
-@keyframes spin {
-  to { transform: translate(-50%, -50%) rotate(360deg); }
+to {
+  opacity:1;
+  transform:translateY(0);
 }
-
-@media (max-width: 480px) {
+}@keyframes spin {
+  to {
+  transform:translate(-50%,-50%) rotate(360deg);
+}
+}@media (max-width:480px) {
   .login-container {
-    padding: 16px;
-  }
-  
-  .login-card {
-    padding: 20px;
-  }
-  
-  .card-header {
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-  }
-  
-  .logo-text {
-    font-size: 20px;
-  }
-  
-  .school-name {
-    font-size: 16px;
-  }
-  
-  .school-details {
-    font-size: 12px;
-  }
-  
-  .form-control {
-    height: 44px;
-    font-size: 14px;
-  }
-  
-  .btn-login {
-    padding: 10px;
-    font-size: 14px;
-  }
-  
-  .help-link {
-    font-size: 12px;
-  }
+  padding:16px;
+}
+.login-card {
+  padding:20px;
+}
+.card-header {
+  margin-bottom:20px;
+  padding-bottom:16px;
+}
+.logo-text {
+  font-size:20px;
+}
+.school-name {
+  font-size:16px;
+}
+.school-details {
+  font-size:12px;
+}
+.form-control {
+  height:44px;
+  font-size:14px;
+}
+.btn-login {
+  padding:10px;
+  font-size:14px;
+}
+.help-link {
+  font-size:12px;
+}
 }
\ No newline at end of file
diff --git a/login/login.js b/login/login.js
index cb013f1..9ed64b3 100644
--- a/login/login.js
+++ b/login/login.js
@@ -1,50 +1,59 @@
 async function transformLoginPage() {
   try {
-    if (document.readyState !== 'complete') {
-      await new Promise(resolve => {
-        window.addEventListener('load', resolve);
+    if (document.readyState !== "complete") {
+      await new Promise((resolve) => {
+        window.addEventListener("load", resolve);
       });
     }
-    
-    const existingForm = document.querySelector('form');
+
+    const existingForm = document.querySelector("form");
     const formData = {
-      action: existingForm?.getAttribute('action') || '',
-      returnUrl: document.querySelector('#ReturnUrl')?.value || '',
-      instituteCode: document.querySelector('#instituteCode')?.value || '',
-      requestToken: document.querySelector('input[name="__RequestVerificationToken"]')?.value || '',
-      userName: document.querySelector('#UserName')?.value || '',
-      password: document.querySelector('#Password')?.value || ''
+      action: existingForm?.getAttribute("action") || "",
+      returnUrl: document.querySelector("#ReturnUrl")?.value || "",
+      instituteCode: document.querySelector("#instituteCode")?.value || "",
+      requestToken:
+        document.querySelector('input[name="__RequestVerificationToken"]')
+          ?.value || "",
+      userName: document.querySelector("#UserName")?.value || "",
+      password: document.querySelector("#Password")?.value || "",
     };
-    
-    const titleElement = document.querySelector('.page-title');
+
+    const titleElement = document.querySelector(".page-title");
     const schoolInfo = {
-      name: titleElement?.querySelector('b')?.textContent?.trim() || '',
-      kretaId: '',
-      omCode: ''
+      name: titleElement?.querySelector("b")?.textContent?.trim() || "",
+      kretaId: "",
+      omCode: "",
     };
-    
-    const spanElement = titleElement?.querySelector('span');
+
+    const spanElement = titleElement?.querySelector("span");
     if (spanElement) {
-      const lines = spanElement.textContent?.split('\n').map(line => line.trim()) || [];
-      schoolInfo.kretaId = lines[0] || '';
-      schoolInfo.omCode = (lines[1] || '').replace(`${LanguageManager.t('login.kreta_id')}: `, '');
+      const lines =
+        spanElement.textContent?.split("\n").map((line) => line.trim()) || [];
+      schoolInfo.kretaId = lines[0] || "";
+      schoolInfo.omCode = (lines[1] || "").replace(
+        `${LanguageManager.t("login.kreta_id")}: `,
+        "",
+      );
     }
-    
-    const rawSystemMessage = document.querySelector('.alert-primary')?.textContent?.trim() || '';
-    const systemMessage = rawSystemMessage.replace('Rendszerértesítés', '').trim();
-    
+
+    const rawSystemMessage =
+      document.querySelector(".alert-primary")?.textContent?.trim() || "";
+    const systemMessage = rawSystemMessage
+      .replace("Rendszerértesítés", "")
+      .trim();
+
     const newHTML = `
       <div class="login-container">
         <div class="login-card">
           <div class="card-header">
             <p class="logo-text">
-              <img src=${chrome.runtime.getURL('images/firka_logo.png')} alt="Firka" class="logo">
+              <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
               Firka
             </p>
             <h1 class="school-name">${schoolInfo.name}</h1>
             <div class="school-details">
-              ${schoolInfo.kretaId ? `<div>${schoolInfo.kretaId}</div>` : ''}
-              ${schoolInfo.omCode ? `<div>${LanguageManager.t('login.kreta_id')}: ${schoolInfo.omCode}</div>` : ''}
+              ${schoolInfo.kretaId ? `<div>${schoolInfo.kretaId}</div>` : ""}
+              ${schoolInfo.omCode ? `<div>${LanguageManager.t("login.kreta_id")}: ${schoolInfo.omCode}</div>` : ""}
             </div>
           </div>
 
@@ -57,133 +66,131 @@ async function transformLoginPage() {
 
             <div class="form-group">
               <input class="form-control" type="text" id="UserName" name="UserName" 
-                     placeholder="${LanguageManager.t('login.username_placeholder')}" maxlength="256" autocomplete="username" required value="${formData.userName}">
-              <div class="error-message">${LanguageManager.t('login.username_required')}</div>
+                     placeholder="${LanguageManager.t("login.username_placeholder")}" maxlength="256" autocomplete="username" required value="${formData.userName}">
+              <div class="error-message">${LanguageManager.t("login.username_required")}</div>
             </div>
 
             <div class="form-group password-group">
               <input class="form-control" type="password" id="Password" name="Password" 
-                     placeholder="${LanguageManager.t('login.password_placeholder')}" maxlength="256" autocomplete="current-password" required value="${formData.password}">
-              <button type="button" class="show-password" aria-label="${LanguageManager.t('login.show_password')}">
-                <img src="${chrome.runtime.getURL('icons/eye-off.svg')}" alt="Show password" class="icon-eye">
+                     placeholder="${LanguageManager.t("login.password_placeholder")}" maxlength="256" autocomplete="current-password" required value="${formData.password}">
+              <button type="button" class="show-password" aria-label="${LanguageManager.t("login.show_password")}">
+                <img src="${chrome.runtime.getURL("icons/eye-off.svg")}" alt="Show password" class="icon-eye">
               </button>
-              <div class="error-message">${LanguageManager.t('login.password_required')}</div>
+              <div class="error-message">${LanguageManager.t("login.password_required")}</div>
             </div>
 
             <div class="form-actions">
               <button type="submit" class="btn-login">
                 <span class="spinner"></span>
-                <span class="btn-text">${LanguageManager.t('login.login_button')}</span>
+                <span class="btn-text">${LanguageManager.t("login.login_button")}</span>
               </button>
               <div class="help-links">
-                <a href="https://${schoolInfo.omCode ? `${schoolInfo.omCode}` : ''}.e-kreta.hu/Adminisztracio/ElfelejtettJelszo" class="help-link">${LanguageManager.t('login.forgot_password')}</a>
-                <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=2425086" target="_blank" class="help-link">${LanguageManager.t('login.help_link')}</a>
+                <a href="https://${schoolInfo.omCode ? `${schoolInfo.omCode}` : ""}.e-kreta.hu/Adminisztracio/ElfelejtettJelszo" class="help-link">${LanguageManager.t("login.forgot_password")}</a>
+                <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=2425086" target="_blank" class="help-link">${LanguageManager.t("login.help_link")}</a>
               </div>
             </div>
           </form>
         </div>
 
-        ${systemMessage ? `
+        ${
+          systemMessage
+            ? `
           <div class="system-message">
-            <h4>${LanguageManager.t('login.system_message')}</h4>
+            <h4>${LanguageManager.t("login.system_message")}</h4>
             <p>${systemMessage}</p>
           </div>
-        ` : ''}
+        `
+            : ""
+        }
 
         <footer class="login-footer">
           <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=4064926" 
-             target="_blank" class="privacy-link">${LanguageManager.t('login.privacy_policy')}</a>
+             target="_blank" class="privacy-link">${LanguageManager.t("login.privacy_policy")}</a>
         </footer>
       </div>
     `;
-    
-    document.body.innerHTML = newHTML;
-    
-    setupEventListeners();
 
+    document.body.innerHTML = newHTML;
+
+    setupEventListeners();
   } catch (error) {
-    console.error('Error transforming page:', error);
+    console.error("Error transforming page:", error);
   }
 }
 
 function setupEventListeners() {
-  const loginForm = document.getElementById('loginForm');
-  const passwordInput = document.getElementById('Password');
-  const togglePasswordBtn = document.querySelector('.show-password');
-  const formInputs = document.querySelectorAll('.form-control');
-  
-  if (togglePasswordBtn && passwordInput) {
-    togglePasswordBtn.addEventListener('click', () => {
-      const isPassword = passwordInput.type === 'password';
-      passwordInput.type = isPassword ? 'text' : 'password';
-      const icon = togglePasswordBtn.querySelector('.icon-eye');
-      icon.src = chrome.runtime.getURL(`icons/${isPassword ? 'eye-on' : 'eye-off'}.svg`);
-    });
-}
+  const loginForm = document.getElementById("loginForm");
+  const passwordInput = document.getElementById("Password");
+  const togglePasswordBtn = document.querySelector(".show-password");
+  const formInputs = document.querySelectorAll(".form-control");
 
-  
-  formInputs.forEach(input => {
-    
-    input.addEventListener('input', () => {
+  if (togglePasswordBtn && passwordInput) {
+    togglePasswordBtn.addEventListener("click", () => {
+      const isPassword = passwordInput.type === "password";
+      passwordInput.type = isPassword ? "text" : "password";
+      const icon = togglePasswordBtn.querySelector(".icon-eye");
+      icon.src = chrome.runtime.getURL(
+        `icons/${isPassword ? "eye-on" : "eye-off"}.svg`,
+      );
+    });
+  }
+
+  formInputs.forEach((input) => {
+    input.addEventListener("input", () => {
       validateInput(input);
     });
 
-    
-    input.addEventListener('blur', () => {
+    input.addEventListener("blur", () => {
       validateInput(input, true);
     });
   });
 
-  
   if (loginForm) {
-    loginForm.addEventListener('submit', handleSubmit);
+    loginForm.addEventListener("submit", handleSubmit);
   }
 }
 
 function validateInput(input, showError = false) {
   const isValid = input.value.trim().length > 0;
   const errorElement = input.nextElementSibling;
-  
+
   if (!isValid && showError) {
-    input.classList.add('error');
-    errorElement?.classList.add('show');
+    input.classList.add("error");
+    errorElement?.classList.add("show");
   } else {
-    input.classList.remove('error');
-    errorElement?.classList.remove('show');
+    input.classList.remove("error");
+    errorElement?.classList.remove("show");
   }
-  
+
   return isValid;
 }
 
 function handleSubmit(event) {
   event.preventDefault();
-  
+
   const form = event.target;
-  const inputs = form.querySelectorAll('.form-control[required]');
+  const inputs = form.querySelectorAll(".form-control[required]");
   let isValid = true;
 
-  
-  inputs.forEach(input => {
+  inputs.forEach((input) => {
     if (!validateInput(input, true)) {
       isValid = false;
     }
   });
-  
-  const submitButton = form.querySelector('.btn-login');
-  const spinner = submitButton.querySelector('.spinner');
-  const buttonText = submitButton.querySelector('.btn-text');
+
+  const submitButton = form.querySelector(".btn-login");
+  const spinner = submitButton.querySelector(".spinner");
+  const buttonText = submitButton.querySelector(".btn-text");
 
   submitButton.disabled = true;
-  spinner.style.display = 'inline-block';
-  buttonText.style.opacity = '0';
+  spinner.style.display = "inline-block";
+  buttonText.style.opacity = "0";
 
-  
   form.submit();
 }
 
-
-if (window.location.href.includes('idp.e-kreta.hu/Account/Login')) {
-  transformLoginPage().catch(error => {
-    console.error('Error:', error);
+if (window.location.href.includes("idp.e-kreta.hu/Account/Login")) {
+  transformLoginPage().catch((error) => {
+    console.error("Error:", error);
   });
-}
\ No newline at end of file
+}
diff --git a/login/twofactor.css b/login/twofactor.css
index 7187528..1fe4c4c 100644
--- a/login/twofactor.css
+++ b/login/twofactor.css
@@ -1,301 +1,263 @@
 :root {
-  --icon-invert: 0.1;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 0.1;
+  --icon-invert:0.1;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:0.1;
 }
-
 :root[data-theme="light-green"] {
-  --icon-invert: 0.1;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 0.1;
+  --icon-invert:0.1;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:0.1;
 }
-
 :root[data-theme="dark-blue"] {
-  --icon-invert: 0.9;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 1;
+  --icon-invert:0.9;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:1;
 }
-
 :root[data-theme="dark-green"] {
-  --icon-invert: 0.9;
-  --icon-sepia: 0.1;
-  --icon-saturate: 0.1;
-  --icon-hue-rotate: 0deg;
-  --icon-brightness: 1;
+  --icon-invert:0.9;
+  --icon-sepia:0.1;
+  --icon-saturate:0.1;
+  --icon-hue-rotate:0deg;
+  --icon-brightness:1;
 }
-
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-  min-height: 100vh;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
+  min-height:100vh;
+  font-size:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .login-container {
-  width: 90%;
-  max-width: 500px;
-  padding: 20px;
-  margin: 0 auto;
+  width:90%;
+  max-width:500px;
+  padding:20px;
+  margin:0 auto;
 }
-
 .login-card {
-  background: var(--card-card);
-  padding: 24px;
-  margin-bottom: 16px;
-  border-radius: 24px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  padding:24px;
+  margin-bottom:16px;
+  border-radius:24px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .card-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin: 16px 0;
-  background: var(--card-card) !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+  margin:16px 0;
+  background:var(--card-card) !important;
+  border-bottom:1px solid rgba(0,0,0,0) !important;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
 }
-
 .logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width:48px;
+  height:48px;
+  border-radius:12px;
 }
-
 .twofactor-title {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  margin-bottom: 16px;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:24px;
+  font-style:normal;
+  font-weight:600;
+  line-height:130%;
+  margin-bottom:16px;
 }
-
 .twofactor-form {
-  width: 100%;
+  width:100%;
 }
-
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom:16px;
 }
-
 .form-control {
-  display: flex;
-  height: 48px;
-  padding: 0px 14px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 12px;
-  background: var(--accent-15) !important;
-  border: 0px solid var(--accent-15) !important;
-  color: var(--text-primary) !important;
+  display:flex;
+  height:48px;
+  padding:0px 14px;
+  align-items:center;
+  gap:10px;
+  align-self:stretch;
+  border-radius:12px;
+  background:var(--accent-15) !important;
+  border:0px solid var(--accent-15) !important;
+  color:var(--text-primary) !important;
 }
-
 .form-control:focus {
-  outline: none;
-  border-color: var(--accent-accent) !important;
+  outline:none;
+  border-color:var(--accent-accent) !important;
 }
-
 .form-control::placeholder {
-  color: var(--text-secondary) !important;
+  color:var(--text-secondary) !important;
 }
-
 .password-group {
-  position: relative;
+  position:relative;
 }
-
 .show-password {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position:absolute;
+  right:12px;
+  top:50%;
+  transform:translateY(-50%);
+  background:none;
+  border:none;
+  padding:4px;
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .icon-eye {
-  width: 20px;
-  height: 20px;
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
-  filter: invert(var(--icon-invert)) sepia(var(--icon-sepia)) saturate(var(--icon-saturate)) hue-rotate(var(--icon-hue-rotate)) brightness(var(--icon-brightness));
+  width:20px;
+  height:20px;
+  opacity:0.6;
+  transition:opacity 0.2s ease;
+  filter:invert(var(--icon-invert)) sepia(var(--icon-sepia)) saturate(var(--icon-saturate)) hue-rotate(var(--icon-hue-rotate)) brightness(var(--icon-brightness));
 }
-
 .show-password:hover .icon-eye {
-  opacity: 1;
+  opacity:1;
 }
-
 .form-check {
-  display: flex;
-  align-items: center;
-  margin-top: 16px;
-  margin-bottom: 16px;
+  display:flex;
+  align-items:center;
+  margin-top:16px;
+  margin-bottom:16px;
 }
-
 .form-check-input {
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  border-radius: 6px;
-  border: 2px solid var(--accent-accent);
-  background-color: var(--card-card);
-  cursor: pointer;
+  width:20px;
+  height:20px;
+  margin-right:8px;
+  border-radius:6px;
+  border:2px solid var(--accent-accent);
+  background-color:var(--card-card);
+  cursor:pointer;
 }
-
 .form-check-input:checked {
-  background-color: var(--accent-accent);
-  border-color: var(--accent-accent);
+  background-color:var(--accent-accent);
+  border-color:var(--accent-accent);
 }
-
 .form-check-label {
-  color: var(--text-primary);
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
-  cursor: pointer;
+  color:var(--text-primary);
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:400;
+  line-height:130%;
+  cursor:pointer;
 }
-
 .btn-kreta {
-  display: flex;
-  height: 48px;
-  padding: 0px 24px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 12px;
-  background: var(--accent-accent);
-  color: white;
-  font-family: Montserrat;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
+  display:flex;
+  height:48px;
+  padding:0px 24px;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  border-radius:12px;
+  background:var(--accent-accent);
+  color:white;
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
+  border:none;
+  cursor:pointer;
+  transition:background-color 0.2s ease;
 }
-
 .btn-kreta:hover {
-  background-color: var(--accent-secondary);
+  background-color:var(--accent-secondary);
 }
-
 .btn-link {
-  background: none;
-  border: none;
-  color: var(--accent-accent);
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
-  text-decoration: underline;
-  cursor: pointer;
-  padding: 0;
+  background:none;
+  border:none;
+  color:var(--accent-accent);
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:400;
+  line-height:130%;
+  text-decoration:underline;
+  cursor:pointer;
+  padding:0;
 }
-
 .btn-link:hover {
-  color: var(--accent-secondary);
+  color:var(--accent-secondary);
 }
-
 .subtext {
-  color: var(--text-primary);
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
-  text-align: center;
+  color:var(--text-primary);
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:400;
+  line-height:130%;
+  text-align:center;
 }
-
 .login-footer {
-  margin-top: 24px;
-  text-align: center;
+  margin-top:24px;
+  text-align:center;
 }
-
 .privacy-link {
-  color: var(--text-secondary);
-  font-family: Figtree;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
-  text-decoration: none;
+  color:var(--text-secondary);
+  font-family:Figtree;
+  font-size:14px;
+  font-style:normal;
+  font-weight:400;
+  line-height:130%;
+  text-decoration:none;
 }
-
 .privacy-link:hover {
-  text-decoration: underline;
+  text-decoration:underline;
 }
-
 .error-message {
-  display: none;
-  color: var(--error-text);
-  font-family: Figtree;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
-  margin-top: 4px;
+  display:none;
+  color:var(--error-text);
+  font-family:Figtree;
+  font-size:12px;
+  font-style:normal;
+  font-weight:400;
+  line-height:130%;
+  margin-top:4px;
 }
-
 .error-message.show {
-  display: block;
+  display:block;
 }
-
 .form-control.error {
-  border: 1px solid var(--error-accent) !important;
+  border:1px solid var(--error-accent) !important;
 }
-
 /* Hide original elements */
-header, main > .container-fluid, footer {
-  display: none !important;
+header,main > .container-fluid,footer {
+  display:none !important;
 }
-
 /* Responsive adjustments */
-@media (max-width: 576px) {
+@media (max-width:576px) {
   .login-container {
-    width: 100%;
-    padding: 16px;
-  }
-  
-  .login-card {
-    padding: 16px;
-  }
+  width:100%;
+  padding:16px;
+}
+.login-card {
+  padding:16px;
+}
 }
\ No newline at end of file
diff --git a/login/twofactor.js b/login/twofactor.js
index ea50ab8..344969a 100644
--- a/login/twofactor.js
+++ b/login/twofactor.js
@@ -1,35 +1,40 @@
 async function transformTwoFactorPage() {
   try {
-    if (document.readyState !== 'complete') {
-      await new Promise(resolve => {
-        window.addEventListener('load', resolve);
+    if (document.readyState !== "complete") {
+      await new Promise((resolve) => {
+        window.addEventListener("load", resolve);
       });
     }
 
-    if (typeof loadingScreen !== 'undefined') {
+    if (typeof loadingScreen !== "undefined") {
       loadingScreen.show();
     }
 
-    const existingForm = document.querySelector('form');
+    const existingForm = document.querySelector("form");
     const formData = {
-      action: existingForm?.getAttribute('action') || '',
-      clientId: document.querySelector('#ClientId')?.value || '',
-      rememberLogin: document.querySelector('#RememberLogin')?.value || 'False',
-      returnUrl: document.querySelector('#ReturnUrl')?.value || '',
-      isRecoveryCode: document.querySelector('#IsRecoveryCode')?.value || 'False',
-      requestToken: document.querySelector('input[name="__RequestVerificationToken"]')?.value || '',
-      trustDeviceValue: document.querySelector('input[name="TrustDevice"][type="hidden"]')?.value || 'false'
+      action: existingForm?.getAttribute("action") || "",
+      clientId: document.querySelector("#ClientId")?.value || "",
+      rememberLogin: document.querySelector("#RememberLogin")?.value || "False",
+      returnUrl: document.querySelector("#ReturnUrl")?.value || "",
+      isRecoveryCode:
+        document.querySelector("#IsRecoveryCode")?.value || "False",
+      requestToken:
+        document.querySelector('input[name="__RequestVerificationToken"]')
+          ?.value || "",
+      trustDeviceValue:
+        document.querySelector('input[name="TrustDevice"][type="hidden"]')
+          ?.value || "false",
     };
-    
+
     const newHTML = `
       <div class="login-container">
         <div class="login-card">
           <div class="card-header">
             <p class="logo-text">
-              <img src=${chrome.runtime.getURL('images/firka_logo.png')} alt="Firka" class="logo">
+              <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
               Firka
             </p>
-            <h1 class="twofactor-title">${LanguageManager.t('twofactor.title')}</h1>
+            <h1 class="twofactor-title">${LanguageManager.t("twofactor.title")}</h1>
           </div>
 
           <form class="twofactor-form" action="${formData.action}" method="post" id="twoFactorForm">
@@ -41,30 +46,30 @@ async function transformTwoFactorPage() {
 
             <div class="form-group password-group">
               <input class="form-control" type="password" id="VerificationCode" name="VerificationCode" 
-                     placeholder="${LanguageManager.t('twofactor.code_placeholder')}" maxlength="256" autocomplete="off" required autofocus>
-              <button type="button" class="show-password" aria-label="${LanguageManager.t('twofactor.show_code')}">
-                <img src="${chrome.runtime.getURL('icons/eye-off.svg')}" alt="Show password" class="icon-eye">
+                     placeholder="${LanguageManager.t("twofactor.code_placeholder")}" maxlength="256" autocomplete="off" required autofocus>
+              <button type="button" class="show-password" aria-label="${LanguageManager.t("twofactor.show_code")}">
+                <img src="${chrome.runtime.getURL("icons/eye-off.svg")}" alt="Show password" class="icon-eye">
               </button>
-              <div class="error-message">${LanguageManager.t('twofactor.code_required')}</div>
+              <div class="error-message">${LanguageManager.t("twofactor.code_required")}</div>
             </div>
 
             <div class="form-check">
               <input class="form-check-input" type="checkbox" id="trustDevice" name="TrustDevice" value="true">
               <label class="form-check-label" for="trustDevice">
-                ${LanguageManager.t('twofactor.trust_device')}
+                ${LanguageManager.t("twofactor.trust_device")}
               </label>
               <input name="TrustDevice" type="hidden" value="false">
             </div>
 
             <div class="d-flex justify-content-center mb-3 mt-4">
-              <button type="submit" class="btn-kreta">${LanguageManager.t('twofactor.verify_button')}</button>
+              <button type="submit" class="btn-kreta">${LanguageManager.t("twofactor.verify_button")}</button>
             </div>
 
             <div class="d-flex justify-content-center mt-3">
               <span class="subtext">
-                ${LanguageManager.t('twofactor.no_access')} 
+                ${LanguageManager.t("twofactor.no_access")} 
                 <button type="submit" class="btn-link" formaction="/account/loginwithrecoverycode">
-                  ${LanguageManager.t('twofactor.recovery_code')}
+                  ${LanguageManager.t("twofactor.recovery_code")}
                 </button>
               </span>
             </div>
@@ -73,21 +78,20 @@ async function transformTwoFactorPage() {
 
         <footer class="login-footer">
           <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=4064926" 
-             target="_blank" class="privacy-link">${LanguageManager.t('login.privacy_policy')}</a>
+             target="_blank" class="privacy-link">${LanguageManager.t("login.privacy_policy")}</a>
         </footer>
       </div>
     `;
-    
+
     document.body.innerHTML = newHTML;
     applyTheme();
     setupEventListeners();
-    if (typeof loadingScreen !== 'undefined') {
+    if (typeof loadingScreen !== "undefined") {
       loadingScreen.hide();
     }
-
   } catch (error) {
-    console.error('Error transforming two-factor page:', error);
-    if (typeof loadingScreen !== 'undefined') {
+    console.error("Error transforming two-factor page:", error);
+    if (typeof loadingScreen !== "undefined") {
       loadingScreen.hide();
     }
   }
@@ -95,77 +99,79 @@ async function transformTwoFactorPage() {
 
 function applyTheme() {
   try {
-    if (typeof getCookie === 'function') {
-      const theme = getCookie('theme') || 'light-blue';
-      document.documentElement.setAttribute('data-theme', theme);
+    if (typeof getCookie === "function") {
+      const theme = getCookie("theme") || "light-blue";
+      document.documentElement.setAttribute("data-theme", theme);
     }
   } catch (error) {
-    console.error('Error applying theme:', error);
+    console.error("Error applying theme:", error);
   }
 }
 
 function setupEventListeners() {
-  const twoFactorForm = document.getElementById('twoFactorForm');
-  const verificationInput = document.getElementById('VerificationCode');
-  const togglePasswordBtn = document.querySelector('.show-password');
-  const formInputs = document.querySelectorAll('.form-control');
+  const twoFactorForm = document.getElementById("twoFactorForm");
+  const verificationInput = document.getElementById("VerificationCode");
+  const togglePasswordBtn = document.querySelector(".show-password");
+  const formInputs = document.querySelectorAll(".form-control");
 
   if (togglePasswordBtn && verificationInput) {
-    togglePasswordBtn.addEventListener('click', () => {
-      const isPassword = verificationInput.type === 'password';
-      verificationInput.type = isPassword ? 'text' : 'password';
-      const icon = togglePasswordBtn.querySelector('.icon-eye');
-      icon.src = chrome.runtime.getURL(`icons/${isPassword ? 'eye-on' : 'eye-off'}.svg`);
+    togglePasswordBtn.addEventListener("click", () => {
+      const isPassword = verificationInput.type === "password";
+      verificationInput.type = isPassword ? "text" : "password";
+      const icon = togglePasswordBtn.querySelector(".icon-eye");
+      icon.src = chrome.runtime.getURL(
+        `icons/${isPassword ? "eye-on" : "eye-off"}.svg`,
+      );
     });
   }
-  formInputs.forEach(input => {
-    input.addEventListener('input', () => {
+  formInputs.forEach((input) => {
+    input.addEventListener("input", () => {
       validateInput(input);
     });
 
-    input.addEventListener('blur', () => {
+    input.addEventListener("blur", () => {
       validateInput(input, true);
     });
   });
   if (twoFactorForm) {
-    twoFactorForm.addEventListener('submit', handleSubmit);
+    twoFactorForm.addEventListener("submit", handleSubmit);
   }
 }
 
 function validateInput(input, showError = false) {
   const isValid = input.value.trim().length > 0;
   const errorElement = input.nextElementSibling?.nextElementSibling;
-  
+
   if (!isValid && showError) {
-    input.classList.add('error');
-    errorElement?.classList.add('show');
+    input.classList.add("error");
+    errorElement?.classList.add("show");
   } else {
-    input.classList.remove('error');
-    errorElement?.classList.remove('show');
+    input.classList.remove("error");
+    errorElement?.classList.remove("show");
   }
-  
+
   return isValid;
 }
 
 function handleSubmit(event) {
   event.preventDefault();
-  
+
   const form = event.target;
-  const inputs = form.querySelectorAll('.form-control[required]');
+  const inputs = form.querySelectorAll(".form-control[required]");
   let isValid = true;
-  inputs.forEach(input => {
+  inputs.forEach((input) => {
     if (!validateInput(input, true)) {
       isValid = false;
     }
   });
   if (isValid) {
-    const submitButton = form.querySelector('.btn-kreta');
+    const submitButton = form.querySelector(".btn-kreta");
     if (submitButton) {
       submitButton.disabled = true;
-      submitButton.innerHTML = `<span class="spinner"></span><span class="btn-text">${LanguageManager.t('twofactor.verifying')}</span>`;
+      submitButton.innerHTML = `<span class="spinner"></span><span class="btn-text">${LanguageManager.t("twofactor.verifying")}</span>`;
     }
-    
+
     form.submit();
   }
 }
-transformTwoFactorPage();
\ No newline at end of file
+transformTwoFactorPage();
diff --git a/logout/logout.css b/logout/logout.css
index b0fc0e6..2849eb0 100644
--- a/logout/logout.css
+++ b/logout/logout.css
@@ -1,138 +1,117 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", serif !important;
-  min-height: 100vh;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif !important;
+  min-height:100vh;
+  font-size:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .logout-container {
-  width: 100%;
-  max-width: 500px;
-  padding: 20px;
-  margin: 0 auto;
+  width:100%;
+  max-width:500px;
+  padding:20px;
+  margin:0 auto;
 }
-
 .logout-header {
-  text-align: center;
-  margin-bottom: 24px;
+  text-align:center;
+  margin-bottom:24px;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 16px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  color:var(--text-primary);
+  font-size:24px;
+  font-weight:600;
+  margin:16px 0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .logo {
-  width: 24px;
-  border-radius: 8px;
-  margin-right: 8px;
+  width:24px;
+  border-radius:8px;
+  margin-right:8px;
 }
-
 .logout-card {
-  background: var(--card-card);
-  padding: 24px;
-  border-radius: 24px;
-  text-align: center;
-  margin-bottom: 16px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  padding:24px;
+  border-radius:24px;
+  text-align:center;
+  margin-bottom:16px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .logout-message {
-  margin-bottom: 24px;
+  margin-bottom:24px;
 }
-
 .logout-message strong {
-  font-size: 18px;
-  color: var(--text-primary);
-  font-weight: 600;
+  font-size:18px;
+  color:var(--text-primary);
+  font-weight:600;
 }
-
 .redirect-timer {
-  font-size: 48px;
-  font-weight: 700;
-  color: var(--accent-accent);
-  margin-bottom: 24px;
+  font-size:48px;
+  font-weight:700;
+  color:var(--accent-accent);
+  margin-bottom:24px;
 }
-
 .btn-continue {
-  display: inline-block;
-  padding: 12px 24px;
-  background: var(--accent-accent);
-  color: var(--button-secondaryFill);
-  text-decoration: none;
-  border-radius: 12px;
-  font-weight: 600;
-  transition: background 0.2s ease, color 0.2s ease;
+  display:inline-block;
+  padding:12px 24px;
+  background:var(--accent-accent);
+  color:var(--button-secondaryFill);
+  text-decoration:none;
+  border-radius:12px;
+  font-weight:600;
+  transition:background 0.2s ease,color 0.2s ease;
 }
-
 .btn-continue:hover {
-  background: var(--accent-secondary) !important;
-  color: var(--button-secondaryFill) !important;
+  background:var(--accent-secondary) !important;
+  color:var(--button-secondaryFill) !important;
 }
-
 .logout-footer {
-  text-align: center;
+  text-align:center;
 }
-
 .privacy-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 14px;
-  display: inline-block;
-  margin-bottom: 8px;
-  transition: color 0.2s ease;
+  color:var(--text-secondary);
+  text-decoration:none;
+  font-size:14px;
+  display:inline-block;
+  margin-bottom:8px;
+  transition:color 0.2s ease;
 }
-
 .privacy-link:hover {
-  color: var(--text-primary);
+  color:var(--text-primary);
 }
-
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .logout-container {
-    padding: 16px;
-  }
-  
-  .logout-card {
-    padding: 20px;
-  }
-  
-  .redirect-timer {
-    font-size: 36px;
-  }
-
-  .logo-text {
-    font-size: 20px;
-  }
-
-  .logo {
-    width: 20px;
-  }
+  padding:16px;
 }
-
-@keyframes fadeIn {
+.logout-card {
+  padding:20px;
+}
+.redirect-timer {
+  font-size:36px;
+}
+.logo-text {
+  font-size:20px;
+}
+.logo {
+  width:20px;
+}
+}@keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
+}
+to {
+  opacity:1;
+  transform:translateY(0);
+}
 }
\ No newline at end of file
diff --git a/logout/logout.js b/logout/logout.js
index a5839a2..b402989 100644
--- a/logout/logout.js
+++ b/logout/logout.js
@@ -1,25 +1,17 @@
 (() => {
-  function loadFonts() {
-    // Create a new style element
-    const style = document.createElement('style');
-    style.textContent = `
-      @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
-      @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
-    `;
-    document.head.appendChild(style);
-  }
   function transformLogoutPage() {
-    // Get current theme and school ID from cookies
-    const theme = cookieManager.get('themePreference') || localStorage.getItem('themePreference') || 'light-green';
-    const instituteCode = cookieManager.get('schoolSubdomain');
-    document.documentElement.setAttribute('data-theme', theme);
-    
-    // Create new HTML structure
+    const theme =
+      cookieManager.get("themePreference") ||
+      localStorage.getItem("themePreference") ||
+      "light-green";
+    const instituteCode = cookieManager.get("schoolSubdomain");
+    document.documentElement.setAttribute("data-theme", theme);
+
     const newHTML = `
       <div class="logout-container">
         <header class="logout-header">
           <p class="logo-text">
-            <img src=${chrome.runtime.getURL('images/firka_logo.png')} alt="Firka" class="logo">
+            <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
             Firka
           </p>
         </header>
@@ -42,38 +34,33 @@
         </footer>
       </div>
     `;
-    
-    // Replace body content
+
     document.body.innerHTML = newHTML;
-    
-    // Start countdown timer
-    const timerElement = document.getElementById('automaticRedirectTimer');
+
+    const timerElement = document.getElementById("automaticRedirectTimer");
     let remainingTime = 5;
-    
+
     const countdownInterval = setInterval(() => {
       remainingTime--;
       if (timerElement) {
         timerElement.textContent = remainingTime;
       }
-    
+
       if (remainingTime <= 0) {
         clearInterval(countdownInterval);
         window.location.href = `https://${instituteCode}.e-kreta.hu`;
       }
     }, 1000);
-    
-    // Handle manual redirect click
-    document.querySelector('.btn-continue')?.addEventListener('click', (e) => {
+
+    document.querySelector(".btn-continue")?.addEventListener("click", (e) => {
       e.preventDefault();
       clearInterval(countdownInterval);
       window.location.href = `https://${instituteCode}.e-kreta.hu`;
     });
   }
-  // Load fonts immediately
-  loadFonts();
-  // Run the transformation
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', transformLogoutPage);
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", transformLogoutPage);
   } else {
     transformLogoutPage();
   }
diff --git a/manifest.json b/manifest.json
index c9e21cd..6226c4f 100644
--- a/manifest.json
+++ b/manifest.json
@@ -18,98 +18,189 @@
       "strict_min_version": "58.0"
     }
   },
-  "web_accessible_resources": [{
-    "resources": [
-      "settings/*",
-      "global/language.js",
-      "images/*",
-      "fonts/*.woff2",
-      "icons/*.svg",
-      "grades/chart.js",
-      "i18n/*.json",
-      "tools/cookieManager.js"
-    ],
-    "matches": ["<all_urls>"]
-  }],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "settings/*",
+        "global/language.js",
+        "images/*",
+        "fonts/*.woff2",
+        "icons/*.svg",
+        "grades/chart.js",
+        "i18n/*.json",
+        "tools/cookieManager.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ],
   "content_scripts": [
     {
-      "matches": ["https://*.e-kreta.hu/*"],
-      "js": ["tools/loadingScreen.js", "tools/cookieManager.js", "tools/helper.js", "tools/createTemplate.js",
-              "global/language.js", "global/maintenance.js", "global/theme.js", "global/navigation.js"],
-      "css": ["tools/loadingScreen.css", "global/theme.css", "global/navigation.css", "global/maintenance.css"],
+      "matches": [
+        "https://*.e-kreta.hu/*"
+      ],
+      "js": [
+        "global/language.js",
+        "global/theme.js",
+        "tools/loadingScreen.js",
+        "tools/cookieManager.js",
+        "tools/helper.js",
+        "tools/createTemplate.js",
+        "global/maintenance.js",
+        "global/navigation.js"
+      ],
+      "css": [
+        "tools/loadingScreen.css",
+        "global/theme.css",
+        "global/navigation.css",
+        "global/maintenance.css"
+      ],
       "run_at": "document_start"
     },
     {
-      "matches": ["https://idp.e-kreta.hu/Account/Login*"],
-      "js": ["login/login.js"],
-      "css": ["login/login.css"]
-    },
-    {
-      "matches": ["https://idp.e-kreta.hu/account/loginwithtwofactor*"],
-      "js": ["login/twofactor.js"],
-      "css": ["login/twofactor.css"]
-    },
-    {
-      "matches": ["https://*.e-kreta.hu/Hianyzas/Hianyzasok*"],
-      "js": ["absences/absences.js"],
-      "css": ["absences/absences.css"],
-      "run_at": "document_end"
-    },
-    {
-      "matches": ["https://idp.e-kreta.hu/Account/Logout*"],
-      "js": ["logout/logout.js"],
-      "css": ["logout/logout.css"],
-      "run_at": "document_end"
-    },
-    {
-      "matches": ["https://*.e-kreta.hu/Adminisztracio/BelepesKezelo*"],
-      "js": ["roleselect/roleselect.js"],
-      "css": ["roleselect/roleselect.css"],
-      "run_at": "document_end"
-    },
-    {
-      "matches": ["https://*.e-kreta.hu/Intezmeny/Faliujsag*"],
-      "js": ["dashboard/dashboard.js"],
-      "css": ["dashboard/dashboard.css"],
-      "run_at": "document_end"
-    },
-    {
-      "matches": [ "https://*.e-kreta.hu/TanuloErtekeles/Osztalyzatok*"
+      "matches": [
+        "https://idp.e-kreta.hu/Account/Login*"
+      ],
+      "js": [
+        "login/login.js"
+      ],
+      "css": [
+        "login/login.css"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "https://idp.e-kreta.hu/account/loginwithtwofactor*"
+      ],
+      "js": [
+        "login/twofactor.js"
+      ],
+      "css": [
+        "login/twofactor.css"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "https://*.e-kreta.hu/Hianyzas/Hianyzasok*"
+      ],
+      "js": [
+        "absences/absences.js"
+      ],
+      "css": [
+        "absences/absences.css"
+      ],
+      "run_at": "document_end"
+    },
+    {
+      "matches": [
+        "https://idp.e-kreta.hu/Account/Logout*"
+      ],
+      "js": [
+        "logout/logout.js"
+      ],
+      "css": [
+        "logout/logout.css"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "https://*.e-kreta.hu/Adminisztracio/BelepesKezelo*"
+      ],
+      "js": [
+        "roleselect/roleselect.js"
+      ],
+      "css": [
+        "roleselect/roleselect.css"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "https://*.e-kreta.hu/Intezmeny/Faliujsag*"
+      ],
+      "js": [
+        "dashboard/dashboard.js"
+      ],
+      "css": [
+        "dashboard/dashboard.css"
+      ],
+      "run_at": "document_end"
+    },
+    {
+      "matches": [
+        "https://*.e-kreta.hu/TanuloErtekeles/Osztalyzatok*"
+      ],
+      "js": [
+        "grades/grades.js",
+        "grades/chart.js"
+      ],
+      "css": [
+        "grades/grades.css"
       ],
-      "js": ["grades/grades.js", "grades/chart.js"],
-      "css": ["grades/grades.css"],
       "run_at": "document_end"
     },
     {
       "matches": [
         "https://*.e-kreta.hu/Orarend/InformaciokOrarend*"
       ],
-      "js": ["timetable/timetable.js"],
-      "css": ["timetable/timetable.css"],
+      "js": [
+        "timetable/timetable.js"
+      ],
+      "css": [
+        "timetable/timetable.css"
+      ],
       "run_at": "document_end"
     },
     {
       "matches": [
         "https://*.e-kreta.hu/Adminisztracio/Profil*"
       ],
-      "js": ["profile/profile.js"],
-      "css": ["profile/profile.css"],
+      "js": [
+        "profile/profile.js"
+      ],
+      "css": [
+        "profile/profile.css"
+      ],
       "run_at": "document_end"
     },
     {
       "matches": [
         "https://*.e-kreta.hu/Tanulo/TanuloHaziFeladat*"
       ],
-      "js": ["homework/homework.js"],
-      "css": ["homework/homework.css"],
+      "js": [
+        "homework/homework.js"
+      ],
+      "css": [
+        "homework/homework.css"
+      ],
+      "run_at": "document_end"
+    },
+    {
+      "matches": [
+        "https://*.e-kreta.hu/Adminisztracio/ElfelejtettJelszo*"
+      ],
+      "js": [
+        "forgotPassword/forgotPassword.js"
+      ],
+      "css": [
+        "forgotPassword/forgotPassword.css"
+      ],
       "run_at": "document_end"
     },
     {
       "matches": [
         "https://intezmenykereso.e-kreta.hu/"
       ],
-      "js": ["search/search.js"],
-      "css": ["search/search.css"],
+      "js": [
+        "search/search.js"
+      ],
+      "css": [
+        "search/search.css"
+      ],
       "run_at": "document_end"
     }
   ]
diff --git a/profile/KRÉTA Iskolai Alaprendszer.html b/profile/KRÉTA Iskolai Alaprendszer.html
new file mode 100644
index 0000000..a1ea404
--- /dev/null
+++ b/profile/KRÉTA Iskolai Alaprendszer.html	
@@ -0,0 +1,1195 @@
+
+
+
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="utf-8" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <title>KR&#201;TA Iskolai Alaprendszer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://www.google-analytics.com/" crossorigin>
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+    <!-- Iskolaőr üzenetküldéshez kell -->
+    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
+    <!-- <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script> -->
+    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
+
+    <link href="/App_Themes/css?v=I4E4d3qyfTw3zoyPkS4duazQh-Bd_mFSNwVwKTUwuIc1" rel="stylesheet"/>
+<link href="/Content/css?v=p1VFrTxw9ScD9x45shiOYQ70UeKfaB0foHQDZqBbHr41" rel="stylesheet"/>
+<link href="/Content/kretaControls?v=NkcZD4xfLC2ZqLRFbwtaKwUjijFL6KlcGlaAQR1a3fc1" rel="stylesheet"/>
+
+    <link href="/Content/kretaCss?v=-Z8kVwvgj8dKLch6kl8l4g5BVhupbZK8D9xmk_l7Jus1" rel="stylesheet"/>
+
+    <script src="/bundles/jquery?v=I7FYc7uUyUQRigvFtHATTtPKObg9rR_X9HnduBwjLUc1"></script>
+
+    <script src="/bundles/bootstrap?v=eQkPpIj9AI2c9PR5K4ZfhXhYjA4pDCwBTEIKbEgFIBw1"></script>
+
+    <script src="/bundles/ErrorHandler?v=2xIzhvIuhN7OSA30vAU8NwiA4_JOKuqVb9Xg6Gd4PGs1"></script>
+
+    <script src="/bundles/js?v=LjzKHlZ8ETwgJkwBAFtvlNNRQnfxSs8CeSPfCZI69501"></script>
+
+    <script src="/bundles/moment?v=Zp1pZ5N2VeZJWT_efpUgYvyvsolX4DTl17SuY-hemV01"></script>
+
+    <script src="/bundles/document-register-element?v=rCcXVBAw3r7hA26TyvTQJ24Y4ju-YjKubCkVxlkDvNs1"></script>
+
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110080867-2"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'UA-110080867-2');
+</script>
+
+    <style>
+        .usermenu ul.dropdown-menu i {
+            width: 15px;
+            height: 15px;
+        }
+    </style>
+
+    <script type="text/javascript">
+        var UrlHelper = {
+            AppPath: '/',
+            CurrentArea: 'Adminisztracio',
+            CurrentControl: 'Profil',
+            CurrentControlPath: '/Adminisztracio/Profil',
+            GetLayoutInformationPath: '/Layout/GetLayoutInformation',
+            RemainingTime: '/Layout/GetRemainingTime',
+            ExtendTime: '/Layout/ExtendSessionTime',
+            LogOutPath: '/Home/LogOut',
+            SajatAdatlapPopUp: '/Adminisztracio/Profil/SajatAdatlapPopUp',
+            DashboardPopup: '/Layout/DashboardUzenetPopup',
+            IskolaorUzenetKuldesPopup : '/Layout/OpenIskolaorUzenetKuldesPopup'
+        };
+
+        $(document).ready(function () {
+            JiraRestHelper.urls = {
+                UgyfelSzolgalatPopUp: '/UgyfelSzolgalat/UgyfelSzolgalat/UgyfelSzolgalatPopUp',
+                BejelentesPopUp: '/UgyfelSzolgalat/UgyfelSzolgalat/BejelentesPopUp',
+                KommunikaciosPopUp: '/UgyfelSzolgalat/UgyfelSzolgalat/KommunikaciosPopUp',
+                CreateCommentToBejegyzes: "/api/UgyfelSzolgalatApi/CreateCommentToBejegyzes",
+                CreateBejelentes: "/api/UgyfelSzolgalatApi/CreateBejelentes",
+                CreateDbVisszaallitas: "/api/UgyfelszolgalatApi/CreateDbVisszaallitas",
+                CreateUjUrlIgenyles: "/api/UgyfelszolgalatApi/CreateUjUrlIgenyles",
+                CreateKonferenciaJelentkezes: "/api/UgyfelszolgalatApi/CreateKonferenciaJelentkezes"
+            };
+
+            JiraRestHelper.popUpTitles =
+            {
+                UgyfelSzolgalat: { title: "UgyfelSzolgalatWindow", text: "UgyfelSzolgalat" },
+                Bejelentes: { title: "BejelentesWindow", text: "Bejelentes" },
+                Kommunikacios: { title: "KommunikaciosWindow", text: "Kommunikacios" }
+            };
+        });
+
+        GlobalErrorHandler('/Layout/ClientError');
+    </script>
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $(document).keydown(function (e) {
+                if ($("#KretaProgressBar").hasClass("isOverlayActiv")) {
+                    e.preventDefault();
+                    return false;
+                }
+            });
+            var ajaxError401RedirectInProgress = false;
+            var ajaxCallCount = 0;
+
+            $.ajaxSetup({
+                async: true,
+                cache: false
+            });
+
+            $(document).ajaxSend(function () {
+                if (AjaxHelper) {
+                    ajaxCallCount++;
+                    AjaxHelper.ShowIndicator();
+                }
+            });
+
+            $(document).ajaxComplete(function () {
+                if (AjaxHelper && !ajaxError401RedirectInProgress) {
+                    ajaxCallCount--;
+                    if (ajaxCallCount === 0) {
+                        AjaxHelper.HideIndicator();
+                    }
+                }
+            });
+
+            $(document).ajaxError(function (event, jqxhr, settings, thrownError) {
+                if (jqxhr.status == '401') {
+                    ajaxError401RedirectInProgress = true;
+                    window.location = '/';
+                }
+            });
+
+            kendo.culture("hu-HU");
+
+            $.validator.addMethod(
+                "date",
+                function (value, element) {
+                    return this.optional(element) || (kendo.parseDate(value) != null);
+                }
+            );
+
+            $.validator.addMethod(
+                "min",
+                function (value, element, param) {
+                    var floatValue = kendo.parseFloat(value);
+                    return this.optional(element) || floatValue >= param;
+                }
+            );
+
+            $.validator.addMethod(
+                "max",
+                function (value, element, param) {
+                    var floatValue = kendo.parseFloat(value);
+                    return this.optional(element) || floatValue <= param;
+                }
+            );
+
+            if ("649" !== "649") {
+                setTimeout(function () {
+                    $(".main-header, .selectTanev *").addClass("kovTanevBackgound");
+                }, 0);
+            }
+
+            $.validator.addMethod(
+                "requireddropdown",
+                function (value, element, param) {
+                    var numberRegex = /^\d+$/;
+                    return numberRegex.test(value);
+                }
+            );
+
+            $.validator.addMethod(
+                "daterange",
+                function (value, element, param) {
+                    try {
+                        var parts = value.split('.');
+                        var date = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
+                        var minParts = ("1/1/1900").split('/');
+                        var maxPatrs = ("1/1/2100").split('/');
+                        if (date >= new Date(Date.UTC(minParts[2], minParts[1] - 1, minParts[0]))
+                            && date <= new Date(Date.UTC(maxPatrs[2], maxPatrs[1] - 1, maxPatrs[0]))) {
+                            return true;
+                        }
+                    } catch (e) { }
+                    return this.optional(element) || false;
+                }
+            );
+        });
+
+        var MasterLayoutHelper = (function () {
+            var masterLayoutHelper = function () { };
+            masterLayoutHelper.changeSelectedTanev = function () {
+                AjaxHelper.DoPostQuery("/Layout/ChangeSelectedTanev", null, { selectedTanevId: parseInt($("#selectTanevCombo").val()) }, responeOk);
+            }
+
+            masterLayoutHelper.popUpSajatAdatlapWindow = function () { AjaxHelper.DoPost(UrlHelper.SajatAdatlapPopUp, null, function (data) { openPopUp('Szem&#233;lyes adatlap', data) }) };
+
+            masterLayoutHelper.checkNeedDashboardPopup = function () { checkNeedDashboardPopup(); };
+
+            function openPopUp(title, data) {
+                var config = KretaWindowHelper.getWindowConfigContainer();
+                config.title = title;
+                config.content = data;
+                config.width = "85%";
+                config.height = "85%";
+
+                var modal = KretaWindowHelper.createWindow("SzemelyesAdatlapWindow", config);
+                KretaWindowHelper.openWindow(modal, true);
+            }
+
+            function responeOk(data) {
+                if (CommonUtils.parseBool(data)) {
+                    location.reload();
+                } else {
+                    location.href = "/Adminisztracio/RendszerHibaErtesites";
+                }
+            }
+
+            function checkNeedDashboardPopup() {
+                var needId = $('#popupId').val();
+                var needField = $('#popupAzonosito').val();
+
+                if (typeof (needId) !== 'undefined' && needId > 0
+                    && typeof (needField) !== 'undefined' && needField.length > 0) {
+                    var postData = { popupId: needId, egyediAzonosito: needField };
+                    AjaxHelper.DoPost(UrlHelper.DashboardPopup, postData, function (data) { openDashboardPopup($('#Name', data).val(), data); })
+                }
+            }
+
+            function openDashboardPopup(title, data, actions = []) {
+                var config = KretaWindowHelper.getWindowConfigContainer();
+                config.title = title;
+                config.content = data;
+                config.width = "auto";
+                config.height = "auto";
+                config.maxWidth = "50%";
+                config.actions = actions;
+
+                var modal = KretaWindowHelper.createWindow("popupId", config);
+                KretaWindowHelper.openWindow(modal, true);
+            }
+
+            masterLayoutHelper.popUpIskolaorUzenetKuldesWindow = function () {
+                AjaxHelper.DoPost(UrlHelper.IskolaorUzenetKuldesPopup, null, function (data) {
+                    openDashboardPopup("Iskolaőr értesítése", data, ["Close"]);
+                });
+            };
+
+            return masterLayoutHelper;
+        })();
+    </script>
+
+    <script src="/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>
+
+    <script src="/bundles/js?v=LjzKHlZ8ETwgJkwBAFtvlNNRQnfxSs8CeSPfCZI69501"></script>
+
+    <script src="/bundles/kendo?v=JN2tGZtQ8y8-ZJxBEfLjj0dWaISpgzaZogFvSEaKMmw1"></script>
+
+    <script src="/bundles/KendoGrid?v=XYMMdBWNLMxpNifXOZ3_p4rqXmL32THbuPM8LwRu3R01"></script>
+
+    <script src="/bundles/KretaImportGridHelper?v=SGlbrrv2r_Arwp8jTnN_odpKu-5oJwvJUOTV5DFdUFY1"></script>
+
+    <script src="/bundles/KretaWindowHelper?v=1A8rCbR6p4m0Mbi0bA0eBkJYkqeuB0GFpemEmEc1paA1"></script>
+
+    <script src="/bundles/KretaDateTimeHelper?v=iZFD-QTBWKUqy4y2YDTUiCuOU6k7zYN-i3c24NwSngI1"></script>
+
+    <script src="/bundles/KretaComboBoxHelper?v=YsEGhua4m5MhOUydgLpj6fWUV-ZBFQuarn1OqpSmnv81"></script>
+
+    <script src="/bundles/KretaMultiSelectHelper?v=QRzPeC-vpCFX8tLzlBJ15HEfTnY63a9pb6_IJvWlSmA1"></script>
+
+    <script src="/bundles/KretaCheckBoxHelper?v=PFGoL9ngSQVf_MtJmfhqxDC2GsVz2CfK6QtyXBIWl0w1"></script>
+
+    <script src="/bundles/KretaTooltipHelper?v=mdlQW441xjTL-mUTMXqpZxKM9ei22DV_AZ-CPEKhDb01"></script>
+
+    <script src="/bundles/KretaDropDownListHelper?v=QSMuCPnjwmWAoWFfp60VHEWefYKQAOL0W7EnDfccY381"></script>
+
+    <script src="/bundles/KretaPanelBarHelper?v=CExrsr9sFyspEOwXX55w2Tav30HL__AAb5pr7QDY4Ds1"></script>
+
+    <script src="/bundles/KretaRadioButtonListHelper?v=0PtyjFmcEpnmWudrrUQLJnUz-5tQWBNjvBrQdDUAlso1"></script>
+
+    <script src="/bundles/KretaOsztalybaSorolasHelper?v=pECbLXfEpnvq5VfMO1XHTJWAWhUg1ocw5Rdq-3-EELw1"></script>
+
+    <script src="/bundles/KretaWizard?v=dsxI2jU8QgcLgszkCTLXqq2g_WRxqpB-y5lSSmxI2ik1"></script>
+
+    <script src="/bundles/KretaNumericHelper?v=sVucPlJXJl7KIGvxM4Ex7haz2lwoXFa4aHLjAGQjMqw1"></script>
+
+
+    <script type="text/javascript">
+        var GlobalSystemParams = {};
+        GlobalSystemParams.SuccessFeedBackWindowNeeded = CommonUtils.parseBool("False");
+        GlobalSystemParams.IdpLoginEnabled = CommonUtils.parseBool("True");
+    </script>
+</head>
+<body>
+    <input name="__RequestVerificationToken" type="hidden" value="Sntbp-oBQUC5GTv2T7JFZThMA0vEFVzGSFneA9P0Jw5Q6cVEKrEKX_tcF07y1WpASxHGFIWGbC_LdYt2ysJKDTnU7Xr057FEWsqJOllcC6X5snZrtib3437ePNIFFCCnf4TqLmP88dvFbGETev-wxg2" />
+
+    <script>
+        // Iskolaőr üzenetküldéséhez kell
+        var firebaseConfig = {
+            apiKey: "AIzaSyBztLi3HebGmms_JaiP-gMK0eDdMlZ5fx8",
+            authDomain: "kreta-iskolaor.firebaseapp.com",
+            databaseURL: "https://kreta-iskolaor.firebaseio.com",
+            projectId: "kreta-iskolaor",
+            storageBucket: "kreta-iskolaor.appspot.com",
+            messagingSenderId: "1011319855684",
+            appId: "1:1011319855684:web:4a822f071aaa48e4b33a11",
+            //measurementId: "G-4N29KXY0J2",
+        };
+        firebase.initializeApp(firebaseConfig);
+        //firebase.analytics();
+    </script>
+
+    <div id="KretaProgressBar" class="modalBckgroundMain" style="display: block;">
+        <img id="bodyOverLayImg" src="/App_Themes/New_Common_Images/loading2.gif" alt="Folyamatban">
+    </div>
+
+    <script id="kendoTooltip-defaultTemplate" type="text/x-kendo-template"><div class='kendoTooltip defaultKendoTooltip'>
+            <table>
+                <tr>
+                    <td style="max-width: 600px;word-break:break-all">#:target.data('tooltiptext')#</td>
+                </tr>
+            </table>
+        </div></script>
+
+
+<script type="text/javascript">
+    function popupCheck() {
+        MasterLayoutHelper.checkNeedDashboardPopup();
+    }
+</script>
+
+<script type="text/javascript">
+    var deleteCookie = function (name) {
+        $.cookie(name, null, { path: '/' });
+    };
+
+    function setCookie(actDate, frequencyRate) {
+        actDate.setTime(actDate.getTime() + (frequencyRate));
+        $.cookie("EUgyUzenetekRecheck", actDate.getTime(), { expires: actDate, secure: true });
+
+        var newDate = new Date();
+        var difference = actDate - newDate.getTime();
+
+        setTimeout(function () {
+            EUgyCall();
+        }, difference);
+    };
+
+    function setCookieFrissitesDatum(actDate, frequencyRate) {
+        actDate.setTime(actDate.getTime() + (frequencyRate));
+        $.cookie("FrissitesiDatum", actDate.getTime(), { expires: actDate, secure: true });
+
+        var newDate = new Date();
+        var difference = actDate - newDate.getTime();
+
+        setTimeout(function () {
+            FrissitesiDatumCall();
+        }, difference);
+    };
+
+    function EUgyCall() {
+        if ("True" === "True") {
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "/Home/EUgyUzenetekRecheck", true);
+            xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
+            xhr.onreadystatechange = function () {
+                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                    EUgyCallSuccess(this.responseText);
+                }
+            }
+            xhr.send();
+        }
+    };
+
+    function FrissitesiDatumCall() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", "/Home/GetIsFrissitesWarrning", true);
+        xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
+        xhr.onreadystatechange = function () {
+            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                FrissitesiDatumCallSuccess(this.responseText);
+            }
+        }
+        xhr.send();
+    };
+
+    function EUgyCallSuccess(data) {
+        var obj = jQuery.parseJSON(data);
+        var date = new Date();
+        setCookie(date, obj.frequencyRate);
+
+        if (obj) {
+            var element = $(".messageCountBadge");
+            if (element.length == 0) {
+                setTimeout(function () { $(".messageCountBadge").attr('data-badge', obj.cnt);  }, 2000);
+            }
+            else {
+                $(".messageCountBadge").attr('data-badge', obj.cnt);
+            }
+        }
+    };
+
+    var interval = 0;
+
+    function FrissitesiDatumCallSuccess(data) {
+        var obj = jQuery.parseJSON(data);
+        var date = new Date();
+        setCookieFrissitesDatum(date, obj.frequencyRate);
+
+        if (obj != null && obj.isFrissites) {
+            $("#frissitesDatumDiv").show();
+            var duration = obj.duration;
+
+            if (duration <= 900 && duration >= 300) {
+                $(".main-header, #frissitesDatumDiv").css("background", "#FFECC7"); $(".selectTanev span span").css("background", "#FFECC7");
+            }
+            if (duration <= 300) {
+                $(".main-header, #frissitesDatumDiv").css("background", "#FFBFC4"); $(".selectTanev span span").css("background", "#FFBFC4");
+            }
+
+            var countDownTimer = 0;
+            var actualTime = duration;
+            resetInterval();
+            interval = setInterval(function () {
+                var minutes = parseInt(actualTime / 60, 10);
+                var seconds = parseInt(actualTime % 60, 10);
+
+                minutes = minutes < 10 ? "0" + minutes : minutes;
+                seconds = seconds < 10 ? "0" + seconds : seconds;
+                $(".frissitesDatumText").text(minutes + ":" + seconds);
+                countDownTimer = countDownTimer + 1;
+                actualTime = duration - countDownTimer;
+
+                if (actualTime == 900) { $(".main-header, #frissitesDatumDiv").css("background", "#FFECC7"); $(".selectTanev span span").css("background", "#FFECC7"); KretaWindowHelper.notification("A Kr&#233;ta rendszer friss&#237;t&#233;s&#233;ig visszamarad&#243; idő 15 perc! K&#233;rj&#252;k, mentse el az eddig felvitt adatait!", "warning"); }
+                if (actualTime == 600) { $(".main-header, #frissitesDatumDiv").css("background", "#FFECC7"); $(".selectTanev span span").css("background", "#FFECC7"); KretaWindowHelper.notification("A Kr&#233;ta rendszer friss&#237;t&#233;s&#233;ig visszamarad&#243; idő 10 perc! K&#233;rj&#252;k, mentse el az eddig felvitt adatait!", "warning"); }
+                if (actualTime == 300) { $(".main-header, #frissitesDatumDiv").css("background", "#FFBFC4"); $(".selectTanev span span").css("background", "#FFBFC4"); KretaWindowHelper.notification("A Kr&#233;ta rendszer friss&#237;t&#233;s&#233;ig visszamarad&#243; idő 5 perc! K&#233;rj&#252;k, mentse el az eddig felvitt adatait!", "error"); }
+            }, 1000);
+        }
+        else {
+            $("#frissitesDatumDiv").hide();
+        }
+    };
+
+    function resetInterval() {
+        clearInterval(interval);
+        interval = 0;
+    }
+
+    $(document).ready(function () {
+        deleteCookie('EUgyUzenetekRecheck');
+        EUgyCall();
+
+        deleteCookie('FrissitesiDatum');
+        FrissitesiDatumCall();
+    });
+</script>
+
+<script id="UserMenuTemplate" type="text/x-jQuery-tmpl">
+    <div class="usermenu">
+            <div class="pull-right topnotif">
+                <div title="Term&#233;kport&#225;l">
+                    <a href="/Nyomtatvanyok/Termekportal">
+                        <i class="fa fa-question"></i>
+                    </a>
+                </div>
+            </div>
+        <div class="pull-right topnotif">
+            <div title="KR&#201;TA Tud&#225;sb&#225;zis">
+
+                <a target="_blank" href="https://tudasbazis.ekreta.hu/"><i class="fa fa-book"></i></a>
+            </div>
+        </div>
+                <div class="pull-right topnotif">
+                    <div title="e-Learning">
+                        <a href="/Adminisztracio/ELearning">
+                            <i class="fa fa-tasks"></i>
+                        </a>
+                    </div>
+                </div>
+                            <div class="pull-right topnotif">
+                <div title="&#220;zenetek">
+                    <a href="/Home/Uzenetek" target="_blank">
+                        <i class="fa fa-envelope-o messageCountBadge" data-badge="${MessageCount}"></i>
+                    </a>
+                </div>
+            </div>
+                    <div class="pull-right topnotif disabledMenuItem">
+                <div title="&#201;rtes&#237;t&#233;sek">
+                    <a href="${EventUrl}">
+                        <i class="fa fa-bell-o" data-badge="${EventCount}"></i>
+                    </a>
+                </div>
+            </div>
+                {%if AdminHomePageUrl != "" %}
+                <div class="pull-right topnotif">
+                    <div title="Rendszer&#252;zenetek">
+                        <a href="${AdminHomePageUrl}">
+                            <i class="fa fa-exclamation-triangle"></i>
+                        </a>
+                    </div>
+                </div>
+        {%/if%}
+        <div class="dropdown" title="Profil men&#252;">
+            <button class="userbar dropdown-toggle" type="button" id="usermenu_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <div class="username">
+                    <p class="headeruserNameSpan xs-username sm-userName md-userName lg-userName">${UserName}</p>
+                    <p id="usermenu_timer" role="timer" aria-live="off" class="usermenu_timer"></p>
+                </div>
+
+                <div class="userimg-sm">
+                    <img class="userimg-sm" style="border-width: 0px;" alt="" src="${ProfilImgSrc}" />
+                </div>
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="usermenu_dropdown">
+                {%each(i, menu) UserMenuItems%}
+                <li>
+                    <a href="${menu.Url}" onclick="${menu.ClientAction}">
+                        <i class="fa ${menu.CssClass}"></i>
+                        <span>${menu.Name}</span>
+                    </a>
+                </li>
+                {%/each%}
+            </ul>
+        </div>
+        <div class="pull-right topnotif hidden">
+            <div title="Popup">
+                <input id="popupId" type="hidden" value="${NeedPopupId}" />
+                <input id="popupAzonosito" type="hidden" value="${NeedPopupAzonosito}" />
+                ${ popupCheck() }
+            </div>
+        </div>
+    </div>
+</script>
+
+<script type="text/javascript">
+    var Globalization = {
+        Siker: "Siker",
+        HibaSikeresenLejelentve: "Hiba sikeresen lejelentve!",
+        Bejelentéseim: "Bejelentéseim)",
+        UjHibabejelentes: "Új hibabejelentés",
+        Igen: "Igen",
+        Nem: "Nem",
+        Vissza: "Vissza",
+        GridAdatvesztesFigyelmeztetes: "A művelettel minden kitöltött tartalom elvész!",
+        Hiba: "Hiba",
+        MunkamenetLejar: "A munkamenet hamarosan lejár, folytatáshoz kérem kattintson a \"Rendben\" gombra.",
+        Figyelem: "Figyelem",
+        KeresesFigyelmeztetes: "A keresési feltételek megváltoztak! Frissítéshez kattintson a keresés gombra!",
+        Folytatas: "Folytatás",
+        Megsem: "Mégse",
+        TovabbiInfo: "További információk",
+        Hibabejelentese: "Hiba bejelentése",
+        Ora: "Óra",
+        MunkaHet: "Munkahét",
+        SikeresMentes: "A művelet sikeresen megtörtént!",
+        Rendben: "Rendben",
+        Kerdes: "Kérdés",
+        OsztalyCsoportbaSorolasModositasFigyelmeztetes: "Ha módosítja a célcsoportot/osztályt mentés előtt, akkor a módosításai el fognak veszni!",
+        OsztalybontottCsoportOsztalyNemEgyezik: "Osztálybontott csoportba csak akkor lehet sorolni, ha az osztály megegyezik!",
+        MenteshezLegalabbEgyTanulo: "A mentéshez legalább egy tanulót ki kell választani!",
+        HianyzoKovTanev: "A rendszerben nem található meg jelenleg következő tanév, így a besorolás nem lehetséges!",
+        NincsTalalat: "Nincs találat",
+        NincsAdat: "Nincs adat",
+        ElsoOldal: "Első oldal",
+        UtolsoOldal: "Utolsó oldal",
+        KovetkezoOldal: "Következő oldal",
+        ElozoOldal: "Előző oldal",
+        TobbOldal: "Több oldal",
+        MunkaHetSzombattal: "Munkahét szombattal",
+        KotelezoMegadni: "Kötelező megadni",
+        SikertelenIskolaorUzenetKuldes: "Sikertelen iskolaőr üzenet küldés!",
+        SikeresIskolaorUzenetKuldes: "Sikeres iskolaőr üzenet küldés",
+        EgyesTanulokMarRendelkeznekKiAtsorolasiZaradekkalKerdes: "Egyes tanulók már rendelkeznek 'Ki- vagy átsorolási záradékkal! A most megadott záradékot az ő számukra is elmentsük, vagy csak azon tanulóknak, akiknek még nem rögzítettek 'Ki vagy átsorolási záradék'-ot?",
+        RogzitesMindenkinek: "Rögzítés mindenkinek",
+        RogzitesAkinekMegNincsen: "Rögzítés akiknek még nincsen"
+    };
+</script>
+
+    <div class="page-wrapper">
+        <div class="clearfix container-fluid" id="frissitesDatumDiv" style="display: none;">
+            <div class="row">
+                <div class="col-xs-12 col-sm-12" style="font-weight: bold; font-size: 16px;">
+                    <div style="text-align:center;">
+                        <span style="font-size: 13px;">A rendszer friss&#237;t&#233;se hamarosan kezdődik!</span>
+                        <span class="frissitesDatumText"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main-header clearfix container-fluid main-header">
+            <div class="row">
+                <div class="col">
+                    <div class="leave-600-PixelRight IntezmenyNevContainer">
+                            <h3 class="brand-title ng-binding" style="margin-bottom: 0px;">
+                                <span id="layout_organizationName" class="IntezmenyNev wraptext"></span>
+                            </h3>
+                            <div style="clear: both;" class="selectTanev">
+2024/2025                            </div>
+                    </div>
+                     <div id="layout_userMenu" style="width: 570px; float: right;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="layout_navigationBar" class="main-menu clearfix">
+
+<nav class="navbar">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" id="layout_navbar_home" href="#"></a>
+            <p id="layout_organizationName2" class="orgnamesmallscreen"></p>
+            <div class="main-header2">
+                <div id="layout_userMenu2">
+                </div>
+            </div>
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mb1_menudiv" aria-expanded="false" aria-controls="navbar">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+        </div>
+        <span id="Menu_Menu">
+  <div id="mb1_menudiv" class="navbar-collapse collapse">
+    <ul id="mb1" class="nav navbar-nav" role="menubar">
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Orarend/InformaciokOrarend" target="">
+                    <i class='fa fa-calendar-check-o fa-2x'></i>
+                                <br />
+                <span>
+&#211;rarend                </span>
+            </a>
+        
+
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown menu-large menu-icon  " onfocus="" onblur="">
+              
+
+
+
+
+        <a href='javascript:void(0);' class='dropdown-toggle' data-toggle='dropdown'>
+                    <i class='fa fa-graduation-cap fa-2x'></i>
+                                <br />
+                <span>
+Oszt&#225;lyzatok                </span>
+            </a>
+        
+
+
+    <ul class="dropdown-menu megamenu row" role="menu" aria-hidden="true">
+                <li class="col-xs-4 col-sm-4">
+                    <ul>
+                        
+
+
+
+
+        <li class="nav-header red">
+
+&#201;rt&#233;kel&#233;s            </li>
+        
+
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/TanuloErtekeles/Osztalyzatok" target="">
+                <span>
+Oszt&#225;lyzatok                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/TanuloErtekeles/OsztalyzatokFeleviErtesito" target="">
+                <span>
+F&#233;l&#233;vi &#233;rtes&#237;tő                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/TanuloErtekeles/OsztalyzatokEvvegiErtesito" target="">
+                <span>
+&#201;v v&#233;gi &#233;rtes&#237;tő                </span>
+            </a>
+
+    
+
+                                    </li>
+                    </ul>
+                </li>
+    </ul>
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown menu-large menu-icon  " onfocus="" onblur="">
+              
+
+
+
+
+        <a href='javascript:void(0);' class='dropdown-toggle' data-toggle='dropdown'>
+                    <i class='fa fa-spinner fa-2x'></i>
+                                <br />
+                <span>
+Mulaszt&#225;sok                </span>
+            </a>
+        
+
+
+    <ul class="dropdown-menu megamenu row" role="menu" aria-hidden="true">
+                <li class="col-xs-4 col-sm-4">
+                    <ul>
+                        
+
+
+
+
+        <li class="nav-header red">
+
+Mulaszt&#225;sok            </li>
+        
+
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Hianyzas/Hianyzasok" target="">
+                <span>
+K&#233;s&#233;sek, hi&#225;nyz&#225;sok                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Hianyzas/InformaciokIgazolasok" target="">
+                <span>
+Igazol&#225;sok                </span>
+            </a>
+
+    
+
+                                    </li>
+                    </ul>
+                </li>
+    </ul>
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown menu-large menu-icon  " onfocus="" onblur="">
+              
+
+
+
+
+        <a href='javascript:void(0);' class='dropdown-toggle' data-toggle='dropdown'>
+                    <i class='fa fa-info-circle fa-2x'></i>
+                                <br />
+                <span>
+Inform&#225;ci&#243;k                </span>
+            </a>
+        
+
+
+    <ul class="dropdown-menu megamenu row" role="menu" aria-hidden="true">
+                <li class="col-xs-4 col-sm-4">
+                    <ul>
+                        
+
+
+
+
+        <li class="nav-header red">
+
+Inform&#225;ci&#243;k            </li>
+        
+
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Orarend/InformaciokTanorak" target="">
+                <span>
+Tan&#243;r&#225;k                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/TanuloErtekeles/InformaciokFeljegyzesek" target="">
+                <span>
+Feljegyz&#233;sek                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Nyomtatvanyok/Nyomtatvanyok/TanuloiIndex" target="">
+                <span>
+&#201;rtes&#237;tők, bizony&#237;tv&#225;nyok                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Feljegyzes/TanuloKozossegiSzolgalatai" target="">
+                <span>
+K&#246;z&#246;ss&#233;gi szolg&#225;lat                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/Tanulo/TanuloBejelentettSzamonkeresek" target="">
+                <span>
+Bejelentett sz&#225;monk&#233;r&#233;sek                </span>
+            </a>
+
+    
+
+                                    </li>
+                                    <li>
+                                        
+
+
+
+
+    
+            <a href="/LEPModul/TanuloLEP" target="">
+                <span>
+L&#225;z&#225;r Ervin Program                </span>
+            </a>
+
+    
+
+                                    </li>
+                    </ul>
+                </li>
+    </ul>
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Tanulo/TanuloHaziFeladat" target="">
+                    <i class='fa fa-home fa-2x'></i>
+                                <br />
+                <span>
+H&#225;zi feladatok                </span>
+            </a>
+        
+
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Home/Uzenetek" target="_blank">
+                    <i class='fa fa-envelope fa-2x'></i>
+                                <br />
+                <span>
+&#220;zenetek                </span>
+            </a>
+        
+
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Tanulo/SzakkepzesiJuttatasok" target="">
+                    <i class='fa fa-bank fa-2x'></i>
+                                <br />
+                <span>
+Juttat&#225;sok                </span>
+            </a>
+        
+
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Home/DKT" target="_blank">
+                    <i class='fa fa-table fa-2x'></i>
+                                <br />
+                <span>
+DKT                </span>
+            </a>
+        
+
+            </li>
+            <li role="menuitem" tabindex="0" aria-haspopup="true" class="dropdown  menu-icon menuwithoutarrow " onfocus="" onblur="">
+              
+
+
+
+
+        
+            <a href="/Home/IFM" target="_blank">
+                    <i class='fa fa-globe fa-2x'></i>
+                                <br />
+                <span>
+Nyelvtanul&#225;s (IFM)                </span>
+            </a>
+        
+
+            </li>
+    </ul>
+  </div>
+</span>
+
+    </div>
+</nav>
+        </div>
+
+        <div class="main-wrapper">
+            <div class="main-sidebar">
+                <div class="row">
+                    <div class="sidepanel-wrapper">
+                        <ul id="sidepanel_tabs">
+                            <li class="sidebar-tab-item">
+                                <span id="menucaption" class="head-sidebar-tab-item">
+        
+            Profilbe&#225;ll&#237;t&#225;sok
+        
+</span>
+                            </li>
+                            <li id="searchPanelFul" class="sidebar-tab-item disabled ">
+                                <span >Szűrés</span>
+                            </li>
+                            <li id="tippekFul" class="sidebar-tab-item disabled" style="cursor: pointer;"
+                                ><span>Tipp</span></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="main-content">
+                <div class="content-header">
+                    <div class="favoriteIconContainer">
+                    </div>
+                </div>
+
+                <div id="layout_slidePanel" class="content-content" >
+                    <div class="sidebar-container">
+
+                        
+    <ul id="tipList" style="display: none;">
+        <li>Tipp:  A &#39;Tipp&#39; f&#252;l nem &#233;rhető el minden men&#252;ponton!</li>
+    </ul>
+
+<script id="infoTemplate" type="text/x-kendo-template">
+    <div class="k-notification-wrap customNotification">
+        <table>
+            <tr>
+                <td>
+                    <span>#: message #</span>
+                </td>
+                <td>
+                    <span class="k-icon k-group-delete"></span>
+                </td>
+                <td>
+                    <a href="/Adminisztracio/Profil">
+                        <span class="k-icon k-i-custom"></span>
+                    </a>
+                </td>
+                <td>
+                    <span class="k-icon k-i-arrow-e" onclick="showTip();"></span>
+                </td>
+            </tr>
+            
+        </table>
+    </div>
+</script>
+
+<script>
+    var orgininalWidth = 0;
+    function onShow(e) {
+        if (e.sender.getNotifications().length == 1) {
+            if (orgininalWidth == 0) {
+                orgininalWidth = e.element.width();
+            }
+    
+            tippResize(e);
+
+            $(window).resize(function () {
+                tippResize(e);
+            });
+        }
+    }
+
+    function tippResize(e)
+    {
+        if (e.sender.getNotifications().length == 1) {
+            var newWidth = $(window).width() * 0.8;
+            if (e.element.width() > newWidth || e.element.width() < orgininalWidth) {
+                e.element.width(newWidth);
+                e.element.parent().css({ width: newWidth });
+            }
+
+            var element = e.element.parent(),
+                eWidth = element.width(),
+                eHeight = element.height(),
+                wWidth = $(window).width(),
+                wHeight = $(window).height(),
+                newTop, newLeft;
+
+            newLeft = Math.floor(wWidth / 2 - eWidth / 2);
+            newTop = Math.floor(wHeight / 2 - eHeight / 2);
+
+            e.element.parent().css({ left: newLeft, top: null, right: 100, bottom: 0 });
+        }
+    }
+
+    var tipNum = -1;
+
+    function showTip() {
+        var tipp = $('#tippPopupNotification').data('kendoNotification');
+        if (tipp) {
+            tipp.hide();
+            //tipp.getNotifications().parent().remove();
+
+            tipp.setOptions({
+                animation: {
+                    open: {
+                        effects: "slideIn:left"
+                    },
+                    close: {
+                        effects: "slideIn:right",
+                        reverse: true
+                    }
+                },
+                autoHideAfter: 20000
+            });
+
+            var list = new Array();
+            $('#tipList li').each(function () {
+                list.push($(this).html());
+            });
+
+            if (tipNum == -1) {
+                tipNum = Math.floor(Math.random() * list.length);
+            }
+            else {
+                tipNum++;
+                if (tipNum > list.length - 1) {
+                    tipNum = 0;
+                }
+            }
+            setTimeout(function () {
+                tipp.show({
+                    message: list[tipNum]
+                }, 'info'); }, 200);
+        }
+    }
+</script>
+
+<span id="tippPopupNotification"></span><script>
+	jQuery(function(){jQuery("#tippPopupNotification").kendoNotification({"show":onShow,"templates":[{"type":"info","templateId":"infoTemplate"}]});});
+</script>
+                    </div>
+                    <div class="content-container">
+                        <div class="k-content">
+                            
+
+<h4>Profilbe&#225;ll&#237;t&#225;sok</h4>
+
+<div id="ProfilTab_container" class='tab-container'></div><div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="ProfilTab"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link">Egyedi felhaszn&#225;l&#243; be&#225;ll&#237;t&#225;sok</a></li><li class="k-item k-state-default"><a class="k-link">Jelsz&#243; m&#243;dos&#237;t&#225;sa</a></li><li class="k-item k-state-default"><a class="k-link">Biztons&#225;gi be&#225;ll&#237;t&#225;sok</a></li><li class="k-item k-state-default"><a class="k-link">El&#233;rhetős&#233;gek</a></li></ul><div class="k-content k-state-active" id="ProfilTab-1" style="display:block"></div><div class="k-content" id="ProfilTab-2"></div><div class="k-content" id="ProfilTab-3"></div><div class="k-content" id="ProfilTab-4"></div></div></div><script>
+	jQuery(function(){jQuery("#ProfilTab").kendoTabStrip({"contentUrls":["/Adminisztracio/Profil/LoadTippekBeallitasa","/Adminisztracio/Profil/LoadJelszoModositas","/Adminisztracio/Profil/LoadBiztonsagiBeallitasokTab","/Adminisztracio/Profil/LoadElerhetosegekSzerk"]});});
+</script>
+                <script>
+                    $(document).ready(function() {
+                        $('#ProfilTab ul').first().appendTo('#ProfilTab_container');
+                        $('#ProfilTab_container').prependTo('#ProfilTab');
+                    });
+                </script>
+            
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <script>
+                window.onload = function () {
+                    var panelWidth = document.getElementById('sidepanel_tabs').offsetWidth;
+                    $('#sidepanel_tabs').css('top', panelWidth + "px");
+                    $('.content-content').css('min-height', panelWidth + "px");
+                };
+            </script>
+        </div>
+
+        <div class="main-footer1">
+        </div>
+        <div class="main-footer2">
+            Educational Development Informatikai Zrt.
+            - 2.159.84
+            - 511f1ce1f99d6b728eaa2b6868a3b0585f032b32
+            <div style="float: right;">
+                <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=4064926" target="_blank">Educational Development Informatikai Zrt. jogi nyilatkozata</a>
+            </div>
+        </div>
+    </div>
+
+    <script src="/bundles/kreta?v=GYKzczXhBjrHJnDhjQkEVTTiaqblsDzWddx349QQghM1"></script>
+
+    <script src="/bundles/KretaFileUpload?v=O3yBmNSM00l1xaJguJwZiFQgwUbrMHl7Gwp35lVNKaM1"></script>
+
+    <script src="/bundles/IskolaorUzenetKuldes?v=1TtnBLPq-sZsrSVFzHNiV_3r8NtOttnRmGjHFBjQl4o1"></script>
+
+    <script src="/bundles/RowBackgroundColor?v=j6B6_HiQeS_x2qof0f4_K2WyOQSMHX781gxMXpwlyOk1"></script>
+
+
+
+    <!--
+        branchName: Release_v2.159
+        commitNumber: 511f1ce1f99d6b728eaa2b6868a3b0585f032b32
+    -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/profile/profile.css b/profile/profile.css
index 7ac6dc3..cddf4e8 100644
--- a/profile/profile.css
+++ b/profile/profile.css
@@ -1,437 +1,362 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", serif !important;
-  min-height: 100vh;
-  font-size: 16px;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif !important;
+  min-height:100vh;
+  font-size:16px;
 }
-
 .kreta-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
 }
-
-
 .kreta-header {
-  padding: clamp(1rem, 3vw, 2rem);
-  display: grid;
-  grid-template-columns: minmax(300px, 400px) 1fr minmax(200px, 300px);
-  align-items: center;
-  gap: 1rem;
+  padding:clamp(1rem,3vw,2rem);
+  display:grid;
+  grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
+  align-items:center;
+  gap:1rem;
 }
-
 .school-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display:flex;
+  flex-direction:column;
+  gap:0.5rem;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  margin: 0;
+  color:var(--text-primary);
+  font-size:24px;
+  font-weight:600;
+  display:flex;
+  align-items:center;
+  margin:0;
 }
-
 .logo {
-  width: 24px;
-  border-radius: 8px;
-  margin-right: 8px;
+  width:24px;
+  border-radius:8px;
+  margin-right:8px;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
+  color:var(--text-secondary);
+  font-size:14px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  max-width:300px;
 }
-
 .user-profile {
-  position: relative;
-  justify-self: flex-end;
+  position:relative;
+  justify-self:flex-end;
 }
-
 .user-dropdown-btn {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:1rem;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
-
 .user-dropdown-btn:hover {
-  background: var(--card-card);
+  background:var(--card-card);
 }
-
 .user-info {
-  text-align: right;
+  text-align:right;
 }
-
 .user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.5rem;
-  background: var(--card-card);
-  border-radius: 12px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-  width: 200px;
-  display: none;
-  z-index: 1000;
+  position:absolute;
+  top:100%;
+  right:0;
+  margin-top:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  width:200px;
+  display:none;
+  z-index:1000;
 }
-
 .user-dropdown.show {
-  display: block;
-  animation: dropdownShow 0.2s ease;
+  display:block;
+  animation:dropdownShow 0.2s ease;
 }
-
 .dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
+  padding:0.75rem 1rem;
+  color:var(--text-primary);
+  text-decoration:none;
+  transition:background-color 0.2s;
 }
-
 .dropdown-item:hover {
-  background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
-
-
 .kreta-main {
-  flex: 1;
-  padding: clamp(1rem, 3vw, 2rem);
-  max-width: 800px;
-  margin: 0 auto;
-  width: 100%;
+  flex:1;
+  padding:clamp(1rem,3vw,2rem);
+  max-width:800px;
+  margin:0 auto;
+  width:100%;
 }
-
 .card {
-  background: var(--card-card);
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  border-radius:24px;
+  overflow:hidden;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .card h2 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  padding: 1.5rem;
-  padding-bottom: 0.5rem;
-  background-color: var(--card-card);
+  font-size:18px;
+  font-weight:600;
+  color:var(--text-primary);
+  padding:1.5rem;
+  padding-bottom:0.5rem;
+  background-color:var(--card-card);
 }
-
-
 .profile-tabs {
-  padding: 1.5rem;
+  padding:1.5rem;
 }
-
 .tab-headers {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid var(--card-translucent);
-  overflow-x: auto;
-  scrollbar-width: none;
+  display:flex;
+  gap:0.5rem;
+  margin-bottom:1.5rem;
+  border-bottom:1px solid var(--card-translucent);
+  overflow-x:auto;
+  scrollbar-width:none;
 }
-
 .tab-headers::-webkit-scrollbar {
-  display: none;
+  display:none;
 }
-
 .tab-header {
-  padding: 0.75rem 1rem;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  border-bottom: 2px solid transparent;
-  font-size: 14px;
+  padding:0.75rem 1rem;
+  background:none;
+  border:none;
+  color:var(--text-secondary);
+  font-weight:500;
+  cursor:pointer;
+  white-space:nowrap;
+  border-bottom:2px solid transparent;
+  font-size:14px;
 }
-
 .tab-header.active {
-  color: var(--accent-accent);
-  border-bottom-color: var(--accent-accent);
+  color:var(--accent-accent);
+  border-bottom-color:var(--accent-accent);
 }
-
 .tab-content {
-  display: none;
-  background: var(--button-secondaryFill);
-  border-radius: 8px;
-  padding: 1.5rem;
+  display:none;
+  background:var(--button-secondaryFill);
+  border-radius:8px;
+  padding:1.5rem;
 }
-
 .tab-content.active {
-  display: block;
+  display:block;
 }
-
-
 .form-group {
-  margin-bottom: 1rem;
+  margin-bottom:1rem;
 }
-
 .form-label {
-  display: block;
-  color: var(--text-secondary);
-  font-size: 14px;
-  margin-bottom: 0.5rem;
+  display:block;
+  color:var(--text-secondary);
+  font-size:14px;
+  margin-bottom:0.5rem;
 }
-
 .form-control {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--accent-15);
-  border-radius: 8px;
-  background: var(--accent-15);
-  color: var(--text-primary);
-  font-size: 14px;
+  width:100%;
+  padding:0.75rem;
+  border:1px solid var(--accent-15);
+  border-radius:8px;
+  background:var(--accent-15);
+  color:var(--text-primary);
+  font-size:14px;
 }
-
 .form-control:focus {
-  outline: none;
-  border-color: var(--accent-accent);
+  outline:none;
+  border-color:var(--accent-accent);
 }
-
 .form-text {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-top: 0.25rem;
+  font-size:12px;
+  color:var(--text-secondary);
+  margin-top:0.25rem;
 }
-
-
 .security-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+  display:flex;
+  flex-direction:column;
+  gap:1.5rem;
 }
-
 .step-card {
-  background: var(--button-secondaryFill);
-  border-radius: 12px;
-  padding: 1.5rem;
-  animation: fadeIn 0.3s ease;
+  background:var(--button-secondaryFill);
+  border-radius:12px;
+  padding:1.5rem;
+  animation:fadeIn 0.3s ease;
 }
-
 .step-card h3 {
-  color: var(--text-primary);
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 1rem;
+  color:var(--text-primary);
+  font-size:16px;
+  font-weight:600;
+  margin-bottom:1rem;
 }
-
 .step-card p {
-  color: var(--text-secondary);
-  font-size: 14px;
-  margin-bottom: 1rem;
-  line-height: 1.5;
+  color:var(--text-secondary);
+  font-size:14px;
+  margin-bottom:1rem;
+  line-height:1.5;
 }
-
 .app-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-  margin-top: 1rem;
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:1.5rem;
+  margin-top:1rem;
 }
-
 .app-section h4 {
-  color: var(--text-primary);
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
+  color:var(--text-primary);
+  font-size:14px;
+  font-weight:600;
+  margin-bottom:0.75rem;
 }
-
 .app-links {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display:flex;
+  flex-direction:column;
+  gap:0.5rem;
 }
-
 .app-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: var(--card-card);
-  border-radius: 8px;
-  color: var(--text-primary);
-  text-decoration: none;
-  font-size: 14px;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+  padding:0.75rem;
+  background:var(--card-card);
+  border-radius:8px;
+  color:var(--text-primary);
+  text-decoration:none;
+  font-size:14px;
+  transition:background-color 0.2s;
 }
-
 .app-link:hover {
-  background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
-
 .qr-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  margin: 1.5rem 0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:1rem;
+  margin:1.5rem 0;
 }
-
 .qr-container img {
-  background: white;
-  padding: 1rem;
-  border-radius: 8px;
-  max-width: 200px;
+  background:white;
+  padding:1rem;
+  border-radius:8px;
+  max-width:200px;
 }
-
 .setup-key {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
+  display:flex;
+  flex-direction:column;
+  gap:0.5rem;
+  width:100%;
 }
-
 .key-display {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--card-card);
-  padding: 0.75rem;
-  border-radius: 8px;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+  background:var(--card-card);
+  padding:0.75rem;
+  border-radius:8px;
 }
-
 .key-display code {
-  font-family: monospace;
-  color: var(--text-primary);
-  font-size: 14px;
-  flex-grow: 1;
-  text-align: center;
+  font-family:monospace;
+  color:var(--text-primary);
+  font-size:14px;
+  flex-grow:1;
+  text-align:center;
 }
-
 .btn-copy {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 4px;
-  transition: all 0.2s;
+  background:none;
+  border:none;
+  color:var(--text-secondary);
+  cursor:pointer;
+  padding:0.25rem;
+  border-radius:4px;
+  transition:all 0.2s;
 }
-
 .btn-copy:hover {
-  color: var(--text-primary);
-  background: var(--button-secondaryFill);
+  color:var(--text-primary);
+  background:var(--button-secondaryFill);
 }
-
-
 .btn-save {
-  padding: 0.75rem 1.5rem;
-  background: var(--accent-accent);
-  color: var(--button-secondaryFill);
-  border: none;
-  border-radius: 8px;
-  font-weight: 500;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s;
+  padding:0.75rem 1.5rem;
+  background:var(--accent-accent);
+  color:var(--button-secondaryFill);
+  border:none;
+  border-radius:8px;
+  font-weight:500;
+  cursor:pointer;
+  font-size:14px;
+  transition:background-color 0.2s;
 }
-
 .btn-save:hover {
-  background: var(--accent-secondary);
+  background:var(--accent-secondary);
 }
-
-
 @keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
 }
-
-@keyframes dropdownShow {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@keyframes dropdownShow {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
 }
-
-
-@media (max-width: 768px) {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@media (max-width:768px) {
   .kreta-header {
-    grid-template-columns: 1fr auto auto;
-    grid-template-areas: 
-      "school toggle user"
+  grid-template-columns:1fr auto auto;
+  grid-template-areas:"school toggle user"
       "nav nav nav";
-    padding: 1rem;
-    gap: 0.5rem;
-  }
-
-  .school-info {
-    grid-area: school;
-  }
-
-  .user-profile {
-    grid-area: user;
-  }
-
-  .app-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .profile-tabs {
-    padding: 1rem;
-  }
-
-  .tab-content {
-    padding: 1rem;
-  }
+  padding:1rem;
+  gap:0.5rem;
 }
-
-
-.material-icons-round {
-  font-size: 20px;
-  vertical-align: middle;
+.school-info {
+  grid-area:school;
+}
+.user-profile {
+  grid-area:user;
+}
+.app-grid {
+  grid-template-columns:1fr;
+}
+.profile-tabs {
+  padding:1rem;
+}
+.tab-content {
+  padding:1rem;
+}
+}.material-icons-round {
+  font-size:20px;
+  vertical-align:middle;
 }
-
-
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width:8px;
+  height:8px;
 }
-
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background:var(--background);
 }
-
 ::-webkit-scrollbar-thumb {
-  background: var(--text-secondary);
-  border-radius: 4px;
+  background:var(--text-secondary);
+  border-radius:4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-primary);
-}
\ No newline at end of file
+  background:var(--text-primary);
+}
diff --git a/profile/profile.js b/profile/profile.js
index d9fb01f..d4bc414 100644
--- a/profile/profile.js
+++ b/profile/profile.js
@@ -1,6 +1,6 @@
-(() => {  
-    function createSecurityTab() {
-      return `
+(() => {
+  function createSecurityTab() {
+    return `
         <div class="security-content">
           <div class="setup-steps">
             <div class="step-card">
@@ -95,10 +95,10 @@
           </div>
         </div>
       `;
-    }
-  
+  }
+
   function createContactTab() {
-      return `
+    return `
         <div class="contact-form">
           <div class="form-group">
             <label class="form-label" for="email">E-mail cím</label>
@@ -115,10 +115,10 @@
           </div>
         </div>
       `;
-    }
-  
-    function createPasswordTab() {
-      return `
+  }
+
+  function createPasswordTab() {
+    return `
         <div class="password-form">
           <div class="form-group">
             <label class="form-label" for="currentPassword">Jelenlegi jelszó</label>
@@ -138,10 +138,10 @@
           </div>
         </div>
       `;
-    }
-  
-    function createSettingsTab() {
-      return `
+  }
+
+  function createSettingsTab() {
+    return `
         <div class="settings-form">
           <div class="form-group">
             <label class="form-label">
@@ -155,194 +155,215 @@
           </div>
         </div>
       `;
-    }
-  
-    function setupContactForm() {
-      const form = document.querySelector('.contact-form');
-      if (!form) return;
-  
-      const emailInput = form.querySelector('#email');
-      const phoneInput = form.querySelector('#phone');
-      const saveButton = form.querySelector('#saveContacts');
-  
-      
-      emailInput.value = cookieManager.get('userEmail') || '';
-      phoneInput.value = cookieManager.get('userPhone') || '';
-  
-      saveButton?.addEventListener('click', async () => {
-        const email = emailInput.value.trim();
-        const phone = phoneInput.value.trim();
-  
-        if (!email) {
-          alert(LanguageManager.t('profile.email_required'));
-          return;
-        }
-  
-        if (email && !isValidEmail(email)) {
-          alert(LanguageManager.t('profile.invalid_email'));
-          return;
-        }
-  
-        if (phone && !isValidPhone(phone)) {
-          alert(LanguageManager.t('profile.invalid_phone'));
-          return;
-        }
-  
-        try {
-          const response = await fetch('/Adminisztracio/Profil/SaveElerhetosegek', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-            },
-            body: JSON.stringify({ email, phone })
-          });
-  
-          if (response.ok) {
-            alert(LanguageManager.t('profile.contacts_saved'));
-          } else {
-            throw new Error(LanguageManager.t('profile.contacts_save_error'));
-          }
-        } catch (error) {
-          console.error('Error saving contacts:', error);
-          alert(LanguageManager.t('profile.save_error'));
-        }
-      });
-    }
-  
-    function isValidEmail(email) {
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-    }
-  
-    function isValidPhone(phone) {
-      return /^\+?[0-9\s-]{9,}$/.test(phone);
-    }
-  
-    function setupEventListeners() {
-      
-      document.querySelectorAll('.tab-header').forEach(header => {
-        header.addEventListener('click', () => {
-          document.querySelectorAll('.tab-header').forEach(h => h.classList.remove('active'));
-          document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-          
-          header.classList.add('active');
-          const targetId = header.dataset.tab;
-          document.getElementById(`${targetId}-content`).classList.add('active');
-        });
-      });
-  
-      
-      const userBtn = document.querySelector('.user-dropdown-btn');
-      const userDropdown = document.querySelector('.user-dropdown');
-      
-      userBtn?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        userDropdown?.classList.toggle('show');
-      });
-  
-      document.addEventListener('click', () => {
-        userDropdown?.classList.remove('show');
-      });
-  
-      
-      document.getElementById('saveSettings')?.addEventListener('click', async () => {
-        const hideTips = document.getElementById('hideTips').checked;
-        
-        try {
-          const response = await fetch('/Adminisztracio/Profil/SaveTippekBeallitasa', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-            },
-            body: JSON.stringify({ hideTips })
-          });
-  
-          if (response.ok) {
-            alert(LanguageManager.t('profile.settings_saved'));
-          } else {
-            throw new Error(LanguageManager.t('profile.settings_save_error'));
-          }
-        } catch (error) {
-          console.error('Error saving settings:', error);
-          alert(LanguageManager.t('profile.save_error'));
-        }
-      });
-  
-      
-      document.getElementById('savePassword')?.addEventListener('click', async () => {
-        const currentPassword = document.getElementById('currentPassword').value;
-        const newPassword = document.getElementById('newPassword').value;
-        const confirmPassword = document.getElementById('confirmPassword').value;
-  
-        if (!currentPassword || !newPassword || !confirmPassword) {
-          alert(LanguageManager.t('profile.fill_all_fields'));
-          return;
-        }
-  
-        if (newPassword !== confirmPassword) {
-          alert(LanguageManager.t('profile.passwords_not_match'));
-          return;
-        }
-  
-        if (newPassword.length < 8) {
-          alert(LanguageManager.t('profile.password_min_length'));
-          return;
-        }
-  
-        try {
-          const response = await fetch('/Adminisztracio/Profil/SaveJelszoModositas', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-            },
-            body: JSON.stringify({
-              currentPassword,
-              newPassword,
-              confirmPassword
-            })
-          });
-  
-          if (response.ok) {
-            alert(LanguageManager.t('profile.password_changed'));
-            document.getElementById('currentPassword').value = '';
-            document.getElementById('newPassword').value = '';
-            document.getElementById('confirmPassword').value = '';
-          } else {
-            throw new Error(LanguageManager.t('profile.password_change_error'));
-          }
-        } catch (error) {
-          console.error('Error changing password:', error);
-          alert(LanguageManager.t('profile.password_change_error'));
-        }
-      });
-  
-      
-      const timerEl = document.getElementById('logoutTimer');
-      if (timerEl) {
-        const startTime = parseInt(timerEl.textContent?.match(/\d+/)?.[0] || "45");
-        let timeLeft = startTime * 60;
-        
-        const updateTimer = () => {
-          const minutes = Math.floor(timeLeft / 60);
-          const seconds = timeLeft % 60;
-          timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-          
-          if (timeLeft <= 0) {
-            window.location.href = '/Home/Logout';
-          } else {
-            timeLeft--;
-          }
-        };
-  
-        updateTimer();
-        setInterval(updateTimer, 1000);
+  }
+
+  function setupContactForm() {
+    const form = document.querySelector(".contact-form");
+    if (!form) return;
+
+    const emailInput = form.querySelector("#email");
+    const phoneInput = form.querySelector("#phone");
+    const saveButton = form.querySelector("#saveContacts");
+
+    emailInput.value = cookieManager.get("userEmail") || "";
+    phoneInput.value = cookieManager.get("userPhone") || "";
+
+    saveButton?.addEventListener("click", async () => {
+      const email = emailInput.value.trim();
+      const phone = phoneInput.value.trim();
+
+      if (!email) {
+        alert(LanguageManager.t("profile.email_required"));
+        return;
       }
+
+      if (email && !isValidEmail(email)) {
+        alert(LanguageManager.t("profile.invalid_email"));
+        return;
+      }
+
+      if (phone && !isValidPhone(phone)) {
+        alert(LanguageManager.t("profile.invalid_phone"));
+        return;
+      }
+
+      try {
+        const response = await fetch(
+          "/Adminisztracio/Profil/SaveElerhetosegek",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              RequestVerificationToken: document.querySelector(
+                'input[name="__RequestVerificationToken"]',
+              ).value,
+            },
+            body: JSON.stringify({ email, phone }),
+          },
+        );
+
+        if (response.ok) {
+          alert(LanguageManager.t("profile.contacts_saved"));
+        } else {
+          throw new Error(LanguageManager.t("profile.contacts_save_error"));
+        }
+      } catch (error) {
+        console.error("Error saving contacts:", error);
+        alert(LanguageManager.t("profile.save_error"));
+      }
+    });
+  }
+
+  function isValidEmail(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
+
+  function isValidPhone(phone) {
+    return /^\+?[0-9\s-]{9,}$/.test(phone);
+  }
+
+  function setupEventListeners() {
+    document.querySelectorAll(".tab-header").forEach((header) => {
+      header.addEventListener("click", () => {
+        document
+          .querySelectorAll(".tab-header")
+          .forEach((h) => h.classList.remove("active"));
+        document
+          .querySelectorAll(".tab-content")
+          .forEach((c) => c.classList.remove("active"));
+
+        header.classList.add("active");
+        const targetId = header.dataset.tab;
+        document.getElementById(`${targetId}-content`).classList.add("active");
+      });
+    });
+
+    const userBtn = document.querySelector(".user-dropdown-btn");
+    const userDropdown = document.querySelector(".user-dropdown");
+
+    userBtn?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      userDropdown?.classList.toggle("show");
+    });
+
+    document.addEventListener("click", () => {
+      userDropdown?.classList.remove("show");
+    });
+
+    document
+      .getElementById("saveSettings")
+      ?.addEventListener("click", async () => {
+        const hideTips = document.getElementById("hideTips").checked;
+
+        try {
+          const response = await fetch(
+            "/Adminisztracio/Profil/SaveTippekBeallitasa",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                RequestVerificationToken: document.querySelector(
+                  'input[name="__RequestVerificationToken"]',
+                ).value,
+              },
+              body: JSON.stringify({ hideTips }),
+            },
+          );
+
+          if (response.ok) {
+            alert(LanguageManager.t("profile.settings_saved"));
+          } else {
+            throw new Error(LanguageManager.t("profile.settings_save_error"));
+          }
+        } catch (error) {
+          console.error("Error saving settings:", error);
+          alert(LanguageManager.t("profile.save_error"));
+        }
+      });
+
+    document
+      .getElementById("savePassword")
+      ?.addEventListener("click", async () => {
+        const currentPassword =
+          document.getElementById("currentPassword").value;
+        const newPassword = document.getElementById("newPassword").value;
+        const confirmPassword =
+          document.getElementById("confirmPassword").value;
+
+        if (!currentPassword || !newPassword || !confirmPassword) {
+          alert(LanguageManager.t("profile.fill_all_fields"));
+          return;
+        }
+
+        if (newPassword !== confirmPassword) {
+          alert(LanguageManager.t("profile.passwords_not_match"));
+          return;
+        }
+
+        if (newPassword.length < 8) {
+          alert(LanguageManager.t("profile.password_min_length"));
+          return;
+        }
+
+        try {
+          const response = await fetch(
+            "/Adminisztracio/Profil/SaveJelszoModositas",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                RequestVerificationToken: document.querySelector(
+                  'input[name="__RequestVerificationToken"]',
+                ).value,
+              },
+              body: JSON.stringify({
+                currentPassword,
+                newPassword,
+                confirmPassword,
+              }),
+            },
+          );
+
+          if (response.ok) {
+            alert(LanguageManager.t("profile.password_changed"));
+            document.getElementById("currentPassword").value = "";
+            document.getElementById("newPassword").value = "";
+            document.getElementById("confirmPassword").value = "";
+          } else {
+            throw new Error(LanguageManager.t("profile.password_change_error"));
+          }
+        } catch (error) {
+          console.error("Error changing password:", error);
+          alert(LanguageManager.t("profile.password_change_error"));
+        }
+      });
+
+    const timerEl = document.getElementById("logoutTimer");
+    if (timerEl) {
+      const startTime = parseInt(
+        timerEl.textContent?.match(/\d+/)?.[0] || "45",
+      );
+      let timeLeft = startTime * 60;
+
+      const updateTimer = () => {
+        const minutes = Math.floor(timeLeft / 60);
+        const seconds = timeLeft % 60;
+        timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+
+        if (timeLeft <= 0) {
+          window.location.href = "/Home/Logout";
+        } else {
+          timeLeft--;
+        }
+      };
+
+      updateTimer();
+      setInterval(updateTimer, 1000);
     }
-  
-    function createProfileHTML() {
-      return `
+  }
+
+  function createProfileHTML() {
+    return `
         <div class="kreta-container">
           ${createTemplate.header()}
   
@@ -377,20 +398,19 @@
           </main>
         </div>
       `;
+  }
+
+  async function init() {
+    if (window.location.pathname.includes("/Adminisztracio/Profil")) {
+      
+
+      document.body.innerHTML = createProfileHTML();
+      setupUserDropdown();
+      setupMobileNavigation();
+      setupEventListeners();
+      setupContactForm();
     }
-  
-    async function init() {
-      if (window.location.pathname.includes('/Adminisztracio/Profil')) {
-        
-        createTemplate.importFonts();
-  
-        document.body.innerHTML = createProfileHTML();
-        setupUserDropdown();
-        setupMobileNavigation();
-        setupEventListeners();
-        setupContactForm();
-      }
-    }
-  
-    init();
-})();
\ No newline at end of file
+  }
+
+  init();
+})();
diff --git a/roleselect/roleselect.css b/roleselect/roleselect.css
index 1df3484..e56d332 100644
--- a/roleselect/roleselect.css
+++ b/roleselect/roleselect.css
@@ -1,354 +1,275 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", serif !important;
-  min-height: 100vh;
-  font-size: 16px;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif !important;
+  min-height:100vh;
+  font-size:16px;
 }
-
-
 .kreta-container {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: clamp(1rem, 3vw, 2rem);
-  max-width: 1200px;
-  margin: 0 auto;
+  width:100%;
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
+  padding:clamp(1rem,3vw,2rem);
+  max-width:1200px;
+  margin:0 auto;
 }
-
-
 .kreta-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 2rem;
-  margin-bottom: clamp(2rem, 5vw, 3rem);
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  align-items:center;
+  gap:2rem;
+  margin-bottom:clamp(2rem,5vw,3rem);
 }
-
-
 .school-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display:flex;
+  flex-direction:column;
+  gap:0.5rem;
 }
-
 .logo-text {
-  display: flex;
-  align-items: center;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
+  display:flex;
+  align-items:center;
+  font-size:1.5rem;
+  font-weight:600;
+  color:var(--text-primary);
+  margin:0;
 }
-
 .logo {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  margin-right: 0.75rem;
+  width:32px;
+  height:32px;
+  border-radius:8px;
+  margin-right:0.75rem;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  font-size: 1.1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
-  padding-left: 2px;
+  color:var(--text-secondary);
+  font-size:1.1rem;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  max-width:300px;
+  padding-left:2px;
 }
-
-
 .user-profile {
-  justify-self: flex-end;
-  text-align: right;
+  justify-self:flex-end;
+  text-align:right;
 }
-
 .user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
+  display:flex;
+  flex-direction:column;
+  align-items:flex-end;
+  gap:4px;
 }
-
-
-.user-name, .role-text {
-  color: var(--text-primary);
-  font-family: Montserrat;
-  font-weight: 600;
+.user-name,.role-text {
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-weight:600;
 }
-
 .user-name {
-  font-size: 16px;
+  font-size:16px;
 }
-
 .role-text {
-  font-size: 20px;
-  text-align: center;
+  font-size:20px;
+  text-align:center;
 }
-
-.logout-timer, .role-description {
-  color: var(--text-secondary);
-  font-family: Figtree;
-  font-weight: 500;
-  line-height: 130%;
+.logout-timer,.role-description {
+  color:var(--text-secondary);
+  font-family:Figtree;
+  font-weight:500;
+  line-height:130%;
 }
-
 .logout-timer {
-  font-size: 14px;
-  text-align: right;
+  font-size:14px;
+  text-align:right;
 }
-
 .role-description {
-  font-size: 16px;
-  text-align: center;
+  font-size:16px;
+  text-align:center;
 }
-
-
 .role-container {
-  flex: 1;
-  display: flex;
-  align-items: center;
+  flex:1;
+  display:flex;
+  align-items:center;
 }
-
 .role-grid {
-  display: grid;
-  grid-template-columns: 1fr minmax(300px, 1fr);
-  gap: 1.5rem;
-  width: 100%;
+  display:grid;
+  grid-template-columns:1fr minmax(300px,1fr);
+  gap:1.5rem;
+  width:100%;
 }
-
 .side-roles {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  gap: 1.5rem;
+  display:grid;
+  grid-template-rows:1fr auto;
+  gap:1.5rem;
 }
-
-
 .role-card {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  padding: 2rem;
-  background: var(--card-card);
-  border-radius: 1rem;
-  cursor: pointer;
-  text-align: center;
-  border: none;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-  transition: all 0.2s ease;
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  gap:1.5rem;
+  padding:2rem;
+  background:var(--card-card);
+  border-radius:1rem;
+  cursor:pointer;
+  text-align:center;
+  border:none;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  transition:all 0.2s ease;
 }
-
-
 .role-card[data-role="Ellenorzo"] {
-  height: 480px;
-  background: var(--card-card);
+  height:480px;
+  background:var(--card-card);
 }
-
 .role-card[data-role="DKT"] {
-  height: 280px;
-  background: var(--card-card);
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  height:280px;
+  background:var(--card-card);
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .logout-card {
-  height: 180px;
-  background: var(--error-card);
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  height:180px;
+  background:var(--error-card);
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
-
 .role-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  transition: transform 0.2s ease;
-  background: var(--accent-15);
+  width:48px;
+  height:48px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:12px;
+  transition:transform 0.2s ease;
+  background:var(--accent-15);
 }
-
 .role-icon img {
-  width: 32px;
-  height: 32px;
-  transition: transform 0.2s ease;
+  width:32px;
+  height:32px;
+  transition:transform 0.2s ease;
 }
-
 .role-card[data-role="DKT"] .role-icon {
-  background: var(--warning-15);
+  background:var(--warning-15);
 }
-
 .logout-card .role-icon {
-  background: var(--error-15);
+  background:var(--error-15);
 }
-
 .role-icon img {
-  width: 32px;
-  height: 32px;
-  transition: transform 0.2s ease;
+  width:32px;
+  height:32px;
+  transition:transform 0.2s ease;
 }
-
-
 .role-card:hover {
-  transform: translateY(-2px);
+  transform:translateY(-2px);
 }
-
 .role-card:hover .role-icon img {
-  transform: scale(1.2);
+  transform:scale(1.2);
 }
-
 .role-card:active {
-  transform: translateY(1px);
-  box-shadow: 0px 0px var(--shadow-blur) 0px var(--accent-shadow);
+  transform:translateY(1px);
+  box-shadow:0px 0px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
-
 .role-card[data-role="Ellenorzo"]:hover {
-  background-color: var(--accent-15);
+  background-color:var(--accent-15);
 }
-
 .role-card[data-role="DKT"]:hover {
-  background-color: var(--accent-15);
+  background-color:var(--accent-15);
 }
-
 .role-card[data-role="DKT"]:active {
-  box-shadow: 0px 0px var(--shadow-blur) 0px var(--accent-shadow);
+  box-shadow:0px 0px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .logout-card:hover {
-  background-color: var(--error-15);
+  background-color:var(--error-15);
 }
-
 .logout-card:active {
-  box-shadow: 0px 0px var(--shadow-blur) 0px var(--error-shadow);
+  box-shadow:0px 0px var(--shadow-blur) 0px var(--error-shadow);
 }
-
-
-:root[data-theme="light-blue"] .role-card:hover,
-:root[data-theme="light-green"] .role-card:hover {
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+:root[data-theme="light-blue"] .role-card:hover,:root[data-theme="light-green"] .role-card:hover {
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
-
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width:8px;
+  height:8px;
 }
-
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background:var(--background);
 }
-
 ::-webkit-scrollbar-thumb {
-  background: var(--text-secondary);
-  border-radius: 4px;
+  background:var(--text-secondary);
+  border-radius:4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-primary);
+  background:var(--text-primary);
 }
-
-
 @keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-10px);
 }
-
-
-@media (max-width: 1200px) {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@media (max-width:1200px) {
   .role-grid {
-    grid-template-columns: 1fr 280px;
-  }
+  grid-template-columns:1fr 280px;
 }
-
-@media (max-width: 900px) {
+}@media (max-width:900px) {
   .role-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .side-roles {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: none;
-  }
-  
-  .role-card[data-role="Ellenorzo"],
-  .role-card[data-role="DKT"],
-  .logout-card {
-    height: 300px;
-  }
+  grid-template-columns:1fr;
 }
-
-@media (max-width: 768px) {
+.side-roles {
+  grid-template-columns:1fr 1fr;
+  grid-template-rows:none;
+}
+.role-card[data-role="Ellenorzo"],.role-card[data-role="DKT"],.logout-card {
+  height:300px;
+}
+}@media (max-width:768px) {
   .kreta-header {
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
-  }
-
-  .school-info {
-    max-width: 60%;
-  }
-
-  .school-details {
-    max-width: 200px;
-    font-size: 1rem;
-  }
-
-  .logo-text {
-    font-size: 1.2rem;
-  }
-
-  .logo {
-    width: 24px;
-    height: 24px;
-  }
+  grid-template-columns:1fr auto;
+  gap:1rem;
 }
-
-@media (max-width: 640px) {
+.school-info {
+  max-width:60%;
+}
+.school-details {
+  max-width:200px;
+  font-size:1rem;
+}
+.logo-text {
+  font-size:1.2rem;
+}
+.logo {
+  width:24px;
+  height:24px;
+}
+}@media (max-width:640px) {
   .kreta-container {
-    padding: 1rem;
-  }
-
-  .side-roles {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .role-card {
-    padding: 1.5rem;
-  }
-
-  .role-icon {
-    width: 40px;
-    height: 40px;
-  }
-
-  .role-icon img {
-    width: 24px;
-    height: 24px;
-  }
-
-  .role-text {
-    font-size: 1.2rem;
-  }
-
-  .role-description {
-    font-size: 1rem;
-  }
+  padding:1rem;
+}
+.side-roles {
+  grid-template-columns:1fr;
+  gap:1rem;
+}
+.role-card {
+  padding:1.5rem;
+}
+.role-icon {
+  width:40px;
+  height:40px;
+}
+.role-icon img {
+  width:24px;
+  height:24px;
+}
+.role-text {
+  font-size:1.2rem;
+}
+.role-description {
+  font-size:1rem;
+}
 }
\ No newline at end of file
diff --git a/roleselect/roleselect.js b/roleselect/roleselect.js
index 5b70033..a55a20a 100644
--- a/roleselect/roleselect.js
+++ b/roleselect/roleselect.js
@@ -1,17 +1,17 @@
 (() => {
   const startLogoutTimer = () => {
     let timeLeft = 45 * 60;
-    const timerElement = document.getElementById('logoutTimer');
-    
+    const timerElement = document.getElementById("logoutTimer");
+
     const updateTimer = () => {
       const minutes = Math.floor(timeLeft / 60);
       const seconds = timeLeft % 60;
-      
+
       if (timerElement) {
-        timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
       }
-      
-      timeLeft <= 0 ? window.location.href = '/Home/Logout' : timeLeft--;
+
+      timeLeft <= 0 ? (window.location.href = "/Home/Logout") : timeLeft--;
     };
 
     updateTimer();
@@ -20,21 +20,24 @@
 
   const handleRoleChange = async (role) => {
     try {
-      const response = await fetch('/Adminisztracio/SzerepkorValaszto/ChangeRole', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ Role: role })
-      });
-      
+      const response = await fetch(
+        "/Adminisztracio/SzerepkorValaszto/ChangeRole",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ Role: role }),
+        },
+      );
+
       const data = await response.json();
       if (data.Success) {
         window.location.assign(data.Url);
       } else {
-        throw new Error('Role change failed');
+        throw new Error("Role change failed");
       }
     } catch (error) {
-      console.error('Error changing role:', error);
-      alert(LanguageManager.t('roleselect.role_change_error'));
+      console.error("Error changing role:", error);
+      alert(LanguageManager.t("roleselect.role_change_error"));
     }
   };
 
@@ -43,11 +46,11 @@
       <header class="kreta-header">
         <div class="school-info">
           <p class="logo-text">
-            <img src=${chrome.runtime.getURL('images/firka_logo.png')} alt="Firka" class="logo">
+            <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
             Firka
           </p>
           <div class="school-details">
-            <span>${schoolCode || ''} - ${fullSchoolName || 'Iskola'}</span>
+            <span>${schoolCode || ""} - ${fullSchoolName || "Iskola"}</span>
           </div>
         </div>
         <div class="user-profile">
@@ -63,11 +66,11 @@
           <div class="main-role">
             <div class="role-card" data-role="Ellenorzo">
               <div class="role-icon">
-                <img src="${chrome.runtime.getURL('icons/naplo.svg')}" alt="Napló ikon">
+                <img src="${chrome.runtime.getURL("icons/naplo.svg")}" alt="Napló ikon">
               </div>
               <div class="role-text">
-                ${LanguageManager.t('roleselect.student_book')}
-                <div class="role-description">${LanguageManager.t('roleselect.student_description')}</div>
+                ${LanguageManager.t("roleselect.student_book")}
+                <div class="role-description">${LanguageManager.t("roleselect.student_description")}</div>
               </div>
             </div>
           </div>
@@ -75,21 +78,21 @@
           <div class="side-roles">
             <div class="role-card" data-role="DKT">
               <div class="role-icon">
-                <img src="${chrome.runtime.getURL('icons/dkt.svg')}" alt="DKT ikon">
+                <img src="${chrome.runtime.getURL("icons/dkt.svg")}" alt="DKT ikon">
               </div>
               <div class="role-text">
-                ${LanguageManager.t('roleselect.dkt_title')}
-                <div class="role-description">${LanguageManager.t('roleselect.dkt_description')}</div>
+                ${LanguageManager.t("roleselect.dkt_title")}
+                <div class="role-description">${LanguageManager.t("roleselect.dkt_description")}</div>
               </div>
             </div>
 
             <div class="role-card logout-card">
               <div class="role-icon">
-                <img src="${chrome.runtime.getURL('icons/logout.svg')}" alt="Kijelentkezés ikon">
+                <img src="${chrome.runtime.getURL("icons/logout.svg")}" alt="Kijelentkezés ikon">
               </div>
               <div class="role-text">
-                ${LanguageManager.t('roleselect.logout_title')}
-                <div class="role-description">${LanguageManager.t('roleselect.logout_description')}</div>
+                ${LanguageManager.t("roleselect.logout_title")}
+                <div class="role-description">${LanguageManager.t("roleselect.logout_description")}</div>
               </div>
             </div>
           </div>
@@ -100,65 +103,72 @@
 
   const transformRoleSelectPage = async () => {
     try {
-      if (document.readyState !== 'complete') {
-        await new Promise(resolve => window.addEventListener('load', resolve));
+      if (document.readyState !== "complete") {
+        await new Promise((resolve) =>
+          window.addEventListener("load", resolve),
+        );
       }
 
-      
-      const schoolNameEl = document.querySelector('.IntezmenyNev');
-      const schoolName = schoolNameEl?.textContent.trim() || 'Iskola neve';
-      const [schoolCode, fullSchoolName] = schoolName.split(' - ');
+      const schoolNameEl = document.querySelector(".IntezmenyNev");
+      const schoolName = schoolNameEl?.textContent.trim() || "Iskola neve";
+      const [schoolCode, fullSchoolName] = schoolName.split(" - ");
 
-      
-      const schoolSubdomain = window.location.hostname.split('.')[0];
+      const schoolSubdomain = window.location.hostname.split(".")[0];
 
-      const userNameEl = document.querySelector('.UserName');
-      const userName = userNameEl?.textContent.trim() || LanguageManager.t('common.username');
+      const userNameEl = document.querySelector(".UserName");
+      const userName =
+        userNameEl?.textContent.trim() || LanguageManager.t("common.username");
 
-      
       if (schoolCode && fullSchoolName) {
-        cookieManager.set('schoolCode', schoolCode);
-        cookieManager.set('schoolName', fullSchoolName);
-        cookieManager.set('schoolSubdomain', schoolSubdomain);
+        cookieManager.set("schoolCode", schoolCode);
+        cookieManager.set("schoolName", fullSchoolName);
+        cookieManager.set("schoolSubdomain", schoolSubdomain);
       }
       if (userName) {
-        cookieManager.set('userName', userName);
+        cookieManager.set("userName", userName);
       }
 
-      
-      document.body.innerHTML = createHTML(schoolCode, fullSchoolName, userName);
+      document.body.innerHTML = createHTML(
+        schoolCode,
+        fullSchoolName,
+        userName,
+      );
 
-      createTemplate.importFonts();
       
+
       const timerInterval = startLogoutTimer();
 
-      
-      document.querySelector('.role-card[data-role="Ellenorzo"]')?.addEventListener('click', () => {
-        handleRoleChange('Ellenorzo');
-      });
+      document
+        .querySelector('.role-card[data-role="Ellenorzo"]')
+        ?.addEventListener("click", () => {
+          handleRoleChange("Ellenorzo");
+        });
 
-      document.querySelector('.role-card[data-role="DKT"]')?.addEventListener('click', () => {
-        window.location.href = '/Adminisztracio/BelepesKezelo/DKTTanuloOrGondviselo';
-      });
-
-      document.querySelector('.logout-card')?.addEventListener('click', async () => {
-        try {
-          clearInterval(timerInterval);
-          await fetch('/Home/LogOut', { method: 'POST' });
-        } catch {
-          window.location.replace("https://idp.e-kreta.hu/Account/Logout");
-        } finally {
-          window.location.replace("https://idp.e-kreta.hu/Account/Logout");
-        }
-      });
+      document
+        .querySelector('.role-card[data-role="DKT"]')
+        ?.addEventListener("click", () => {
+          window.location.href =
+            "/Adminisztracio/BelepesKezelo/DKTTanuloOrGondviselo";
+        });
 
+      document
+        .querySelector(".logout-card")
+        ?.addEventListener("click", async () => {
+          try {
+            clearInterval(timerInterval);
+            await fetch("/Home/LogOut", { method: "POST" });
+          } catch {
+            window.location.replace("https://idp.e-kreta.hu/Account/Logout");
+          } finally {
+            window.location.replace("https://idp.e-kreta.hu/Account/Logout");
+          }
+        });
     } catch (error) {
-      console.error('Error transforming page:', error);
+      console.error("Error transforming page:", error);
     }
   };
 
-  
-  if (window.location.href.includes('/Adminisztracio/BelepesKezelo')) {
+  if (window.location.href.includes("/Adminisztracio/BelepesKezelo")) {
     transformRoleSelectPage();
   }
-})();
\ No newline at end of file
+})();
diff --git a/search/search.css b/search/search.css
index 83eef87..25c758f 100644
--- a/search/search.css
+++ b/search/search.css
@@ -1,222 +1,195 @@
 /* Hide original elements */
-header, footer, .page-title, .card-kreta {
-  display: none !important;
+header,footer,.page-title,.card-kreta {
+  display:none !important;
 }
-
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-  min-height: 100vh;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
+  min-height:100vh;
+  font-size:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 /* Firka search page styling */
 .firka-search-wrapper {
-  width: 90%;
-  max-width: 500px;
-  padding: 0;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width:90%;
+  max-width:500px;
+  padding:0;
+  margin:0 auto;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
 }
-
 /* Firka header styling */
 .firka-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  background: var(--card-card) !important;
-  padding: 24px;
-  border-radius: 24px 24px 0 0;
-  width: 100%;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+  margin:0;
+  background:var(--card-card) !important;
+  padding:24px;
+  border-radius:24px 24px 0 0;
+  width:100%;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 .logo-text {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
+  display:flex;
+  align-items:center;
+  gap:8px;
 }
-
 .logo {
-  width: 32px;
-  height: 32px;
+  width:32px;
+  height:32px;
 }
-
 .search-title {
-  color: var(--text-primary);
-  text-align: center;
-  font-family: Montserrat;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  margin: 8px 0;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:24px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
+  margin:8px 0;
 }
-
 /* Form container styling */
 .firka-form-container {
-  background: var(--card-card);
-  padding: 0 24px 24px 24px;
-  border-radius: 0 0 24px 24px;
-  width: 100%;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+  background:var(--card-card);
+  padding:0 24px 24px 24px;
+  border-radius:0 0 24px 24px;
+  width:100%;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 /* Form styling */
 form {
-  width: 100%;
+  width:100%;
 }
-
 .form-control {
-  background-color: var(--button-secondaryFill) !important;
-  border: 1px solid var(--accent-15) !important;
-  border-radius: 12px !important;
-  color: var(--text-primary) !important;
-  padding: 12px 16px !important;
-  font-family: Montserrat !important;
-  font-size: 16px !important;
-  font-weight: 400 !important;
-  height: auto !important;
-  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background-color:var(--button-secondaryFill) !important;
+  border:1px solid var(--accent-15) !important;
+  border-radius:12px !important;
+  color:var(--text-primary) !important;
+  padding:12px 16px !important;
+  font-family:Montserrat !important;
+  font-size:16px !important;
+  font-weight:400 !important;
+  height:auto !important;
+  transition:border-color 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
 }
-
 .form-control:focus {
-  border-color: var(--accent-accent) !important;
-  box-shadow: 0 0 0 2px var(--accent-15) !important;
-  outline: none !important;
+  border-color:var(--accent-accent) !important;
+  box-shadow:0 0 0 2px var(--accent-15) !important;
+  outline:none !important;
 }
-
 .form-control::placeholder {
-  color: var(--text-teritary) !important;
+  color:var(--text-teritary) !important;
 }
-
 /* Autocomplete dropdown styling */
 .dropdown-menu {
-  background-color: var(--card-card) !important;
-  border: 1px solid var(--accent-15) !important;
-  border-radius: 12px !important;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-  padding: 8px !important;
-  max-height: 300px !important;
-  overflow-y: auto !important;
-  width: 100% !important;
+  background-color:var(--card-card) !important;
+  border:1px solid var(--accent-15) !important;
+  border-radius:12px !important;
+  box-shadow:0 4px 8px rgba(0,0,0,0.1) !important;
+  padding:8px !important;
+  max-height:300px !important;
+  overflow-y:auto !important;
+  width:100% !important;
 }
-
 .dropdown-item {
-  color: var(--text-primary) !important;
-  padding: 10px 16px !important;
-  border-radius: 8px !important;
-  margin-bottom: 4px !important;
-  font-family: Montserrat !important;
-  font-size: 14px !important;
-  transition: background-color 0.2s ease-in-out !important;
+  color:var(--text-primary) !important;
+  padding:10px 16px !important;
+  border-radius:8px !important;
+  margin-bottom:4px !important;
+  font-family:Montserrat !important;
+  font-size:14px !important;
+  transition:background-color 0.2s ease-in-out !important;
 }
-
-li.dropdown-item:hover, li.dropdown-item:focus {
-  background-color: var(--accent-15) !important;
-  color: var(--text-primary) !important;
+li.dropdown-item:hover,li.dropdown-item:focus {
+  background-color:var(--accent-15) !important;
+  color:var(--text-primary) !important;
 }
-
-a.dropdown-item:hover, a.dropdown-item:focus {
-  background-color: #00000000 !important;
+a.dropdown-item:hover,a.dropdown-item:focus {
+  background-color:#00000000 !important;
 }
-
 .dropdown-item.active {
-  background-color: var(--accent-accent) !important;
-  color: white !important;
+  background-color:var(--accent-accent) !important;
+  color:white !important;
 }
-
 /* Button styling */
 .btn-kreta {
-  background-color: var(--accent-accent) !important;
-  color: white !important;
-  border: none !important;
-  border-radius: 12px !important;
-  padding: 12px 24px !important;
-  font-family: Montserrat !important;
-  font-size: 16px !important;
-  font-weight: 600 !important;
-  cursor: pointer !important;
-  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
+  background-color:var(--accent-accent) !important;
+  color:white !important;
+  border:none !important;
+  border-radius:12px !important;
+  padding:12px 24px !important;
+  font-family:Montserrat !important;
+  font-size:16px !important;
+  font-weight:600 !important;
+  cursor:pointer !important;
+  transition:background-color 0.2s ease-in-out,transform 0.1s ease-in-out !important;
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
 }
-
 .btn-kreta:hover {
-  background-color: var(--accent-secondary) !important;
-  transform: translateY(-1px) !important;
+  background-color:var(--accent-secondary) !important;
+  transform:translateY(-1px) !important;
 }
-
 .btn-kreta:active {
-  transform: translateY(1px) !important;
+  transform:translateY(1px) !important;
 }
-
 .btn-kreta:disabled {
-  background-color: var(--text-teritary) !important;
-  cursor: not-allowed !important;
-  transform: none !important;
+  background-color:var(--text-teritary) !important;
+  cursor:not-allowed !important;
+  transform:none !important;
 }
-
 /* Footer styling */
 .firka-footer {
-  margin-top: 16px;
-  text-align: center;
-  width: 100%;
+  margin-top:16px;
+  text-align:center;
+  width:100%;
 }
-
 .privacy-link {
-  color: var(--text-secondary);
-  font-family: Montserrat;
-  font-size: 14px;
-  text-decoration: none;
-  transition: color 0.2s ease-in-out;
+  color:var(--text-secondary);
+  font-family:Montserrat;
+  font-size:14px;
+  text-decoration:none;
+  transition:color 0.2s ease-in-out;
 }
-
 .privacy-link:hover {
-  color: var(--accent-accent);
-  text-decoration: underline;
+  color:var(--accent-accent);
+  text-decoration:underline;
 }
-
 /* Responsive adjustments */
-@media (max-width: 576px) {
+@media (max-width:576px) {
   .firka-search-wrapper {
-    width: 95%;
-  }
-  
-  .search-title {
-    font-size: 20px;
-  }
-  
-  .btn-kreta {
-    padding: 10px 20px !important;
-    font-size: 14px !important;
-  }
+  width:95%;
+}
+.search-title {
+  font-size:20px;
+}
+.btn-kreta {
+  padding:10px 20px !important;
+  font-size:14px !important;
+}
 }
\ No newline at end of file
diff --git a/search/search.js b/search/search.js
index 298f7c5..d4e8919 100644
--- a/search/search.js
+++ b/search/search.js
@@ -1,7 +1,7 @@
 function initializeTransformation() {
-  const form = document.querySelector('form');
-  const autocomplete = document.querySelector('.autocomplete');
-  
+  const form = document.querySelector("form");
+  const autocomplete = document.querySelector(".autocomplete");
+
   if (form && autocomplete) {
     applyFirkaStyling();
   } else {
@@ -9,46 +9,54 @@ function initializeTransformation() {
   }
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   setTimeout(initializeTransformation, 1000);
 });
 
-if (document.readyState === 'complete' || document.readyState === 'interactive') {
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
   setTimeout(initializeTransformation, 1000);
 }
 
 function applyFirkaStyling() {
   try {
-    const theme = cookieManager.get('themePreference') || localStorage.getItem('themePreference') || 'light-green';
-    document.documentElement.setAttribute('data-theme', theme);
-    if (typeof loadingScreen !== 'undefined') {
+    const theme =
+      cookieManager.get("themePreference") ||
+      localStorage.getItem("themePreference") ||
+      "light-green";
+    document.documentElement.setAttribute("data-theme", theme);
+    if (typeof loadingScreen !== "undefined") {
       loadingScreen.hide();
     }
-    const originalForm = document.querySelector('form');
-    const instituteInput = document.querySelector('.autocomplete');
-    const redirectButton = document.getElementById('redirectToInstitute');
-    const instituteCodeInput = document.querySelector('.autocomplete-value');
-    const requestToken = document.querySelector('input[name="__RequestVerificationToken"]');
-    const searchWrapper = document.createElement('div');
-    searchWrapper.className = 'firka-search-wrapper';
-    const firkaHeader = document.createElement('div');
-    firkaHeader.className = 'firka-header';
+    const originalForm = document.querySelector("form");
+    const instituteInput = document.querySelector(".autocomplete");
+    const redirectButton = document.getElementById("redirectToInstitute");
+    const instituteCodeInput = document.querySelector(".autocomplete-value");
+    const requestToken = document.querySelector(
+      'input[name="__RequestVerificationToken"]',
+    );
+    const searchWrapper = document.createElement("div");
+    searchWrapper.className = "firka-search-wrapper";
+    const firkaHeader = document.createElement("div");
+    firkaHeader.className = "firka-header";
     firkaHeader.innerHTML = `
       <p class="logo-text">
-        <img src="${chrome.runtime.getURL('images/firka_logo.png')}" alt="Firka" class="logo">
+        <img src="${chrome.runtime.getURL("images/firka_logo.png")}" alt="Firka" class="logo">
         Firka
       </p>
       <h1 class="search-title">Válassz iskolát</h1>
     `;
-    const formContainer = document.createElement('div');
-    formContainer.className = 'firka-form-container';
-    const firkaFooter = document.createElement('div');
-    firkaFooter.className = 'firka-footer';
+    const formContainer = document.createElement("div");
+    formContainer.className = "firka-form-container";
+    const firkaFooter = document.createElement("div");
+    firkaFooter.className = "firka-footer";
     firkaFooter.innerHTML = `
       <a href="https://tudasbazis.ekreta.hu/pages/viewpage.action?pageId=4064926" 
          target="_blank" class="privacy-link">Adatkezelési tájékoztató</a>
     `;
-    const existingWrapper = document.querySelector('.firka-search-wrapper');
+    const existingWrapper = document.querySelector(".firka-search-wrapper");
     if (existingWrapper) {
       existingWrapper.remove();
     }
@@ -61,33 +69,33 @@ function applyFirkaStyling() {
     document.body.appendChild(searchWrapper);
     setupAutocompleteListeners();
     if (redirectButton) {
-      redirectButton.addEventListener('click', function(event) {
+      redirectButton.addEventListener("click", function (event) {
         if (!instituteCodeInput.value) {
           event.preventDefault();
-          alert(LanguageManager.t('search.select_institution'));
+          alert(LanguageManager.t("search.select_institution"));
         }
       });
     }
     observeAutocompleteValue(instituteCodeInput, redirectButton);
   } catch (error) {
-    console.error('Error applying Firka styling:', error);
+    console.error("Error applying Firka styling:", error);
   }
 }
 
 function setupAutocompleteListeners() {
-  const autocompleteInput = document.querySelector('.autocomplete');
-  const autocompleteValue = document.querySelector('.autocomplete-value');
-  const redirectButton = document.getElementById('redirectToInstitute');
-  
+  const autocompleteInput = document.querySelector(".autocomplete");
+  const autocompleteValue = document.querySelector(".autocomplete-value");
+  const redirectButton = document.getElementById("redirectToInstitute");
+
   if (autocompleteInput && autocompleteValue) {
     const observer = new MutationObserver((mutations) => {
-      const dropdown = document.querySelector('.autocomplete-dropdown');
+      const dropdown = document.querySelector(".autocomplete-dropdown");
       if (dropdown) {
-        dropdown.classList.add('dropdown-menu');
-        const items = dropdown.querySelectorAll('li');
-        items.forEach(item => {
-          item.classList.add('dropdown-item');
-          item.addEventListener('click', () => {
+        dropdown.classList.add("dropdown-menu");
+        const items = dropdown.querySelectorAll("li");
+        items.forEach((item) => {
+          item.classList.add("dropdown-item");
+          item.addEventListener("click", () => {
             if (redirectButton) {
               redirectButton.disabled = false;
             }
@@ -95,10 +103,10 @@ function setupAutocompleteListeners() {
         });
       }
     });
-    
+
     observer.observe(document.body, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
 }
@@ -112,7 +120,7 @@ function observeAutocompleteValue(valueInput, button) {
 
   observer.observe(valueInput, {
     attributes: true,
-    attributeFilter: ['value']
+    attributeFilter: ["value"],
   });
 
   const checkInterval = setInterval(() => {
@@ -121,4 +129,4 @@ function observeAutocompleteValue(valueInput, button) {
       clearInterval(checkInterval);
     }
   }, 500);
-}
\ No newline at end of file
+}
diff --git a/settings/index.css b/settings/index.css
index 6def859..ccb4ecf 100644
--- a/settings/index.css
+++ b/settings/index.css
@@ -1,308 +1,250 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
 }
-
 body {
-  width: 400px;
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  font-family: "Montserrat", serif;
-  font-size: 14px;
+  width:400px;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  font-family:"Montserrat",serif;
+  font-size:14px;
 }
-
-
 * {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width:none;
+  -ms-overflow-style:none;
 }
-
 *::-webkit-scrollbar {
-  display: none;
+  display:none;
 }
-
 .popup-container {
-  padding: 16px;
+  padding:16px;
 }
-
 .popup-header {
-  text-align: center;
-  margin-bottom: 16px;
+  text-align:center;
+  margin-bottom:16px;
 }
-
 .logo-text {
-  color: var(--text-primary);
-  font-size: 20px;
-  font-weight: 600;
-  margin: 8px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  color:var(--text-primary);
+  font-size:20px;
+  font-weight:600;
+  margin:8px 0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
-
 .logo {
-  width: 20px;
-  border-radius: 6px;
-  margin-right: 8px;
+  width:20px;
+  border-radius:6px;
+  margin-right:8px;
 }
-
-.settings-card,
-.about-card,
-.support-card {
-  background: var(--card-card);
-  border-radius: 16px;
-  padding: 16px;
-  margin-bottom: 16px;
-  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+.settings-card,.about-card,.support-card {
+  background:var(--card-card);
+  border-radius:16px;
+  padding:16px;
+  margin-bottom:16px;
+  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
 }
-
 h2 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 12px;
-  background-color: var(--card-card);
+  font-size:16px;
+  font-weight:600;
+  color:var(--text-primary);
+  margin-bottom:12px;
+  background-color:var(--card-card);
 }
-
 .settings-group {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  display:flex;
+  flex-direction:column;
+  gap:16px;
 }
-
 .setting-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
 }
-
 .setting-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-primary);
-  font-weight: 500;
+  display:flex;
+  align-items:center;
+  gap:8px;
+  color:var(--text-primary);
+  font-weight:500;
 }
-
-
-.theme-grid,
-.language-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+.theme-grid,.language-grid {
+  display:grid;
+  grid-template-columns:repeat(2,1fr);
+  gap:12px;
 }
-.theme-option,
-.language-option {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  transition: transform 0.2s ease;
+.theme-option,.language-option {
+  background:none;
+  border:none;
+  padding:0;
+  cursor:pointer;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+  transition:transform 0.2s ease;
 }
-.theme-option:hover,
-.language-option:hover {
-  transform: translateY(-2px);
+.theme-option:hover,.language-option:hover {
+  transform:translateY(-2px);
 }
 .theme-option.active .theme-preview {
-  outline: 2px solid var(--accent-accent);
-  outline-offset: 2px;
+  outline:2px solid var(--accent-accent);
+  outline-offset:2px;
 }
 .language-option.active .language-preview {
-  outline: 2px solid var(--accent-accent);
-  outline-offset: 2px;
+  outline:2px solid var(--accent-accent);
+  outline-offset:2px;
 }
 .theme-preview {
-  width: 100%;
-  height: 100px;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
+  width:100%;
+  height:100px;
+  border-radius:8px;
+  overflow:hidden;
+  position:relative;
 }
 .theme-option.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  position: relative;
+  opacity:0.5;
+  cursor:not-allowed;
+  position:relative;
 }
-
 .theme-option.disabled::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:rgba(0,0,0,0.1);
+  border-radius:8px;
 }
-
 .language-option {
-  background: var(--card-card);
-  border: 1px solid var(--border-border);
-  border-radius: 8px;
-  padding: 12px;
-  transition: all 0.2s ease;
+  background:var(--card-card);
+  border:1px solid var(--border-border);
+  border-radius:8px;
+  padding:12px;
+  transition:all 0.2s ease;
 }
-
 .language-option:hover {
-  background: var(--card-hover);
-  border-color: var(--accent-accent);
+  background:var(--card-hover);
+  border-color:var(--accent-accent);
 }
-
 .language-option.active {
-  background: var(--accent-accent);
-  border-color: var(--accent-accent);
-  color: white;
+  background:var(--accent-accent);
+  border-color:var(--accent-accent);
+  color:white;
 }
-
 .language-name {
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 500;
+  color:var(--text-primary);
+  font-size:12px;
+  font-weight:500;
 }
-
-
 .theme-preview.light-blue {
-  background: #DAE4F7;
+  background:#DAE4F7;
 }
-
 .theme-preview.light-blue .preview-header {
-  background: #EDF3FF;
+  background:#EDF3FF;
 }
-
 .theme-preview.light-blue .preview-card {
-  background: #FBFCFF;
+  background:#FBFCFF;
 }
-
-
 .theme-preview.light-green {
-  background: #FAFFF0;
+  background:#FAFFF0;
 }
-
 .theme-preview.light-green .preview-header {
-  background: #F3FBDE;
+  background:#F3FBDE;
 }
-
 .theme-preview.light-green .preview-card {
-  background: #FEFFFD;
+  background:#FEFFFD;
 }
-
-
 .theme-preview.dark-blue {
-  background: #070A0E;
+  background:#070A0E;
 }
-
 .theme-preview.dark-blue .preview-header {
-  background: #0F131B;
+  background:#0F131B;
 }
-
 .theme-preview.dark-blue .preview-card {
-  background: #131822;
+  background:#131822;
 }
-
-
 .theme-preview.dark-green {
-  background: #0D1202;
+  background:#0D1202;
 }
-
 .theme-preview.dark-green .preview-header {
-  background: #141905;
+  background:#141905;
 }
-
 .theme-preview.dark-green .preview-card {
-  background: #20290b;
+  background:#20290b;
 }
-
 .preview-header {
-  height: 30%;
-  width: 100%;
+  height:30%;
+  width:100%;
 }
-
 .preview-content {
-  padding: 8px;
+  padding:8px;
 }
-
 .preview-card {
-  height: 30px;
-  border-radius: 4px;
+  height:30px;
+  border-radius:4px;
 }
-
 .theme-name {
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 500;
+  color:var(--text-primary);
+  font-size:12px;
+  font-weight:500;
 }
-
-.about-content,
-.support-content {
-  color: var(--text-secondary);
-  font-size: 14px;
-  line-height: 1.5;
+.about-content,.support-content {
+  color:var(--text-secondary);
+  font-size:14px;
+  line-height:1.5;
 }
-
-.about-content p,
-.support-content p {
-  margin-bottom: 12px;
+.about-content p,.support-content p {
+  margin-bottom:12px;
 }
-
 .github-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--accent-accent);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s;
+  display:inline-flex;
+  align-items:center;
+  gap:6px;
+  color:var(--accent-accent);
+  text-decoration:none;
+  font-weight:500;
+  transition:color 0.2s;
 }
-
 .github-link:hover {
-  color: var(--accent-secondary);
+  color:var(--accent-secondary);
 }
-
 .support-buttons {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
+  display:flex;
+  gap:8px;
+  margin-top:12px;
 }
-
 .support-button {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px;
-  background: var(--accent-15);
-  color: var(--text-primary);
-  text-decoration: none;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.2s;
+  flex:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:6px;
+  padding:8px;
+  background:var(--accent-15);
+  color:var(--text-primary);
+  text-decoration:none;
+  border-radius:8px;
+  font-weight:500;
+  transition:all 0.2s;
 }
-
 .support-button:hover {
-  background: var(--accent-accent);
-  color: var(--button-secondaryFill);
+  background:var(--accent-accent);
+  color:var(--button-secondaryFill);
 }
-
 .popup-footer {
-  text-align: center;
-  margin-top: 16px;
+  text-align:center;
+  margin-top:16px;
 }
-
 .version-info {
-  color: var(--text-secondary);
-  font-size: 12px;
+  color:var(--text-secondary);
+  font-size:12px;
 }
-
-
 .material-icons-round {
-  font-size: 18px;
-  vertical-align: middle;
-}
\ No newline at end of file
+  font-size:18px;
+  vertical-align:middle;
+}
diff --git a/settings/index.js b/settings/index.js
index 203b127..eceb41a 100644
--- a/settings/index.js
+++ b/settings/index.js
@@ -1,181 +1,189 @@
-document.addEventListener('DOMContentLoaded', async () => {
-  while (typeof window.LanguageManager === 'undefined') {
-    await new Promise(resolve => setTimeout(resolve, 10));
-  }
-  
-  function isThemeDisabled(theme) {
-      const blueThemesUnlocked = localStorage.getItem('blueThemesUnlocked') === 'true';
-      return (theme === 'default' || theme === 'light-blue' || theme === 'dark-blue') && !blueThemesUnlocked;
-  }
-  
-  function updateThemeAvailability() {
-       const blueThemesUnlocked = localStorage.getItem('blueThemesUnlocked') === 'true';
-       document.querySelectorAll('.theme-option').forEach(button => {
-           const theme = button.dataset.theme;
-           if (theme === 'default' || theme === 'light-blue' || theme === 'dark-blue') {
-               if (blueThemesUnlocked) {
-                   button.style.display = 'block';
-                   button.classList.remove('disabled');
-                   button.removeAttribute('disabled');
-               } else {
-                   button.style.display = 'none';
-               }
-           }
-       });
-   }
-  
-  function getCookie(name) {
-      const cookieName = `${name}=`;
-      const decodedCookie = decodeURIComponent(document.cookie);
-      const cookieArray = decodedCookie.split(';');
-      
-      for(let i = 0; i < cookieArray.length; i++) {
-          let cookie = cookieArray[i];
-          while (cookie.charAt(0) === ' ') {
-              cookie = cookie.substring(1);
-          }
-          if (cookie.indexOf(cookieName) === 0) {
-              return cookie.substring(cookieName.length, cookie.length);
-          }
-      }
-      return null;
+document.addEventListener("DOMContentLoaded", async () => {
+  while (typeof window.LanguageManager === "undefined") {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+
+  function isThemeDisabled(theme) {
+    const blueThemesUnlocked =
+      localStorage.getItem("blueThemesUnlocked") === "true";
+    return (
+      (theme === "default" ||
+        theme === "light-blue" ||
+        theme === "dark-blue") &&
+      !blueThemesUnlocked
+    );
+  }
+
+  function updateThemeAvailability() {
+    const blueThemesUnlocked =
+      localStorage.getItem("blueThemesUnlocked") === "true";
+    document.querySelectorAll(".theme-option").forEach((button) => {
+      const theme = button.dataset.theme;
+      if (
+        theme === "default" ||
+        theme === "light-blue" ||
+        theme === "dark-blue"
+      ) {
+        if (blueThemesUnlocked) {
+          button.style.display = "block";
+          button.classList.remove("disabled");
+          button.removeAttribute("disabled");
+        } else {
+          button.style.display = "none";
+        }
+      }
+    });
+  }
+
+  function getCookie(name) {
+    const cookieName = `${name}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const cookieArray = decodedCookie.split(";");
+
+    for (let i = 0; i < cookieArray.length; i++) {
+      let cookie = cookieArray[i];
+      while (cookie.charAt(0) === " ") {
+        cookie = cookie.substring(1);
+      }
+      if (cookie.indexOf(cookieName) === 0) {
+        return cookie.substring(cookieName.length, cookie.length);
+      }
+    }
+    return null;
   }
 
-  
   function setCookie(name, value, days = 365) {
-      const date = new Date();
-      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-      const expires = `expires=${date.toUTCString()}`;
-      document.cookie = `${name}=${value}; ${expires}; path=/; domain=.e-kreta.hu`;
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value}; ${expires}; path=/; domain=.e-kreta.hu`;
   }
-  
+
   function getCurrentTheme() {
-      return localStorage.getItem('themePreference') || 
-             getCookie('themePreference') || 
-             'light-green';
+    return (
+      localStorage.getItem("themePreference") ||
+      getCookie("themePreference") ||
+      "light-green"
+    );
   }
-  
+
   function updateThemeButtons(currentTheme) {
-      document.querySelectorAll('.theme-option').forEach(button => {
-          const theme = button.dataset.theme;
-          button.classList.toggle('active', theme === currentTheme);
-      });
-      updateThemeAvailability();
+    document.querySelectorAll(".theme-option").forEach((button) => {
+      const theme = button.dataset.theme;
+      button.classList.toggle("active", theme === currentTheme);
+    });
+    updateThemeAvailability();
   }
 
   function getCurrentLanguage() {
-      return localStorage.getItem('languagePreference') || 
-             getCookie('languagePreference') || 
-             'hu';
+    return (
+      localStorage.getItem("languagePreference") ||
+      getCookie("languagePreference") ||
+      "hu"
+    );
   }
-  
+
   function updateLanguageButtons(currentLanguage) {
-      document.querySelectorAll('.language-option').forEach(button => {
-          const language = button.dataset.language;
-          button.classList.toggle('active', language === currentLanguage);
-      });
+    document.querySelectorAll(".language-option").forEach((button) => {
+      const language = button.dataset.language;
+      button.classList.toggle("active", language === currentLanguage);
+    });
   }
-  
+
   async function applyLanguage(language) {
-      setCookie('languagePreference', language);
-      localStorage.setItem('languagePreference', language);
+    setCookie("languagePreference", language);
+    localStorage.setItem("languagePreference", language);
 
-      updateLanguageButtons(language);
+    updateLanguageButtons(language);
 
-      const tabs = await chrome.tabs.query({});
-      tabs.forEach(tab => {
-          chrome.tabs.sendMessage(tab.id, {
-              action: 'changeLanguage',
-              language: language
-          }).catch(() => {
-          });
-      });
+    const tabs = await chrome.tabs.query({});
+    tabs.forEach((tab) => {
+      chrome.tabs
+        .sendMessage(tab.id, {
+          action: "changeLanguage",
+          language: language,
+        })
+        .catch(() => {});
+    });
   }
-  
+
   async function applyTheme(theme) {
-      setCookie('themePreference', theme);
-      localStorage.setItem('themePreference', theme);
-      
-      
-      document.documentElement.setAttribute('data-theme', theme);
-      
-      
-      updateThemeButtons(theme);
-      
-      
-      const tabs = await chrome.tabs.query({});
-      tabs.forEach(tab => {
-          chrome.tabs.sendMessage(tab.id, {
-              action: 'changeTheme',
-              theme: theme
-          }).catch(() => {
-          });
-      });
+    setCookie("themePreference", theme);
+    localStorage.setItem("themePreference", theme);
+
+    document.documentElement.setAttribute("data-theme", theme);
+
+    updateThemeButtons(theme);
+
+    const tabs = await chrome.tabs.query({});
+    tabs.forEach((tab) => {
+      chrome.tabs
+        .sendMessage(tab.id, {
+          action: "changeTheme",
+          theme: theme,
+        })
+        .catch(() => {});
+    });
   }
-  
-  
-  const themeButtons = document.querySelectorAll('.theme-option');
-  themeButtons.forEach(button => {
-      button.addEventListener('click', () => {
-          const theme = button.dataset.theme;
-          
-          
-          if (button.hasAttribute('disabled')) {
-              alert(window.LanguageManager.t('common.warning') + ': ' + window.LanguageManager.t('settings.theme_not_available'));
-              return;
-          }
-          
-          applyTheme(theme);
-      });
+
+  const themeButtons = document.querySelectorAll(".theme-option");
+  themeButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const theme = button.dataset.theme;
+
+      if (button.hasAttribute("disabled")) {
+        alert(
+          window.LanguageManager.t("common.warning") +
+            ": " +
+            window.LanguageManager.t("settings.theme_not_available"),
+        );
+        return;
+      }
+
+      applyTheme(theme);
+    });
   });
-  
-  const languageButtons = document.querySelectorAll('.language-option');
-  languageButtons.forEach(button => {
-      button.addEventListener('click', () => {
-          const language = button.dataset.language;
-          applyLanguage(language);
-      });
+
+  const languageButtons = document.querySelectorAll(".language-option");
+  languageButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const language = button.dataset.language;
+      applyLanguage(language);
+    });
   });
-  
-  
+
   let initialTheme = getCurrentTheme();
-  
-  
+
   if (isThemeDisabled(initialTheme)) {
-      initialTheme = 'light-green';
+    initialTheme = "light-green";
   }
-  
-  
+
   updateThemeAvailability();
   await applyTheme(initialTheme);
-  
+
   const initialLanguage = getCurrentLanguage();
   updateLanguageButtons(initialLanguage);
-  
-  
+
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-      if (message.action === 'themeChanged') {
-          updateThemeButtons(message.theme);
-          document.documentElement.setAttribute('data-theme', message.theme);
-      }
+    if (message.action === "themeChanged") {
+      updateThemeButtons(message.theme);
+      document.documentElement.setAttribute("data-theme", message.theme);
+    }
   });
-  
-  
+
   const manifest = chrome.runtime.getManifest();
-  const versionElement = document.getElementById('version');
+  const versionElement = document.getElementById("version");
   versionElement.textContent = `v${manifest.version}`;
-  
-  
+
   let clickCount = 0;
-  versionElement.addEventListener('click', () => {
-      clickCount++;
-      if (clickCount >= 5) {
-          localStorage.setItem('blueThemesUnlocked', 'true');
-          updateThemeAvailability();
-          
-          
-          const notification = document.createElement('div');
-          notification.style.cssText = `
+  versionElement.addEventListener("click", () => {
+    clickCount++;
+    if (clickCount >= 5) {
+      localStorage.setItem("blueThemesUnlocked", "true");
+      updateThemeAvailability();
+
+      const notification = document.createElement("div");
+      notification.style.cssText = `
               position: fixed;
               top: 20px;
               right: 20px;
@@ -189,54 +197,54 @@ document.addEventListener('DOMContentLoaded', async () => {
               box-shadow: 0 4px 12px rgba(0,0,0,0.15);
               animation: slideIn 0.3s ease-out;
           `;
-          notification.textContent = window.LanguageManager.t('common.success') + ': ' + window.LanguageManager.t('settings.blue_themes_unlocked');
-          
-          
-          const style = document.createElement('style');
-          style.textContent = `
+      notification.textContent =
+        window.LanguageManager.t("common.success") +
+        ": " +
+        window.LanguageManager.t("settings.blue_themes_unlocked");
+
+      const style = document.createElement("style");
+      style.textContent = `
               @keyframes slideIn {
                   from { transform: translateX(100%); opacity: 0; }
                   to { transform: translateX(0); opacity: 1; }
               }
           `;
-          document.head.appendChild(style);
-          
-          document.body.appendChild(notification);
-          
-          
-          setTimeout(() => {
-              notification.remove();
-              style.remove();
-          }, 3000);
-          
-          clickCount = 0;
+      document.head.appendChild(style);
+
+      document.body.appendChild(notification);
+
+      setTimeout(() => {
+        notification.remove();
+        style.remove();
+      }, 3000);
+
+      clickCount = 0;
+    }
+  });
+
+  themeButtons.forEach((button) => {
+    button.addEventListener("mouseover", () => {
+      if (!button.hasAttribute("disabled")) {
+        button.style.transform = "translateY(-2px)";
       }
+    });
+
+    button.addEventListener("mouseout", () => {
+      button.style.transform = "translateY(0)";
+    });
   });
-  
-  
-  themeButtons.forEach(button => {
-      button.addEventListener('mouseover', () => {
-          if (!button.hasAttribute('disabled')) {
-              button.style.transform = 'translateY(-2px)';
-          }
-      });
-      
-      button.addEventListener('mouseout', () => {
-          button.style.transform = 'translateY(0)';
-      });
+
+  languageButtons.forEach((button) => {
+    button.addEventListener("mouseover", () => {
+      button.style.transform = "translateY(-2px)";
+    });
+
+    button.addEventListener("mouseout", () => {
+      button.style.transform = "translateY(0)";
+    });
   });
-  
-  languageButtons.forEach(button => {
-      button.addEventListener('mouseover', () => {
-          button.style.transform = 'translateY(-2px)';
-      });
-      
-      button.addEventListener('mouseout', () => {
-          button.style.transform = 'translateY(0)';
-      });
+
+  window.addEventListener("languageChanged", (event) => {
+    updateLanguageButtons(event.detail.language);
   });
-  
-  window.addEventListener('languageChanged', (event) => {
-      updateLanguageButtons(event.detail.language);
-  });
-});
\ No newline at end of file
+});
diff --git a/timetable/timetable.css b/timetable/timetable.css
index 9dd63dd..d1bd9fc 100644
--- a/timetable/timetable.css
+++ b/timetable/timetable.css
@@ -1,1091 +1,911 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-family: 'Montserrat', sans-serif;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  font-family:'Montserrat',sans-serif;
 }
-
 body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-primary);
-  background-color: var(--background) !important;
-  min-height: 100vh;
-  font-size: 16px;
+  margin:0;
+  padding:0;
+  color:var(--text-primary);
+  background-color:var(--background) !important;
+  min-height:100vh;
+  font-size:16px;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   body {
-    font-size: 14px;
-  }
+  font-size:14px;
 }
-
-.kreta-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+}.kreta-container {
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
 }
-
 .kreta-header {
-  padding: clamp(1rem, 3vw, 2rem);
-  display: grid;
-  grid-template-columns: minmax(300px, 400px) 1fr minmax(200px, 300px);
-  align-items: center;
-  gap: 1rem;
+  padding:clamp(1rem,3vw,2rem);
+  display:grid;
+  grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px);
+  align-items:center;
+  gap:1rem;
 }
-
-@media (max-width: 1200px) {
+@media (max-width:1200px) {
   .kreta-header {
-    grid-template-columns: minmax(250px, 350px) 1fr minmax(180px, 250px);
-  }
+  grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
 }
-
-@media (max-width: 768px) {
+}@media (max-width:768px) {
   .kreta-header {
-    grid-template-columns: 1fr auto auto;
-    grid-template-areas: 
-      "school toggle user"
+  grid-template-columns:1fr auto auto;
+  grid-template-areas:"school toggle user"
       "nav nav nav";
-    padding: 1rem;
-    gap: 0.5rem;
-  }
+  padding:1rem;
+  gap:0.5rem;
 }
-
-.school-info {
-  margin: 0;
+}.school-info {
+  margin:0;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .school-info {
-    grid-area: school;
-    max-width: none;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
+  grid-area:school;
+  max-width:none;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
 }
-
-.logo-text {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0 0 0.5rem;
-  display: flex;
-  align-items: center;
+}.logo-text {
+  color:var(--text-primary);
+  font-size:24px;
+  font-weight:600;
+  margin:0 0 0.5rem;
+  display:flex;
+  align-items:center;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .logo-text {
-    margin: 0;
-    font-size: 20px;
-  }
+  margin:0;
+  font-size:20px;
 }
-
-.logo {
-  width: 24px;
-  border-radius: 8px;
-  margin-right: 0.5rem;
+}.logo {
+  width:24px;
+  border-radius:8px;
+  margin-right:0.5rem;
 }
-
 .school-details {
-  color: var(--text-secondary);
-  font-size: 14px;
+  color:var(--text-secondary);
+  font-size:14px;
 }
-
 .school-details span {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
+  display:block;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  max-width:300px;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .school-details span {
-    max-width: 200px;
-  }
-  
-  .school-details {
-    font-size: 12px;
-  }
+  max-width:200px;
 }
-
-.user-profile {
-  position: relative;
-  justify-self: flex-end;
+.school-details {
+  font-size:12px;
 }
-
-@media (max-width: 768px) {
+}.user-profile {
+  position:relative;
+  justify-self:flex-end;
+}
+@media (max-width:768px) {
   .user-profile {
-    grid-area: user;
-  }
+  grid-area:user;
 }
-
-.user-dropdown-btn {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.2s;
+}.user-dropdown-btn {
+  display:flex;
+  align-items:center;
+  gap:1rem;
+  background:none;
+  border:none;
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:background-color 0.2s;
 }
-
 .user-dropdown-btn:hover {
-  background: var(--card-card);
+  background:var(--card-card);
 }
-
 .user-info {
-  text-align: right;
+  text-align:right;
 }
-
 .user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.5rem;
-  background: var(--card-card);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px var(--accent-shadow);
-  width: 200px;
-  display: none;
-  z-index: 1000;
+  position:absolute;
+  top:100%;
+  right:0;
+  margin-top:0.5rem;
+  background:var(--card-card);
+  border-radius:12px;
+  box-shadow:0 4px 6px -1px var(--accent-shadow);
+  width:200px;
+  display:none;
+  z-index:1000;
 }
-
 .user-dropdown.show {
-  display: block;
-  animation: dropdownShow 0.2s ease;
+  display:block;
+  animation:dropdownShow 0.2s ease;
 }
-
 .dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: background-color 0.2s;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
+  padding:0.75rem 1rem;
+  color:var(--text-primary);
+  text-decoration:none;
+  transition:background-color 0.2s;
 }
-
 .dropdown-item:hover {
-  background: var(--button-secondaryFill);
+  background:var(--button-secondaryFill);
 }
-
 .kreta-main {
-  flex: 1;
-  padding: clamp(1rem, 3vw, 2rem);
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
+  flex:1;
+  padding:clamp(1rem,3vw,2rem);
+  max-width:1400px;
+  margin:0 auto;
+  width:100%;
 }
-
-.k-overlay, .k-widget.k-window {
-  display: none !important;
+.k-overlay,.k-widget.k-window {
+  display:none !important;
 }
-
 .card {
-  border-radius: 24px;
-  overflow: hidden;
-  animation: fadeIn 0.3s ease;
-  margin-bottom: 1rem;
+  border-radius:24px;
+  overflow:hidden;
+  animation:fadeIn 0.3s ease;
+  margin-bottom:1rem;
 }
-
 .timetable-grid {
-  display: grid;
-  grid-template-columns: 80px repeat(5, 1fr);
-  overflow-x: auto;
+  display:grid;
+  grid-template-columns:80px repeat(5,1fr);
+  overflow-x:auto;
 }
-
 .grid-header {
-  padding: 12px;
-  text-align: center;
-  font-weight: 600;
-  color: var(--text-primary);
-  border-radius: 12px;
-  min-width: 120px;
+  padding:12px;
+  text-align:center;
+  font-weight:600;
+  color:var(--text-primary);
+  border-radius:12px;
+  min-width:120px;
 }
-
 .grid-header:first-child {
-  min-width: 80px;
+  min-width:80px;
 }
-
 .grid-header {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10px;
+  display:flex;
+  justify-content:space-between;
+  padding:0 10px;
 }
-
 .day-name {
-  text-align: left;
-  color: var(--text-primary);
-  font-family: Montserrat;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+  text-align:left;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
-
 .day-date {
-  text-align: right;
-  color: var(--text-secondary);
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  text-align:right;
+  color:var(--text-secondary);
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
-
 .time-slot {
-  padding: 12px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 14px;
-  border-radius: 12px;
+  padding:12px;
+  text-align:center;
+  color:var(--text-secondary);
+  font-size:14px;
+  border-radius:12px;
 }
-
 .lesson-slot {
-  min-height: 100px;
-  border-radius: 12px;
-  padding: 8px;
-  transition: transform 0.2s ease;
-  display: grid;
-  grid-gap: 16px;
+  min-height:100px;
+  border-radius:12px;
+  padding:8px;
+  transition:transform 0.2s ease;
+  display:grid;
+  grid-gap:16px;
 }
-
 .lesson-card {
-  display: flex;
-  padding: 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 16px;
-  background: var(--card-card);
-  box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateY(0);
+  display:flex;
+  padding:16px;
+  flex-direction:column;
+  align-items:flex-start;
+  gap:10px;
+  align-self:stretch;
+  border-radius:16px;
+  background:var(--card-card);
+  box-shadow:0px 1px var(--shadow-blur,2px) 0px var(--accent-shadow);
+  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
+  transform:translateY(0);
 }
-
 .lesson-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 12px var(--accent-shadow);
+  transform:translateY(-4px);
+  box-shadow:0 8px 12px var(--accent-shadow);
 }
-
 .lesson-card.substituted {
-  background: var(--warning-card);
+  background:var(--warning-card);
 }
-
 .lesson-card.cancelled {
-  border-radius: 16px;
-  background: var(--card-translucent);
+  border-radius:16px;
+  background:var(--card-translucent);
 }
-
-.lesson-card.cancelled .lesson-subject, .lesson-card.cancelled .lesson-teacher, .lesson-card.cancelled .lesson-room  {
-  opacity: 0.5;
-  text-decoration: line-through;
+.lesson-card.cancelled .lesson-subject,.lesson-card.cancelled .lesson-teacher,.lesson-card.cancelled .lesson-room {
+  opacity:0.5;
+  text-decoration:line-through;
 }
-
 .lesson-subject {
-  align-self: stretch;
-  color: var(--text-primary);
-  font-family: Montserrat;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+  align-self:stretch;
+  color:var(--text-primary);
+  font-family:Montserrat;
+  font-size:16px;
+  font-style:normal;
+  font-weight:600;
+  line-height:normal;
 }
-
 .lesson-teacher {
-  color: var(--text-secondary);
-  font-family: Figtree;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%;
+  color:var(--text-secondary);
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
 .lesson-bottom {
-  margin-top: auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  width: 100%;
+  margin-top:auto;
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-end;
+  width:100%;
 }
-
 .lesson-room {
-  background: var(--accent-15);
-  color: var(--text-secondary);
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
+  background:var(--accent-15);
+  color:var(--text-secondary);
+  padding:4px 8px;
+  border-radius:12px;
+  font-size:12px;
+  font-weight:500;
 }
-
 .lesson-card.substituted .lesson-bottom .lesson-room {
-  background: var(--warning-15);
+  background:var(--warning-15);
 }
 .lesson-time {
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  margin-left: auto;
-  text-align: right;
-  min-width: 45px;
+  color:var(--text-secondary);
+  font-size:12px;
+  font-weight:500;
+  margin-left:auto;
+  text-align:right;
+  min-width:45px;
 }
 .lesson-indicators {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  gap: 4px;
+  position:absolute;
+  top:8px;
+  right:8px;
+  display:flex;
+  gap:4px;
 }
-
 .lesson-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--accent-15);
-  color: var(--accent-accent);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:28px;
+  height:28px;
+  border-radius:50%;
+  background:var(--accent-15);
+  color:var(--accent-accent);
 }
-
 .lesson-indicator.homework-indicator {
-  background: var(--accent-15);
-  color: var(--accent-accent);
+  background:var(--accent-15);
+  color:var(--accent-accent);
 }
-
 .lesson-indicator.test-indicator {
-  background: var(--warning-15);
-  color: var(--warning-accent);
+  background:var(--warning-15);
+  color:var(--warning-accent);
 }
-
 .lesson-indicator .material-icons-round {
-  font-size: 18px;
+  font-size:18px;
 }
-
 .week-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 16px auto;
-  background: var(--card-card);
-  border-radius: 24px;
-  max-width: 800px;
-  padding: 20px;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  margin:16px auto;
+  background:var(--card-card);
+  border-radius:24px;
+  max-width:800px;
+  padding:20px;
 }
-
 .week-selector-container {
-  width: 100%;
-  position: relative;
+  width:100%;
+  position:relative;
 }
-
 .expand-week-view-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background: var(--button-secondaryFill);
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin-left: 12px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:40px;
+  height:40px;
+  border:none;
+  border-radius:8px;
+  background:var(--button-secondaryFill);
+  color:var(--text-primary);
+  cursor:pointer;
+  transition:all 0.2s ease;
+  margin-left:12px;
 }
-
 .expand-week-view-btn:hover {
-  background: var(--accent-15);
-  color: var(--accent-accent);
-  transform: scale(1.05);
+  background:var(--accent-15);
+  color:var(--accent-accent);
+  transform:scale(1.05);
 }
-
 .expand-week-view-btn .material-icons-round {
-  font-size: 18px;
+  font-size:18px;
 }
-
 .week-selector {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  max-width: 100%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:12px;
+  max-width:100%;
 }
-
 .week-nav-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background: var(--button-secondaryFill);
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:40px;
+  height:40px;
+  border:none;
+  border-radius:8px;
+  background:var(--button-secondaryFill);
+  color:var(--text-primary);
+  cursor:pointer;
+  transition:all 0.2s ease;
 }
-
 .week-nav-btn:hover:not(:disabled) {
-  background: var(--accent-15);
-  color: var(--accent-accent);
-  transform: scale(1.05);
+  background:var(--accent-15);
+  color:var(--accent-accent);
+  transform:scale(1.05);
 }
-
 .week-nav-btn .material-icons-round {
-  font-size: 20px;
+  font-size:20px;
 }
-
 .week-display {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+  display:flex;
+  gap:8px;
+  align-items:center;
 }
-
 .week-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 50px;
-  border: 2px solid var(--button-secondaryFill);
-  border-radius: 8px;
-  background: var(--button-secondaryFill);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  gap: 2px;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:60px;
+  height:50px;
+  border:2px solid var(--button-secondaryFill);
+  border-radius:8px;
+  background:var(--button-secondaryFill);
+  color:var(--text-primary);
+  font-family:inherit;
+  font-weight:500;
+  cursor:pointer;
+  transition:all 0.2s ease;
+  position:relative;
+  gap:2px;
 }
-
 .week-cell:hover {
-  background: var(--accent-15);
-  border-color: var(--accent-accent);
-  color: var(--accent-accent);
-  transform: scale(1.05);
+  background:var(--accent-15);
+  border-color:var(--accent-accent);
+  color:var(--accent-accent);
+  transform:scale(1.05);
 }
-
 .week-cell.selected {
-  background: var(--accent-accent);
-  border-color: var(--accent-accent);
-  color: white;
-  font-weight: 600;
+  background:var(--accent-accent);
+  border-color:var(--accent-accent);
+  color:white;
+  font-weight:600;
 }
-
 .week-cell.selected:hover {
-  background: var(--accent-accent);
-  transform: scale(1.05);
+  background:var(--accent-accent);
+  transform:scale(1.05);
 }
-
 .week-cell.current-week {
-  border-color: var(--accent-accent);
-  box-shadow: 0 0 0 1px var(--accent-accent);
+  border-color:var(--accent-accent);
+  box-shadow:0 0 0 1px var(--accent-accent);
 }
-
 .week-cell.current-week.selected {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+  box-shadow:0 0 0 2px rgba(255,255,255,0.5);
 }
-
 .week-number {
-  font-size: 14px;
-  font-weight: inherit;
+  font-size:14px;
+  font-weight:inherit;
 }
-
 .current-indicator {
-  font-size: 8px;
-  color: var(--accent-accent);
-  line-height: 1;
+  font-size:8px;
+  color:var(--accent-accent);
+  line-height:1;
 }
-
 .week-cell.selected .current-indicator {
-  color: white;
+  color:white;
 }
-
 .week-tooltip {
-  position: absolute;
-  background: var(--card-card);
-  border: 1px solid var(--border-border);
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: var(--text-primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  z-index: 1000;
-  white-space: nowrap;
+  position:absolute;
+  background:var(--card-card);
+  border:1px solid var(--border-border);
+  border-radius:8px;
+  padding:8px 12px;
+  font-size:14px;
+  color:var(--text-primary);
+  box-shadow:0 4px 12px rgba(0,0,0,0.15);
+  pointer-events:none;
+  opacity:0;
+  transition:opacity 0.2s ease;
+  z-index:1000;
+  white-space:nowrap;
 }
-
 .week-tooltip.show {
-  opacity: 1;
+  opacity:1;
 }
-
 .week-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background:rgba(0,0,0,0.5);
+  z-index:10000;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:20px;
 }
-
 .week-modal-content {
-  background: var(--card-card);
-  border-radius: 16px;
-  max-width: 1000px;
-  max-height: 70vh;
-  width: 100%;
-  overflow: hidden;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  background:var(--card-card);
+  border-radius:16px;
+  max-width:1000px;
+  max-height:70vh;
+  width:100%;
+  overflow:hidden;
+  box-shadow:0 20px 40px rgba(0,0,0,0.3);
 }
-
 .week-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-border);
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  padding:20px 24px;
+  border-bottom:1px solid var(--border-border);
 }
-
 .week-modal-grid {
-  display: grid;
-  grid-template-columns: repeat(13, 1fr);
-  gap: 8px;
-  padding: 20px;
-  max-height: calc(70vh - 80px);
-  overflow-y: auto;
+  display:grid;
+  grid-template-columns:repeat(13,1fr);
+  gap:8px;
+  padding:20px;
+  max-height:calc(70vh - 80px);
+  overflow-y:auto;
 }
-
 .modal-week-cell {
-  width: 40px;
-  height: 40px;
-  font-size: 12px;
+  width:40px;
+  height:40px;
+  font-size:12px;
 }
-
-
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .week-modal-content {
-    max-width: 95vw;
-    max-height: 80vh;
-  }
-  
-  .week-modal-grid {
-    grid-template-columns: repeat(10, 1fr);
-    gap: 6px;
-    padding: 16px;
-    max-height: calc(80vh - 80px);
-  }
-  
-  .modal-week-cell {
-    width: 35px;
-    height: 35px;
-    font-size: 11px;
-  }
+  max-width:95vw;
+  max-height:80vh;
 }
-
-.week-modal-header h3 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.week-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background: var(--button-secondaryFill);
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.week-modal-close:hover {
-  background: var(--accent-15);
-  color: var(--accent-accent);
-}
-
-.week-modal-close .material-icons-round {
-  font-size: 24px;
-}
-
 .week-modal-grid {
-  display: grid;
-  grid-template-columns: repeat(13, 1fr);
-  gap: 8px;
-  padding: 24px;
-  max-height: 70vh;
-  overflow-y: auto;
+  grid-template-columns:repeat(10,1fr);
+  gap:6px;
+  padding:16px;
+  max-height:calc(80vh - 80px);
+}
+.modal-week-cell {
+  width:35px;
+  height:35px;
+  font-size:11px;
+}
+}.week-modal-header h3 {
+  margin:0;
+  color:var(--text-primary);
+  font-size:20px;
+  font-weight:600;
+}
+.week-modal-close {
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:40px;
+  height:40px;
+  border:none;
+  border-radius:8px;
+  background:var(--button-secondaryFill);
+  color:var(--text-primary);
+  cursor:pointer;
+  transition:all 0.2s ease;
+}
+.week-modal-close:hover {
+  background:var(--accent-15);
+  color:var(--accent-accent);
+}
+.week-modal-close .material-icons-round {
+  font-size:24px;
+}
+.week-modal-grid {
+  display:grid;
+  grid-template-columns:repeat(13,1fr);
+  gap:8px;
+  padding:24px;
+  max-height:70vh;
+  overflow-y:auto;
 }
-
 .week-modal-grid .week-cell {
-  width: 60px;
-  height: 50px;
-  font-size: 14px;
+  width:60px;
+  height:50px;
+  font-size:14px;
 }
-
-@media (max-width: 1200px) {
+@media (max-width:1200px) {
   .week-modal-grid {
-    grid-template-columns: repeat(10, 1fr);
-  }
+  grid-template-columns:repeat(10,1fr);
 }
-
-@media (max-width: 768px) {
+}@media (max-width:768px) {
   .week-modal-grid {
-    grid-template-columns: repeat(7, 1fr);
-    gap: 6px;
-  }
-  
-  .week-modal-grid .week-cell {
-    width: 50px;
-    height: 45px;
-    font-size: 12px;
-  }
-  
-  .week-modal-content {
-    margin: 10px;
-  }
-  
-  .week-modal-header {
-    padding: 16px 20px;
-  }
-  
-  .week-modal-grid {
-    padding: 20px;
-  }
+  grid-template-columns:repeat(7,1fr);
+  gap:6px;
 }
-
-@media (max-width: 768px) {
+.week-modal-grid .week-cell {
+  width:50px;
+  height:45px;
+  font-size:12px;
+}
+.week-modal-content {
+  margin:10px;
+}
+.week-modal-header {
+  padding:16px 20px;
+}
+.week-modal-grid {
+  padding:20px;
+}
+}@media (max-width:768px) {
   .week-grid {
-    grid-template-columns: repeat(10, 1fr);
-    gap: 6px;
-  }
-  
-  .week-cell {
-    width: 40px;
-    height: 35px;
-    font-size: 12px;
-  }
-  
-  .week-controls {
-    max-width: 600px;
-    padding: 15px;
-  }
+  grid-template-columns:repeat(10,1fr);
+  gap:6px;
 }
-
-@media (max-width: 480px) {
+.week-cell {
+  width:40px;
+  height:35px;
+  font-size:12px;
+}
+.week-controls {
+  max-width:600px;
+  padding:15px;
+}
+}@media (max-width:480px) {
   .week-grid {
-    grid-template-columns: repeat(8, 1fr);
-    gap: 4px;
-  }
-  
-  .week-cell {
-    width: 35px;
-    height: 30px;
-    font-size: 11px;
-  }
-  
-  .week-controls {
-    max-width: 400px;
-    padding: 12px;
-  }
+  grid-template-columns:repeat(8,1fr);
+  gap:4px;
 }
-
-.day-navigation {
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  padding: 0 1rem;
+.week-cell {
+  width:35px;
+  height:30px;
+  font-size:11px;
+}
+.week-controls {
+  max-width:400px;
+  padding:12px;
+}
+}.day-navigation {
+  display:none;
+  align-items:center;
+  justify-content:space-between;
+  margin-bottom:1rem;
+  padding:0 1rem;
 }
-
 .day-nav-btn {
-  background: var(--card-card);
-  border: 1px solid var(--accent-15);
-  border-radius: 12px;
-  padding: 12px 16px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  background:var(--card-card);
+  border:1px solid var(--accent-15);
+  border-radius:12px;
+  padding:12px 16px;
+  color:var(--text-secondary);
+  cursor:pointer;
+  transition:all 0.2s ease;
+  display:flex;
+  align-items:center;
+  gap:8px;
 }
-
 .day-nav-btn:hover {
-  background: var(--accent-15);
-  color: var(--accent-accent);
+  background:var(--accent-15);
+  color:var(--accent-accent);
 }
-
-
-
 .current-day-info {
-  text-align: center;
-  flex: 1;
-  margin: 0 1rem;
+  text-align:center;
+  flex:1;
+  margin:0 1rem;
 }
-
 .current-day-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 4px;
+  font-size:18px;
+  font-weight:600;
+  color:var(--text-primary);
+  margin-bottom:4px;
 }
-
 .current-day-date {
-  font-size: 14px;
-  color: var(--text-secondary);
+  font-size:14px;
+  color:var(--text-secondary);
 }
-
-@media (max-width: 1024px) {
+@media (max-width:1024px) {
   .timetable-grid {
-    grid-template-columns: 60px repeat(5, minmax(200px, 1fr));
-  }
-  
-  .lesson-slot {
-    min-height: 80px;
-  }
+  grid-template-columns:60px repeat(5,minmax(200px,1fr));
 }
-
-@media (max-width: 768px) {
+.lesson-slot {
+  min-height:80px;
+}
+}@media (max-width:768px) {
   .day-navigation {
-    display: flex;
-  }
-  
-  .timetable-container {
-    overflow: hidden;
-  }
-  
-  .timetable-grid {
-    grid-template-columns: 60px 1fr;
-    overflow: visible;
-  }
-  
-  .grid-header:not(:first-child) {
-    display: none;
-  }
-  
-  .grid-header.active {
-    display: flex !important;
-  }
-  
-  .lesson-slot {
-    display: none;
-  }
-  
-  .lesson-slot.active {
-    display: block;
-  }
-  
-  .lesson-card {
-    padding: 8px;
-  }
-  
-  .lesson-subject {
-    font-size: 14px;
-  }
-  
-  .lesson-teacher,
-  .lesson-room {
-    font-size: 12px;
-  }
+  display:flex;
 }
-
-.lesson-modal {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.5);
-  z-index: 1000;
-  padding: 1rem;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
+.timetable-container {
+  overflow:hidden;
+}
+.timetable-grid {
+  grid-template-columns:60px 1fr;
+  overflow:visible;
+}
+.grid-header:not(:first-child) {
+  display:none;
+}
+.grid-header.active {
+  display:flex !important;
+}
+.lesson-slot {
+  display:none;
+}
+.lesson-slot.active {
+  display:block;
+}
+.lesson-card {
+  padding:8px;
+}
+.lesson-subject {
+  font-size:14px;
+}
+.lesson-teacher,.lesson-room {
+  font-size:12px;
+}
+}.lesson-modal {
+  display:none;
+  position:fixed;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background:rgba(0,0,0,0.5);
+  z-index:1000;
+  padding:1rem;
+  align-items:center;
+  justify-content:center;
+  opacity:0;
+  transition:opacity 0.3s ease;
 }
-
 .lesson-modal.show {
-  display: flex !important;
-  opacity: 1;
+  display:flex !important;
+  opacity:1;
 }
-
 .modal-content {
-  background: var(--card-card);
-  border-radius: 24px;
-  border-width: 0 !important;
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  position: relative;
-  transform: translateY(20px);
-  opacity: 0;
-  transition: all 0.3s ease;
+  background:var(--card-card);
+  border-radius:24px;
+  border-width:0 !important;
+  width:100%;
+  max-width:500px;
+  max-height:90vh;
+  overflow-y:auto;
+  position:relative;
+  transform:translateY(20px);
+  opacity:0;
+  transition:all 0.3s ease;
 }
-
 .lesson-modal.show .modal-content {
-  transform: translateY(0);
-  opacity: 1;
+  transform:translateY(0);
+  opacity:1;
 }
-
 .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  background: var(--button-secondaryFill);
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  padding:1.5rem;
+  background:var(--button-secondaryFill);
 }
-
 .modal-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-size:18px;
+  font-weight:600;
+  color:var(--text-primary);
 }
-
 .modal-close {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: all 0.2s ease;
+  background:none;
+  border:none;
+  color:var(--text-secondary);
+  cursor:pointer;
+  padding:0.5rem;
+  border-radius:8px;
+  transition:all 0.2s ease;
 }
-
 .modal-close:hover {
-  background: var(--background);
-  color: var(--text-primary);
+  background:var(--background);
+  color:var(--text-primary);
 }
-
 .modal-body {
-  padding: 1.5rem;
-  background-color: var(--button-secondaryFill);
+  padding:1.5rem;
+  background-color:var(--button-secondaryFill);
 }
-
 .lesson-details {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  display:flex;
+  flex-direction:column;
+  gap:1rem;
 }
-
 .detail-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  display:flex;
+  align-items:center;
+  gap:0.75rem;
 }
-
 .detail-label {
-  color: var(--text-secondary);
-  font-weight: 500;
-  min-width: 80px;
+  color:var(--text-secondary);
+  font-weight:500;
+  min-width:80px;
 }
-
 .detail-value {
-  color: var(--text-primary);
+  color:var(--text-primary);
 }
-
 .modal-section {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--background-0);
+  margin-top:1.5rem;
+  padding-top:1.5rem;
+  border-top:1px solid var(--background-0);
 }
-
 .modal-section h4 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-primary);
-  font-size: 16px;
-  margin-bottom: 0.75rem;
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+  color:var(--text-primary);
+  font-size:16px;
+  margin-bottom:0.75rem;
 }
-
 .homework-section h4 {
-  color: var(--accent-accent);
+  color:var(--accent-accent);
 }
-
 .test-section h4 {
-  color: var(--warning-accent);
+  color:var(--warning-accent);
 }
-
-.homework-content, .test-content {
-  background: var(--card-translucent);
-  padding: 1rem;
-  border-radius: 8px;
-  color: var(--text-primary);
+.homework-content,.test-content {
+  background:var(--card-translucent);
+  padding:1rem;
+  border-radius:8px;
+  color:var(--text-primary);
 }
-
 .detail-item .line-through {
-  text-decoration: line-through;
+  text-decoration:line-through;
 }
-
 .detail-item.hidden {
-  display: none;
+  display:none;
 }
-
 @keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity:0;
+  transform:translateY(-20px);
 }
-
-@keyframes dropdownShow {
+to {
+  opacity:1;
+  transform:translateY(0);
+}
+}@keyframes dropdownShow {
   from {
-    opacity: 0;
-    transform: translateY(-10px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  opacity:0;
+  transform:translateY(-10px) scale(0.95);
 }
-
-@keyframes modalShow {
+to {
+  opacity:1;
+  transform:translateY(0) scale(1);
+}
+}@keyframes modalShow {
   from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+  opacity:0;
+  transform:scale(0.9);
 }
-
-@media (max-width: 768px) {
+to {
+  opacity:1;
+  transform:scale(1);
+}
+}@media (max-width:768px) {
   .kreta-header {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .user-info {
-    text-align: center;
-  }
-
-  .lesson-cell {
-    min-width: 200px;
-  }
+  flex-direction:column;
+  text-align:center;
 }
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+.user-info {
+  text-align:center;
+}
+.lesson-cell {
+  min-width:200px;
+}
+}::-webkit-scrollbar {
+  width:8px;
+  height:8px;
 }
-
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background:var(--background);
 }
-
 ::-webkit-scrollbar-thumb {
-  background: var(--text-secondary);
-  border-radius: 4px;
+  background:var(--text-secondary);
+  border-radius:4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-primary);
+  background:var(--text-primary);
 }
-
 .grid-header.special-day {
-  background: linear-gradient(135deg, #F99F50, #FF8C42);
-  color: white;
-  position: relative;
+  background:linear-gradient(135deg,#F99F50,#FF8C42);
+  color:white;
+  position:relative;
 }
-
 .special-day-indicator {
-  display: block;
-  font-size: 0.7rem;
-  font-weight: 500;
-  margin-top: 2px;
-  opacity: 0.9;
-  text-align: center;
+  display:block;
+  font-size:0.7rem;
+  font-weight:500;
+  margin-top:2px;
+  opacity:0.9;
+  text-align:center;
 }
-
 .special-day-card {
-  background: #F99F50;
-  color: white;
-  padding: 12px;
-  border-radius: 8px;
-  margin: 4px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background:#F99F50;
+  color:white;
+  padding:12px;
+  border-radius:8px;
+  margin:4px;
+  text-align:center;
+  cursor:pointer;
+  transition:all 0.2s ease;
+  box-shadow:0 2px 4px rgba(0,0,0,0.1);
 }
-
 .special-day-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform:translateY(-2px);
+  box-shadow:0 4px 8px rgba(0,0,0,0.15);
 }
-
 .special-day-title {
-  font-weight: 600;
-  font-size: 1.1rem;
-  margin-bottom: 4px;
+  font-weight:600;
+  font-size:1.1rem;
+  margin-bottom:4px;
 }
-
 .special-day-subtitle {
-  font-size: 0.9rem;
-  opacity: 0.9;
-  font-weight: 400;
+  font-size:0.9rem;
+  opacity:0.9;
+  font-weight:400;
 }
-
 .week-select {
-  min-width: 200px;
-  max-width: 300px;
+  min-width:200px;
+  max-width:300px;
 }
-
-@media (max-width: 768px) {
+@media (max-width:768px) {
   .special-day-indicator {
-    font-size: 0.6rem;
-  }
-  
-  .special-day-card {
-    padding: 8px;
-    margin: 2px;
-  }
-  
-  .special-day-title {
-    font-size: 0.8rem;
-  }
-  
-  .special-day-subtitle {
-    font-size: 0.7rem;
-  }
+  font-size:0.6rem;
 }
-
-.more-link {
-  margin-top: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--accent-accent);
-  text-decoration: none;
-  font-weight: 500;
-  padding-top: 16px;
-  transition: gap 0.2s ease;
-  font-size: clamp(0.875rem, 1.5vw, 1rem);
+.special-day-card {
+  padding:8px;
+  margin:2px;
+}
+.special-day-title {
+  font-size:0.8rem;
+}
+.special-day-subtitle {
+  font-size:0.7rem;
+}
+}.more-link {
+  margin-top:auto;
+  display:inline-flex;
+  align-items:center;
+  gap:0.5rem;
+  color:var(--accent-accent);
+  text-decoration:none;
+  font-weight:500;
+  padding-top:16px;
+  transition:gap 0.2s ease;
+  font-size:clamp(0.875rem,1.5vw,1rem);
 }
\ No newline at end of file
diff --git a/timetable/timetable.js b/timetable/timetable.js
index 04dfbbb..f46dbe4 100644
--- a/timetable/timetable.js
+++ b/timetable/timetable.js
@@ -3,22 +3,24 @@
     try {
       const timestamp = Date.now();
       const apiUrl = `https://${window.location.hostname}/api/CalendarApi/GetTanuloOrarend?tanarId=-1&osztalyCsoportId=-1&tanuloId=-1&teremId=-1&kellCsengetesiRendMegjelenites=false&csakOrarendiOra=false&kellTanoranKivuliFoglalkozasok=false&kellTevekenysegek=false&kellTanevRendje=true&szuresTanevRendjeAlapjan=false&kellOraTemaTooltip=True&start=${startDate}&end=${endDate}&_=${timestamp}`;
-      
+
       const response = await fetch(apiUrl, {
-        credentials: 'include',
+        credentials: "include",
         headers: {
-          'Accept': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
+          Accept: "application/json",
+          "X-Requested-With": "XMLHttpRequest",
+        },
       });
-      
+
       if (!response.ok) {
-        throw new Error(`${LanguageManager.t('common.api_error')}: ${response.status}`);
+        throw new Error(
+          `${LanguageManager.t("common.api_error")}: ${response.status}`,
+        );
       }
-      
+
       return await response.json();
     } catch (error) {
-      console.error(LanguageManager.t('common.api_load_error'), error);
+      console.error(LanguageManager.t("common.api_load_error"), error);
       return [];
     }
   }
@@ -26,7 +28,13 @@
   function generateWeekDates(startDate) {
     const start = new Date(startDate);
     const dates = [];
-    const dayNames = [LanguageManager.t('common.monday'), LanguageManager.t('common.tuesday'), LanguageManager.t('common.wednesday'), LanguageManager.t('common.thursday'), LanguageManager.t('common.friday')];
+    const dayNames = [
+      LanguageManager.t("common.monday"),
+      LanguageManager.t("common.tuesday"),
+      LanguageManager.t("common.wednesday"),
+      LanguageManager.t("common.thursday"),
+      LanguageManager.t("common.friday"),
+    ];
 
     const startDay = start.getDay();
     let dayOffset = 0;
@@ -35,21 +43,21 @@
       dayOffset = startDay === 0 ? 1 : 1 - startDay;
       start.setDate(start.getDate() + dayOffset);
     }
-    
+
     for (let i = 0; i < 5; i++) {
       const date = new Date(start);
       date.setDate(start.getDate() + i);
-      
-      const month = date.toLocaleDateString('hu-HU', { month: 'short' });
+
+      const month = date.toLocaleDateString("hu-HU", { month: "short" });
       const day = date.getDate();
-      
+
       dates.push({
         date: `${dayNames[i]} ${month} ${day}.`,
         formattedDate: `${month} ${day}.`,
-        fullDate: date.toISOString().split('T')[0]
+        fullDate: date.toISOString().split("T")[0],
       });
     }
-    
+
     return dates;
   }
 
@@ -58,58 +66,76 @@
     apiData.forEach((event, index) => {
       try {
         const eventDate = new Date(event.start);
-        const dayIndex = weekDates.findIndex(date => 
-          new Date(date.fullDate).toDateString() === eventDate.toDateString()
+        const dayIndex = weekDates.findIndex(
+          (date) =>
+            new Date(date.fullDate).toDateString() === eventDate.toDateString(),
         );
-        
+
         if (dayIndex === -1) {
           return;
         }
-        
+
         if (event.oraType === 5) {
           const lesson = {
-            startTime: LanguageManager.t('timetable.all_day'),
-            endTime: '',
-            subject: event.title || 'Különleges nap',
-            teacher: '',
-            originalTeacher: '',
-            room: '',
+            startTime: LanguageManager.t("timetable.all_day"),
+            endTime: "",
+            subject: event.title || "Különleges nap",
+            teacher: "",
+            originalTeacher: "",
+            room: "",
             day: dayIndex,
             isSubstituted: false,
             isCancelled: false,
             hasHomework: false,
-            testInfo: event.Tema || '',
-            homeworkDetails: '',
+            testInfo: event.Tema || "",
+            homeworkDetails: "",
             isSpecialDay: true,
-            color: event.color
+            color: event.color,
           };
           lessons.push(lesson);
-        } else if (event.oraType === 2 || event.oraType === 1 || event.oraType === 3 || event.oraType === 4) {
+        } else if (
+          event.oraType === 2 ||
+          event.oraType === 1 ||
+          event.oraType === 3 ||
+          event.oraType === 4
+        ) {
           const startTime = new Date(event.start);
           const endTime = new Date(event.end);
-          const startTimeStr = startTime.toLocaleTimeString('hu-HU', { hour: '2-digit', minute: '2-digit' });
-          const endTimeStr = endTime.toLocaleTimeString('hu-HU', { hour: '2-digit', minute: '2-digit' });
-          const titleParts = event.title ? event.title.split('\n') : [];
-          const teacher = titleParts[1] || '';
-          const room = titleParts[2] ? titleParts[2].replace(/[()]/g, '') : '';
-          const subject = event.Tantargy || event.TantargyKategoria || titleParts[0] || 'Ismeretlen tantárgy';
-          
+          const startTimeStr = startTime.toLocaleTimeString("hu-HU", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+          const endTimeStr = endTime.toLocaleTimeString("hu-HU", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+          const titleParts = event.title ? event.title.split("\n") : [];
+          const teacher = titleParts[1] || "";
+          const room = titleParts[2] ? titleParts[2].replace(/[()]/g, "") : "";
+          const subject =
+            event.Tantargy ||
+            event.TantargyKategoria ||
+            titleParts[0] ||
+            "Ismeretlen tantárgy";
+
           if (startTimeStr && subject) {
             const lesson = {
               startTime: startTimeStr,
               endTime: endTimeStr,
               subject: subject,
               teacher: teacher,
-              originalTeacher: event.helyettesitoId ? teacher : '',
+              originalTeacher: event.helyettesitoId ? teacher : "",
               room: room,
               day: dayIndex,
               isSubstituted: !!event.helyettesitoId,
               isCancelled: event.isElmaradt || false,
               hasHomework: event.hasHaziFeladat || false,
-              testInfo: event.hasBejelentettSzamonkeres ? (event.Tema || LanguageManager.t('timetable.test_indicator')) : '',
-              homeworkDetails: '',
+              testInfo: event.hasBejelentettSzamonkeres
+                ? event.Tema || LanguageManager.t("timetable.test_indicator")
+                : "",
+              homeworkDetails: "",
               isSpecialDay: false,
-              color: event.color
+              color: event.color,
             };
             lessons.push(lesson);
           } else {
@@ -117,88 +143,127 @@
         } else {
         }
       } catch (error) {
-        console.error(`Hiba az API feldolgozása során (${index}):`, error, event);
+        console.error(
+          `Hiba az API feldolgozása során (${index}):`,
+          error,
+          event,
+        );
       }
     });
     return lessons;
   }
 
   function generateTimeGrid(lessons, weekDates) {
-    const specialDayLessons = lessons.filter(l => l.isSpecialDay);
-    const regularLessons = lessons.filter(l => !l.isSpecialDay);
-    
-    const times = [...new Set(regularLessons.map(l => l.startTime))].sort((a, b) => {
-      const timeA = helper.convertTimeToMinutes(a);
-      const timeB = helper.convertTimeToMinutes(b);
-      return timeA - timeB;
-    });
+    const specialDayLessons = lessons.filter((l) => l.isSpecialDay);
+    const regularLessons = lessons.filter((l) => !l.isSpecialDay);
+
+    const times = [...new Set(regularLessons.map((l) => l.startTime))].sort(
+      (a, b) => {
+        const timeA = helper.convertTimeToMinutes(a);
+        const timeB = helper.convertTimeToMinutes(b);
+        return timeA - timeB;
+      },
+    );
     const days = [
-      LanguageManager.t('timetable.monday'), 
-      LanguageManager.t('timetable.tuesday'), 
-      LanguageManager.t('timetable.wednesday'), 
-      LanguageManager.t('timetable.thursday'), 
-      LanguageManager.t('timetable.friday')
+      LanguageManager.t("timetable.monday"),
+      LanguageManager.t("timetable.tuesday"),
+      LanguageManager.t("timetable.wednesday"),
+      LanguageManager.t("timetable.thursday"),
+      LanguageManager.t("timetable.friday"),
     ];
-    
+
     return `
       <div class="grid-header"></div>
-      ${days.map((day, index) => {
-        return `
+      ${days
+        .map((day, index) => {
+          return `
           <div class="grid-header">
             <span class="day-name">${day}</span>
-            <span class="day-date">${weekDates[index]?.formattedDate || ''}</span>
+            <span class="day-date">${weekDates[index]?.formattedDate || ""}</span>
           </div>
         `;
-      }).join('')}
-      ${times.map((time, timeIndex) => `
+        })
+        .join("")}
+      ${times
+        .map(
+          (time, timeIndex) => `
         <div class="time-slot">${time}</div>
-        ${Array(5).fill().map((_, dayIndex) => {
-          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)}'>
+        ${Array(5)
+          .fill()
+          .map((_, dayIndex) => {
+            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>` : ''}
+                  ${specialDay.testInfo ? `<div class="special-day-subtitle">${specialDay.testInfo}</div>` : ""}
                 </div>
-              ` : dayLessons.map(lesson => `
-                <div class="lesson-card ${lesson.isSubstituted ? 'substituted' : ''} 
-                                      ${lesson.isCancelled ? 'cancelled' : ''}
-                                      ${lesson.hasHomework ? 'has-homework' : ''}"
+              `
+                  : dayLessons
+                      .map(
+                        (lesson) => `
+                <div class="lesson-card ${lesson.isSubstituted ? "substituted" : ""} 
+                                      ${lesson.isCancelled ? "cancelled" : ""}
+                                      ${lesson.hasHomework ? "has-homework" : ""}"
                      data-lesson='${JSON.stringify(lesson)}'>
                   <div class="lesson-subject">${lesson.subject}</div>
                   <div class="lesson-teacher">${lesson.teacher}</div>
                   <div class="lesson-bottom">
                     <div class="lesson-room">${lesson.room}</div>
-                    <div class="lesson-time">${lesson.isCancelled ? LanguageManager.t('timetable.cancelled') : lesson.startTime}</div>
+                    <div class="lesson-time">${lesson.isCancelled ? LanguageManager.t("timetable.cancelled") : lesson.startTime}</div>
                   </div>
-                  ${lesson.hasHomework || lesson.testInfo ? `
+                  ${
+                    lesson.hasHomework || lesson.testInfo
+                      ? `
                     <div class="lesson-indicators">
-                      ${lesson.hasHomework ? `
-                        <span class="lesson-indicator homework-indicator" title="${LanguageManager.t('timetable.homework_indicator')}">
+                      ${
+                        lesson.hasHomework
+                          ? `
+                        <span class="lesson-indicator homework-indicator" title="${LanguageManager.t("timetable.homework_indicator")}">
                           <span class="material-icons-round">assignment</span>
                         </span>
-                      ` : ''}
-                      ${lesson.testInfo ? `
-                        <span class="lesson-indicator test-indicator" title="${LanguageManager.t('timetable.test_indicator')}">
+                      `
+                          : ""
+                      }
+                      ${
+                        lesson.testInfo
+                          ? `
+                        <span class="lesson-indicator test-indicator" title="${LanguageManager.t("timetable.test_indicator")}">
                           <span class="material-icons-round">quiz</span>
                         </span>
-                      ` : ''}
+                      `
+                          : ""
+                      }
                     </div>
-                  ` : ''}
+                  `
+                      : ""
+                  }
                 </div>
-              `).join('')}
+              `,
+                      )
+                      .join("")
+              }
             </div>
           `;
-        }).join('')}
-      `).join('')}
+          })
+          .join("")}
+      `,
+        )
+        .join("")}
     `;
   }
   function showLessonModal(lesson) {
-    const modal = document.createElement('div');
-    modal.className = 'lesson-modal';
+    const modal = document.createElement("div");
+    modal.className = "lesson-modal";
     modal.innerHTML = `
       <div class="modal-content">
         <div class="modal-header">
@@ -210,89 +275,105 @@
         <div class="modal-body">
           <div class="lesson-details">
             <div class="detail-item">
-              <span class="detail-label">${LanguageManager.t('timetable.teacher_label')}</span>
-              <span class="detail-value ${(lesson.originalTeacher != '' ? 'line-through' : '')}">${lesson.originalTeacher != '' ? lesson.originalTeacher : lesson.teacher}</span>
+              <span class="detail-label">${LanguageManager.t("timetable.teacher_label")}</span>
+              <span class="detail-value ${lesson.originalTeacher != "" ? "line-through" : ""}">${lesson.originalTeacher != "" ? lesson.originalTeacher : lesson.teacher}</span>
             </div>
-            <div class="detail-item ${(lesson.originalTeacher != '' ? '' : 'hidden')}">
-              <span class="detail-label">${LanguageManager.t('timetable.substitute_teacher_label')}</span>
-              <span class="detail-value">${lesson.teacher.replace('Helyettesítő:', '')}</span>
+            <div class="detail-item ${lesson.originalTeacher != "" ? "" : "hidden"}">
+              <span class="detail-label">${LanguageManager.t("timetable.substitute_teacher_label")}</span>
+              <span class="detail-value">${lesson.teacher.replace("Helyettesítő:", "")}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">${LanguageManager.t('timetable.classroom_label')}</span>
+              <span class="detail-label">${LanguageManager.t("timetable.classroom_label")}</span>
               <span class="detail-value">${lesson.room}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">${LanguageManager.t('timetable.time_label')}</span>
+              <span class="detail-label">${LanguageManager.t("timetable.time_label")}</span>
               <span class="detail-value">${lesson.startTime} - ${lesson.endTime}</span>
             </div>
-            ${lesson.isSubstituted ? `
+            ${
+              lesson.isSubstituted
+                ? `
             <div class="detail-item">
-              <span class="detail-label">${LanguageManager.t('timetable.status_label')}</span>
-              <span class="detail-value"><span class="material-icons-round">sync_alt</span> ${LanguageManager.t('timetable.substitution')}</span>
+              <span class="detail-label">${LanguageManager.t("timetable.status_label")}</span>
+              <span class="detail-value"><span class="material-icons-round">sync_alt</span> ${LanguageManager.t("timetable.substitution")}</span>
             </div>
-            ` : ''}
-            ${lesson.isCancelled ? `
+            `
+                : ""
+            }
+            ${
+              lesson.isCancelled
+                ? `
             <div class="detail-item">
-              <span class="detail-label">${LanguageManager.t('timetable.status_label')}</span>
-              <span class="detail-value"><span class="material-icons-round">cancel</span> ${LanguageManager.t('timetable.cancelled')}</span>
+              <span class="detail-label">${LanguageManager.t("timetable.status_label")}</span>
+              <span class="detail-value"><span class="material-icons-round">cancel</span> ${LanguageManager.t("timetable.cancelled")}</span>
             </div>
-            ` : ''}
+            `
+                : ""
+            }
           </div>
           
-          ${lesson.hasHomework ? `
+          ${
+            lesson.hasHomework
+              ? `
             <div class="modal-section homework-section">
               <h4>
                 <span class="material-icons-round">assignment</span>
-                ${LanguageManager.t('timetable.homework_indicator')}
+                ${LanguageManager.t("timetable.homework_indicator")}
               </h4>
               <div class="homework-content">
-                ${lesson.homeworkDetails ? `<p>${lesson.homeworkDetails}</p>` : `<p>${LanguageManager.t('timetable.has_homework')}</p>`}
+                ${lesson.homeworkDetails ? `<p>${lesson.homeworkDetails}</p>` : `<p>${LanguageManager.t("timetable.has_homework")}</p>`}
                 <a href='https://${window.location.hostname}/Tanulo/TanuloHaziFeladat' class="more-link">
-                  ${LanguageManager.t('timetable.open_homework')}
+                  ${LanguageManager.t("timetable.open_homework")}
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                     <path d="M11.2997 5.19947L5.64282 5.19947M11.2997 5.19947L11.2997 10.8563M11.2997 5.19947L4.70001 11.7991" stroke="var(--accent-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                   </svg>
                 </a>
               </div>
             </div>
-          ` : ''}
-          ${lesson.testInfo ? `
+          `
+              : ""
+          }
+          ${
+            lesson.testInfo
+              ? `
             <div class="modal-section test-section">
               <h4>
                 <span class="material-icons-round">quiz</span>
-                ${LanguageManager.t('timetable.test_indicator')}
+                ${LanguageManager.t("timetable.test_indicator")}
               </h4>
               <div class="test-content">
                 <p>${lesson.testInfo}</p>
               </div>
             </div>
-          ` : ''}
+          `
+              : ""
+          }
         </div>
       </div>
     `;
 
     document.body.appendChild(modal);
-    
+
     const closeModal = () => {
-      modal.classList.remove('show');
+      modal.classList.remove("show");
       setTimeout(() => modal.remove(), 300);
     };
 
-    modal.querySelector('.modal-close').addEventListener('click', closeModal);
-    modal.addEventListener('click', (e) => {
+    modal.querySelector(".modal-close").addEventListener("click", closeModal);
+    modal.addEventListener("click", (e) => {
       if (e.target === modal) closeModal();
     });
 
     const handleEscape = (e) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         closeModal();
-        document.removeEventListener('keydown', handleEscape);
+        document.removeEventListener("keydown", handleEscape);
       }
     };
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener("keydown", handleEscape);
 
     requestAnimationFrame(() => {
-      modal.classList.add('show');
+      modal.classList.add("show");
     });
   }
 
@@ -306,9 +387,12 @@
       } else {
         const weekText = weekOption.text;
         const dateMatch = weekText.match(/(\d{4})\.(\d{2})\.(\d{2})/);
-        
+
         if (!dateMatch) {
-          console.error(LanguageManager.t('timetable.date_extract_error'), weekText);
+          console.error(
+            LanguageManager.t("timetable.date_extract_error"),
+            weekText,
+          );
           return;
         }
         const [, year, month, day] = dateMatch;
@@ -316,45 +400,44 @@
         const start = new Date(startDate);
         const end = new Date(start);
         end.setDate(start.getDate() + 6);
-        endDate = end.toISOString().split('T')[0];
+        endDate = end.toISOString().split("T")[0];
       }
       const apiData = await loadWeekDataFromAPI(startDate, endDate);
       const weekDates = generateWeekDates(startDate);
-      const kendoCombo = document.querySelector('#Calendar_tanevHetek')?.__kendoWidget;
+      const kendoCombo = document.querySelector(
+        "#Calendar_tanevHetek",
+      )?.__kendoWidget;
       if (kendoCombo) {
         kendoCombo.value(weekOption.value);
-        kendoCombo.trigger('change');
+        kendoCombo.trigger("change");
 
-        await new Promise(resolve => setTimeout(resolve, 2000));
+        await new Promise((resolve) => setTimeout(resolve, 2000));
       }
 
       const apiLessons = convertAPIDataToLessons(apiData, weekDates);
       const allLessons = apiLessons;
-      const timetableGrid = document.querySelector('.timetable-grid');
+      const timetableGrid = document.querySelector(".timetable-grid");
       if (timetableGrid) {
         timetableGrid.innerHTML = generateTimeGrid(allLessons, weekDates);
         setupLessonCardListeners();
       }
-      
-      const weekSelect = document.querySelector('.week-select');
+
+      const weekSelect = document.querySelector(".week-select");
       if (weekSelect) {
         weekSelect.value = weekOption.value;
       }
-      
+
       setupDayNavigation(weekDates);
-      
     } catch (error) {
-      console.error(LanguageManager.t('timetable.week_load_error'), error);
+      console.error(LanguageManager.t("timetable.week_load_error"), error);
     } finally {
       loadingScreen.hide();
     }
   }
 
-
-
   function setupLessonCardListeners() {
-    document.querySelectorAll('.lesson-card').forEach(card => {
-      card.addEventListener('click', () => {
+    document.querySelectorAll(".lesson-card").forEach((card) => {
+      card.addEventListener("click", () => {
         const lessonData = JSON.parse(card.dataset.lesson);
         showLessonModal(lessonData);
       });
@@ -365,76 +448,78 @@
     setupLessonCardListeners();
     setupDayNavigation(data.weekDates);
 
-    const weekGrid = document.getElementById('week-grid');
-    const weekTooltip = document.getElementById('week-tooltip');
-    
+    const weekGrid = document.getElementById("week-grid");
+    const weekTooltip = document.getElementById("week-tooltip");
+
     if (weekGrid && weekTooltip) {
-      weekGrid.addEventListener('click', async (e) => {
-        if (e.target.classList.contains('week-cell')) {
+      weekGrid.addEventListener("click", async (e) => {
+        if (e.target.classList.contains("week-cell")) {
           const weekValue = e.target.dataset.week;
-          const weekOption = data.weekInfo.options.find(opt => opt.value === weekValue);
-          
+          const weekOption = data.weekInfo.options.find(
+            (opt) => opt.value === weekValue,
+          );
+
           if (weekOption) {
-            document.querySelectorAll('.week-cell.selected').forEach(cell => {
-              cell.classList.remove('selected');
+            document.querySelectorAll(".week-cell.selected").forEach((cell) => {
+              cell.classList.remove("selected");
             });
 
-            e.target.classList.add('selected');
+            e.target.classList.add("selected");
 
             await loadAndDisplayWeek(weekOption);
           }
         }
       });
 
-      weekGrid.addEventListener('mouseover', (e) => {
-        if (e.target.classList.contains('week-cell')) {
+      weekGrid.addEventListener("mouseover", (e) => {
+        if (e.target.classList.contains("week-cell")) {
           const startDate = e.target.dataset.start;
           const endDate = e.target.dataset.end;
           const weekNum = e.target.dataset.week;
-          
+
           if (startDate && endDate) {
             const startFormatted = formatDateHU(new Date(startDate));
             const endFormatted = formatDateHU(new Date(endDate));
             weekTooltip.textContent = `${weekNum}. hét: ${startFormatted} - ${endFormatted}`;
             const rect = e.target.getBoundingClientRect();
             const containerRect = weekGrid.getBoundingClientRect();
-            
+
             weekTooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
             weekTooltip.style.top = `${rect.top - containerRect.top - 40}px`;
-            weekTooltip.style.transform = 'translateX(-50%)';
-            weekTooltip.classList.add('show');
+            weekTooltip.style.transform = "translateX(-50%)";
+            weekTooltip.classList.add("show");
           }
         }
       });
-      
-      weekGrid.addEventListener('mouseout', (e) => {
-        if (e.target.classList.contains('week-cell')) {
-          weekTooltip.classList.remove('show');
+
+      weekGrid.addEventListener("mouseout", (e) => {
+        if (e.target.classList.contains("week-cell")) {
+          weekTooltip.classList.remove("show");
         }
       });
     }
 
-    const expandBtn = document.getElementById('expandWeekView');
-    const modal = document.getElementById('weekModal');
-    const closeBtn = document.getElementById('closeWeekModal');
-    const modalGrid = document.getElementById('weekModalGrid');
-    
+    const expandBtn = document.getElementById("expandWeekView");
+    const modal = document.getElementById("weekModal");
+    const closeBtn = document.getElementById("closeWeekModal");
+    const modalGrid = document.getElementById("weekModalGrid");
+
     if (expandBtn && modal && closeBtn && modalGrid) {
-      expandBtn.addEventListener('click', () => {
+      expandBtn.addEventListener("click", () => {
         generateFullYearWeeks(modalGrid, data);
-        modal.style.display = 'flex';
-        document.body.style.overflow = 'hidden';
+        modal.style.display = "flex";
+        document.body.style.overflow = "hidden";
       });
 
-      closeBtn.addEventListener('click', () => {
-        modal.style.display = 'none';
-        document.body.style.overflow = 'auto';
+      closeBtn.addEventListener("click", () => {
+        modal.style.display = "none";
+        document.body.style.overflow = "auto";
       });
 
-      modal.addEventListener('click', (e) => {
+      modal.addEventListener("click", (e) => {
         if (e.target === modal) {
-          modal.style.display = 'none';
-          document.body.style.overflow = 'auto';
+          modal.style.display = "none";
+          document.body.style.overflow = "auto";
         }
       });
     }
@@ -442,22 +527,22 @@
 
   let dayNavigationState = {
     currentDayIndex: 0,
-    isInitialized: false
+    isInitialized: false,
   };
 
   function setupDayNavigation(weekDates) {
     const days = [
-      LanguageManager.t('timetable.monday'), 
-      LanguageManager.t('timetable.tuesday'), 
-      LanguageManager.t('timetable.wednesday'), 
-      LanguageManager.t('timetable.thursday'), 
-      LanguageManager.t('timetable.friday')
+      LanguageManager.t("timetable.monday"),
+      LanguageManager.t("timetable.tuesday"),
+      LanguageManager.t("timetable.wednesday"),
+      LanguageManager.t("timetable.thursday"),
+      LanguageManager.t("timetable.friday"),
     ];
-    
-    const prevBtn = document.getElementById('prevDay');
-    const nextBtn = document.getElementById('nextDay');
-    const currentDayName = document.getElementById('currentDayName');
-    const currentDayDate = document.getElementById('currentDayDate');
+
+    const prevBtn = document.getElementById("prevDay");
+    const nextBtn = document.getElementById("nextDay");
+    const currentDayName = document.getElementById("currentDayName");
+    const currentDayDate = document.getElementById("currentDayDate");
 
     if (!dayNavigationState.isInitialized) {
       const today = new Date();
@@ -468,7 +553,7 @@
       } else {
         currentDayIndex = 0;
       }
-      
+
       dayNavigationState.currentDayIndex = currentDayIndex;
     } else {
       const preservedDayIndex = dayNavigationState.currentDayIndex;
@@ -478,37 +563,46 @@
     function updateDayDisplay() {
       if (currentDayName && currentDayDate) {
         currentDayName.textContent = days[dayNavigationState.currentDayIndex];
-        currentDayDate.textContent = weekDates[dayNavigationState.currentDayIndex]?.formattedDate || '';
+        currentDayDate.textContent =
+          weekDates[dayNavigationState.currentDayIndex]?.formattedDate || "";
       }
 
-      const gridHeaders = document.querySelectorAll('.grid-header:not(:first-child)');
-      const lessonSlots = document.querySelectorAll('.lesson-slot');
+      const gridHeaders = document.querySelectorAll(
+        ".grid-header:not(:first-child)",
+      );
+      const lessonSlots = document.querySelectorAll(".lesson-slot");
 
       gridHeaders.forEach((header, index) => {
-        header.classList.toggle('active', index === dayNavigationState.currentDayIndex);
+        header.classList.toggle(
+          "active",
+          index === dayNavigationState.currentDayIndex,
+        );
       });
 
-      const timeSlots = document.querySelectorAll('.time-slot');
+      const timeSlots = document.querySelectorAll(".time-slot");
       timeSlots.forEach((timeSlot, timeIndex) => {
         const startIndex = timeIndex * 5;
         lessonSlots.forEach((slot, slotIndex) => {
           const dayIndex = (slotIndex - startIndex) % 5;
           if (slotIndex >= startIndex && slotIndex < startIndex + 5) {
-            slot.classList.toggle('active', dayIndex === dayNavigationState.currentDayIndex);
+            slot.classList.toggle(
+              "active",
+              dayIndex === dayNavigationState.currentDayIndex,
+            );
           }
         });
       });
     }
 
     if (prevBtn && nextBtn && !dayNavigationState.isInitialized) {
-      prevBtn.addEventListener('click', () => {
+      prevBtn.addEventListener("click", () => {
         if (dayNavigationState.currentDayIndex > 0) {
           dayNavigationState.currentDayIndex--;
           updateDayDisplay();
         }
       });
 
-      nextBtn.addEventListener('click', () => {
+      nextBtn.addEventListener("click", () => {
         if (dayNavigationState.currentDayIndex < days.length - 1) {
           dayNavigationState.currentDayIndex++;
           updateDayDisplay();
@@ -525,25 +619,26 @@
     const currentDate = new Date(date);
     const currentYear = currentDate.getFullYear();
     const currentMonth = currentDate.getMonth();
-    
+
     let schoolYear;
     if (currentMonth >= 8) {
       schoolYear = currentYear;
     } else {
       schoolYear = currentYear - 1;
     }
-    
+
     const schoolYearStart = new Date(schoolYear, 8, 1); // szeptember 1
     const startDayOfWeek = schoolYearStart.getDay();
-    const daysToFirstMonday = startDayOfWeek === 1 ? 0 : (8 - startDayOfWeek) % 7;
-    
+    const daysToFirstMonday =
+      startDayOfWeek === 1 ? 0 : (8 - startDayOfWeek) % 7;
+
     const firstMonday = new Date(schoolYearStart);
     firstMonday.setDate(schoolYearStart.getDate() + daysToFirstMonday);
-    
+
     const timeDiff = currentDate.getTime() - firstMonday.getTime();
     const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
     const weekNumber = Math.floor(daysDiff / 7) + 1;
-    
+
     return Math.max(1, Math.min(52, weekNumber));
   }
 
@@ -551,21 +646,24 @@
     // Tanév alapú hét számítás: szeptember 1-től kezdődik
     const schoolYearStart = new Date(year, 8, 1); // szeptember 1
     const startDayOfWeek = schoolYearStart.getDay();
-    const daysToFirstMonday = startDayOfWeek === 1 ? 0 : (8 - startDayOfWeek) % 7;
-    
+    const daysToFirstMonday =
+      startDayOfWeek === 1 ? 0 : (8 - startDayOfWeek) % 7;
+
     const firstMonday = new Date(schoolYearStart);
     firstMonday.setDate(schoolYearStart.getDate() + daysToFirstMonday);
-    
+
     const targetDate = new Date(firstMonday);
-    targetDate.setDate(firstMonday.getDate() + (week - 1) * 7 + (dayOfWeek - 1));
-    
+    targetDate.setDate(
+      firstMonday.getDate() + (week - 1) * 7 + (dayOfWeek - 1),
+    );
+
     return targetDate;
   }
 
   function formatDateHU(date) {
     const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
     return `${year}.${month}.${day}.`;
   }
 
@@ -575,35 +673,35 @@
 
     for (let offset = -2; offset <= 2; offset++) {
       const targetDate = new Date(today);
-      targetDate.setDate(today.getDate() + (offset * 7));
+      targetDate.setDate(today.getDate() + offset * 7);
       const dayOfWeek = targetDate.getDay();
       const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
       const weekStart = new Date(targetDate);
       weekStart.setDate(targetDate.getDate() + daysToMonday);
-      
+
       const weekEnd = new Date(weekStart);
       weekEnd.setDate(weekStart.getDate() + 6);
-      
+
       const weekNumber = getWeekNumber(weekStart);
-      
+
       const startDateFormatted = formatDateHU(weekStart);
       const endDateFormatted = formatDateHU(weekEnd);
-      
-      const startDate = weekStart.toISOString().split('T')[0];
-      const endDate = weekEnd.toISOString().split('T')[0];
-      
+
+      const startDate = weekStart.toISOString().split("T")[0];
+      const endDate = weekEnd.toISOString().split("T")[0];
+
       options.push({
         text: `${weekNumber}. hét (${startDateFormatted} - ${endDateFormatted})`,
         value: weekNumber.toString(),
         selected: offset === 0,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
       });
     }
-    
+
     return options;
   }
-  
+
   function generateFullYearWeeks(modalGrid, data) {
     const today = new Date();
     const currentYear = today.getFullYear();
@@ -615,7 +713,7 @@
     } else {
       schoolYearStart = new Date(currentYear - 1, 8, 1);
     }
-    
+
     const currentWeekNumber = getWeekNumber(today);
     const allWeeks = [];
 
@@ -626,58 +724,68 @@
       if (weekNum === 1) {
         weekStart.setDate(schoolYearStart.getDate() - daysToMonday);
       } else {
-        weekStart.setDate(schoolYearStart.getDate() - daysToMonday + (weekNum - 1) * 7);
+        weekStart.setDate(
+          schoolYearStart.getDate() - daysToMonday + (weekNum - 1) * 7,
+        );
       }
-      
+
       const weekEnd = new Date(weekStart);
       weekEnd.setDate(weekStart.getDate() + 6);
-      
+
       const startDateFormatted = formatDateHU(weekStart);
       const endDateFormatted = formatDateHU(weekEnd);
-      
-      const startDate = weekStart.toISOString().split('T')[0];
-      const endDate = weekEnd.toISOString().split('T')[0];
-      
+
+      const startDate = weekStart.toISOString().split("T")[0];
+      const endDate = weekEnd.toISOString().split("T")[0];
+
       allWeeks.push({
         text: `${weekNum}. hét (${startDateFormatted} - ${endDateFormatted})`,
         value: weekNum.toString(),
         selected: weekNum === currentWeekNumber,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
       });
     }
 
-    modalGrid.innerHTML = allWeeks.map(week => `
-      <div class="week-cell ${week.selected ? 'selected' : ''}" 
+    modalGrid.innerHTML = allWeeks
+      .map(
+        (week) => `
+      <div class="week-cell ${week.selected ? "selected" : ""}" 
            data-week="${week.value}" 
            data-start="${week.startDate}" 
            data-end="${week.endDate}"
            title="${week.text}">
         ${week.value}
       </div>
-    `).join('');
-    modalGrid.addEventListener('click', async (e) => {
-      if (e.target.classList.contains('week-cell')) {
+    `,
+      )
+      .join("");
+    modalGrid.addEventListener("click", async (e) => {
+      if (e.target.classList.contains("week-cell")) {
         const weekValue = e.target.dataset.week;
-        const weekOption = allWeeks.find(opt => opt.value === weekValue);
-        
-        if (weekOption) {
-          document.getElementById('weekModal').style.display = 'none';
-          document.body.style.overflow = 'auto';
+        const weekOption = allWeeks.find((opt) => opt.value === weekValue);
 
-          document.querySelectorAll('#week-grid .week-cell.selected').forEach(cell => {
-            cell.classList.remove('selected');
-          });
+        if (weekOption) {
+          document.getElementById("weekModal").style.display = "none";
+          document.body.style.overflow = "auto";
+
+          document
+            .querySelectorAll("#week-grid .week-cell.selected")
+            .forEach((cell) => {
+              cell.classList.remove("selected");
+            });
 
           await loadAndDisplayWeek(weekOption);
 
-          const newWeekOptions = generateWeekOptionsAroundWeek(parseInt(weekValue));
+          const newWeekOptions = generateWeekOptionsAroundWeek(
+            parseInt(weekValue),
+          );
           updateMainWeekGrid(newWeekOptions);
         }
       }
     });
   }
-  
+
   function generateWeekOptionsAroundWeek(targetWeekNumber) {
     const options = [];
     const today = new Date();
@@ -698,74 +806,80 @@
       if (weekNum === 1) {
         weekStart.setDate(schoolYearStart.getDate() - daysToMonday);
       } else {
-        weekStart.setDate(schoolYearStart.getDate() - daysToMonday + (weekNum - 1) * 7);
+        weekStart.setDate(
+          schoolYearStart.getDate() - daysToMonday + (weekNum - 1) * 7,
+        );
       }
-      
+
       const weekEnd = new Date(weekStart);
       weekEnd.setDate(weekStart.getDate() + 6);
-      
+
       const startDateFormatted = formatDateHU(weekStart);
       const endDateFormatted = formatDateHU(weekEnd);
-      
-      const startDate = weekStart.toISOString().split('T')[0];
-      const endDate = weekEnd.toISOString().split('T')[0];
-      
+
+      const startDate = weekStart.toISOString().split("T")[0];
+      const endDate = weekEnd.toISOString().split("T")[0];
+
       options.push({
         text: `${weekNum}. hét (${startDateFormatted} - ${endDateFormatted})`,
         value: weekNum.toString(),
         selected: weekNum === targetWeekNumber,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
       });
     }
-    
+
     return options;
   }
-  
+
   function updateMainWeekGrid(newWeekOptions) {
-    const weekGrid = document.getElementById('week-grid');
+    const weekGrid = document.getElementById("week-grid");
     if (weekGrid) {
-      weekGrid.innerHTML = newWeekOptions.map(opt => `
-        <div class="week-cell ${opt.selected ? 'selected' : ''}" 
+      weekGrid.innerHTML = newWeekOptions
+        .map(
+          (opt) => `
+        <div class="week-cell ${opt.selected ? "selected" : ""}" 
              data-week="${opt.value}" 
              data-start="${opt.startDate}" 
              data-end="${opt.endDate}"
              title="${opt.text}">
           ${opt.value}
         </div>
-      `).join('');
+      `,
+        )
+        .join("");
     }
   }
 
   async function transformTimetablePage() {
     try {
       const weekOptions = generateWeekOptions();
-      const currentWeekOption = weekOptions.find(opt => opt.selected);
+      const currentWeekOption = weekOptions.find((opt) => opt.selected);
       const today = new Date();
       const startOfWeek = new Date(today);
       startOfWeek.setDate(today.getDate() - today.getDay() + 1);
       const endOfWeek = new Date(startOfWeek);
       endOfWeek.setDate(startOfWeek.getDate() + 6);
-      const startDate = startOfWeek.toISOString().split('T')[0];
-      const endDate = endOfWeek.toISOString().split('T')[0];
+      const startDate = startOfWeek.toISOString().split("T")[0];
+      const endDate = endOfWeek.toISOString().split("T")[0];
       const apiData = await loadWeekDataFromAPI(startDate, endDate);
       const weekDates = generateWeekDates(startDate);
       const lessons = convertAPIDataToLessons(apiData, weekDates);
       const data = {
         schoolInfo: {
-          name: cookieManager.get('schoolName') || 'Iskola',
-          id: cookieManager.get('schoolCode') || ''
+          name: cookieManager.get("schoolName") || "Iskola",
+          id: cookieManager.get("schoolCode") || "",
         },
         userData: {
-          name: cookieManager.get('userName') || 'Felhasználó',
-          time: '45:00'
+          name: cookieManager.get("userName") || "Felhasználó",
+          time: "45:00",
         },
         weekInfo: {
-          title: LanguageManager.t('timetable.week'),
-          options: weekOptions
+          title: LanguageManager.t("timetable.week"),
+          options: weekOptions,
         },
         weekDates: weekDates,
-        lessons: lessons
+        lessons: lessons,
       };
 
       document.body.innerHTML = `
@@ -826,36 +940,35 @@
         </div>
       `;
 
-      createTemplate.importFonts();
+      
       setupUserDropdown();
       setupMobileNavigation();
       setupEventListeners(data);
       initializeWeekSelector();
-      
-      loadingScreen.hide();
 
+      loadingScreen.hide();
     } catch (error) {
-      console.error(LanguageManager.t('timetable.page_transform_error'), error);
+      console.error(LanguageManager.t("timetable.page_transform_error"), error);
       loadingScreen.hide();
     }
   }
 
   let selectedWeekNumber = 1;
   let currentWeekNumber = 1;
-  
+
   function initializeWeekSelector() {
     const today = new Date();
     currentWeekNumber = getWeekNumber(today);
     selectedWeekNumber = currentWeekNumber;
-    
+
     updateWeekDisplay();
     setupWeekNavigation();
   }
-  
+
   function updateWeekDisplay() {
-    const weekDisplay = document.getElementById('week-display');
+    const weekDisplay = document.getElementById("week-display");
     if (!weekDisplay) return;
-    
+
     // Mindig 5 hetet mutatunk, a kiválasztott hét középen
     const visibleWeeks = [];
     for (let i = -2; i <= 2; i++) {
@@ -864,53 +977,55 @@
       if (weekNum > 52) weekNum = weekNum - 52;
       visibleWeeks.push(weekNum);
     }
-    
-    weekDisplay.innerHTML = visibleWeeks.map((weekNum, index) => {
-      const isSelected = index === 2; // A középső elem mindig a kiválasztott
-      const isCurrent = weekNum === currentWeekNumber;
-      
-      return `
-        <div class="week-cell ${isSelected ? 'selected' : ''} ${isCurrent ? 'current-week' : ''}" 
+
+    weekDisplay.innerHTML = visibleWeeks
+      .map((weekNum, index) => {
+        const isSelected = index === 2; // A középső elem mindig a kiválasztott
+        const isCurrent = weekNum === currentWeekNumber;
+
+        return `
+        <div class="week-cell ${isSelected ? "selected" : ""} ${isCurrent ? "current-week" : ""}" 
              data-week="${weekNum}"
-             title="${weekNum}. hét${isCurrent ? ' (Jelenlegi hét)' : ''}">
+             title="${weekNum}. hét${isCurrent ? " (Jelenlegi hét)" : ""}">
           <span class="week-number">${weekNum}</span>
-          ${isCurrent ? '<span class="current-indicator">●</span>' : ''}
+          ${isCurrent ? '<span class="current-indicator">●</span>' : ""}
         </div>
       `;
-    }).join('');
+      })
+      .join("");
   }
-  
+
   function setupWeekNavigation() {
-    const prevBtn = document.getElementById('prevWeekBtn');
-    const nextBtn = document.getElementById('nextWeekBtn');
-    const expandBtn = document.getElementById('expandWeekView');
-    
+    const prevBtn = document.getElementById("prevWeekBtn");
+    const nextBtn = document.getElementById("nextWeekBtn");
+    const expandBtn = document.getElementById("expandWeekView");
+
     if (prevBtn) {
-      prevBtn.addEventListener('click', () => {
+      prevBtn.addEventListener("click", () => {
         selectedWeekNumber--;
         if (selectedWeekNumber < 1) selectedWeekNumber = 52;
         updateWeekDisplay();
         loadWeekData(selectedWeekNumber);
       });
     }
-    
+
     if (nextBtn) {
-      nextBtn.addEventListener('click', () => {
+      nextBtn.addEventListener("click", () => {
         selectedWeekNumber++;
         if (selectedWeekNumber > 52) selectedWeekNumber = 1;
         updateWeekDisplay();
         loadWeekData(selectedWeekNumber);
       });
     }
-    
+
     if (expandBtn) {
-      expandBtn.addEventListener('click', () => {
+      expandBtn.addEventListener("click", () => {
         openWeekModal();
       });
     }
-    
+
     const weekClickHandler = (e) => {
-      const weekCell = e.target.closest('.week-cell');
+      const weekCell = e.target.closest(".week-cell");
       if (weekCell) {
         const weekNumber = parseInt(weekCell.dataset.week);
         if (!isNaN(weekNumber)) {
@@ -921,95 +1036,101 @@
       }
     };
 
-    document.getElementById('week-display').addEventListener('click', weekClickHandler);
-    
+    document
+      .getElementById("week-display")
+      .addEventListener("click", weekClickHandler);
+
     setupWeekModal();
   }
-  
+
   function loadWeekData(weekNumber) {
     // Hét adatainak betöltése
     const today = new Date();
     let currentYear = today.getFullYear();
-    
+
     // Ha szeptember előtt vagyunk, akkor az előző tanévet használjuk
     if (today.getMonth() < 8) {
       currentYear--;
     }
-    
+
     const startOfWeek = getDateOfWeek(currentYear, weekNumber, 1);
     const endOfWeek = getDateOfWeek(currentYear, weekNumber, 7);
-    const startDate = startOfWeek.toISOString().split('T')[0];
-    const endDate = endOfWeek.toISOString().split('T')[0];
-    
-    loadWeekDataFromAPI(startDate, endDate).then(apiData => {
-      const weekDates = generateWeekDates(startDate);
-      const lessons = convertAPIDataToLessons(apiData, weekDates);
-      
-      const timetableContainer = document.querySelector('.timetable-grid');
-      if (timetableContainer) {
-        timetableContainer.innerHTML = generateTimeGrid(lessons, weekDates);
-        setupLessonCardListeners();
-      }
-    }).catch(error => {
-      console.error('Hét adatainak betöltése sikertelen:', error);
-    });
+    const startDate = startOfWeek.toISOString().split("T")[0];
+    const endDate = endOfWeek.toISOString().split("T")[0];
+
+    loadWeekDataFromAPI(startDate, endDate)
+      .then((apiData) => {
+        const weekDates = generateWeekDates(startDate);
+        const lessons = convertAPIDataToLessons(apiData, weekDates);
+
+        const timetableContainer = document.querySelector(".timetable-grid");
+        if (timetableContainer) {
+          timetableContainer.innerHTML = generateTimeGrid(lessons, weekDates);
+          setupLessonCardListeners();
+        }
+      })
+      .catch((error) => {
+        console.error("Hét adatainak betöltése sikertelen:", error);
+      });
   }
-  
+
   function openWeekModal() {
-    const modal = document.getElementById('weekModal');
-    const modalGrid = document.getElementById('weekModalGrid');
-    
+    const modal = document.getElementById("weekModal");
+    const modalGrid = document.getElementById("weekModalGrid");
+
     if (!modal || !modalGrid) return;
-    
+
     const allWeeks = [];
     for (let week = 1; week <= 52; week++) {
       allWeeks.push(week);
     }
-    
-    modalGrid.innerHTML = allWeeks.map((weekNumber) => {
-      const isSelected = weekNumber === selectedWeekNumber;
-      const isCurrent = weekNumber === currentWeekNumber;
-      
-      return `
-        <div class="week-cell modal-week-cell ${isSelected ? 'selected' : ''} ${isCurrent ? 'current-week' : ''}" 
+
+    modalGrid.innerHTML = allWeeks
+      .map((weekNumber) => {
+        const isSelected = weekNumber === selectedWeekNumber;
+        const isCurrent = weekNumber === currentWeekNumber;
+
+        return `
+        <div class="week-cell modal-week-cell ${isSelected ? "selected" : ""} ${isCurrent ? "current-week" : ""}" 
              data-week="${weekNumber}"
-             title="${weekNumber}. hét${isCurrent ? ' (Jelenlegi hét)' : ''}">
+             title="${weekNumber}. hét${isCurrent ? " (Jelenlegi hét)" : ""}">
           <span class="week-number">${weekNumber}</span>
-          ${isCurrent ? '<span class="current-indicator">●</span>' : ''}
+          ${isCurrent ? '<span class="current-indicator">●</span>' : ""}
         </div>
       `;
-    }).join('');
-    
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden';
+      })
+      .join("");
+
+    modal.style.display = "flex";
+    document.body.style.overflow = "hidden";
   }
-  
+
   function closeWeekModal() {
-    const modal = document.getElementById('weekModal');
+    const modal = document.getElementById("weekModal");
     if (modal) {
-      modal.style.display = 'none';
-      document.body.style.overflow = '';
+      modal.style.display = "none";
+      document.body.style.overflow = "";
     }
   }
-  
+
   function setupWeekModal() {
-    const modal = document.getElementById('weekModal');
-    const closeBtn = document.querySelector('.close-modal');
-    
+    const modal = document.getElementById("weekModal");
+    const closeBtn = document.querySelector(".close-modal");
+
     if (closeBtn) {
-      closeBtn.addEventListener('click', closeWeekModal);
+      closeBtn.addEventListener("click", closeWeekModal);
     }
-    
+
     if (modal) {
-      modal.addEventListener('click', (e) => {
+      modal.addEventListener("click", (e) => {
         if (e.target === modal) {
           closeWeekModal();
         }
       });
     }
-    
+
     const modalWeekClickHandler = (e) => {
-      const weekCell = e.target.closest('.modal-week-cell');
+      const weekCell = e.target.closest(".modal-week-cell");
       if (weekCell) {
         const weekNumber = parseInt(weekCell.dataset.week);
         if (!isNaN(weekNumber)) {
@@ -1021,16 +1142,18 @@
       }
     };
 
-    document.getElementById('weekModalGrid').addEventListener('click', modalWeekClickHandler);
-    
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && modal && modal.style.display === 'flex') {
+    document
+      .getElementById("weekModalGrid")
+      .addEventListener("click", modalWeekClickHandler);
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && modal && modal.style.display === "flex") {
         closeWeekModal();
       }
     });
   }
 
-  if (window.location.href.includes('/Orarend/')) {
+  if (window.location.href.includes("/Orarend/")) {
     transformTimetablePage();
   }
-})();
\ No newline at end of file
+})();
diff --git a/tools/cookieManager.js b/tools/cookieManager.js
index a4a3832..edbe1e5 100644
--- a/tools/cookieManager.js
+++ b/tools/cookieManager.js
@@ -1,25 +1,25 @@
 const cookieManager = {
-    get(name) {
-        const cookieName = `${name}=`;
-        const decodedCookie = decodeURIComponent(document.cookie);
-        const cookieArray = decodedCookie.split(';');
+  get(name) {
+    const cookieName = `${name}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const cookieArray = decodedCookie.split(";");
 
-        for(let i = 0; i < cookieArray.length; i++) {
-            let cookie = cookieArray[i];
-            while (cookie.charAt(0) === ' ') {
-                cookie = cookie.substring(1);
-            }
-            if (cookie.indexOf(cookieName) === 0) {
-                return cookie.substring(cookieName.length, cookie.length);
-            }
-        }
-        return null;
-    },
-
-    set(name, value, days = 365) {
-        const date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        const expires = `expires=${date.toUTCString()}`;
-        document.cookie = `${name}=${value}; ${expires}; path=/; domain=.e-kreta.hu`;
+    for (let i = 0; i < cookieArray.length; i++) {
+      let cookie = cookieArray[i];
+      while (cookie.charAt(0) === " ") {
+        cookie = cookie.substring(1);
+      }
+      if (cookie.indexOf(cookieName) === 0) {
+        return cookie.substring(cookieName.length, cookie.length);
+      }
     }
-}
\ No newline at end of file
+    return null;
+  },
+
+  set(name, value, days = 365) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value}; ${expires}; path=/; domain=.e-kreta.hu`;
+  },
+};
diff --git a/tools/createTemplate.js b/tools/createTemplate.js
index 0e917d4..8e34b20 100644
--- a/tools/createTemplate.js
+++ b/tools/createTemplate.js
@@ -1,26 +1,26 @@
 const createTemplate = {
-    header() {
-        const data = {
-            schoolInfo: {
-              name: cookieManager.get('schoolName') || 'Iskola',
-              id: cookieManager.get('schoolCode') || ''
-            },
-            userData: {
-              name: cookieManager.get('userName') || 'Felhasználó',
-              time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00',
-              email: cookieManager.get('userEmail') || ''
-            }
-        };
+  header() {
+    const data = {
+      schoolInfo: {
+        name: cookieManager.get("schoolName") || "Iskola",
+        id: cookieManager.get("schoolCode") || "",
+      },
+      userData: {
+        name: cookieManager.get("userName") || "Felhasználó",
+        time:
+          document.querySelector(".usermenu_timer")?.textContent?.trim() ||
+          "45:00",
+        email: cookieManager.get("userEmail") || "",
+      },
+    };
 
-        const schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
-        const shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
+    const schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
+    const shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
 
-        
-
-        const element =  `<header class="kreta-header">
+    const element = `<header class="kreta-header">
             <div class="school-info">
                 <p class="logo-text">
-                    <img src="${chrome.runtime.getURL('images/firka_logo.png')}" alt="Firka" class="logo">
+                    <img src="${chrome.runtime.getURL("images/firka_logo.png")}" alt="Firka" class="logo">
                     Firka
                 </p>
                 <div class="school-details" title="${schoolNameFull}">
@@ -28,7 +28,7 @@ const createTemplate = {
                 </div>
             </div>
             
-            <button class="nav-toggle" aria-label="${LanguageManager.t('navigation.nav_toggle')}">
+            <button class="nav-toggle" aria-label="${LanguageManager.t("navigation.nav_toggle")}">
                 <svg viewBox="0 0 24 24">
                     <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
                 </svg>
@@ -36,25 +36,25 @@ const createTemplate = {
             
             <nav class="kreta-nav">
             <div class="nav-links">
-                <a href="/Intezmeny/Faliujsag" data-page="dashboard" class="nav-item ${( location.pathname == '/Intezmeny/Faliujsag' ? 'active' : '')}">
-                <img src="${chrome.runtime.getURL('icons/dashboard-' + ( location.pathname == '/Intezmeny/Faliujsag' ? 'active' : 'inactive') + '.svg')}" alt="${LanguageManager.t('navigation.dashboard')}">
-                ${LanguageManager.t('navigation.dashboard')}
+                <a href="/Intezmeny/Faliujsag" data-page="dashboard" class="nav-item ${location.pathname == "/Intezmeny/Faliujsag" ? "active" : ""}">
+                <img src="${chrome.runtime.getURL("icons/dashboard-" + (location.pathname == "/Intezmeny/Faliujsag" ? "active" : "inactive") + ".svg")}" alt="${LanguageManager.t("navigation.dashboard")}">
+                ${LanguageManager.t("navigation.dashboard")}
                 </a>
-                <a href="/TanuloErtekeles/Osztalyzatok" data-page="grades" class="nav-item ${( location.pathname == '/TanuloErtekeles/Osztalyzatok' ? 'active' : '')}">
-                <img src="${chrome.runtime.getURL('icons/grades-' + ( location.pathname == '/TanuloErtekeles/Osztalyzatok' ? 'active' : 'inactive') + '.svg')}" alt="${LanguageManager.t('navigation.grades')}">
-                ${LanguageManager.t('navigation.grades')}
+                <a href="/TanuloErtekeles/Osztalyzatok" data-page="grades" class="nav-item ${location.pathname == "/TanuloErtekeles/Osztalyzatok" ? "active" : ""}">
+                <img src="${chrome.runtime.getURL("icons/grades-" + (location.pathname == "/TanuloErtekeles/Osztalyzatok" ? "active" : "inactive") + ".svg")}" alt="${LanguageManager.t("navigation.grades")}">
+                ${LanguageManager.t("navigation.grades")}
                 </a>
-                <a href="/Orarend/InformaciokOrarend" data-page="timetable" class="nav-item ${( location.pathname == '/Orarend/InformaciokOrarend' ? 'active' : '')}">
-                <img src="${chrome.runtime.getURL('icons/timetable-' + ( location.pathname == '/Orarend/InformaciokOrarend' ? 'active' : 'inactive') + '.svg')}" alt="${LanguageManager.t('navigation.timetable')}">
-                ${LanguageManager.t('navigation.timetable')}
+                <a href="/Orarend/InformaciokOrarend" data-page="timetable" class="nav-item ${location.pathname == "/Orarend/InformaciokOrarend" ? "active" : ""}">
+                <img src="${chrome.runtime.getURL("icons/timetable-" + (location.pathname == "/Orarend/InformaciokOrarend" ? "active" : "inactive") + ".svg")}" alt="${LanguageManager.t("navigation.timetable")}">
+                ${LanguageManager.t("navigation.timetable")}
                 </a>
-                <a href="/Hianyzas/Hianyzasok" data-page="absences" class="nav-item ${( location.pathname == '/Hianyzas/Hianyzasok' ? 'active' : '')}">
-                <img src="${chrome.runtime.getURL('icons/absences-' + ( location.pathname == '/Hianyzas/Hianyzasok' ? 'active' : 'inactive') + '.svg')}" alt="${LanguageManager.t('navigation.absences')}">
-                ${LanguageManager.t('navigation.absences')}
+                <a href="/Hianyzas/Hianyzasok" data-page="absences" class="nav-item ${location.pathname == "/Hianyzas/Hianyzasok" ? "active" : ""}">
+                <img src="${chrome.runtime.getURL("icons/absences-" + (location.pathname == "/Hianyzas/Hianyzasok" ? "active" : "inactive") + ".svg")}" alt="${LanguageManager.t("navigation.absences")}">
+                ${LanguageManager.t("navigation.absences")}
                 </a>
-                <a href="/Tanulo/TanuloHaziFeladat" data-page="other" class="nav-item ${( location.pathname == '/Tanulo/TanuloHaziFeladat' ? 'active' : '')}">
-                <img src="${chrome.runtime.getURL('icons/others.svg')}" alt="${LanguageManager.t('navigation.other')}">
-                ${LanguageManager.t('navigation.other')}
+                <a href="/Tanulo/TanuloHaziFeladat" data-page="other" class="nav-item ${location.pathname == "/Tanulo/TanuloHaziFeladat" ? "active" : ""}">
+                <img src="${chrome.runtime.getURL("icons/others.svg")}" alt="${LanguageManager.t("navigation.other")}">
+                ${LanguageManager.t("navigation.other")}
                 </a>
             </div>
             </nav>
@@ -68,73 +68,55 @@ const createTemplate = {
             </button>
             <div class="user-dropdown">
                 <a href="https://bmszc-puskas.e-kreta.hu/Home/Uzenetek" data-page="messages" class="dropdown-item">
-                <img src="${chrome.runtime.getURL('icons/messages.svg')}" alt="${LanguageManager.t('navigation.messages')}">
-                ${LanguageManager.t('navigation.messages')}
+                <img src="${chrome.runtime.getURL("icons/messages.svg")}" alt="${LanguageManager.t("navigation.messages")}">
+                ${LanguageManager.t("navigation.messages")}
                 </a>
                 <a href="/Adminisztracio/Profil" data-page="profile" class="dropdown-item">
-                <img src="${chrome.runtime.getURL('icons/profile.svg')}" alt="${LanguageManager.t('navigation.profile')}">
-                ${LanguageManager.t('navigation.profile')}
+                <img src="${chrome.runtime.getURL("icons/profile.svg")}" alt="${LanguageManager.t("navigation.profile")}">
+                ${LanguageManager.t("navigation.profile")}
                 </a>
                 <a href="#" class="dropdown-item" id="settingsBtn">
-                <img src="${chrome.runtime.getURL('icons/settings.svg')}" alt="${LanguageManager.t('navigation.settings')}">
-                ${LanguageManager.t('navigation.settings')}
+                <img src="${chrome.runtime.getURL("icons/settings.svg")}" alt="${LanguageManager.t("navigation.settings")}">
+                ${LanguageManager.t("navigation.settings")}
                 </a>
                 <a href="/Home/Logout" data-page="logout" class="dropdown-item">
-                <img src="${chrome.runtime.getURL('icons/logout.svg')}" alt="${LanguageManager.t('navigation.logout')}">
-                ${LanguageManager.t('navigation.logout')}
+                <img src="${chrome.runtime.getURL("icons/logout.svg")}" alt="${LanguageManager.t("navigation.logout")}">
+                ${LanguageManager.t("navigation.logout")}
                 </a>
             </div>
             </div>
-        </header>`
+        </header>`;
 
-        const startTime = parseInt(data.userData.time?.match(/\d+/)?.[0] || "45");
-        let timeLeft = startTime * 60;
-        
-        const updateTimer = () => {
-            const minutes = Math.floor(timeLeft / 60);
-            const seconds = timeLeft % 60;
-            const timerEl = document.getElementById('logoutTimer');
-            if (timerEl) {
-                timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-            }
-            
-            if (timeLeft <= 0) {
-                window.location.href = '/Home/Logout';
-            } else {
-                timeLeft--;
-            }
-        };
+    const startTime = parseInt(data.userData.time?.match(/\d+/)?.[0] || "45");
+    let timeLeft = startTime * 60;
 
-        setInterval(updateTimer, 1000);
+    const updateTimer = () => {
+      const minutes = Math.floor(timeLeft / 60);
+      const seconds = timeLeft % 60;
+      const timerEl = document.getElementById("logoutTimer");
+      if (timerEl) {
+        timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+      }
 
-        return element;
-    },
+      if (timeLeft <= 0) {
+        window.location.href = "/Home/Logout";
+      } else {
+        timeLeft--;
+      }
+    };
 
-    importFonts() {
-        const links = [
-            { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-            { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
-            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap' },
-            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap' },
-            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons+Round' }
-        ];
-        
-        links.forEach(link => {
-            const linkElement = document.createElement('link');
-            Object.entries(link).forEach(([key, value]) => {
-            linkElement[key] = value;
-            });
-            document.head.appendChild(linkElement);
-        });
-    }
-}
+    setInterval(updateTimer, 1000);
+
+    return element;
+  },
+};
 
 document.addEventListener("DOMContentLoaded", async () => {
-    await helper.waitForElement('#settingsBtn');
-    document.querySelector('#settingsBtn').addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const url = chrome.runtime.getURL('settings/index.html');
-        window.open(url, '_blank', 'width=400,height=600');
-    });
-});
\ No newline at end of file
+  await helper.waitForElement("#settingsBtn");
+  document.querySelector("#settingsBtn").addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const url = chrome.runtime.getURL("settings/index.html");
+    window.open(url, "_blank", "width=400,height=600");
+  });
+});
diff --git a/tools/helper.js b/tools/helper.js
index bb738ec..2b33dd9 100644
--- a/tools/helper.js
+++ b/tools/helper.js
@@ -1,40 +1,40 @@
 const helper = {
-    shortenSchoolName(name, maxLength = 50) {
-        if (!name) return '';
-        if (name.length <= maxLength) return name;
-        
-        const parts = name.split(' - ');
-        if (parts.length === 2) {
-            const [code, fullName] = parts;
-            if (fullName.length > maxLength - code.length - 3) {
-                return `${code} - ${fullName.substring(0, maxLength - code.length - 6)}...`;
-            }
-        }
-        return name.substring(0, maxLength - 3) + '...';
-    },
-    
-    async waitForElement(selector) {
-        return new Promise(resolve => {
-            if (document.querySelector(selector)) {
-                return resolve(document.querySelector(selector));
-            }
+  shortenSchoolName(name, maxLength = 50) {
+    if (!name) return "";
+    if (name.length <= maxLength) return name;
 
-            const observer = new MutationObserver(mutations => {
-                if (document.querySelector(selector)) {
-                    observer.disconnect();
-                    resolve(document.querySelector(selector));
-                }
-            });
-
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true
-            });
-        });
-    },
-
-    convertTimeToMinutes(timeStr) {
-        const [hours, minutes] = timeStr.split(':').map(Number);
-        return hours * 60 + minutes;
+    const parts = name.split(" - ");
+    if (parts.length === 2) {
+      const [code, fullName] = parts;
+      if (fullName.length > maxLength - code.length - 3) {
+        return `${code} - ${fullName.substring(0, maxLength - code.length - 6)}...`;
+      }
     }
-}
\ No newline at end of file
+    return name.substring(0, maxLength - 3) + "...";
+  },
+
+  async waitForElement(selector) {
+    return new Promise((resolve) => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+
+      const observer = new MutationObserver((mutations) => {
+        if (document.querySelector(selector)) {
+          observer.disconnect();
+          resolve(document.querySelector(selector));
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  },
+
+  convertTimeToMinutes(timeStr) {
+    const [hours, minutes] = timeStr.split(":").map(Number);
+    return hours * 60 + minutes;
+  },
+};
\ No newline at end of file
diff --git a/tools/loadingScreen.css b/tools/loadingScreen.css
index 5a2703b..da8657f 100644
--- a/tools/loadingScreen.css
+++ b/tools/loadingScreen.css
@@ -1,59 +1,53 @@
 .modalBckgroundMain {
-    display: none !important;
+  display:none !important;
 }
-
 body:not(.loaded) {
-    opacity: 0 !important;
-    visibility: hidden !important;
-    height: 100vh !important;
-    overflow: hidden !important;
+  opacity:0 !important;
+  visibility:hidden !important;
+  height:100vh !important;
+  overflow:hidden !important;
 }
-  
 .loading-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--background);
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s ease;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100vw;
+  height:100vh;
+  background-color:var(--background);
+  z-index:9999;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  transition:opacity 0.3s ease;
 }
-
 .loading-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:1rem;
 }
-
 .loading-logo {
-    width: 48px;
-    height: 48px;
-    border-radius: 16px;
+  width:48px;
+  height:48px;
+  border-radius:16px;
 }
-
 .loading-text {
-    color: var(--text-primary);
-    text-align: center;
-    font-family: Montserrat;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
+  color:var(--text-primary);
+  text-align:center;
+  font-family:Montserrat;
+  font-size:20px;
+  font-style:normal;
+  font-weight:700;
+  line-height:normal;
 }
-
 .loading-text2 {
-    align-self: stretch;
-    color: var(--text-secondary);
-    text-align: center;
-    font-family: Figtree;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 130%;
+  align-self:stretch;
+  color:var(--text-secondary);
+  text-align:center;
+  font-family:Figtree;
+  font-size:16px;
+  font-style:normal;
+  font-weight:500;
+  line-height:130%;
 }
diff --git a/tools/loadingScreen.js b/tools/loadingScreen.js
index 9542f65..9d95d8f 100644
--- a/tools/loadingScreen.js
+++ b/tools/loadingScreen.js
@@ -1,53 +1,55 @@
 const loadingScreen = {
-    show() {
-        document.body.classList.remove('loaded');
-        const existingLoadingScreen = document.querySelector('.loading-screen');
-        if (existingLoadingScreen) return;
+  show() {
+    document.body.classList.remove("loaded");
+    const existingLoadingScreen = document.querySelector(".loading-screen");
+    if (existingLoadingScreen) return;
 
-        const loadingScreen = document.createElement('div');
-        loadingScreen.className = 'loading-screen';
-        loadingScreen.innerHTML = `
+    const loadingScreen = document.createElement("div");
+    loadingScreen.className = "loading-screen";
+    loadingScreen.innerHTML = `
     <div class="loading-content">
-        <img src="${chrome.runtime.getURL('images/loading.gif')}" alt="Firka" class="loading-logo">
+        <img src="${chrome.runtime.getURL("images/loading.gif")}" alt="Firka" class="loading-logo">
         <div class="loading-text" data-i18n="loading.text">Betöltés alatt...</div>
         <div class="loading-text2" data-i18n="loading.subtext">Kis türelmet!</div>
     </div>
     `;
-        document.body.appendChild(loadingScreen);
-        document.body.classList.add('loaded');
-    },
+    document.body.appendChild(loadingScreen);
+    document.body.classList.add("loaded");
+  },
 
-    hide() {
-        document.body.classList.add('loaded');
-        const loadingScreen = document.querySelector('.loading-screen');
-        if (loadingScreen) {
-            loadingScreen.style.opacity = '0';
+  hide() {
+    document.body.classList.add("loaded");
+    const loadingScreen = document.querySelector(".loading-screen");
+    if (loadingScreen) {
+      loadingScreen.style.opacity = "0";
 
-            const removeLoadingScreen = () => {
-                if (loadingScreen && loadingScreen.parentNode) {
-                    loadingScreen.remove();
-                }
-            };
-            
-            loadingScreen.addEventListener('transitionend', removeLoadingScreen, { once: true });
-            setTimeout(removeLoadingScreen, 500);
+      const removeLoadingScreen = () => {
+        if (loadingScreen && loadingScreen.parentNode) {
+          loadingScreen.remove();
         }
-    }
-}
+      };
 
-window.addEventListener('DOMContentLoaded', () => {
-    const manifest = chrome.runtime.getManifest();
-    const urls = [];
-
-    if (manifest.content_scripts) {
-        manifest.content_scripts.forEach(script => {
-            if (script.matches) {
-                urls.push(...script.matches);
-            }
-        });
+      loadingScreen.addEventListener("transitionend", removeLoadingScreen, {
+        once: true,
+      });
+      setTimeout(removeLoadingScreen, 500);
     }
+  },
+};
 
-    if (urls.some(url => url.includes(location.pathname))) {
-        loadingScreen.show();
-    }
-});
\ No newline at end of file
+window.addEventListener("DOMContentLoaded", () => {
+  const manifest = chrome.runtime.getManifest();
+  const urls = [];
+
+  if (manifest.content_scripts) {
+    manifest.content_scripts.forEach((script) => {
+      if (script.matches) {
+        urls.push(...script.matches);
+      }
+    });
+  }
+
+  if (urls.some((url) => url.includes(location.pathname))) {
+    loadingScreen.show();
+  }
+});