diff --git a/build_pages.py b/build_pages.py
index edda7fd..fe493a1 100644
--- a/build_pages.py
+++ b/build_pages.py
@@ -5,6 +5,7 @@ PAGES = [
     {'name': 'account', 'titleSR': 'Nalog', 'titleEN': 'Account', 'style': 'account'},
     {'name': 'contact', 'titleSR': 'Kontakt', 'titleEN': 'Contact', 'style': 'contact'},
     {'name': 'events', 'titleSR': 'Događaji', 'titleEN': 'Events', 'style': 'events'},
+    {'name': 'events_archive', 'titleSR': 'Arhiva događaja', 'titleEN': 'Events archive', 'style': 'events'},
     {'name': 'services', 'titleSR': 'Servisi', 'titleEN': 'Services', 'style': 'services'},
     {'name': 'webring', 'titleSR': 'Webring', 'titleEN': 'Webring', 'style': ''},
 ]
diff --git a/pages/en/events_archive.html b/pages/en/events_archive.html
index 4dec909..53829c3 100644
--- a/pages/en/events_archive.html
+++ b/pages/en/events_archive.html
@@ -1,2 +1,2 @@
 <h1>Events archive</h1>
-<p>All events that we organized so far.</p>
\ No newline at end of file
+<p>All events that we organized so far.</p><br>
\ No newline at end of file
diff --git a/pages/sr/events_archive.html b/pages/sr/events_archive.html
index c489d75..600bd8b 100644
--- a/pages/sr/events_archive.html
+++ b/pages/sr/events_archive.html
@@ -1,2 +1,2 @@
 <h1>Arhiva događaja</h1>
-<p>Svi događaji koje smo do sada organzivali.</p>
\ No newline at end of file
+<p>Svi događaji koje smo do sada organzivali.</p><br>
\ No newline at end of file
diff --git a/prep.py b/prep.py
index 0d12672..c3fb0d8 100644
--- a/prep.py
+++ b/prep.py
@@ -1,92 +1,88 @@
 #! /usr/bin/env python
 
+import csv
 from datetime import datetime
-from functools import cmp_to_key
 
-DAYS_SR = ["Ponedeljak", "Utorak", "Sreda", "Četvrtak", "Petak", "Subota", "Nedelja"]
-DAYS_EN = ["Monday ", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
-MONTHS_SR = [
-    "Januar", "Februar", "Mart", "April", "Maj", "Jun",
-    "Jul", "Avgust", "Septembar", "Oktobar", "Novembar", "Decembar",
-    ]
-MONTHS_EN = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December",
-    ]
+DAYS_SR = ["PON", "UTO", "SRE", "ČET", "PET", "SUB", "NED"]
+DAYS_EN = ["MON ", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]
+
+def load_events(csv_path:str) -> list[dict]:
+    events = []
+    with open(csv_path) as csv_file:
+        csv_reader = csv.reader(csv_file)
+        next(csv_reader, None)
+        for event in csv_reader:
+            event_date = event[0]
+            event_date_parsed = datetime.strptime(event_date, "%d-%m-%Y").date()
+            event_time = event[1]
+            event_location = event[2]
+            event_title = event[3]
+            current_event = {"date":event_date_parsed,
+                             "time":event_time,
+                             "location": event_location,
+                             "title":event_title.strip()}
+            events.append(current_event)
+        return events
+
+def build_html(events: list[dict], dayNames: list[str]) -> str:
+    events_html = []
+    for event in events:
+        title = event["title"]
+        location = event["location"]
+        date = event["date"]
+        date = dayNames[date.weekday()]+", "+str(date.day)+". "+str(date.month)+". "+str(date.year)+", "
+        time = event["time"]+"h"
+        event_html = []
+        event_html.append(f"<div class='date'>{date} {time}</div>")
+        event_html.append(f"<div class='title'>{title}</div>")
+        if "https://" in location:
+            place,link = location.split("https://")
+            event_html.append(f"<div class='place'><a href=\"https://{link}\">@{place.strip()}</a></div>")
+        else:
+            event_html.append(f"<div class='place'>@{location.strip()}</div>")
+
+        event_html = "".join(event_html)
+        events_html.append(f"\n<div class='event'>{event_html}</div>")
+    return events_html
+
+events = sorted(load_events("dogadjaji.csv"), key=lambda e: e["date"])
 
 today = datetime.today().date()
 
-def parse_date(date):
-    return datetime.strptime(date,"%d-%m-%Y").date()
-
-def compare_events(one, two):
-    one = parse_date(one.split(", ")[0])
-    two = parse_date(two.split(", ")[0])
-    if one>two:
-        return 1
-    elif one==two:
-        return 0
-    else:
-        return -1
-
-def is_past_event(event):
-    return event < today
-
-def load_events():
-    events = []
-    with open("dogadjaji.csv", "rt") as file:
-        file.readline()
-        for event in file.readlines():
-            event = event.strip()
-            if event != "":
-                events.append(event)
-    return events
-
-def write_events(events):
-    with open("dogadjaji.csv", "wt") as file:
-        file.write("datum, vreme, lokacija, tema\n")
-        for event in events:
-            file.write(event+"\n")
-
-def sort_events(events):
-    return sorted(events, key = cmp_to_key(compare_events))
+past_events = list(filter(lambda e: e["date"] <= today, events))
+new_events  = list(filter(lambda e: e["date"] >= today, events))
 
 
-def build_html(events, dayNames, monthNames):
-    newevents = []
-    for event in events:
-        date, time, location, title = event.split(", ")
-        date = parse_date(date)
-        if is_past_event(date):
-            continue
-        date = dayNames[date.weekday()]+", "+str(date.day)+". "+monthNames[date.month-1]+" "+str(date.year)+"."
-        time = time+"h"
-        future_event = []
-        future_event.append("<td> "+date+" </td>")
-        future_event.append("<td> "+time+" </td>")
-        if "https://" in location:
-            place,link = location.split("https://")
-            future_event.append("<td> <a href=\"https://"+link+"\""+"> "+place.strip()+" </a> </td>")
-        else:
-            future_event.append("<td> "+location.strip()+" </td>")
-        future_event.append("<td> "+title+" </td>")
-        newevents.append("<tr>\n"+"\n".join(future_event)+"\n</tr>")
-    return newevents
+page_template = ""
 
-events = load_events()
-events = sort_events(events)
-write_events(events)
+# Build Serbian Events page
+new_events_html = build_html(new_events, DAYS_SR)
+with open("pages/sr/events.html", "r") as file:
+    page_template = ([line for line in file])[:2]
 
-newevents = build_html(events, DAYS_SR, MONTHS_SR)
+with open("pages/sr/events.html", "w") as file:
+    file.writelines(page_template + new_events_html)
 
-with open("pages/sr/events.html","wt") as file:
-    file.writelines(["<h1>Događaji</h1>\n", "<table>\n", "<tr><th>Datum</th><th>Vreme</th><th>Mesto</th><th>Tema</th></tr>\n"])
-    file.writelines(newevents)
-    file.writelines(["</table>"])
+# Build English Events page
+new_events_html = build_html(new_events, DAYS_EN)
+with open("pages/en/events.html", "r") as file:
+    page_template = ([line for line in file])[:2]
 
-newevents = build_html(events, DAYS_EN, MONTHS_EN)
+with open("pages/en/events.html", "w") as file:
+    file.writelines(page_template + new_events_html)
 
-with open("pages/en/events.html","wt") as file:
-    file.writelines(["<h1>Events</h1>\n", "<table>\n", "<tr><th>Date</th><th>Time</th><th>Place</th><th>Topic</th></tr>"])
-    file.writelines(newevents)
-    file.writelines(["</table>"])
+# Build Serbian Archive page
+past_events_html = build_html(past_events, DAYS_SR)
+with open("pages/sr/events_archive.html", "r") as file:
+    page_template = ([line for line in file])[:2]
+
+with open("pages/sr/events_archive.html", "w") as file:
+    file.writelines(page_template + past_events_html)
+
+# Build English Archive page
+past_events_html = build_html(past_events, DAYS_EN)
+with open("pages/en/events_archive.html", "r") as file:
+    page_template = ([line for line in file])[:2]
+
+with open("pages/en/events_archive.html", "w") as file:
+    file.writelines(page_template + past_events_html)
diff --git a/site/styles/events.css b/site/styles/events.css
index 8cd147a..e7fc4ba 100644
--- a/site/styles/events.css
+++ b/site/styles/events.css
@@ -1,30 +1,63 @@
-table {
-  table-layout: fixed;
-  border-spacing: 0;
-}
-
-th,
-td {
-  padding: 0 1rem 0 1rem;
-  text-align: left;
-  border-left: 2px solid var(--border);
-}
-
-th {
-  padding: 1rem 1rem 0 1rem;
-  border-bottom: 2px solid var(--border);
-}
-
-td:nth-child(odd) {
-  white-space: nowrap;
-}
-
-td {
-  padding: 0 1rem 1rem 1rem;
-  vertical-align: top;
-}
-
 h1 {
   margin-bottom: 2rem;
   font-weight: normal;
-}
\ No newline at end of file
+}
+
+.event {
+  display: flex;
+  flex-direction: row;
+}
+
+.event:hover {
+  border-bottom: 5px var(--hightlight) solid;
+}
+
+.event:hover>div {
+  padding-bottom: calc(0.5rem - 5px);
+}
+
+.event>div {
+  padding: 0.5rem;
+  white-space: nowrap;
+}
+
+.date {
+  width: 250px;
+  font-size: 0.9em;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.title {
+  border-left: 2px solid var(--border);
+  font-weight: bold;
+}
+
+.place {
+  font-size: 0.9em;
+}
+
+@media screen and (max-width: 1160px) {
+  .event {
+    flex-direction: column;
+    margin-bottom: 1rem;
+    border-left: 2px solid var(--border);
+  }
+
+  .event > div {
+    padding: 0 0.5rem;
+    white-space: normal;
+  }
+
+  .event:hover {
+    border-bottom: none;
+  }
+  
+  .event:hover> div {
+    padding-bottom: 0;
+  }
+
+  .title {
+    border-left: none;
+  }
+}