diff --git a/frontend/src/api/labelsApi.js b/frontend/src/api/labelsApi.js
new file mode 100644
index 00000000..c38528a8
--- /dev/null
+++ b/frontend/src/api/labelsApi.js
@@ -0,0 +1,90 @@
+// src/api/labelsApi.js
+
+// Base URL — adjust port/host if needed
+const API_BASE = "http://localhost:3001/api";
+const ROOT     = `${API_BASE}/labels`;
+
+/**
+ * Fetch all labels
+ * @returns {Promise<Array<{id:number,name:string,parent?:number}>>}
+ */
+export async function fetchLabels() {
+    const token = localStorage.getItem("token");
+    const res = await fetch(ROOT, {
+        method:  "GET",
+        headers: {
+            "Authorization": `Bearer ${token}`
+        }
+    });
+    if (!res.ok) throw new Error(`fetchLabels failed: ${res.status}`);
+    return res.json();
+}
+
+/**
+ * Create a new label
+ * @param {string} name
+ */
+export async function createLabel(name) {
+    const token = localStorage.getItem("token");
+    const res = await fetch(ROOT, {
+        method:  "POST",
+        headers: {
+            "Authorization":  `Bearer ${token}`,
+            "Content-Type":   "application/json"
+        },
+        body: JSON.stringify({ name })
+    });
+    if (!res.ok) throw new Error(`createLabel failed: ${res.status}`);
+}
+
+/**
+ * Rename an existing label
+ * @param {number} id
+ * @param {string} newName
+ */
+export async function editLabel(id, newName) {
+    const token = localStorage.getItem("token");
+    const res = await fetch(`${ROOT}/${id}`, {
+        method:  "PATCH",
+        headers: {
+            "Authorization":  `Bearer ${token}`,
+            "Content-Type":   "application/json"
+        },
+        body: JSON.stringify({ name: newName })
+    });
+    if (!res.ok) throw new Error(`editLabel failed: ${res.status}`);
+}
+
+/**
+ * Delete a label
+ * @param {number} id
+ */
+export async function deleteLabel(id) {
+    const token = localStorage.getItem("token");
+    const res = await fetch(`${ROOT}/${id}`, {
+        method:  "DELETE",
+        headers: {
+            "Authorization": `Bearer ${token}`
+        }
+    });
+    if (!res.ok) throw new Error(`deleteLabel failed: ${res.status}`);
+}
+
+/**
+ * Create a sublabel under a parent label
+ * @param {number} parentId
+ * @param {string} name
+ */
+export async function createLabelUnderParent(parentId, name) {
+    const token = localStorage.getItem("token");
+    const res = await fetch(`${ROOT}/${parentId}/sublabel`, {
+        method:  "POST",
+        headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type":  "application/json"
+        },
+        body: JSON.stringify({ name })
+    });
+    if (!res.ok) throw new Error(`createLabelUnderParent failed: ${res.status}`);
+    return res.json();
+}
diff --git a/frontend/src/api/mailApi.js b/frontend/src/api/mailApi.js
index 05735688..81c88a6e 100644
--- a/frontend/src/api/mailApi.js
+++ b/frontend/src/api/mailApi.js
@@ -63,9 +63,11 @@ export async function deleteMail(mail) {
         headers: {
             'Authorization': `Bearer ${token}`,
         }
-    })
-    if (!res.ok)
-        throw new Error(`getMails failed: ${res.status}`);
+    });
+
+    if (!res.ok) {
+        throw new Error(`deleteMail failed: ${res.status}`);
+    }
 }
 
 /**
@@ -180,4 +182,106 @@ export const searchMails = async (userId, query) => {
     if (!res.ok)
         throw new Error(`Search failed ${res.status}`);
     return res.json();
-};
\ No newline at end of file
+}
+
+/**
+ * Send a new mail or save as draft.
+ * @param { {
+ *   subject: string,
+ *   body: string,
+ *   sentTo: String[],
+ *   saveAsDraft?: boolean,
+ *   files: Object[]
+ * } } mailData
+ *  - subject: email subject
+ *  - body: HTML or plain text body
+ *  - sentTo: list of recipient email addresses
+ *  - saveAsDraft: true to save in Drafts, false to actually send
+ */
+export async function sendMail({subject, body, sentTo, saveAsDraft = false, files = []}) {
+    const url = `${API_BASE}/mails`;
+    const token = localStorage.getItem("token");
+
+    // Comments: what we send in the request body
+    // subject: the mail's subject line
+    // body: the mail's content (HTML)
+    // sentTo: array of recipient emails
+    // saveAsDraft: boolean flag—true = save to Draft folder
+    const payload = {
+        subject,
+        body,
+        sentTo,
+        saveAsDraft,
+        files
+    };
+
+    const res = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) {
+        throw new Error(`sendMail failed: ${res.status}`);
+    }
+
+    return res.json();
+}
+
+/**
+ * PATCH /api/mails/:id
+ * @param {number} mailId
+ * @param {{
+ *   subject?: string,
+ *   body?: string,
+ *   sentTo?: string[],
+ *   saveAsDraft?: boolean
+ * }} data
+ */
+export async function updateMail(mailId, {
+    subject,
+    body,
+    sentTo,
+    saveAsDraft = true
+}) {
+    const url = `${API_BASE}/mails/${mailId}`;
+    const token = localStorage.getItem("token");
+
+    const res = await fetch(url, {
+        method: "PATCH",
+        headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({subject, body, sentTo, saveAsDraft})
+    });
+
+    if (!res.ok) throw new Error(`updateMail failed: ${res.status}`);
+    return res.json();
+}
+
+/**
+ * Fetch mails under a specific label.
+ *
+ * @param {Number} labelId label's id
+ * @param {number} page
+ * @returns {Promise<{ mails: any[], total: number }>}
+ */
+export async function getMailsByLabel(labelId, page = 1) {
+    const token = localStorage.getItem("token");
+    // note: backend endpoint is the same, just pass label=...
+    const url = `${API_BASE}/mails?label=${encodeURIComponent(labelId)}&page=${page}&limit=50`;
+    const res = await fetch(url, {
+        method: "GET",
+        headers: {
+            "Authorization": `Bearer ${token}`
+        }
+    });
+    if (!res.ok) {
+        throw new Error(`getMailsByLabel failed: ${res.status}`);
+    }
+    return res.json();
+}
diff --git a/frontend/src/api/userApi.js b/frontend/src/api/userApi.js
index 6ab9716a..bc360ce0 100644
--- a/frontend/src/api/userApi.js
+++ b/frontend/src/api/userApi.js
@@ -59,3 +59,25 @@ export async function loginWithJwt(mail, password) {
         return 500;
     }
 }
+export async function searchUsers(query) {
+    try {
+        const token = localStorage.getItem("token");
+        const res = await fetch(`${API_BASE}/users/search?q=${encodeURIComponent(query)}`, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        });
+
+        if (!res.ok) {
+            console.error("Search failed:", await res.text());
+            return [];
+        }
+
+        return await res.json();
+    } catch (error) {
+        console.error("Error searching users:", error);
+        return [];
+    }
+}
+
+
diff --git a/frontend/src/main_page/ComposeEmail/ComposeEmail.css b/frontend/src/main_page/ComposeEmail/ComposeEmail.css
index 88e55099..539a43dc 100644
--- a/frontend/src/main_page/ComposeEmail/ComposeEmail.css
+++ b/frontend/src/main_page/ComposeEmail/ComposeEmail.css
@@ -1,10 +1,10 @@
-/* ComposeEmail.css */
-
 .compose-email {
     position: fixed;
-    bottom: 0;
-    right: 24px;
-    width: 580px;
+    bottom: 2vh;
+    right: 2vw;
+    width: 35vw;
+    max-width: 500px;
+    max-height: 75vh;
     background: #fff;
     border: 1px solid #dadce0;
     border-radius: 8px 8px 0 0;
@@ -12,32 +12,54 @@
     0 2px 6px rgba(60,64,67,0.15);
     display: flex;
     flex-direction: column;
-    max-height: 80vh;
     font-family: 'Roboto', sans-serif;
     z-index: 1000;
+    color: #202124; /* default text color */
+}
+
+.compose-email.minimized .compose-body,
+.compose-email.minimized .compose-footer {
+    display: none;
+}
+
+.compose-email.maximized {
+    top: 10vh !important;
+    bottom: 10vh !important;
+    left: 10vw !important;
+    right: 10vw !important;
+    width: auto !important;
+    height: auto !important;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 8px !important;
 }
 
 .compose-header {
     background: #f1f3f4;
-    padding: 8px 12px;
+    padding: 0.5em 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #dadce0;
-    border-radius: 8px 8px 0 0;
 }
 
 .compose-title {
-    font-size: 14px;
+    font-size: 1em;
     font-weight: 500;
     color: #202124;
 }
 
+/* --- Only this part was added for dark mode title --- */
+.compose-email.dark .compose-title {
+    color: #f1f3f4 !important;
+}
+/* ---------------------------------------- */
+
 .compose-controls .control-btn {
     background: transparent;
     border: none;
-    margin-left: 4px;
-    padding: 4px;
+    margin-left: 0.5em;
+    padding: 0.4em;
     cursor: pointer;
     color: #5f6368;
     border-radius: 4px;
@@ -49,30 +71,73 @@
 }
 
 .compose-body {
-    padding: 8px 12px;
+    padding: 0.5em 1em;
     overflow-y: auto;
+    flex: 1;
 }
 
 .compose-field {
     display: flex;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: 0.5em;
+    position: relative;
+}
+
+/* Recipients chips */
+.recipient-input-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    flex: 1;
+}
+
+.recipient-chip {
+    background: #e8f0fe;
+    border: 1px solid #aecbfa;
+    border-radius: 12px;
+    padding: 2px 8px;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    color: #202124;
+}
+
+.recipient-chip button {
+    background: transparent;
+    border: none;
+    margin-left: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    color: #5f6368;
+}
+
+.to-input {
+    flex: 1;
+    min-width: 120px;
+    padding: 0.4em;
+    border: none;
+    outline: none;
+    color: inherit;
 }
 
 .field-label {
-    width: 64px;
-    font-size: 13px;
+    width: 10%;
+    min-width: 4em;
+    font-size: 0.9em;
     color: #5f6368;
 }
 
 .field-input {
     flex: 1;
-    padding: 6px 8px;
+    padding: 0.5em;
     border: none;
     border-bottom: 1px solid #dadce0;
-    font-size: 14px;
+    font-size: 1em;
     outline: none;
     transition: border-color 0.2s;
+    color: inherit;
+    background: transparent;
 }
 
 .field-input:focus {
@@ -81,48 +146,130 @@
 
 .compose-toolbar {
     display: flex;
-    gap: 12px;
-    padding: 4px 0 8px;
+    gap: 0.75em;
+    padding: 0.5em 0;
+    font-size: 1em;
+}
+
+.compose-toolbar button,
+.compose-toolbar select {
+    background: transparent;
+    border: none;
     color: #5f6368;
-    font-size: 16px;
+    cursor: pointer;
+    padding: 0.4em;
+    font-size: 1em;
+    transition: color 0.2s, background 0.2s;
 }
 
-.compose-toolbar i:hover {
+.compose-toolbar button:hover,
+.compose-toolbar select:hover {
     color: #202124;
-    cursor: pointer;
+    background: rgba(95,99,104,0.08);
+    border-radius: 4px;
+}
+
+.font-size-select {
+    appearance: none;
 }
 
-.compose-textarea {
+.compose-editor {
     width: 100%;
+    min-height: 40vh;
+    padding: 0.75em;
     border: none;
+    border-bottom: 1px solid #dadce0;
     outline: none;
-    resize: none;
-    font-size: 14px;
+    font-size: 1em;
     line-height: 1.4;
-    min-height: 200px;
+    transition: border-bottom-color 0.2s;
+    direction: ltr;
+    text-align: left;
+    color: inherit;
+    background: transparent;
 }
 
+.compose-editor:focus {
+    border-bottom-color: #1a73e8;
+}
+
+
+.attachment-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+    font-size: 0.9em;
+    color: #202124;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.attachment-item .bi-paperclip {
+    flex-shrink: 0;
+}
+
+.attachment-item .file-name {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.attachment-item .remove-btn {
+    background: transparent;
+    border: none;
+    color: #5f6368;
+    font-size: 1em;
+    cursor: pointer;
+    padding: 2px 6px;
+    margin-left: 4px;
+    transition: color 0.2s;
+}
+
+.attachment-item .remove-btn:hover {
+    color: #d93025;
+}
+
+/* Optional: dark mode tweaks */
+.compose-email.dark .attachment-item {
+    color: #e8eaed;
+}
+.compose-email.dark .remove-btn {
+    color: #9aa0a6;
+}
+.compose-email.dark .remove-btn:hover {
+    color: #f28b82;
+}
+
+
 .compose-footer {
-    padding: 8px 12px;
+    padding: 0.5em 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid #dadce0;
     background: #f1f3f4;
-    border-radius: 0 0 8px 8px;
 }
 
-.footer-left .attach-btn {
+.footer-attach-btn {
     background: transparent;
     border: none;
-    font-size: 18px;
+    font-size: 1.2em;
     color: #5f6368;
     cursor: pointer;
+    padding: 0.4em;
+    transition: color 0.2s;
+}
+
+.footer-attach-btn:hover {
+    color: #202124;
 }
 
 .footer-right {
     display: flex;
-    gap: 8px;
+    gap: 0.5em;
 }
 
 .send-btn {
@@ -130,12 +277,12 @@
     color: #fff;
     border: none;
     border-radius: 4px;
-    padding: 6px 20px;
-    font-size: 14px;
+    padding: 0.5em 1.5em;
+    font-size: 0.9em;
     font-weight: 500;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 0.4em;
     box-shadow: 0 1px 1px rgba(60,64,67,0.3);
     cursor: pointer;
     transition: background 0.2s;
@@ -149,7 +296,7 @@
     background: transparent;
     border: none;
     color: #5f6368;
-    font-size: 14px;
+    font-size: 0.9em;
     cursor: pointer;
     transition: color 0.2s;
 }
@@ -157,3 +304,110 @@
 .discard-btn:hover {
     color: #d93025;
 }
+
+.suggestions-list {
+    position: absolute;
+    top: 100%;
+    left: 10%;
+    width: 90%;
+    max-height: 30vh;
+    overflow-y: auto;
+    margin-top: 0.2em;
+    background: #fff;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(60,64,67,0.15);
+    z-index: 1100;
+    font-size: 0.9em;
+    list-style: none;
+    padding: 0;
+}
+
+.suggestions-list li {
+    padding: 0.5em 0.75em;
+    cursor: pointer;
+    color: #202124;
+}
+
+.suggestions-list li:hover {
+    background-color: #f1f3f4;
+}
+
+/* Dark mode overrides */
+.compose-email.dark {
+    background: #202124;
+    border-color: #5f6368;
+    color: #e8eaed;
+}
+
+.compose-email.dark .compose-header,
+.compose-email.dark .compose-footer {
+    background: #171717;
+    border-color: #5f6368;
+}
+
+.compose-email.dark .recipient-chip {
+    background: #3c4043;
+    border-color: #5f6368;
+    color: #e8eaed;
+}
+
+.compose-email.dark .field-label {
+    color: #e8eaed;
+}
+
+.compose-email.dark .field-input,
+.compose-email.dark .to-input {
+    background: #303134;
+    color: #e8eaed;
+    border-bottom-color: #5f6368;
+}
+
+.compose-email.dark .field-input::placeholder,
+.compose-email.dark .to-input::placeholder {
+    color: #9aa0a6;
+}
+
+.compose-email.dark .compose-editor {
+    background: #303134;
+    color: #e8eaed;
+    border-bottom-color: #5f6368;
+}
+
+.compose-email.dark .compose-editor:focus {
+    border-bottom-color: #8ab4f8;
+}
+
+.compose-email.dark .compose-toolbar button,
+.compose-email.dark .font-size-select {
+    color: #e8eaed;
+}
+
+.compose-email.dark .compose-toolbar button:hover {
+    background: rgba(232,234,237,0.1);
+}
+
+.compose-email.dark .send-btn {
+    background-color: #8ab4f8;
+}
+
+.compose-email.dark .send-btn:hover {
+    background-color: #669df6;
+}
+
+.compose-email.dark .suggestions-list {
+    background: #303134;
+    border-color: #5f6368;
+}
+
+.compose-email.dark .suggestions-list li {
+    color: #e8eaed;
+}
+
+.compose-email.dark .suggestions-list li:hover {
+    background-color: #3c4043;
+}
+
+.compose-email.dark .attachment-list li {
+    color: #e8eaed;
+}
diff --git a/frontend/src/main_page/ComposeEmail/ComposeEmail.jsx b/frontend/src/main_page/ComposeEmail/ComposeEmail.jsx
index c54d33a0..3580456e 100644
--- a/frontend/src/main_page/ComposeEmail/ComposeEmail.jsx
+++ b/frontend/src/main_page/ComposeEmail/ComposeEmail.jsx
@@ -1,92 +1,318 @@
-"use client";
-
-import React, { useState } from 'react';
+'use client';
+import React, { useState, useEffect, useRef } from 'react';
+import { useTheme } from '../../utils/useTheme';
+import { sendMail, updateMail } from '../../api/mailApi';
+import { searchUsers } from '../../api/userApi';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import './ComposeEmail.css';
 
-export default function ComposeEmail({ onCancel, onSend }) {
-    const [to, setTo] = useState('');
+import {
+    execCommand,
+    handleFileAttachments
+} from '../../utils/composeUtils';
+
+/**
+ * ComposeEmail component: Handles sending or saving emails and drafts
+ * @param {function} onCancel - Called when closing or discarding the window
+ * @param {function} onSend   - Called after successfully sending
+ * @param {number} offset     - How far to offset the window (for stacking)
+ * @param {object|null} draftMail - If present, editing a draft
+ */
+export default function ComposeEmail({
+                                         onCancel,
+                                         onSend,
+                                         offset = 0,
+                                         draftMail = null
+                                     }) {
+    const { theme } = useTheme();
+
+    // States for fields
+    const [toQuery, setToQuery] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const [recipients, setRecipients] = useState([]);
     const [subject, setSubject] = useState('');
-    const [body, setBody] = useState('');
+    const [attachments, setAttachments] = useState([]);
+    const [view, setView] = useState('normal'); // minimized, maximized, normal
+
+    // Store the current editor text in state so it survives minimize/maximize
+    const [editorHtml, setEditorHtml] = useState('');
+    const editorRef = useRef(null);
+    const attachRef = useRef(null);
+
+    /**
+     * On editing a draft, prefill all fields only when draftMail changes.
+     * And initialize the editor’s innerHTML here once
+     */
+    useEffect(() => {
+        if (!draftMail) return;
+
+        setRecipients(draftMail.sentTo.map(u => u.mail));
+        setSubject(draftMail.subject || '');
+
+        // initialize the editor only once here
+        const initial = draftMail.body || '';
+        setEditorHtml(initial);
+        if (editorRef.current) {
+            editorRef.current.innerHTML = initial;
+        }
+
+        setAttachments(draftMail.attachments || []);
+        setToQuery('');
+        setSuggestions([]);
+    }, [draftMail]);
 
-    const handleSend = () => {
-        onSend({ to, subject, body });
+
+    // Autocomplete for "To" field
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (toQuery.length >= 1) {
+                searchUsers(toQuery).then(setSuggestions);
+            } else {
+                setSuggestions([]);
+            }
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [toQuery]);
+
+    // Add recipient if not already present
+    const addRecipient = email => {
+        const e = email.trim();
+        if (e && !recipients.includes(e)) {
+            setRecipients(prev => [...prev, e]);
+        }
+        setToQuery('');
+        setSuggestions([]);
+    };
+    const removeRecipient = email => {
+        setRecipients(prev => prev.filter(e => e !== email));
+    };
+    const handleKeyDown = e => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            addRecipient(toQuery);
+        }
     };
 
+    /**
+     * Send or save as draft (uses state for editorHtml).
+     * If draftMail.id exists, update; otherwise create.
+     */
+    const postMail = async saveAsDraft => {
+        if (!saveAsDraft && !recipients.length) {
+            alert('Add at least one recipient.');
+            return;
+        }
+        const body = editorHtml;
+        if (draftMail?.id) {
+            await updateMail(draftMail.id, {
+                subject,
+                body,
+                sentTo: recipients,
+                saveAsDraft,
+                files: attachments
+            });
+        } else {
+            await sendMail({
+                subject,
+                body,
+                sentTo: recipients,
+                saveAsDraft,
+                files: attachments
+            });
+        }
+    };
+
+    // Handlers for the toolbar and window controls
+    const handleSend = async () => {
+        await postMail(false);
+        onSend?.();
+    };
+    const handleClose = async () => {
+        // Only save draft if there is at least one recipient
+        if (recipients.length > 0) {
+            await postMail(true);
+        }
+        onCancel();
+    };
+    const handleDiscard = () => {
+        onCancel();
+    };
+    const toggleMinimize = () =>
+        setView(v => (v === 'minimized' ? 'normal' : 'minimized'));
+    const toggleMaximize = () =>
+        setView(v => (v === 'maximized' ? 'normal' : 'maximized'));
+    const rightOffset = `calc(2vw + ${offset * 36}vw)`;
+
     return (
-        <div className="compose-email">
-            {/* Header with title and controls */}
+        <div
+            className={`compose-email ${view} ${theme}`}
+            style={{ right: rightOffset }}
+        >
             <div className="compose-header">
-                <span className="compose-title">New Message</span>
+                <span className="compose-title">
+                    {draftMail ? 'Edit Draft' : 'New Message'}
+                </span>
                 <div className="compose-controls">
-                    <button className="control-btn" title="Minimize">
-                        <i className="bi bi-dash"></i>
+                    {/* Minimize button with tooltip */}
+                    <button className="control-btn" title="Minimize" onClick={toggleMinimize}>
+                        <i className="bi bi-dash" />
                     </button>
-                    <button className="control-btn" title="Expand">
-                        <i className="bi bi-fullscreen"></i>
+                    {/* Maximize/Restore button with tooltip */}
+                    <button className="control-btn" title="Maximize" onClick={toggleMaximize}>
+                        <i className="bi bi-fullscreen" />
                     </button>
-                    <button className="control-btn" onClick={onCancel} title="Close">
-                        <i className="bi bi-x-lg"></i>
+                    {/* Close (save draft) button with tooltip */}
+                    <button className="control-btn" title="Close" onClick={handleClose}>
+                        <i className="bi bi-x-lg" />
                     </button>
                 </div>
             </div>
 
-            {/* Body with “To”, “Subject” and formatting toolbar */}
-            <div className="compose-body">
-                <div className="compose-field">
-                    <span className="field-label">To</span>
-                    <input
-                        type="email"
-                        value={to}
-                        onChange={e => setTo(e.target.value)}
-                        className="field-input"
-                        placeholder="recipient@example.com"
-                    />
-                </div>
-                <div className="compose-field">
-                    <span className="field-label">Subject</span>
-                    <input
-                        type="text"
-                        value={subject}
-                        onChange={e => setSubject(e.target.value)}
-                        className="field-input"
-                        placeholder="Subject"
-                    />
-                </div>
+            {view !== 'minimized' && (
+                <>
+                    <div className="compose-body">
+                        {/* To: field with recipient chips and autocomplete */}
+                        <div className="compose-field" style={{ flexWrap: 'wrap' }}>
+                            <span className="field-label">To</span>
+                            <div className="recipient-input-container">
+                                {recipients.map(email => (
+                                    <span key={email} className="recipient-chip">
+                                        {email}
+                                        <button onClick={() => removeRecipient(email)}>
+                                            ×
+                                        </button>
+                                    </span>
+                                ))}
+                                <input
+                                    type="text"
+                                    className="field-input to-input"
+                                    placeholder="Type a name or email"
+                                    value={toQuery}
+                                    onChange={e => setToQuery(e.target.value)}
+                                    onKeyDown={handleKeyDown}
+                                />
+                            </div>
+                            {suggestions.length > 0 && (
+                                <ul className="suggestions-list">
+                                    {suggestions.map(u => (
+                                        <li key={u.id} onClick={() => addRecipient(u.mail)}>
+                                            {u.mail}
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </div>
 
-                <div className="compose-toolbar">
-                    <i className="bi bi-type-bold"></i>
-                    <i className="bi bi-type-italic"></i>
-                    <i className="bi bi-type-underline"></i>
-                    <i className="bi bi-link-45deg"></i>
-                    <i className="bi bi-image"></i>
-                    <i className="bi bi-list-ul"></i>
-                </div>
+                        {/* Subject input */}
+                        <div className="compose-field">
+                            <span className="field-label">Subject</span>
+                            <input
+                                type="text"
+                                className="field-input"
+                                placeholder="Subject"
+                                value={subject}
+                                onChange={e => setSubject(e.target.value)}
+                            />
+                        </div>
 
-                <textarea
-                    value={body}
-                    onChange={e => setBody(e.target.value)}
-                    className="compose-textarea"
-                    placeholder="Compose your email..."
-                />
-            </div>
+                        {/* Rich text formatting toolbar */}
+                        <div className="compose-toolbar">
+                            <button onClick={() => execCommand(editorRef, 'bold')}>
+                                <b>B</b>
+                            </button>
+                            <button onClick={() => execCommand(editorRef, 'italic')}>
+                                <i>I</i>
+                            </button>
+                            <button onClick={() => execCommand(editorRef, 'underline')}>
+                                <u>U</u>
+                            </button>
+                            <button
+                                onClick={() => {
+                                    let url = prompt('Enter URL:');
+                                    if (url && !/^https?:\/\//i.test(url)) {
+                                        url = 'https://' + url;
+                                    }
+                                    if (url) execCommand(editorRef, 'createLink', url);
+                                }}
+                            >
+                                <i className="bi bi-link-45deg" />
+                            </button>
+                            <select
+                                className="font-size-select"
+                                defaultValue="3"
+                                onChange={e =>
+                                    execCommand(editorRef, 'fontSize', e.target.value)
+                                }
+                            >
+                                <option value="2">Small</option>
+                                <option value="3">Normal</option>
+                                <option value="4">Medium</option>
+                                <option value="5">Large</option>
+                            </select>
+                        </div>
 
-            {/* Footer with attach, send and discard buttons */}
-            <div className="compose-footer">
-                <div className="footer-left">
-                    <button className="attach-btn" title="Attach files">
-                        <i className="bi bi-paperclip"></i>
-                    </button>
-                </div>
-                <div className="footer-right">
-                    <button className="send-btn" onClick={handleSend}>
-                        Send <i className="bi bi-send-fill"></i>
-                    </button>
-                    <button className="discard-btn" onClick={onCancel}>
-                        Discard
-                    </button>
-                </div>
-            </div>
+                        {/* Editable email body. Use onInput to track the text in state for persistence. */}
+                        <div
+                            ref={editorRef}
+                            className="compose-editor"
+                            contentEditable
+                            suppressContentEditableWarning
+                            onInput={e => setEditorHtml(e.currentTarget.innerHTML)}
+                            dir="ltr" // Force left-to-right typing only in the editor!
+                        />
+
+                        {/* Attachments (if any) */}
+                        {attachments.length > 0 && (
+                            <ul className="attachment-list">
+                                {attachments.map((file, index) => (
+                                    <li key={index} className="attachment-item">
+                                        <i className="bi bi-paperclip" />
+                                        <span className="file-name" title={file.name}>
+                                            {file.name}
+                                        </span>
+                                        <button
+                                            className="remove-btn"
+                                            onClick={() =>
+                                                setAttachments(prev =>
+                                                    prev.filter((_, i) => i !== index)
+                                                )
+                                            }
+                                        >
+                                            ×
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+
+                    {/* Footer: attach, send, discard */}
+                    <div className="compose-footer">
+                        <button
+                            className="footer-attach-btn"
+                            onClick={() => attachRef.current.click()}
+                        >
+                            <i className="bi bi-paperclip" />
+                        </button>
+                        <input
+                            type="file"
+                            multiple
+                            ref={attachRef}
+                            style={{ display: 'none' }}
+                            onChange={e => handleFileAttachments(setAttachments, e)}
+                        />
+
+                        <div className="footer-right">
+                            <button className="send-btn" onClick={handleSend}>
+                                Send <i className="bi bi-send-fill" />
+                            </button>
+                            <button className="discard-btn" onClick={handleDiscard}>
+                                Discard
+                            </button>
+                        </div>
+                    </div>
+                </>
+            )}
         </div>
     );
 }
diff --git a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css
index 7d7f9d1e..9c8d0d1e 100644
--- a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css
+++ b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css
@@ -1,179 +1,131 @@
+/* src/main_page/EmailSideMenu/EmailSideMenu.css */
+
+/* Layout and base colors for sidebar */
 .sidebar {
     display: flex;
     flex-direction: column;
     padding: 1rem;
     height: 100vh;
+    overflow-y: auto;
 }
-.sidebar.light{
-    color: var(--bs-light-rgb);
-    border-right: 1px solid var(--bs-border-color);
-}
-.sidebar.dark{
-    color: var(--bs-dark-rgb);
-    border-right: 1px solid var(--bs-border-color, #dee2e6);
-}
-/* Responsive & animated sidebar */
-@media (max-width: 768px) {
-    .sidebar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 260px;
-        height: 100vh;
-        transform: translateX(-100%);
-        transition: transform 0.3s ease-in-out;
-        padding-top: 64px;
-        z-index: 1050;
-    }
-    .sidebar.light {
-        background-color: #f1f3f4;
-    }
-    .sidebar.dark {
-        background-color: var(--dark-bg-page);
-    }
 
-    .sidebar.show {
-        transform: translateX(0);
-    }
-
-    .sidebar-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.3);
-        z-index: 1049;
-    }
-
-    @media (max-width: 768px) {
-        .compose-button {
-            display: none !important;
-        }
-        .bi-pencil-square {
-            display: none !important;
-        }
-    }
+/* Light/dark color schemes */
+.sidebar.light {
+    background: #fff;
+    color: #000;
+    border-right: 1px solid #dee2e6;
 }
-.sidebar-backdrop {
-    opacity: 0;
-    animation: fadeInBackdrop 0.25s ease-in forwards;
-}
-
-@keyframes fadeInBackdrop {
-    to {
-        opacity: 1;
-    }
+.sidebar.dark {
+    background: #202124;
+    color: #e8eaed;
+    border-right: 1px solid #5f6368;
 }
 
+/* Compose button at top */
 .compose-button {
     margin-bottom: 1rem;
+    width: 100%;
 }
 .compose-button.light {
-    background-color: var(--bs-primary);
+    background-color: #1a73e8;
     color: #fff;
-    border: 1px solid var(--bs-primary);
+    border: 1px solid #1a73e8;
 }
 .compose-button.dark {
-    background-color: transparent;
-    color: #f8f9fa; /* Bootstrap's light */
-    border: 1px solid #f8f9fa;
+    background: transparent;
+    color: #e8eaed;
+    border: 1px solid #e8eaed;
 }
 
-.sidebar .nav-link {
-    width: 100%;
+/* Mail folder links (Inbox, Sent, etc.) */
+.nav-link {
+    display: flex;
+    align-items: center;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
-    text-align: left;
-    align-items: center;
-    justify-content: space-between;
     transition: background-color 0.2s, color 0.2s;
 }
-/* Inactive appearance */
-.sidebar.light .nav-link {
-    background-color: transparent;
-    color: #000;
+/* Hover state for mail links */
+.nav-link:hover {
+    background-color: rgba(0,0,0,0.05);
 }
-.sidebar.dark .nav-link {
-    background-color: transparent;
-    color: #f8f9fa;
+.sidebar.dark .nav-link:hover {
+    background-color: rgba(255,255,255,0.1);
 }
-/* Active appearance */
+/* Active tab coloring */
 .sidebar.light .nav-link.active-tab {
-    background-color: var(--bs-primary);
-    color: white;
+    background-color: #1a73e8;
+    color: #fff;
 }
 .sidebar.dark .nav-link.active-tab {
-    background-color: var(--bs-secondary);
-    color: white;
-}
-/* Hover effects */
-.sidebar .nav-link:hover {
-    background-color: rgba(0,0,0,0.05);
-}
-.sidebar.dark .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: #5f6368;
+    color: #fff;
 }
 
-.nav-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 16px;
-    border-radius: 24px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #333333;
-    text-decoration: none;
-    transition: all 0.2s;
-    margin-bottom: 4px;
-    user-select: none;
-}
-.nav-item.active {
-    background-color: #e3f2fd;
-    color: #1976d2;
+/* Header for Labels section */
+.labels-header {
+    font-size: 0.85rem;
     font-weight: 500;
-}
-.nav-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
+    margin-bottom: 0.5rem;
+    color: inherit;
 }
 
-.nav-label {
-    flex: 1;
+/* Context menu for label actions */
+.label-context-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
-
-.nav-item-count {
-    margin-left: auto;
-    font-size: 12px;
-    color: #666666;
-    background-color: #f0f0f0;
-    padding: 2px 6px;
-    border-radius: 10px;
-    min-width: 18px;
-    text-align: center;
+.label-context-menu li:hover {
+    background-color: rgba(0,0,0,0.05);
 }
 
-.nav-item.active .nav-item-count {
-    background-color: rgba(25, 118, 210, 0.1);
-    color: #1976d2;
+/* Expand/collapse button for parent labels (the caret) */
+.label-expand-btn {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    margin-left: -5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
 }
 
-/* Scrollbar Styling */
-.sidebar-nav::-webkit-scrollbar {
-    width: 6px;
+/* Each label line: set consistent height and allow indentation */
+.label-li {
+    min-height: 32px;
 }
 
-.sidebar-nav::-webkit-scrollbar-track {
-    background: transparent;
+/* Style for label text and ellipsis if long */
+.label-li .nav-link {
+    min-width: 0;
+    flex: 1 1 auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-left: 0.5rem;
 }
 
-.sidebar-nav::-webkit-scrollbar-thumb {
-    background: #e0e0e0;
-    border-radius: 3px;
+/* Right-align three-dots menu for label */
+.label-li .bi-three-dots-vertical {
+    margin-left: auto;
 }
 
-.sidebar-nav::-webkit-scrollbar-thumb:hover {
-    background: #bdbdbd;
+/* Sidebar slide-in for mobile */
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 260px;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        z-index: 1050;
+        padding-top: 5rem;
+    }
+    .sidebar.show {
+        transform: translateX(0);
+    }
+
 }
diff --git a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx
index 9458236a..97166633 100644
--- a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx
+++ b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx
@@ -1,63 +1,237 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+// Import Bootstrap and icon styles for consistent UI
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
-import './EmailSideMenu.css'
+import './EmailSideMenu.css';
 import useIsMobile from "../../utils/useIsMobile";
 
-export default function EmailSidebar({theme, currentTab, setCurrentTab, onComposeClick, showSidebar, setShowSidebar}) {
+// Import API functions for label CRUD and sublabel
+import {
+    fetchLabels,
+    createLabel,
+    editLabel,
+    deleteLabel,
+    createLabelUnderParent,
+} from '../../api/labelsApi';
 
-    const sidebarItems = [
-        {id: 'all', label: 'All Mail', iconClass: 'bi-envelope'},
-        {id: 'incoming', label: 'Inbox', iconClass: 'bi-inbox'},
-        {id: 'sent', label: 'Sent', iconClass: 'bi-send-fill'},
-        {id: 'draft', label: 'Drafts', iconClass: 'bi-file-earmark-text'},
-        {id: 'star', label: 'Starred', iconClass: 'bi-star'},
-        {id: 'trash', label: 'Trash', iconClass: 'bi-trash-fill'},
-        {id: 'spam', label: 'Spam', iconClass: 'bi-exclamation-octagon'},
-    ];
+// Define the static mailbox/folder items (Inbox, Sent, etc.)
+const mailboxItems = [
+    { id: 'all',     label: 'All Mail', icon: 'bi-envelope' },
+    { id: 'incoming',label: 'Inbox',    icon: 'bi-inbox' },
+    { id: 'sent',    label: 'Sent',     icon: 'bi-send-fill' },
+    { id: 'draft',   label: 'Drafts',   icon: 'bi-file-earmark-text' },
+    { id: 'star',    label: 'Starred',  icon: 'bi-star' },
+    { id: 'trash',   label: 'Trash',    icon: 'bi-trash-fill' },
+    { id: 'spam',    label: 'Spam',     icon: 'bi-exclamation-octagon' },
+];
 
+// Main sidebar component
+export default function EmailSidebar({
+                                         theme,            // "light" or "dark"
+                                         currentTab,       // Which tab/label is currently selected
+                                         setCurrentTab,    // Callback to change tab
+                                         onComposeClick,   // Callback for "Compose" button
+                                         showSidebar,      // Boolean: is sidebar open (mobile)
+                                         setShowSidebar    // Callback to toggle sidebar (mobile)
+                                     }) {
     const isMobile = useIsMobile();
+    const [labels, setLabels] = useState([]); // Flat list of all labels (from backend)
 
-    const onTabClick = (e, itemId) => {
-        e.preventDefault();
-        if (isMobile) {
-            setShowSidebar(false); // only on small screens
-        }
-        setCurrentTab(itemId);
+    // Object to track which parent labels are expanded: { [id]: true/false }
+    const [expandedLabels, setExpandedLabels] = useState({});
+
+    // State for context menu (edit/delete/add sublabel)
+    const [ctx, setCtx] = useState({ open: false, x: 0, y: 0, label: null });
+
+    // Fetch labels from API on mount
+    useEffect(() => {
+        fetchLabels().then(setLabels);
+    }, []);
+
+    // Helper to reload labels after changes
+    const reload = async () => setLabels(await fetchLabels());
+
+    // Add new label at root
+    const handleAddLabel = async () => {
+        const name = prompt("New label name:");
+        if (!name) return;
+        await createLabel(name);
+        await reload();
+    };
+
+    // Rename label
+    const handleEditLabel = async lab => {
+        const name = prompt("Rename label:", lab.name);
+        if (!name || name === lab.name) return;
+        await editLabel(lab.id, name);
+        await reload();
+    };
+
+    // Delete label with confirmation
+    const handleRemoveLabel = async lab => {
+        if (!window.confirm(`Delete "${lab.name}"?`)) return;
+        await deleteLabel(lab.id);
+        await reload();
+    };
+
+    // Add sublabel under parent
+    const handleAddSublabel = async lab => {
+        const name = prompt(`Sublabel name under "${lab.name}":`);
+        if (!name) return;
+        await createLabelUnderParent(lab.id, name);
+        await reload();
+    };
+
+    // Open the context menu at the position of the clicked label
+    const openCtx = (e, lab) => {
+        e.stopPropagation();
+        const rect = e.currentTarget.getBoundingClientRect();
+        setCtx({ open: true, x: rect.right + 4, y: rect.top, label: lab });
+    };
+    // Close the context menu
+    const closeCtx = () => setCtx(c => ({ ...c, open: false }));
+
+    // Navigate to mailbox tab or label tab
+    const onClickTab = id => {
+        setCurrentTab(id);
+        if (isMobile) setShowSidebar(false);
+    };
+
+    // Expand/collapse label for sublabels
+    const toggleLabel = id => {
+        setExpandedLabels(e => ({ ...e, [id]: !e[id] }));
+    };
+
+    /**
+     * Convert flat label list to tree structure:
+     * - Each label can have children (if sublabel)
+     * - Roots have parent == null/undefined/0
+     */
+    function buildLabelTree(labels) {
+        const map = {};
+        labels.forEach(lab => map[lab.id] = { ...lab, children: [] });
+        const roots = [];
+        labels.forEach(lab => {
+            if (lab.parent) map[lab.parent]?.children.push(map[lab.id]);
+            else roots.push(map[lab.id]);
+        });
+        return roots;
     }
 
+    /**
+     * Render a single label and its children recursively
+     * @param {object} lab - label object
+     * @param {number} level - depth (indent)
+     */
+    function renderLabel(lab, level = 0) {
+        const isParent = lab.children && lab.children.length > 0;
+        const isExpanded = expandedLabels[lab.id];
+        const tabId = `label:${lab.id}`;
+
+        return (
+            <React.Fragment key={lab.id}>
+                <li className="nav-item d-flex align-items-center label-li"
+                    style={{ paddingLeft: 16 + level * 18 }}>
+                    {/* Expand/collapse caret for parent labels */}
+                    {isParent && (
+                        <button
+                            className="label-expand-btn"
+                            aria-label={isExpanded ? "Collapse" : "Expand"}
+                            onClick={() => toggleLabel(lab.id)}
+                            style={{
+                                border: 'none',
+                                background: 'none',
+                                marginRight: 5,
+                                cursor: 'pointer',
+                                color: 'inherit'
+                            }}>
+                            <i className={`bi bi-caret-${isExpanded ? "down" : "right"}-fill`} />
+                        </button>
+                    )}
+                    {/* Spaceholder if not parent */}
+                    {!isParent && <span style={{ width: 20, display: "inline-block" }} />}
+                    {/* Label name, navigates on click */}
+                    <a
+                        href="#"
+                        className={`nav-link flex-grow-1 ${currentTab === tabId ? 'active-tab' : ''}`}
+                        onClick={e => { e.preventDefault(); onClickTab(tabId) }}
+                    >{lab.name}</a>
+                    {/* Context menu button (three dots) */}
+                    <i
+                        className="bi bi-three-dots-vertical ms-2"
+                        style={{ cursor: 'pointer' }}
+                        onClick={e => openCtx(e, lab)}
+                    />
+                </li>
+                {/* Recursively render sublabels if expanded */}
+                {isParent && isExpanded && lab.children.map(child =>
+                    renderLabel(child, level + 1)
+                )}
+            </React.Fragment>
+        );
+    }
+
+    // Render sidebar
     return (
-        <div className={`sidebar ${theme} ${showSidebar ? 'show' : ''}`}
-        >
-            {!isMobile && (
-                <button
-                    onClick={onComposeClick}
-                    className={`btn compose-button ${theme}`}
-                >
-                    <i className="bi bi-pencil-square me-2"/>
-                    Compose
+        <div className={`sidebar ${theme} ${showSidebar ? 'show' : ''}`}>
+            {/* Compose button (desktop only) */}
+                <button className={`btn compose-button ${theme}`} onClick={onComposeClick}>
+                    <i className="bi bi-pencil-square me-2" /> Compose
                 </button>
-            )}
 
+            {/* Folders (Inbox, Sent, etc.) */}
             <ul className="nav nav-pills flex-column">
-                {sidebarItems.map(item => {
-                    const active = currentTab === item.id;
-                    return (
-                        <li key={item.id} className="nav-item position-relative">
-                            <a
-                                className={`nav-link d-flex ${active ? 'active-tab' : ''}`}
-                                href="#"
-                                onClick={e => onTabClick(e, item.id)}
-                            >
-                <span className="d-flex align-items-center">
-                  <i className={`bi ${item.iconClass} me-2`}/>
-                    {item.label}
-                </span>
-                            </a>
-                        </li>
-                    );
-                })}
+                {mailboxItems.map(it => (
+                    <li key={it.id} className="nav-item">
+                        <a
+                            href="#"
+                            className={`nav-link ${currentTab === it.id ? 'active-tab' : ''}`}
+                            onClick={e => { e.preventDefault(); onClickTab(it.id) }}
+                        >
+                            <i className={`bi ${it.icon} me-2`} />{it.label}
+                        </a>
+                    </li>
+                ))}
             </ul>
+
+            {/* Labels header and add button */}
+            <div className="labels-header d-flex align-items-center px-3 mt-4">
+                <strong className="me-auto">Labels</strong>
+                <i className="bi bi-plus-circle" style={{ cursor: 'pointer' }} onClick={handleAddLabel} />
+            </div>
+
+            {/* Labels tree, supports sublabels and indentation */}
+            <ul className="nav nav-pills flex-column mt-1">
+                {buildLabelTree(labels).map(lab => renderLabel(lab))}
+            </ul>
+
+            {/* Context menu for editing/removing/adding sublabels */}
+            {ctx.open && (
+                <ul
+                    className="label-context-menu list-unstyled p-2 shadow"
+                    style={{
+                        position: 'fixed',
+                        top: ctx.y, left: ctx.x,
+                        background: theme === 'dark' ? '#333' : '#fff',
+                        borderRadius: 4,
+                        zIndex: 2000
+                    }}
+                    onMouseLeave={closeCtx}
+                >
+                    <li className="p-1" style={{ cursor: 'pointer' }}
+                        onClick={() => { handleEditLabel(ctx.label); closeCtx(); }}>
+                        Edit
+                    </li>
+                    <li className="p-1 mt-1" style={{ cursor: 'pointer', color: 'red' }}
+                        onClick={() => { handleRemoveLabel(ctx.label); closeCtx(); }}>
+                        Remove label
+                    </li>
+                    <li className="p-1 mt-1" style={{ cursor: 'pointer' }}
+                        onClick={() => { handleAddSublabel(ctx.label); closeCtx(); }}>
+                        Add sublabel
+                    </li>
+                </ul>
+            )}
         </div>
     );
 }
diff --git a/frontend/src/main_page/MainPage.css b/frontend/src/main_page/MainPage.css
index 420a08f0..a41f51af 100644
--- a/frontend/src/main_page/MainPage.css
+++ b/frontend/src/main_page/MainPage.css
@@ -5,6 +5,9 @@
     height: 100%;
     margin: 0;
     padding: 1px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 .main-page.light {
     background-color: var(--light-bg-page);
@@ -20,6 +23,7 @@
     display: flex;
     flex: 1;
     overflow: hidden;
+    min-height: 0;
 }
 
 /* ─── MAILS LIST CONTAINER ───────────────────────────────── */
diff --git a/frontend/src/main_page/MainPage.js b/frontend/src/main_page/MainPage.js
index 0902be58..0476a0aa 100644
--- a/frontend/src/main_page/MainPage.js
+++ b/frontend/src/main_page/MainPage.js
@@ -1,32 +1,52 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
-import './MainPage.css';
+import "./MainPage.css";
 import EmailSidebar from "./EmailSideMenu/EmailSideMenu";
 import MailRow from "./mail_row/MailRow";
 import ToolBar from "./toolbar/ToolBar";
 import TopMenu from "./top_menu/TopMenu";
-import {useLocation} from "react-router-dom";
 import ComposeEmail from "./ComposeEmail/ComposeEmail";
-import {useMailToolbarHandlers} from "./hooks/useMailToolbarHandlers";
-import {useMails} from "./hooks/useMails";
-import {useTheme} from "../utils/useTheme";
-import {useRequireAuth} from "../utils/useAutoLogin";
+import { useLocation } from "react-router-dom";
+import { useMailToolbarHandlers } from "./hooks/useMailToolbarHandlers";
+import { useMails } from "./hooks/useMails";
+import { useTheme } from "../utils/useTheme";
+import { useRequireAuth } from "../utils/useAutoLogin";
 import SkeletonEmail from "../components/loading/SkeletonEmail";
 import useIsMobile from "../utils/useIsMobile";
 
-
 const MainPage = () => {
-    // ensure the user is authenticated before rendering
     useRequireAuth();
 
     const isMobile = useIsMobile();
-    const {theme, toggleTheme} = useTheme('dark');
+    const { theme, toggleTheme } = useTheme("dark");
     const location = useLocation();
 
-    // views change hooks
-    const [inboxType, setInboxType] = useState(location.state?.inboxType || 'incoming');
-    const [showCompose, setShowCompose] = useState(false);
-    const [showSidebar, setShowSidebar] = useState(() => !isMobile);
+    const [inboxType, setInboxType] = useState(
+        location.state?.inboxType || "incoming"
+    );
+    const [composes, setComposes] = useState([]);
+
+    const handleOpenDraft = draftEmail => {
+        setComposes(cs => {
+            if (cs.length >= 2) return cs;
+            return [...cs, { id: draftEmail.id, offset: cs.length, draftMail: draftEmail }];
+        });
+    };
+
+    const handleComposeClick = () => {
+        setComposes(cs => {
+            if (cs.length >= 2) return cs;
+            return [...cs, { id: Date.now(), offset: cs.length }];
+        });
+    };
+
+    const handleCloseCompose = id => {
+        setComposes(cs =>
+            cs
+                .filter(c => c.id !== id)
+                .map((c, i) => ({ ...c, offset: i }))
+        );
+    };
 
     const {
         emails,
@@ -40,7 +60,6 @@ const MainPage = () => {
         loading
     } = useMails(inboxType);
 
-    // selected mail ids logic
     const [selectedMails, setSelectedMails] = useState(new Set());
     const allSelected = selectedMails.size === emails.length;
     const anySelected = selectedMails.size > 0;
@@ -52,63 +71,33 @@ const MainPage = () => {
         refreshMails
     );
 
-    // handles mails selection
-    const handleSelect = (mail, isChecked) => {
+    const handleSelect = (mail, checked) => {
         setSelectedMails(prev => {
             const copy = new Set(prev);
-            if (isChecked) copy.add(mail);
-            else copy.delete(mail);
+            checked ? copy.add(mail) : copy.delete(mail);
             return copy;
         });
     };
 
-    // checks inbox type change
+    const [showSidebar, setShowSidebar] = useState(() => !isMobile);
+    useEffect(() => setShowSidebar(!isMobile), [isMobile]);
+
     useEffect(() => {
         if (location.state?.inboxType) {
             setInboxType(location.state.inboxType);
         }
     }, [location.state?.inboxType]);
 
-    // handlers for mail compose
-    const handleComposeClick = () => setShowCompose(true);
-    const handleCancelCompose = () => setShowCompose(false);
-    const handleSendCompose = mail => {
-        // TODO: call your send-mail API
-        // then close and refresh:
-        setShowCompose(false);
-        refreshMails();
-    };
-
-    // side menu un/show update
-    useEffect(() => {
-        setShowSidebar(!isMobile);
-    }, [isMobile]);
-
-    // disable mail list scroll when showing side menu on smaller screens
-    useEffect(() => {
-        if (isMobile) {
-            document.body.style.overflow = showSidebar ? 'hidden' : 'auto';
-        }
-    }, [showSidebar, isMobile]);
-
-    // regular screen
     return (
         <div className={`main-page ${theme}`}>
-            {/* ---- TOP MENU ---- */}
-            <div className="row mb-3">
-                <div className="col-12">
-                    <TopMenu
-                        theme={theme}
-                        toggleTheme={toggleTheme}
-                        inboxType={inboxType}
-                        setShowSidebar={setShowSidebar}
-                    />
-                </div>
-            </div>
+            <TopMenu
+                theme={theme}
+                toggleTheme={toggleTheme}
+                inboxType={inboxType}
+                setShowSidebar={setShowSidebar}
+            />
 
-            {/* ---- MAIN LAYOUT ---- */}
             <div className="main-content row g-0">
-                {/* ---- SIDE MENU ---- */}
                 <div className="col-md-2 p-0">
                     <EmailSidebar
                         theme={theme}
@@ -119,56 +108,57 @@ const MainPage = () => {
                         setShowSidebar={setShowSidebar}
                     />
                 </div>
-                {/* ---- SIDEBAR BACKDROP FOR SMALL SCREENS ---- */}
-                {isMobile && showSidebar && (
-                    <div className="sidebar-backdrop" onClick={() => setShowSidebar(false)} />
-                )}
 
-
-                {/* ---- MAIL LIST CONTAINER ---- */}
                 <div className="col-md-10 p-0">
-                    <div className={`mail-list-container ${theme}`}>
-                        {/* ---- TOOLBAR ---- */}
-                        <ToolBar
-                            theme={theme}
-                            inboxType={inboxType}
-                            allSelected={allSelected}
-                            anySelected={anySelected}
-                            btnHandlers={handlers}
-                            total={total}
-                            page={page}
-                            hasNextPage={hasNextPage}
-                            hasPrevPage={hasPrevPage}
-                            goToNextPage={goToNextPage}
-                            goToPrevPage={goToPrevPage}
-                        />
-                        {/* ---- loading screen ---- */}
-                        {loading && (<SkeletonEmail rows={10}/>)}
-                        {/* ---- ACTUAL MAIL ROWS ---- */}
-                        {!loading && emails.map(email => (
+                    <ToolBar
+                        theme={theme}
+                        inboxType={inboxType}
+                        allSelected={allSelected}
+                        anySelected={anySelected}
+                        btnHandlers={handlers}
+                        total={total}
+                        page={page}
+                        hasNextPage={hasNextPage}
+                        hasPrevPage={hasPrevPage}
+                        goToNextPage={goToNextPage}
+                        goToPrevPage={goToPrevPage}
+                    />
+                    {loading ? (
+                        <SkeletonEmail rows={10} />
+                    ) : (
+                        emails.map(email => (
                             <MailRow
                                 key={email.id}
                                 theme={theme}
                                 email={email}
                                 inboxType={inboxType}
-                                isSelected={selectedMails.has(email.id)}
+                                isSelected={selectedMails.has(email)}
                                 onSelect={handleSelect}
                                 onUpdate={refreshMails}
+                                onOpenDraft={handleOpenDraft}
                             />
-                        ))}
-                    </div>
+                        ))
+                    )}
                 </div>
             </div>
 
-            {/* ---- COMPOSE WINDOW ---- */}
-            {showCompose && (
+            {composes.map(c => (
                 <ComposeEmail
-                    onCancel={handleCancelCompose}
-                    onSend={handleSendCompose}
+                    key={c.id}
+                    theme={theme}
+                    offset={c.offset}
+                    draftMail={c.draftMail}
+                    onCancel={() =>{ handleCloseCompose(c.id);
+                    refreshMails(c.id);}}
+                    onSend={() => {
+                        handleCloseCompose(c.id);
+                        refreshMails();
+                    }}
                 />
-            )}
+            ))}
+
         </div>
     );
 };
 
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/frontend/src/main_page/hooks/useMails.js b/frontend/src/main_page/hooks/useMails.js
index c33afc91..7135ceda 100644
--- a/frontend/src/main_page/hooks/useMails.js
+++ b/frontend/src/main_page/hooks/useMails.js
@@ -1,35 +1,41 @@
+// frontend/src/hooks/useMails.js
+
 import { useState, useEffect, useCallback } from 'react';
-import {getMailsByType} from "../../api/mailApi";
-import {MAILS_PER_PAGE} from "../../utils/constants";
+import { getMailsByType, getMailsByLabel } from "../../api/mailApi";
+import { MAILS_PER_PAGE } from "../../utils/constants";
+
 
 /**
- * Custom hook to fetch and refresh "mails" for a given userId and inboxType.
+ * Custom hook to fetch and refresh mails for a given inboxType or label filter.
  *
- * @param {'all'|'incoming'|'sent'|'draft'|'star'|'trash'} inboxType
- * @returns {{
- *   emails: Array,
- *   loading: boolean,
- *   error: Error|null,
- *   refreshMails: () => Promise<void>
- * }}
+ * @param {'all'|'incoming'|'sent'|'draft'|'star'|'trash'|`label:${string}`} inboxType
  */
 export function useMails(inboxType) {
-    const [emails, setEmails] = useState([]);
-    const [total, setTotal] = useState(0);
-    const [page, setPage] = useState(1);
-
+    const [emails, setEmails]   = useState([]);
+    const [total, setTotal]     = useState(0);
+    const [page, setPage]       = useState(1);
     const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
+    const [error, setError]     = useState(null);
 
-    // Memoize refreshMails so it doesn’t get re-created on every render
+    /**
+     * Fetch mails from the server.
+     * If inboxType starts with "label:", calls getMailsByLabel.
+     */
     const refreshMails = useCallback(async () => {
         setLoading(true);
         setError(null);
 
         try {
-            const {mails, total} = await getMailsByType(inboxType, page);
-            setEmails(mails);
-            setTotal(total);
+            let result;
+            if (inboxType.startsWith('label:')) {
+                // strip off "label:" prefix
+                const labelName = inboxType.slice('label:'.length);
+                result = await getMailsByLabel(labelName, page);
+            } else {
+                result = await getMailsByType(inboxType, page);
+            }
+            setEmails(result.mails);
+            setTotal(result.total);
         } catch (err) {
             setError(err);
         } finally {
@@ -37,29 +43,20 @@ export function useMails(inboxType) {
         }
     }, [inboxType, page]);
 
-    // Fetch initially, and whenever userId or inboxType changes
+    // initial fetch & whenever inboxType or page changes
     useEffect(() => {
         refreshMails();
     }, [inboxType, refreshMails]);
 
     const hasNextPage = page * MAILS_PER_PAGE < total;
     const hasPrevPage = page > 1;
-    // update the page to be the next one
-    const goToNextPage = () => {
-        if (hasNextPage)
-            setPage(p => p + 1);
-    }
-    //update the page to be the previous one
-    const goToPrevPage = () => {
-        if (hasPrevPage)
-            setPage(p => p - 1);
-    }
-    const resetPage = () => {
-        setPage(1);
-    }
-    // Reset page to 1 when inboxType changes
+
+    const goToNextPage = () => { if (hasNextPage) setPage(p => p + 1); };
+    const goToPrevPage = () => { if (hasPrevPage) setPage(p => p - 1); };
+
+    // reset to page 1 when inboxType changes
     useEffect(() => {
-        resetPage();
+        setPage(1);
     }, [inboxType]);
 
     return {
@@ -74,4 +71,4 @@ export function useMails(inboxType) {
         error,
         refreshMails
     };
-}
+}
\ No newline at end of file
diff --git a/frontend/src/main_page/mail_row/MailRow.jsx b/frontend/src/main_page/mail_row/MailRow.jsx
index 567d9be3..1e35c01e 100644
--- a/frontend/src/main_page/mail_row/MailRow.jsx
+++ b/frontend/src/main_page/mail_row/MailRow.jsx
@@ -1,62 +1,70 @@
-import "./MailRow.css"
-import {formatDate} from "../../utils/formatDate";
-import {useNavigate} from "react-router-dom";
+import "./MailRow.css";
+import { formatDate } from "../../utils/formatDate";
+import { useNavigate } from "react-router-dom";
 import StarButton from "../../components/StarButton/StarButton";
-import {markMailAsRead} from "../../utils/mailUtils";
-import useIsMobile from "../../utils/useIsMobile";
-
+import {markMailAsRead, stripHtml} from "../../utils/mailUtils";
+//import useIsMobile from "../../utils/useIsMobile";
 
 /**
- *  @prop {String} theme dark or light according to user preference
- *  @prop {Object} email  email object
- *  @prop {string} inboxType what type of inbox we see this mail from (e.g. spam, trash etc)
- *  @prop {boolean} isSelected whether this row is currently checked
- *  @prop {function} onSelect when marking a mail as selected for mass actions on them
- *  @prop {function} onUpdate when updating a mail object this function will trigger
+ * @prop theme       dark or light
+ * @prop email       email object
+ * @prop inboxType   e.g. "incoming","draft",etc.
+ * @prop isSelected  boolean for checkbox
+ * @prop onSelect    (mail,checked)=>void
+ * @prop onUpdate    ()=>void
+ * @prop onOpenDraft (mail)=>void
  */
-const MailRow = ({theme, email, inboxType, isSelected, onSelect, onUpdate}) => {
-
-    // handling clicking on a mail to read it
+const MailRow = ({
+                     theme,
+                     email,
+                     inboxType,
+                     isSelected,
+                     onSelect,
+                     onUpdate,
+                     onOpenDraft
+                 }) => {
     const navigate = useNavigate();
+
     const handleMailOpen = async () => {
         await markMailAsRead(email, onUpdate);
-        navigate(`/mails/${email.id}`, {state: {inboxType}});
-    }
+        if (inboxType === "draft" && onOpenDraft) {
+            onOpenDraft(email);
+        } else {
+            navigate(`/mails/${email.id}`, {state: {inboxType}});
+        }
+    };
 
     return (
         <div className={`mail-row-item ${theme} ${email.isRead ? "read" : "unread"}`}>
-
             <div className="row-top-controls">
                 <input
                     type="checkbox"
                     checked={isSelected}
-                    onChange={(e) => onSelect(email, e.target.checked)}
-                    onClick={(e) => e.stopPropagation()}
+                    onChange={e => onSelect(email, e.target.checked)}
+                    onClick={e => e.stopPropagation()}
                 />
                 <StarButton email={email} theme={theme} onToggle={onUpdate}/>
             </div>
 
-            <div className={`mail-row-metadata`} onClick={handleMailOpen}>
+            <div className="mail-row-metadata" onClick={handleMailOpen}>
                 <div className="email-content">
                     <div className={`email-sender ${theme}`}>{email.from.fullName}</div>
-                    <div className="email-main-line">
-                        <div className="email-title-body">
-                            <div className={`email-subject ${theme}`}>{email.subject}</div>
-                            <div className={`email-preview ${theme}`}>{email.body}</div>
-                        </div>
+                    <div className="email-title-body">
+                        <div className={`email-subject ${theme}`}>{email.subject}</div>
+                        <div className={`email-preview ${theme}`}>{stripHtml(email.body)}</div>
                     </div>
                 </div>
-
                 <div className="d-flex flex-row align-items-center gap-1">
-                    {email.files && email.files.length > 0 && (
+                    {email.files?.length > 0 && (
                         <i className={`bi bi-paperclip icon ${theme}`}/>
                     )}
                     <i className={`bi bi-clock icon ${theme}`}/>
-                    <div className={`email-time ${theme}`}>{formatDate(email.sentAt || email.createdAt)}</div>
+                    <div className={`email-time ${theme}`}>
+                        {formatDate(email.sentAt || email.createdAt)}
+                    </div>
                 </div>
             </div>
         </div>
     );
 }
-
-export default MailRow;
\ No newline at end of file
+    export default MailRow;
diff --git a/frontend/src/reading_page/ReadingPage.js b/frontend/src/reading_page/ReadingPage.js
index c46a0ef5..b4019f8f 100644
--- a/frontend/src/reading_page/ReadingPage.js
+++ b/frontend/src/reading_page/ReadingPage.js
@@ -8,6 +8,8 @@ import SenderDetails from "./SenderDetails/SenderDetails";
 import {formatFullTime} from "../utils/formatDate";
 import SkeletonEmail from "../components/loading/SkeletonEmail";
 import FileList from "./Attachments/FileList";
+import {addBlankToLinks} from "../utils/htmlUtils";
+import ComposeEmail from "../main_page/ComposeEmail/ComposeEmail";
 
 const ReadingPage = () => {
 
@@ -16,11 +18,13 @@ const ReadingPage = () => {
     const {theme, toggleTheme} = useTheme();
     const [email, setEmail] = useState(null);
     const [loading, setLoading] = useState(true);
-
+    // Compose window for reply/forward
+    const [composeProps, setComposeProps] = useState(null);
+    // Read inboxType from location state
     const location = useLocation();
-    const {inboxType} = location.state;
+    const { inboxType } = location.state || {};
 
-    // update the mail shown
+    // Load the mail when ID changes
     useEffect(() => {
         const loadEmail = async () => {
             try {
@@ -32,63 +36,98 @@ const ReadingPage = () => {
                 console.error("Error fetching email: ", error)
             }
         }
-        loadEmail().then();
-    }, [id])
+        loadEmail();
+    }, [id]);
 
+    // Handle reply: open ComposeEmail pre-filled with reply format
     const onReplyClick = () => {
-        /// TODO reply to mail
-        alert("reply");
-    }
+        if (!email) return;
+        setComposeProps({
+            recipients: [email.from?.mail || ''],
+            subject: email.subject ? "Re: " + email.subject : "",
+            body: `<br><br>On ${formatFullTime(email.sentAt || email.createdAt)}, ${email.from?.mail || ''} wrote:<br>${email.body}`,
+            attachments: [],
+            isReply: true
+        });
+    };
 
+    // Handle forward: open ComposeEmail pre-filled with forward format
     const onForwardClick = () => {
-        /// TODO forward mail to someone
-        alert("forward");
-    }
+        if (!email) return;
+        setComposeProps({
+            recipients: [],
+            subject: email.subject ? "Fwd: " + email.subject : "",
+            body: `<br><br>---------- Forwarded message ----------<br>
+<b>From:</b> ${email.from?.mail || ''}<br>
+<b>Date:</b> ${formatFullTime(email.sentAt || email.createdAt)}<br>
+<b>Subject:</b> ${email.subject}<br><br>
+${email.body}`,
+            attachments: email.files || [],
+            isForward: true
+        });
+    };
 
+    // Allow updating the "starred" state locally
     const handleStarToggle = (newStarValue) => {
-        setEmail(prev => ({...prev, isStarred: newStarValue}));
+        setEmail(prev => ({ ...prev, isStarred: newStarValue }));
     };
 
     return (
         <div className={`email-view ${theme}`}>
             {/* Header */}
             <ReadingHeader theme={theme} toggleTheme={toggleTheme} email={email} inboxType={inboxType}/>
-            {/* content */}
+            {/* Main content */}
             {loading ? (
-                    <SkeletonEmail/>
-                ) :
-                (
-                    <div className="email-view-content">
-                        <h1 className="email-view-title">{email.subject}</h1>
-                        {/* sender's info */}
-                        <div className={`email-view-meta ${theme}`}>
-                            <SenderDetails email={email} theme={theme} onUpdate={handleStarToggle}/>
-                            <div className="email-date">{formatFullTime(email.sentAt || email.createdAt)}</div>
-                        </div>
-                        {/* main mail's text */}
-                        <div className="email-body" dangerouslySetInnerHTML={{__html: email.body}}/>
-                        <div className="separator"></div>
-                        {/* Show file attachments if there are any */}
-                        {email.files && email.files.length > 0 && (
-                            <div>
-                                <h6 style={{textAlign: "start", marginBottom: 0}}>Attachments:</h6>
-                                <FileList files={email.files} theme={theme}/>
-                            </div>
-                        )}
-
-                        {/* actions related to replying */}
-                        <div className="reply-actions">
-                            <button className="reply-button primary" title="Reply" onClick={onReplyClick}>
-                                <i className="bi bi-reply"/>
-                                Reply
-                            </button>
-                            <button className="reply-button secondary" title="forward" onClick={onForwardClick}>
-                                <i className="bi bi-arrow-90deg-right"></i>
-                                Forward
-                            </button>
+                <SkeletonEmail />
+            ) : (
+                <div className="email-view-content">
+                    <h1 className="email-view-title">{email.subject}</h1>
+                    {/* Sender info and date */}
+                    <div className={`email-view-meta ${theme}`}>
+                        <SenderDetails email={email} theme={theme} onUpdate={handleStarToggle}/>
+                        <div className="email-date">{formatFullTime(email.sentAt || email.createdAt)}</div>
+                    </div>
+                    {/* Email body with safe links */}
+                    <div
+                        className="email-body"
+                        dangerouslySetInnerHTML={{ __html: addBlankToLinks(email.body) }}
+                    />
+                    <div className="separator"></div>
+                    {/* Attachments if any */}
+                    {email.files && email.files.length > 0 && (
+                        <div>
+                            <h6 style={{ textAlign: "start", marginBottom: 0 }}>Attachments:</h6>
+                            <FileList files={email.files} theme={theme}/>
                         </div>
+                    )}
+                    {/* Reply/forward buttons */}
+                    <div className="reply-actions">
+                        <button className="reply-button primary" title="Reply" onClick={onReplyClick}>
+                            <i className="bi bi-reply"/>
+                            Reply
+                        </button>
+                        <button className="reply-button secondary" title="forward" onClick={onForwardClick}>
+                            <i className="bi bi-arrow-90deg-right"></i>
+                            Forward
+                        </button>
                     </div>
-                )}
+                </div>
+            )}
+
+            {/* Compose window for reply/forward */}
+            {composeProps && (
+                <ComposeEmail
+                    onCancel={() => setComposeProps(null)}
+                    onSend={() => setComposeProps(null)}
+                    offset={0}
+                    draftMail={{
+                        sentTo: composeProps.recipients.map(mail => ({ mail })),
+                        subject: composeProps.subject,
+                        body: composeProps.body,
+                        attachments: composeProps.attachments
+                    }}
+                />
+            )}
         </div>
     );
 }
diff --git a/frontend/src/utils/composeUtils.js b/frontend/src/utils/composeUtils.js
new file mode 100644
index 00000000..9b6daafc
--- /dev/null
+++ b/frontend/src/utils/composeUtils.js
@@ -0,0 +1,53 @@
+import { convertToBase64 } from './files'
+
+/**
+ * Wrap document.execCommand and re-focus the editor
+ */
+export function execCommand(editorRef, cmd, arg = null) {
+    document.execCommand(cmd, false, arg)
+    editorRef.current.focus()
+}
+
+/**
+ * Read a file as dataURL and insert into editor
+
+export async function insertInlineImage(editorRef, e) {
+    const file = e.target.files[0]
+    if (!file) return
+    const dataUrl = await convertToBase64(file)
+    document.execCommand('insertImage', false, dataUrl)
+    editorRef.current.focus()
+    e.target.value = ''
+}
+ */
+/**
+ * Handles file input and updates attachments list by using base64.
+ * Rejects files larger than 5MB.
+ *
+ * @param {(attList: any[]) => void} setAttachments
+ * @param {React.ChangeEvent<HTMLInputElement>} e
+ */
+export async function handleFileAttachments(setAttachments, e) {
+    const files = Array.from(e.target.files || []);
+    const MAX_SIZE_MB = 5;
+    const validFiles = files.filter(f => f.size <= MAX_SIZE_MB * 1024 * 1024);
+
+    const newAttachments = await Promise.all(
+        validFiles.map(async file => {
+            const base64 = await convertToBase64(file);
+            return {
+              name: file.name,
+              data: base64
+            };
+        })
+    );
+
+    setAttachments(prev => [...prev, ...newAttachments]);
+
+    const rejected = files.length - validFiles.length;
+    if (rejected > 0) {
+        alert(`${rejected} max file size is 5MB`);
+    }
+    // Optional: reset file input so same file can be re-attached if removed
+    e.target.value = '';
+}
\ No newline at end of file
diff --git a/frontend/src/utils/files.js b/frontend/src/utils/files.js
index 03aea995..8a6946d4 100644
--- a/frontend/src/utils/files.js
+++ b/frontend/src/utils/files.js
@@ -1,20 +1,27 @@
+// frontend/src/utils/files.js
+
 /**
- * Converts a file to base64 encoded string in order to upload and store in the backend.
- * @param {File} file file to convert
- * @returns {Promise<string>} Base64-encoded data URL (e.g. `"data:image/jpeg;base64,..."`)
+ * Convert any File into a Base64 data URL.
+ * @param {File} file
+ * @returns {Promise<string>} e.g. "data:image/png;base64,iVBORw0KG…"
  */
-export function convertToBase64 (file) {
+export function convertToBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
-        reader.onload = () => resolve(reader.result); // this is the base64 string
+        reader.onload  = () => resolve(reader.result);
         reader.onerror = reject;
         reader.readAsDataURL(file);
     });
 }
 
-export function getFileNamesFromMail(mail) {
-    if (!mail || !Array.isArray(mail.files)) {
-        return [];
-    }
-    return mail.files.map(file => file.name);
+/**
+ * Given a mail object with mail attachments array,
+ * return just the original filenames.
+ *
+ * @param {{attachments?: Array<{originalName?:string,name?:string}>}} mail
+ * @returns {string[]}
+ */
+export function getFilenamesFromMail(mail) {
+    if (!mail || !Array.isArray(mail.attachments)) return [];
+    return mail.attachments.map(att => att.originalName || att.name);
 }
diff --git a/frontend/src/utils/htmlUtils.js b/frontend/src/utils/htmlUtils.js
new file mode 100644
index 00000000..bd1463dd
--- /dev/null
+++ b/frontend/src/utils/htmlUtils.js
@@ -0,0 +1,20 @@
+// src/utils/htmlUtils.js
+
+/**
+ * Ensures that all <a> tags in the HTML open in a new tab with the proper rel attribute for security.
+ * @param {string} html - The HTML string to process.
+ * @returns {string} - The processed HTML string.
+ */
+export function addBlankToLinks(html) {
+    if (!html) return html;
+    // Add target and rel to any <a> without a target, and make sure rel exists if target exists.
+    return html
+        .replace(/<a\s(?![^>]*target=)[^>]*href=["'][^"']+["'][^>]*>/gi, (aTag) =>
+            aTag.replace('<a ', '<a target="_blank" rel="noopener noreferrer" ')
+        )
+        .replace(/<a\s([^>]*?)target=(["']).*?\2([^>]*)>/gi, (aTag) => {
+            // If rel is missing, add it
+            if (/rel\s*=/.test(aTag)) return aTag;
+            return aTag.replace('>', ' rel="noopener noreferrer">');
+        });
+}
diff --git a/frontend/src/utils/mailUtils.js b/frontend/src/utils/mailUtils.js
index 865300bd..00bade54 100644
--- a/frontend/src/utils/mailUtils.js
+++ b/frontend/src/utils/mailUtils.js
@@ -17,3 +17,14 @@ export const markMailAsRead = async (mail, onUpdate) => {
         console.error("Failed to mark mail as read:", err);
     }
 };
+
+/**
+ * Removes HTML tags from a text
+ * @param html string containing HTML tags
+ * @returns {string|string} a string without any HTML tags or code
+ */
+export const stripHtml = (html) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    return tempDiv.textContent || tempDiv.innerText || "";
+};
\ No newline at end of file
diff --git a/web_server/app.js b/web_server/app.js
index 56b8a859..7d45f2b7 100644
--- a/web_server/app.js
+++ b/web_server/app.js
@@ -3,7 +3,7 @@ const cors = require("cors");
 
 const app = express()
 
-app.use(express.json());
+app.use(express.json({limit: '10mb'}));
 app.use(cors({ origin: "http://localhost:3000" }));
 //app.use(cors());
 
diff --git a/web_server/controllers/labels.js b/web_server/controllers/labels.js
index f76528c7..6233cdc4 100644
--- a/web_server/controllers/labels.js
+++ b/web_server/controllers/labels.js
@@ -2,158 +2,73 @@ const Labels = require('../models/labels');
 
 /**
  * GET /api/labels
- * @returns a pretty-printed JSON array of all labels with newlines and indentation.
+ * Return all labels (flat list), including sublabels, for the authenticated user.
+ * Responds: [{ id, name, parent }]
  */
-const getAllLabels = (req, res) => {
-    const rawLabels = Labels.getAllLabels();
-    const cleanLabels = rawLabels.map(label => ({
-        id: label.id,
-        name: label.name
-    }));
-
-    return res
-        .status(200)
-        .set('Content-Type', 'application/json; charset=utf-8')
-        .send(JSON.stringify(cleanLabels, null, 2));
+exports.getAllLabels = (req, res) => {
+    const all = Labels.getAllLabels();
+    // Only send fields required by frontend; "parent" is id of parent label (or null for root)
+    res.status(200).json(all.map(l => ({
+        id: l.id,
+        name: l.name,
+        parent: l.parent
+    })));
 };
 
 /**
  * POST /api/labels
- * Creates a new label.
- * @returns 201 Created with Location header only
- * Errors:
- *   - 400 Bad Request if name is missing
- *   - 400 Bad Request if creation fails
+ * Create a new root-level label for the user.
+ * Request body: { name }
+ * Responds: created label object, 201 status.
  */
-const createNewLabel = (req, res) => {
-    const userId = Number(req.user.id);
-    const labelName = req.body.name;
-
-    if (!labelName) {
-        return res
-            .status(400)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Name is required' },
-                null,
-                2
-            ));
-    }
-
-    const newLabel = Labels.createNewLabel(userId, labelName);
-    if (!newLabel) {
-        return res
-            .status(400)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Failed to create label' },
-                null,
-                2
-            ));
-    }
-
-    return res
-        .status(201)
-        .location(`/api/labels/${newLabel.id}`)
-        .end();
+exports.createNewLabel = (req, res) => {
+    const userId = +req.user.id; // User ID from authentication middleware
+    const { name } = req.body;
+    if (!name) return res.status(400).json({ error: 'Name required' });
+    const lab = Labels.createNewLabel(userId, name);
+    res.status(201).location(`/api/labels/${lab.id}`).json(lab);
 };
 
 /**
- * GET /api/labels/:id
- * @returns the label object { id, name } pretty-printed, or 404 if not found.
+ * POST /api/labels/:id/sublabel
+ * Create a new sublabel under a parent label (parent ID in URL).
+ * Request body: { name }
+ * Responds: created sublabel object, or 404 if parent not found.
  */
-const getLabelById = (req, res) => {
-    const labelId = Number(req.params.id);
-    const label = Labels.getLabelById(labelId);
-
-    if (!label) {
-        return res
-            .status(404)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Label not found' },
-                null,
-                2
-            ));
-    }
-
-    return res
-        .status(200)
-        .set('Content-Type', 'application/json; charset=utf-8')
-        .send(JSON.stringify(
-            { id: label.id, name: label.name },
-            null,
-            2
-        ));
+exports.createSublabel = (req, res) => {
+    const userId = +req.user.id;
+    const parentId = +req.params.id;
+    const { name } = req.body;
+    if (!name) return res.status(400).json({ error: 'Name required' });
+    // Model should handle parent existence/ownership
+    const lab = Labels.createSublabel(userId, parentId, name);
+    if (!lab) return res.status(404).json({ error: 'Parent not found' });
+    res.status(201).location(`/api/labels/${lab.id}`).json(lab);
 };
 
 /**
  * PATCH /api/labels/:id
- * Updates the name of an existing label. Expects JSON body { "name": "<newName>" }.
- * @returns 204 No Content on success.
- * Errors:
- *   - 400 Bad Request if name is missing
- *   - 404 Not Found if label does not exist
+ * Rename an existing label by ID.
+ * Request body: { name }
+ * Responds: 204 on success, 404 if not found.
  */
-const editLabel = (req, res) => {
-    const labelId = Number(req.params.id);
-    const name = req.body.name;
-
-    if (!name) {
-        return res
-            .status(400)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Name is required to update' },
-                null,
-                2
-            ));
-    }
-
-    const updated = Labels.editLabel(labelId, name);
-    if (!updated) {
-        return res
-            .status(404)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Label not found' },
-                null,
-                2
-            ));
-    }
-
-    return res.status(204).end();
+exports.editLabel = (req, res) => {
+    const id = +req.params.id;
+    const { name } = req.body;
+    if (!name) return res.status(400).json({ error: 'Name required' });
+    const ok = Labels.editLabelById(id, name);
+    if (!ok) return res.status(404).json({ error: 'Not found' });
+    res.status(204).end();
 };
 
 /**
  * DELETE /api/labels/:id
- * Deletes an existing label by ID.
- * @returns 204 No Content on success.
- * Errors:
- *   - 404 Not Found if label does not exist
+ * Delete label (and, usually, its sublabels) by ID.
+ * Responds: 204 on success, 404 if not found.
  */
-const deleteLabel = (req, res) => {
-    const labelId = Number(req.params.id);
-    const success = Labels.deleteLabel(labelId);
-
-    if (!success) {
-        return res
-            .status(404)
-            .set('Content-Type', 'application/json; charset=utf-8')
-            .send(JSON.stringify(
-                { error: 'Label not found' },
-                null,
-                2
-            ));
-    }
-
-    return res.status(204).end();
-};
-
-module.exports = {
-    getAllLabels,
-    createNewLabel,
-    getLabelById,
-    editLabel,
-    deleteLabel
+exports.deleteLabel = (req, res) => {
+    const id = +req.params.id;
+    if (!Labels.deleteLabelById(id))
+        return res.status(404).json({ error: 'Not found' });
+    res.status(204).end();
 };
diff --git a/web_server/controllers/mails.js b/web_server/controllers/mails.js
index b6c8cabe..5b26ba71 100644
--- a/web_server/controllers/mails.js
+++ b/web_server/controllers/mails.js
@@ -2,7 +2,7 @@ const Mails = require('../models/mails');
 const Blacklist = require('../models/blacklist');
 const {extractUrls} = require("../utils/mails");
 const {convertMailsToIds, usersToFullElement} = require("../utils/users");
-const {convertLabelsToIds, labelsToFullElement} = require("../utils/labels");
+const {convertLabelsToIds, labelsToFullElement, mailLabelNames} = require("../utils/labels");
 
 /**
  * Gets the last 50 mails of a user, ordered by the most recent (first) to least recent (last)
@@ -19,9 +19,17 @@ const getLastMailsOrdered = (req, res) => {
         return res.status(400).json({error: 'User not authenticated - failed fetching last 50 mails'});
     const inboxType = req.query.inboxType || 'all';
     const page = Number(req.query.page) || 1;
-    const limit = Number(req.query.limit) || 50;
-    // limit is 50 according to instructions
-    const {paged, total} = Mails.getUserMails(userId, limit, inboxType, page);
+    const limit = Number(req.query.limit) || 50; // limit is 50 according to instructions
+
+    const labelIdFilter = Number(req.query.label);
+    let {paged, total} = Mails.getUserMails(userId, limit, inboxType, page);
+
+    // Filter by label id if provided
+    if (!isNaN(labelIdFilter)) {
+        paged = paged.filter(mail => mail.labels?.includes(labelIdFilter));
+        total = paged.length;
+    }
+
     // replace in the mails the user ids and labels ids with user and label elements so we can show names and emails
     const fullMails = paged.map(m => {
         return {
@@ -93,11 +101,11 @@ const createNewMail = async (req, res) => {
         return res.status(400).json({error: 'User not authenticated - failed creating a new mail'});
     try {
         // Fetch the mail object's attributes from the request, for later use
-        const {subject, body, sentTo = [], saveAsDraft = false} = req.body;
+        const {subject, body, sentTo = [], saveAsDraft = false, files = []} = req.body;
         const sentToIds = convertMailsToIds(sentTo);
         // handle this as a draft
         if (saveAsDraft) {
-            const draftMail = Mails.saveDraft(userId, subject, body, sentToIds)
+            const draftMail = Mails.saveDraft(userId, subject, body, sentToIds, files)
             return res.status(201).location(`/mails/${draftMail.id}`).json(draftMail);
         }
         // handle this as sending a mail
@@ -107,7 +115,7 @@ const createNewMail = async (req, res) => {
         if (blacklisted)
             return res.status(403).json({error: 'Mail contains blacklisted URLs - failed creating a new mail'});
         // No blacklisted URLs found, send the new mail
-        const newMail = Mails.sendNewMail(userId, subject, body, sentToIds);
+        const newMail = Mails.sendNewMail(userId, subject, body, sentToIds, files);
         if (newMail === false)
             return res.status(500).json({error: 'Failed to create new mail'});
         return res.status(201).location(`/mails/${newMail.id}`).json(newMail);
diff --git a/web_server/controllers/users.js b/web_server/controllers/users.js
index fa650f03..f512a863 100644
--- a/web_server/controllers/users.js
+++ b/web_server/controllers/users.js
@@ -1,24 +1,26 @@
 const Users = require('../models/users');
-const {signToken} = require("../utils/authentication");
-
+const { signToken } = require("../utils/authentication");
 
 /**
- * Signs up a new user to the system, if a user with the same already exists it will not create a new one.
- * @param req request
- * @param res response
+ * Signs up a new user to the system, if a user with the same
+ * mail already exists it will not create a new one.
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
  * @returns
- * - code 201 and the new user json object if created successfully
- * - code 400 if failed because of an existing mail or a missing attribute
+ *   - 201 and the new user + token if created successfully
+ *   - 400 if mail already exists or a required field is missing
  */
 const signupUser = async (req, res) => {
-    const {fullName, mail, password, dateOfBirth, image} = req.body;
+    const { fullName, mail, password, dateOfBirth, image } = req.body;
 
     for (const field of ['fullName', 'mail', 'password', 'dateOfBirth']) {
         if (!req.body[field]) {
             return res.status(400).json({ error: `${field} is required` });
         }
     }
-    // Don't create a new user if the mail address is taken already
+
+    // Don't create if the mail is already taken
     if (Users.userExist(mail)) {
         return res.status(400).json({ error: 'mail already exists' });
     }
@@ -39,86 +41,134 @@ const signupUser = async (req, res) => {
 };
 
 /**
- * Get a user by their id
- * @param req request
- * @param res response
+ * Get a user by their id.
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
  * @returns
- * - code 200 and the user json object (without password) if found
- * - code 404 if user wasn't found
- * - code 400 if got an invalid id
+ *   - 200 and the user object (without password)
+ *   - 400 if invalid id
+ *   - 404 if no user found
  */
 const getUser = (req, res) => {
     const id = Number(req.params.id);
     if (!id || isNaN(id)) {
         return res.status(400).json({ error: 'Invalid user ID' });
     }
+
     const user = Users.getUserById(id);
     if (!user) {
         return res.status(404).json({ error: 'User not found' });
     }
+
     const { password, ...safeUser } = user;
     return res.status(200).json(safeUser);
 };
 
 /**
- * Login the user to the system by using mail and password.
- * @param req request
- * @param res response
+ * Log in the user using mail and password.
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
  * @returns
- * - code 200 and the JWT token if logged in successfully
- * - code 401 if input has wrong mail or password
- * - code 400 if missing mail or password (or both)
+ *   - 200 and a JWT token if credentials are correct
+ *   - 400 if mail or password missing
+ *   - 401 if wrong mail/password
  */
 const loginUser = async (req, res) => {
-    // Get the mail and password from the body (according to instructions)
-    const {mail, password} = req.body;
-    if (!mail || !password)
-        return res.status(400).json({error: 'mail and password required'});
+    const { mail, password } = req.body;
+    if (!mail || !password) {
+        return res.status(400).json({ error: 'mail and password required' });
+    }
 
-    // Check if the mail and password match the saved ones in order to log in
     const user = Users.isAuthorizeUser(mail, password);
-    if (!user)
-        return res.status(401).json({error: 'wrong mail or password'});
+    if (!user) {
+        return res.status(401).json({ error: 'wrong mail or password' });
+    }
 
     const token = signToken(user);
-    return res.status(200).json({token: token});
+    return res.status(200).json({ token });
 };
 
 /**
- * Updates user's attributes (password and/or image)
- * @param req request
- * @param res response
+ * Edit user's image.
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
  * @returns
- * - code 200 with the updated user object if updated successfully
- * - code 400 if received invalid input
- * - code 404 if the user doesn't exist
+ *   - 200 and the updated user if successful
+ *   - 400 if invalid user ID or missing/invalid image
+ *   - 404 if user not found
  */
 const editUser = (req, res) => {
-    // make sure the user is authenticated
     const id = Number(req.params.id);
-    if (!id || isNaN(id))
+    if (!id || isNaN(id)) {
         return res.status(400).json({ error: 'Invalid user ID' });
-    // check for image input
+    }
+
     const image = req.body.image;
-    if (image === undefined || image === null)
+    if (image === undefined || image === null) {
         return res.status(400).json({ error: 'Invalid image input' });
-    // update the attributes
-    const user = Users.updateUser(id, undefined, image);
-    if (user === 400)
+    }
+
+    const updated = Users.updateUser(id, undefined, image);
+    if (updated === 400) {
         return res.status(400).json({ error: 'error invalid input' });
-    if (user === 404)
+    }
+    if (updated === 404) {
         return res.status(404).json({ error: 'user not found' });
-    return res.status(200).json(user);
-}
+    }
+
+    return res.status(200).json(updated);
+};
 
 /**
- * Checks for JWT token validity, if we reached here successfully the JWT has been validated
- * @param req request
- * @param res response
- * @returns code 200
+ * Check if JWT token is valid.
+ * (Authentication middleware must run first.)
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
+ * @returns 200 and the user payload from the token
  */
 const isTokenValid = (req, res) => {
-    return res.status(200).json({user: req.user});
+    return res.status(200).json({ user: req.user });
+};
+
+/**
+ * Search users by fullName or mail.
+ *
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
+ * @returns
+ *   - 200 and an array of `{ id, name, mail }` (max 10)
+ *   - 400 if missing query parameter `q`
+ */
+const searchUsers = (req, res) => {
+    const query = req.query.q?.toLowerCase();
+    if (!query) {
+        return res.status(400).json({ error: 'Missing query parameter' });
+    }
+
+    const matched = Users.getAllUsers()
+        .filter(user =>
+            user.fullName.toLowerCase().includes(query) ||
+            user.mail.toLowerCase().includes(query)
+        )
+        .slice(0, 10)
+        .map(user => ({
+            id: user.id,
+            name: user.fullName,
+            mail: user.mail
+        }));
+
+    return res.status(200).json(matched);
 };
 
-module.exports = { signupUser, getUser, loginUser, editUser, isTokenValid };
+module.exports = {
+    signupUser,
+    getUser,
+    loginUser,
+    editUser,
+    isTokenValid,
+    searchUsers
+};
diff --git a/web_server/models/labels.js b/web_server/models/labels.js
index 55be887c..c8ebe822 100644
--- a/web_server/models/labels.js
+++ b/web_server/models/labels.js
@@ -1,86 +1,92 @@
-/**
- * label object structure:
- *  id - positive number now
- *  owner - user id of the label's owner
- *  name - label's name
- */
-const labels = [
-    {
-        id: 1,
-        name: 'work',
-        owner: 1,
-    },
-    {
-        id: 2,
-        name: 'friends',
-        owner: 2,
-    }
+// Initial example labels
+let labels = [
+    { id: 1, name: 'work',    owner: 1, parent: null },
+    { id: 2, name: 'friends', owner: 1, parent: null },
 ];
-let labelId = labels ? labels.length : 0;
+
+// Simple incrementing ID
+let nextId = labels.length + 1;
 
 /**
- * Returns all labels saved
- * @returns {*[]} all labels saved
+ * Get all labels (no user filter; in a real app, should filter by user)
+ * @returns {Array} All label objects
  */
-const getAllLabels = () => labels
+function getAllLabels() {
+    return labels;
+}
 
 /**
- * Creates a new label
- * @param owner user id of the label's owner
- * @param name name of the label
- * @returns {{id: number, name, owner}|null} null if input is invalid, otherwise the label object
+ * Find a label by its ID
+ * @param {number} id
+ * @returns {object|null} Label object or null if not found
  */
-const createNewLabel = (owner, name) => {
-    if (!name)
-        return null;
-    const newLabel = {
-        id: ++labelId,
-        name: name,
-        owner: owner,
-    }
-    labels.push(newLabel);
-    return newLabel;
+function getLabelById(id) {
+    return labels.find(l => l.id === id);
 }
 
 /**
- *
- * @param id id of a label
- * @returns {*} label object with the same id
+ * Create a new top-level label (parent is null)
+ * @param {number} owner - User ID
+ * @param {string} name  - Label name
+ * @returns {object} The created label
  */
-const getLabelById = (id) => labels.find(label => label.id == id);
+function createNewLabel(owner, name) {
+    const lab = { id: nextId++, owner, name, parent: null };
+    labels.push(lab);
+    return lab;
+}
 
-const getLabelByName = (userId, name) => {
-    return labels.find(label => label.owner == userId && label.name === name);
+/**
+ * Create a sublabel under an existing label
+ * @param {number} owner    - User ID
+ * @param {number} parent   - Parent label ID
+ * @param {string} name     - Sublabel name
+ * @returns {object|null} New label, or null if parent not found
+ */
+function createSublabel(owner, parent, name) {
+    // Check parent exists (could also check ownership)
+    if (!labels.find(l => l.id === parent)) return null;
+    const newLabel = {
+        id: nextId++,     // Use global nextId for unique ID
+        name,
+        owner,
+        parent,           // Link to parent label by id
+    };
+    labels.push(newLabel);
+    return newLabel;
 }
 
 /**
- * Edits the label with new info
- * @param labelId id of a label to edit
- * @param name new name of the label
- * @returns {*|null} if invalid or not found null, otherwise the updated label object
+ * Rename a label by ID
+ * @param {number} id
+ * @param {string} name
+ * @returns {object|null} Updated label or null if not found
  */
-const editLabel = (labelId, name) => {
- //   if (!labelId || !name)
- //       return null;
-    // search the label with the index
-    const index = labels.findIndex(label => label.id === labelId);
-    if (index === -1)
-        return null;
-    labels[index].name = name;
-    return labels[index];
+function editLabelById(id, name) {
+    const lab = getLabelById(id);
+    if (!lab) return null;
+    lab.name = name;
+    return lab;
 }
 
 /**
- * Deletes a label by id
- * @param labelId id of a label to delete
- * @returns {boolean} true if deleted, otherwise false
+ * Delete a label by ID (does not cascade to sublabels)
+ * @param {number} id
+ * @returns {boolean} True if deleted, false if not found
  */
-const deleteLabel = (labelId) => {
-    const index = labels.findIndex(label => label.id === labelId);
-    if (index === -1)
-        return false;
-    labels.splice(index, 1);
+function deleteLabelById(id) {
+    const idx = labels.findIndex(l => l.id === id);
+    if (idx < 0) return false;
+    labels.splice(idx, 1);
     return true;
 }
 
-module.exports = {getAllLabels, createNewLabel, getLabelById, getLabelByName, editLabel, deleteLabel}
\ No newline at end of file
+// Export all functions
+module.exports = {
+    getAllLabels,
+    getLabelById,
+    createNewLabel,
+    createSublabel,
+    editLabelById,
+    deleteLabelById
+};
diff --git a/web_server/models/mails.js b/web_server/models/mails.js
index d039aa83..07e3e3a5 100644
--- a/web_server/models/mails.js
+++ b/web_server/models/mails.js
@@ -31,7 +31,7 @@ const mails = [
         body: "Here’s what we changed in v2.0...",
         createdAt: new Date('2025-06-03T20:27:11.000Z'),
         sentAt: new Date('2025-06-04T14:08:36.000Z'),
-        labels: [],
+        labels: [1],
         isDraft: false,
         isRead: true,
         isStarred: false,
@@ -48,7 +48,7 @@ const mails = [
         body: "Here’s what we changed in v2.0...",
         createdAt: new Date('2025-06-03T20:27:11.000Z'),
         sentAt: new Date('2025-06-04T14:08:36.000Z'),
-        labels: [],
+        labels: [2],
         isDraft: false,
         isRead: false,
         isStarred: false,
@@ -82,7 +82,7 @@ const mails = [
         body: "Don’t forget the team meeting at 9AM tomorrow.",
         createdAt: new Date('2025-06-03T03:15:27.000Z'),
         sentAt: new Date('2025-06-03T11:42:53.000Z'),
-        labels: [1],
+        labels: [1,2],
         isDraft: false,
         isRead: false,
         isStarred: true,
@@ -186,6 +186,7 @@ const mails = [
         ]
     }
 ];
+// Mail ID counter initialization. If mails array exists, set to its length, else 0.
 let mailId = mails ? mails.length : 0;
 
 /**
@@ -197,14 +198,14 @@ let mailId = mails ? mails.length : 0;
  * @returns {Object} list of ordered mails objects from the most recent to less recent and total mails amount
  */
 const getUserMails = (userId, limit = 50, inboxType, page = 1) => {
-    // Default to 'all' if inboxType is invalid or missing
+    // Select inbox type and its filtering/sorting logic
     const lowerCasedKey = (typeof inboxType === 'string' && inboxType.toLowerCase()) || 'all';
     const key = inboxFilters.hasOwnProperty(lowerCasedKey) ? lowerCasedKey : 'all';
     const {predicate, sortKey} = inboxFilters[key];
-    // Fetch the mails with the chosen predicate and sort key
+    // Filter mails for this user and inbox type, then sort
     const filtered = mails.filter((mail) => predicate(mail, userId));
     const sorted = filtered.sort((a, b) => sortKey(b) - sortKey(a));
-    // calculate what mails to get according to the page
+    // Slice for pagination
     const total = sorted.length;
     const startIdx = (page - 1) * limit;
     const paged = sorted.slice(startIdx, startIdx + limit);
@@ -214,13 +215,14 @@ const getUserMails = (userId, limit = 50, inboxType, page = 1) => {
 /**
  * Creates a new mail as a draft.
  * Lets the user to not include all attributes, marks it accordingly and avoid sending it.
- * @param {number} userId
- * @param {string} subject
- * @param {string} body
- * @param {number[]} sentToIds
- * @returns {{id: number, owner: number, from: number, sentTo: (number[]|*[]), subject: (string|string), body: (string|string), createdAt: string, sentAt: string, labels: *[], isDraft: boolean, isRead: boolean, isStarred: boolean, isTrashed: boolean, isSpam: boolean}}
+ * @param {Number} userId id of the draft's owner
+ * @param {String} subject mail's subject content, replaced by empty string if not provided
+ * @param {String} body mail's body content, replaced by empty string if not provided
+ * @param {Number[]} sentToIds list of recipients ids
+ * @param {Object[]} files list of files containing the name, type and data
+ * @returns {{id: number, owner: number, from: number, sentTo: *[], subject: string, body: string, createdAt: string, sentAt: string, labels: *[], isDraft: boolean, isRead: boolean, isStarred: boolean, isTrashed: boolean, isSpam: boolean}}
  */
-const saveDraft = (userId, subject, body, sentToIds) => {
+const saveDraft = (userId, subject, body, sentToIds, files) => {
     const draft = {
         id: ++mailId,
         owner: Number(userId),
@@ -236,22 +238,26 @@ const saveDraft = (userId, subject, body, sentToIds) => {
         isStarred: false,
         isTrashed: false,
         isSpam: false,
+        files: files || []
     };
     mails.push(draft);
     return draft;
 }
 
 /**
- * Sends a new mail to all the recipients
+ * Sends a new mail to all the recipients.
+ * IMPORTANT: If the sender sends to himself, only one mail is created.
+ * The mail will appear both in "sent" and "inbox" queries.
  * @param {number} userId of the sender
- * @param {string} subject
- * @param {string} body
- * @param {number[]} sentToIds
- * @returns {{id: number, owner: number, from: number, sentTo, subject: string, body: string, createdAt: string, sentAt: string, labels: *[], isDraft: boolean, isRead: boolean, isStarred: boolean, isTrashed: boolean, isSpam: boolean}|boolean}
+ * @param {String} subject mail's subject content, replaced by empty string if not provided
+ * @param {string} body mail's body content, replaced by empty string if not provided
+ * @param {number[]} sentToIds list of recipients ids
+ * @returns {object|boolean} the sender's mail object, or false on error
+ * @param {Object[]} files list of files containing the name, type and data
  */
-const sendNewMail = (userId, subject, body, sentToIds) => {
+const sendNewMail = (userId, subject, body, sentToIds, files = []) => {
     try {
-        // create the mail for the sender and save it
+        // First, create the mail object for the sender (in "Sent" folder)
         const atOwner = {
             id: ++mailId,
             owner: Number(userId),
@@ -267,10 +273,15 @@ const sendNewMail = (userId, subject, body, sentToIds) => {
             isStarred: false,
             isTrashed: false,
             isSpam: false,
+            files: files
         };
         mails.push(atOwner);
-        // create the mails for the recipients and save each one
+
+        // Then, for each recipient, create a separate mail only if recipient is not the sender.
+        // This prevents duplicate mail when someone sends to himself.
         for (const uid of sentToIds) {
+            // If the sender sends to himself, skip (mail already created above)
+            if (uid === userId) continue;
             const mail = {
                 id: ++mailId,
                 owner: Number(uid),
@@ -286,6 +297,7 @@ const sendNewMail = (userId, subject, body, sentToIds) => {
                 isStarred: false,
                 isTrashed: false,
                 isSpam: false,
+                files: files
             }
             mails.push(mail);
         }
@@ -297,31 +309,33 @@ const sendNewMail = (userId, subject, body, sentToIds) => {
 }
 
 /**
- *
- * @param mailId id of a mail to find
+ *  @param mailId id of a mail to find
  * @returns {*} mail object with the same id
  */
 const getMail = (mailId) => mails.find(mail => mail.id === mailId);
 
 /**
- * Updates a draft by optional changing existing attributes with new values
- * @param {number} mailId id of the draft
- * @param {string} subject
- * @param {string} body
- * @param {number[]} sentToIds
- * @returns {*|null} null if the mail isn't found or isn't a draft, otherwise returns the new draft mail object
+ * Updates a draft by optionally changing existing attributes with new values
+ * @param {Number} mailId id of the draft
+ * @param {String} subject mail's subject content, replaced by empty string if not provided
+ * @param {String} body mail's body content, replaced by empty string if not provided
+ * @param {Number[]} sentToIds list of recipients ids
+ * @param {Object[]} files list of files containing the name, type and data
+ * @returns {{id: number, owner: number, from: number, sentTo: *[], subject: string, body: string, createdAt: string, sentAt: string, labels: *[], isDraft: boolean, isRead: boolean, isStarred: boolean, isTrashed: boolean, isSpam: boolean}}
  */
-const updateDraft = (mailId, subject, body, sentToIds) => {
+const updateDraft = (mailId, subject, body, sentToIds, files) => {
     const index = mails.findIndex(mail => mail.id === mailId);
-    if (mails[index] < 0 || !mails[index].isDraft)
+    // Only allow updating if mail is a draft
+    if (index < 0 || !mails[index].isDraft)
         return null;
-    // attempt to update the allowed attributes of a draft
     if (subject !== undefined)
         mails[index].subject = subject;
     if (body !== undefined)
         mails[index].body = body;
     if (sentToIds !== undefined)
         mails[index].sentTo = sentToIds;
+    if (files !== undefined)
+        mails[index].files = files;
     return mails[index];
 }
 
@@ -338,12 +352,9 @@ const updateDraft = (mailId, subject, body, sentToIds) => {
  * - code 404 if no such email was found
  */
 const editSentMail = (mailId, isRead, isStarred, isTrashed, isSpam, labels) => {
-    // find the index of the wanted mail
     const index = mails.findIndex(mail => mail.id === mailId);
-    // make sure the mail was found
     if (index === -1)
         return 404;
-    // check each input, if it's valid edit them in the mail
     if (typeof isRead === 'boolean')
         mails[index].isRead = isRead;
     if (typeof isStarred === 'boolean')
@@ -354,12 +365,13 @@ const editSentMail = (mailId, isRead, isStarred, isTrashed, isSpam, labels) => {
         mails[index].isSpam = isSpam;
     if (Array.isArray(labels))
         mails[index].labels = labels;
-    // return updated mail
     return mails[index];
 }
 
 /**
  * Deletes a mail
+ * - If already in trash or is a draft, deletes it from array.
+ * - Otherwise, moves to trash.
  * @param userId id of the user that wants to remove the mail
  * @param mailId id of a mail to delete
  * @returns {Number}
@@ -374,7 +386,7 @@ const deleteMail = (userId, mailId) => {
     if (index === -1)
         return 404
     // make sure the user has access to the mail
-    if (mails[index].owner != userId)
+    if (mails[index].owner !== userId)
         return 400;
     // if the mail is a draft no need to send to trash bin, if it's already in the trash - remove it
     if (mails[index].isDraft || mails[index].isTrashed) {
@@ -397,8 +409,8 @@ const searchInInbox = (query, userId) => {
     const isNum = !isNaN(Number(query));
     return mails
         .filter(mail => {
-            // ensure the user owns the mail
-            if (mail.owner != userId)
+            // Only search user's own mails
+            if (mail.owner !== userId)
                 return false;
             // check if query in the subject/ body texts
             if (mail.subject.toLowerCase().includes(lowerCased) || mail.body.toLowerCase().includes(lowerCased))
@@ -431,4 +443,4 @@ module.exports = {
     updateDraft,
     deleteMail,
     searchInInbox,
-};
\ No newline at end of file
+};
diff --git a/web_server/routes/labels.js b/web_server/routes/labels.js
index 7e9015da..3dd37a6e 100644
--- a/web_server/routes/labels.js
+++ b/web_server/routes/labels.js
@@ -1,12 +1,12 @@
 const express = require('express');
-const router = express.Router();
-const controller = require('../controllers/labels');
-const Auth = require("../utils/authentication");
+const Auth    = require('../utils/authentication');
+const ctrl    = require('../controllers/labels');
+const router  = express.Router();
+
+router.get   ('/',          Auth.authenticateToken, ctrl.getAllLabels);
+router.post  ('/',          Auth.authenticateToken, ctrl.createNewLabel);
+router.post  ('/:id/sublabel', Auth.authenticateToken, ctrl.createSublabel);
+router.patch ('/:id',       Auth.authenticateToken, ctrl.editLabel);
+router.delete('/:id',       Auth.authenticateToken, ctrl.deleteLabel);
 
-router
-    .get('/', Auth.authenticateToken, controller.getAllLabels)
-    .post('/', Auth.authenticateToken, controller.createNewLabel)
-    .get('/:id', Auth.authenticateToken, controller.getLabelById)
-    .patch('/:id', Auth.authenticateToken, controller.editLabel)
-    .delete('/:id', Auth.authenticateToken, controller.deleteLabel);
 module.exports = router;
diff --git a/web_server/routes/users.js b/web_server/routes/users.js
index b2cc6d18..a910a4f9 100644
--- a/web_server/routes/users.js
+++ b/web_server/routes/users.js
@@ -8,6 +8,10 @@ const {authenticateToken} = require("../utils/authentication");
 // POST /api/users
 router.post('/users', controller.signupUser);
 
+// GET /api/users/search?q=alice
+router.get('/users/search', authenticateToken, controller.searchUsers);
+
+
 // GET /api/users/:id
 router.get('/users/:id', controller.getUser);
 
@@ -20,4 +24,5 @@ router.post('/tokens', controller.loginUser);
 // GET /api/auth-check
 router.get('/auth-check', authenticateToken, controller.isTokenValid)
 
+
 module.exports = router;
diff --git a/web_server/utils/mails.js b/web_server/utils/mails.js
index c0b55891..059aea92 100644
--- a/web_server/utils/mails.js
+++ b/web_server/utils/mails.js
@@ -56,10 +56,23 @@ const inboxFilters = {
  */
 function extractUrls(text) {
     if (!text) return [];
-    const urlRegex = /(http?:\/\/[^\s]+|www\.[^\s]+)/g;
-    return text.match(urlRegex) || [];
+    const urls = new Set();
+
+    // Remove data:image/... base64 content before processing
+    const cleanedText = text.replace(/data:image\/[a-zA-Z]+;base64,[^\s"']+/g, '');
+
+
+    const plainUrlRegex = /www\.[^\s<>"']+\.(com|net|org|edu|gov|co|il)/gi;
+    const plainMatches = cleanedText.match(plainUrlRegex) || [];
+
+    plainMatches.forEach(url => {
+        urls.add(url.replace(/[.,;!?]+$/, "")); // remove commas, questions marks etc.
+    });
+
+    return [...urls];
 }
 
+
 /**
  * Extracts file names from a mail object.
  * @param {Object} mail mail object.