diff --git a/apka/app/__pycache__/main.cpython-310.pyc b/apka/app/__pycache__/main.cpython-310.pyc
index 9977f59..3d91f96 100644
Binary files a/apka/app/__pycache__/main.cpython-310.pyc and b/apka/app/__pycache__/main.cpython-310.pyc differ
diff --git a/apka/app/backend/__pycache__/__init__.cpython-310.pyc b/apka/app/backend/__pycache__/__init__.cpython-310.pyc
index 647e1dd..38d43ad 100644
Binary files a/apka/app/backend/__pycache__/__init__.cpython-310.pyc and b/apka/app/backend/__pycache__/__init__.cpython-310.pyc differ
diff --git a/apka/app/backend/__pycache__/calendar_integration.cpython-310.pyc b/apka/app/backend/__pycache__/calendar_integration.cpython-310.pyc
index 9c4eff6..1090316 100644
Binary files a/apka/app/backend/__pycache__/calendar_integration.cpython-310.pyc and b/apka/app/backend/__pycache__/calendar_integration.cpython-310.pyc differ
diff --git a/apka/app/backend/__pycache__/note.cpython-310.pyc b/apka/app/backend/__pycache__/note.cpython-310.pyc
index d287085..8c510fd 100644
Binary files a/apka/app/backend/__pycache__/note.cpython-310.pyc and b/apka/app/backend/__pycache__/note.cpython-310.pyc differ
diff --git a/apka/app/backend/__pycache__/recording.cpython-310.pyc b/apka/app/backend/__pycache__/recording.cpython-310.pyc
index 9550138..8e45056 100644
Binary files a/apka/app/backend/__pycache__/recording.cpython-310.pyc and b/apka/app/backend/__pycache__/recording.cpython-310.pyc differ
diff --git a/apka/app/backend/__pycache__/routes.cpython-310.pyc b/apka/app/backend/__pycache__/routes.cpython-310.pyc
index ab770c8..30279e1 100644
Binary files a/apka/app/backend/__pycache__/routes.cpython-310.pyc and b/apka/app/backend/__pycache__/routes.cpython-310.pyc differ
diff --git a/apka/app/backend/calendar_integration.py b/apka/app/backend/calendar_integration.py
index 018863a..52d4d7f 100644
--- a/apka/app/backend/calendar_integration.py
+++ b/apka/app/backend/calendar_integration.py
@@ -5,6 +5,7 @@
 from google_auth_oauthlib.flow import InstalledAppFlow
 from googleapiclient.discovery import build
 from googleapiclient.errors import HttpError
+from dateutil import parser
 
 SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"]
 
@@ -51,10 +52,20 @@ def get_calendar_events():
             print("No upcoming events found.")
             return
 
+        formatted_events = []
         for event in events:
             start = event["start"].get("dateTime", event["start"].get("date"))
-            print(start, event["summary"])
+            summary = event.get("summary", "Brak nazwy wydarzenia")
+            
+            # Konwertuj datę i godzinę na czytelny format
+            if "T" in start:  # Jeśli jest pełna data i godzina
+                start_time = parser.parse(start).strftime("%Y-%m-%d %H:%M")
+            else:  # Jeśli tylko data
+                start_time = start
 
-        return events
+            formatted_events.append({"start": start_time, "summary": summary})
+
+        return formatted_events
     except HttpError as error:
         print(f"An error occurred: {error}")
+        return []
\ No newline at end of file
diff --git a/apka/app/backend/routes.py b/apka/app/backend/routes.py
index fc2b016..81cfc15 100644
--- a/apka/app/backend/routes.py
+++ b/apka/app/backend/routes.py
@@ -13,12 +13,15 @@
 def index():
     return render_template("index.html")
 
+@main.route("/record")
+def record():
+    return render_template("record.html")
 
 @main.route('/events')
 def events():
     try:
         events = get_calendar_events()
-        return jsonify(events)
+        return render_template('events.html', events=events)
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 
@@ -38,7 +41,7 @@ def ms_calendar():
         return {"error": str(e)}, 400
 
 
-@main.route("/list_windows", methods=["GET"])
+@main.route("/record/list_windows", methods=["GET"])
 def list_windows():
     """Zwróć listę okien."""
     windows = gw.getAllTitles()
@@ -49,7 +52,7 @@ def list_windows():
 UPLOAD_FOLDER = os.path.join(os.getcwd(), 'recordings')
 ALLOWED_EXTENSIONS = {'webm', 'mp4', 'avi'}
 
-@main.route("/record_window", methods=["POST"])
+@main.route("/record/record_window", methods=["POST"])
 def record_window_route():
     setup_upload_folder()
     data = request.get_json()
@@ -64,7 +67,7 @@ def record_window_route():
     return jsonify({"message": f"Rozpoczęto nagrywanie okna: {window_title}"})
 
 
-@main.route("/stop_recording", methods=["POST"])
+@main.route("/record/stop_recording", methods=["POST"])
 def stop_recording_route():
     try:
         stop_recording()
@@ -75,6 +78,7 @@ def stop_recording_route():
 
 @main.route('/save', methods=['POST'])
 def save_recording_route():
+    setup_upload_folder()
     """Zapisz nagranie i przekonwertuj na MP4."""
     try:
         file = request.files['file']
diff --git a/apka/app/backend/token.json b/apka/app/backend/token.json
index 6ebcb34..f05b959 100644
--- a/apka/app/backend/token.json
+++ b/apka/app/backend/token.json
@@ -1 +1 @@
-{"token": "ya29.a0ARW5m75h88wxJ8YFSOCf6tpgYqPdJvAe2PP_QHdbgfRgxclBnTtS3kpluOImGqF_td_6d06JaFHPjmITYbLa30BczxCK2vxyb8ChRseog6gpCJD2yRXkasZhq3NrZgd-mYZBjxS3L1UnHUwduLJabHLNbZ_qoywHILYBQSO1aCgYKAZwSARASFQHGX2Mi9EQNr9y1ykhWQGgv4pPFIw0175", "refresh_token": "1//09kZ-OciEzm48CgYIARAAGAkSNwF-L9IrofyzMMtoOqTCpoDNr2T1Du2NptYDb_kvm1rnrbVy9Ixp7g3y76BzYT-vsPOAhGhIxB4", "token_uri": "https://oauth2.googleapis.com/token", "client_id": "907999041253-2eqttdeuvd1inb1oh6a81vptdk1sh9ao.apps.googleusercontent.com", "client_secret": "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", "scopes": ["https://www.googleapis.com/auth/calendar.readonly"], "expiry": "2024-12-25T22:06:16.447179Z"}
\ No newline at end of file
+{"token": "ya29.a0ARW5m764vEOEkfIn1gw-Tj-CYwdM3YlQ76UyQvP0AGAI4q4kPRETts4qYOWQk4byIh6Jm2s3dhEEHazFk0KyMqw34XX8buhE41AZQTySYSIn_Iw9WyLudCYv-t3-LJ3zbT5oHRd_xaSC7kGfNr3fgo27OaA_9bOnQVmrtxkJaCgYKAVgSARASFQHGX2MiNmwVn6SrV9cyTjYLOO6iFA0175", "refresh_token": "1//09XXH8kYJJSi8CgYIARAAGAkSNwF-L9Ir9s5XxNraWHNpxg8FNrXfIvjsvgW1vgMs7lBb726Tar22_NKHa-lWs9fXGM7lf0o0nnM", "token_uri": "https://oauth2.googleapis.com/token", "client_id": "907999041253-2eqttdeuvd1inb1oh6a81vptdk1sh9ao.apps.googleusercontent.com", "client_secret": "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", "scopes": ["https://www.googleapis.com/auth/calendar.readonly"], "universe_domain": "googleapis.com", "account": "", "expiry": "2025-01-12T17:36:16.892920Z"}
\ No newline at end of file
diff --git a/apka/app/frontend/static/record.js b/apka/app/frontend/static/record.js
index 3cfc343..094959d 100644
--- a/apka/app/frontend/static/record.js
+++ b/apka/app/frontend/static/record.js
@@ -6,7 +6,7 @@ function showNotification(message, type = "info") {
 
     setTimeout(() => {
         notification.remove();
-    }, 5000);
+    }, 1000);
 }
 
 const recordBtn = document.getElementById("record-btn");
@@ -17,12 +17,7 @@ const titleInput = document.getElementById("recording-title");
 const see_events = document.getElementById("events-btn");
 const timerDisplay = document.getElementById("timer");
 const see_recordings = document.getElementById("recordings-btn");
-
-
 const windowSelection = document.getElementById("window-selection");
-const selectedWindow = document.getElementById("selected-window");
-const selectedWindowName = document.getElementById("selected-window-name");
-const changeWindowBtn = document.getElementById("change-window-btn");
 
 let mediaRecorder;
 let recordedChunks = [];
@@ -30,40 +25,21 @@ let stream; // Przechowujemy odniesienie do strumienia
 let recordingStartTime;
 let timerInterval;
 
-see_events.addEventListener("click", () => {
-    window.location.href = "/events"; // Przenosi użytkownika na podstronę /events
-});
-
-see_recordings.addEventListener("click", () => {
-    window.location.href = "/my_recordings"; // Przenosi użytkownika na podstronę /recordings
-});
-
 
 // Funkcja do pobrania okna
 async function selectWindow() {
     try {
-        const stream = await navigator.mediaDevices.getDisplayMedia({
+        stream = await navigator.mediaDevices.getDisplayMedia({
             video: true,
             audio: true
-        });
-        handleStream(stream);
-        document.getElementById("window-selection").querySelector("h2").style.display = "none";
-        windowSelection.style.display = "block";
-        recordBtn.style.display = "none";
-        selectedWindow.style.display = "block"; // Pokażemy wybrane okno
-        changeWindowBtn.style.display = "inline-block"; // Pokażemy przycisk do zmiany okna
+        })
+        handleStream(stream);   
     } catch (error) {
         console.error("Błąd podczas wybierania okna:", error);
         showNotification("Błąd podczas wybierania okna", "error");
     }
 }
 
-// Funkcja zmieniająca okno do nagrywania
-changeWindowBtn.onclick = () => {
-    selectedWindow.style.display = "none"; // Ukrywamy obecne okno
-    selectWindow(); // Ponownie wybieramy okno
-}
-
 // Obsługa strumienia
 function handleStream(stream) {
     mediaRecorder = new MediaRecorder(stream);
@@ -147,6 +123,7 @@ async function saveRecording(blob) {
             showNotification("Nagranie zapisane!", "success");
             if (stream) {
                 stream.getTracks().forEach(track => track.stop());
+                stream = null; // Wyczyszczenie strumienia
                 console.log("Strumień zatrzymany.");
                 showNotification("Strumień zatrzymany", "success");
 
@@ -161,15 +138,17 @@ async function saveRecording(blob) {
     }
     if (stream) {
                 stream.getTracks().forEach(track => track.stop());
+                stream = null; // Wyczyszczenie strumienia
                 console.log("Strumień zatrzymany.");
                 showNotification("Strumień zatrzymany.", "success");
             }
-
-timerDisplay.style.display = "none"; // Ukrycie zegara
-document.getElementById("window-selection").style.display = "none"; // Ukrycie sekcji wyboru okna
-recordBtn.style.display = "block"; // Pokazanie przycisku do wyboru okna
-titleInput.value = ""; // Czyszczenie tytułu nagrania
-saveButton.disabled = true; // Wyłączenie przycisku zapisz
+    
+    clearInterval(timerInterval);
+    timerDisplay.textContent = "00:00"; // Zresetowanie zegara
+    timerDisplay.style.display = "none"; // Ukrycie zegara
+    recordBtn.style.display = "block"; // Pokazanie przycisku do wyboru okna
+    titleInput.value = ""; // Czyszczenie tytułu nagrania
+    saveButton.disabled = true; // Wyłączenie przycisku zapisz
 }
 
 // Inicjalizacja funkcji
diff --git a/apka/app/frontend/static/styles.css b/apka/app/frontend/static/styles.css
index 525ca3a..60c0bd9 100644
--- a/apka/app/frontend/static/styles.css
+++ b/apka/app/frontend/static/styles.css
@@ -61,23 +61,6 @@ button:disabled {
     background-color: gray;
 }
 
-#record-btn {
-    background-color: #800080; 
-    color: white;
-    font-size: 20px;
-    border-radius: 20px;
-    transition: transform 0.2s ease, background-color 0.2s ease;
-}
-
-#record-btn:hover {
-    background-color: #6a006a; 
-    transform: scale(1.2); 
-}
-
-#record-btn:active {
-    background-color: #4c034c; 
-}
-
 .start-button {
     background-color: #4CAF50;
     color: white;
@@ -85,7 +68,7 @@ button:disabled {
 
 .start-button:hover:not(:disabled) {
     background-color: #45a049;
-    transform: scale(1.05); 
+    transform: scale(1.2); 
 }
 
 .stop-button {
@@ -94,20 +77,11 @@ button:disabled {
 }
 
 .stop-button:hover:not(:disabled) {
-    transform: scale(1.05); 
+    transform: scale(1.2); 
 }
 
-#events-btn  {
-    background-color: rgb(226, 178, 212);
-    margin-bottom: 10px;
-    color: black;
-    padding: 10px 20px;
-    font-size: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.3s;
-}
-#recordings-btn {
-    background-color: rgb(226, 178, 212);
+#events-btn, #recordings-btn, #notes-btn, #record-btn{
+    background-color: rgb(226, 199, 218);
     margin-top: 10px;
     color: black;
     padding: 10px 20px;
@@ -115,42 +89,17 @@ button:disabled {
     cursor: pointer;
     transition: background-color 0.3s, transform 0.3s;
 }
-#notes-btn  {
-    background-color: rgb(226, 178, 212);
-    margin-bottom: 10px;
-    color: black;
-    padding: 10px 20px;
-    font-size: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.3s;
-}
 
-#events-btn:hover {
+#record-btn:hover, #events-btn:hover, #notes-btn:hover,#recordings-btn:hover {
     background-color: #ea72c8;
     transform: scale(1.2); 
 }
 
-#events-btn:active {
-    background-color: #9e4f8a; 
-}
-
-#notes-btn:hover {
-    background-color: #ea72c8;
-    transform: scale(1.2); 
-}
 
-#notes-btn:active {
+#record-btn:active, #events-btn:active, #notes-btn:active, #recordings-btn:active {
     background-color: #9e4f8a; 
 }
 
-#recordings-btn:hover {
-    background-color: #ea72c8;
-    transform: scale(1.2); 
-}
-
-#recordings-btn:active {
-    background-color: #9e4f8a; 
-}
 
 input[type="text"] {
     padding: 10px;
diff --git a/apka/app/frontend/static/stylesEvents.css b/apka/app/frontend/static/stylesEvents.css
new file mode 100644
index 0000000..10bfa03
--- /dev/null
+++ b/apka/app/frontend/static/stylesEvents.css
@@ -0,0 +1,81 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: flex-start; /* Ustawienie zawartości po lewej stronie */
+    align-items: flex-start;
+    height: 100vh;
+    margin: 0;
+    background-image: url('tlo.png');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.container {
+    width: 60%; /* 2/3 szerokości */
+    height: 50vh; /* 1/2 wysokości */
+    overflow-y: auto; /* Dodanie przewijalności */
+    position: relative;
+    top: 15%; /* 15% od góry */
+    left: 7%; /* Pozycjonowanie od lewej krawędzi */
+    background-color: rgba(139, 98, 149, 0.6);
+    box-shadow: 0 0 10px rgba(167, 17, 201, 0.204);
+    padding: 20px;
+    border-radius: 10px;
+    margin: 20px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.event {
+    background-color: #e9e9e9;
+    padding: 15px;
+    border-radius: 8px;
+    text-align: left;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.event-time {
+    font-size: 1.1rem;
+    color: #555;
+}
+
+.event-summary {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #333;
+}
+
+/* Przyciski w górnym rogu */
+.top-nav {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.back-to-home {
+    background-color: #572468;
+    color: white;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 15px;
+    font-size: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.back-to-home:hover {
+    background-color: #7f4598;
+    transform: scale(1.2); 
+}
\ No newline at end of file
diff --git a/apka/app/frontend/static/stylesRecord.css b/apka/app/frontend/static/stylesRecord.css
new file mode 100644
index 0000000..bd40915
--- /dev/null
+++ b/apka/app/frontend/static/stylesRecord.css
@@ -0,0 +1,174 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: flex-start; /* Ustawienie zawartości po lewej stronie */
+    align-items: flex-start;
+    height: 100vh;
+    margin: 0;
+    background-image: url('tlo.png');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.container {
+    width: 55%; /* 2/3 szerokości */
+    height: 50vh; /* 1/2 wysokości */
+    padding: 20px;
+    text-align: center;
+    background-color: rgba(139, 98, 149, 0.6);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(167, 17, 201, 0.204);
+    overflow-y: auto; /* Dodanie przewijalności */
+    position: relative;
+    top: 15%; /* 15% od góry */
+    left: 7%; /* Pozycjonowanie od lewej krawędzi */
+    transform: translateY(0%); /* Usuń translateY(-50%) */
+}
+
+h1 {
+    text-align: center;
+    color: white;
+    margin-bottom: 20px;
+}
+
+.selection {
+    margin-top: 20px;
+}
+
+.button-row {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+.button-row {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+
+button {
+    padding: 10px 25px;
+    font-size: 18px;
+    border: none;
+    border-radius: 30px; /* Zaokrąglenie przycisków */
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: gray;
+}
+
+/* Przyciski w górnym rogu */
+.top-nav {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.back-to-home {
+    background-color: #572468;
+    color: white;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 15px;
+    font-size: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.back-to-home:hover {
+    background-color: #7f4598;
+    transform: scale(1.2); 
+}
+
+#record-btn {
+    background-color: #800080; 
+    color: white;
+    margin-top: 10px;
+    font-size: 20px;
+    border-radius: 20px;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+#record-btn:hover {
+    background-color: #6a006a; 
+    transform: scale(1.2); 
+}
+
+#record-btn:active {
+    background-color: #4c034c; 
+}
+
+.start-button {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.start-button:hover:not(:disabled) {
+    background-color: #45a049;
+    transform: scale(1.05); 
+}
+
+.stop-button {
+    background-color: rgb(255, 0, 0);
+    color: white;
+}
+
+.stop-button:hover:not(:disabled) {
+    transform: scale(1.05); 
+}
+
+input[type="text"] {
+    padding: 10px;
+    margin: 10px;
+    width: 300px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+#recording-time {
+    font-size: 16px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 5px;
+    border-radius: 5px;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+}
+
+#save-recording {
+    background-color: rgb(255, 0, 149);
+    color: white;
+    font-size: 16px;
+    margin-top: 10px;
+    padding: 10px 20px;
+}
+
+.timer {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: rgba(0, 0, 0, 0.7); /* Tło półprzezroczyste */
+    color: white;
+    font-size: 24px;
+    font-family: 'Arial', sans-serif;
+    padding: 10px 20px; /* Dostosowanie rozmiaru */
+    border-radius: 10px; /* Zaokrąglenie rogów */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Cień, aby wyglądało na bardziej wyróżniające się */
+    width: auto;
+    height: 40px;
+    display: flex;
+    align-items: center; /* Wyrównanie tekstu w pionie */
+    justify-content: center; /* Wyrównanie tekstu w poziomie */
+    font-weight: bold; /* Pogrubienie tekstu */
+}
diff --git a/apka/app/frontend/templates/events.html b/apka/app/frontend/templates/events.html
new file mode 100644
index 0000000..e35c533
--- /dev/null
+++ b/apka/app/frontend/templates/events.html
@@ -0,0 +1,31 @@
+<!-- templates/events.html -->
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NoteWriter</title>
+    <link rel="icon" type="image/x-icon" href="static/logoo.png">
+    <link rel="stylesheet" href="{{ url_for('static', filename='stylesEvents.css') }}">
+</head>
+<body>
+    <div class="top-nav">
+        <a href="/" class="back-to-home">Back to Home</a>
+    </div>
+    <div class="container">
+        <h1>Twoje nadchodzące wydarzenia</h1>
+        <div class="events-list">
+            {% if events %}
+                {% for event in events %}
+                    <div class="event">
+                        <div class="event-time">{{ event['start'] }}</div>
+                        <div class="event-summary">{{ event['summary'] }}</div>
+                    </div>
+                {% endfor %}
+            {% else %}
+                <p>Brak nadchodzących wydarzeń.</p>
+            {% endif %}
+        </div>
+    </div>
+</body>
+</html>
diff --git a/apka/app/frontend/templates/index.html b/apka/app/frontend/templates/index.html
index 6404682..170eb37 100644
--- a/apka/app/frontend/templates/index.html
+++ b/apka/app/frontend/templates/index.html
@@ -11,29 +11,20 @@
     <div id="timer" class="timer" style="display: none;">Nagrywanie</div>
     <div class="container">
         <h1>Witaj w aplikacji!</h1>
-        <button id="events-btn">Zobacz swoje wydarzenia!</button>
-        <button id="record-btn">Wybierz okno do nagrywania</button>
-        <button id="recordings-btn">Zobacz swoje nagrania</button>
+        <a href="/events">
+            <button id="events-btn">Zobacz swoje wydarzenia</button>
+        </a> 
+        <a href="/record">
+            <button id="record-btn">Nagraj spotkanie</button>
+        </a>
+        <a href="/my_recordings">
+            <button id="recordings-btn">Zobacz swoje nagrania</button>
+        </a> 
         <a href="/my_notes">
             <button id="notes-btn">Zobacz swoje notatki</button>
-        </a>        
-        <div id="window-selection" class="selection" style="display: none;">
-            <h2>Wybierz okno:</h2>
-            <select id="window-list" style="display: none;"></select>
-            <div id="selected-window" style="display: none;">
-                <button id="change-window-btn">Zmień okno</button>
-            </div>
-            <div class="button-row">
-                <button id="startButton" class="start-button">Rozpocznij nagrywanie</button>
-                <button id="stopButton" class="stop-button" disabled>Zakończ nagrywanie</button>
-            </div>
-            <h2>Zapisz nagranie</h2>
-            <input type="text" id="recording-title" placeholder="Podaj tytuł nagrania (nie używaj polskich znaków!)">
-            <button id="save-recording" disabled>Zapisz</button>
-        </div>
+        </a>    
     </div>
 
-    <script src="static/record.js"></script>
     <script src="static/notes.js"></script>
 </body>
 </html>
diff --git a/apka/app/frontend/templates/my_notes.html b/apka/app/frontend/templates/my_notes.html
index ca5c5aa..db52df2 100644
--- a/apka/app/frontend/templates/my_notes.html
+++ b/apka/app/frontend/templates/my_notes.html
@@ -18,7 +18,7 @@ <h1>Moje Notatki</h1>
         <ul class="notes-list">
             {% for note in notes %}
             <li>
-                <a href="{{ url_for('main.get_note', filename=note) }}" download>{{ note }}</a>
+                <a href="{{ url_for('main.get_note', filename=note) }}" download>{{ note.rsplit('.', 1)[0] }}</a>
             </li>
             {% endfor %}
         </ul>
diff --git a/apka/app/frontend/templates/my_recordings.html b/apka/app/frontend/templates/my_recordings.html
index 2ba076f..c606c69 100644
--- a/apka/app/frontend/templates/my_recordings.html
+++ b/apka/app/frontend/templates/my_recordings.html
@@ -18,7 +18,9 @@ <h1>My Recordings</h1>
         <ul class="recording-list">
             {% for recording in recordings %}
             <li>
-                <a href="javascript:void(0);" onclick="openVideoModal('{{ recording }}')">{{ recording }}</a>
+                <a href="javascript:void(0);" onclick="openVideoModal('{{ recording }}')">
+                    {{ recording.rsplit('.', 1)[0] }}
+                </a>
             </li>
             {% endfor %}
         </ul>
@@ -39,6 +41,7 @@ <h1>My Recordings</h1>
     <script>
 let recordings = [];
 
+
 // Funkcja do otwierania modala
 function openVideoModal(videoFilename, index) {
 
diff --git a/apka/app/frontend/templates/record.html b/apka/app/frontend/templates/record.html
new file mode 100644
index 0000000..480d727
--- /dev/null
+++ b/apka/app/frontend/templates/record.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NoteWriter</title>
+    <link rel="stylesheet" href="static/stylesRecord.css">
+    <link rel="icon" type="image/x-icon" href="static/logoo.png">
+</head>
+<body>
+    <div class="top-nav">
+        <a href="/" class="back-to-home">Powrót do strony głównej</a>
+    </div>
+    <div id="timer" class="timer" style="display: none;">00:00</div>
+    <div class="container">
+        <div id="window-selection" class="selection">
+            <h1>Nagraj wybrane okno</h1>
+            <button id="record-btn">Wybierz okno do nagrywania</button>
+            <div class="button-row">
+                <button id="startButton" class="start-button">Rozpocznij nagrywanie</button>
+                <button id="stopButton" class="stop-button" disabled>Zakończ nagrywanie</button>
+            </div>
+            <h2>Zapisz nagranie</h2>
+            <input type="text" id="recording-title" placeholder="Podaj tytuł nagrania (nie używaj polskich znaków!)">
+                <button id="save-recording" disabled>Zapisz</button>
+        </div>
+    </div>
+    <script src="static/record.js"></script>
+</body>
\ No newline at end of file