diff --git a/web/app.html b/web/app.html
index 60771c3..41c918d 100644
--- a/web/app.html
+++ b/web/app.html
@@ -14,6 +14,19 @@
     <link rel="manifest" href="./manifest.json">
 </head>
 <body>
+    <div id="loading-screen">
+        <h1>Pandora</h1>
+        <p id="loading-screen-status">Please wait...</p>
+        <div class='loading-animation-wrapper'>
+            <div class="animation">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+            </div>
+        </div>
+    </div>
     <div class="app-container no-active-chat">
         <div class="main-holder">
             <aside id="desktop-aside">
@@ -93,6 +106,8 @@
                             </div>
                             
                             <!-- Input Panel -->
+                            <div id="mentioning-indicator" class="collapsed">
+                            </div>
                             <footer id="chat-input-panel" class="chat-input-panel">
                                 <div class="input-actions-left">
                                     <button id="chat-bottom-bar-btn" class="chat-footer-btn icon-btn mif-expand-less mif-3x" title="Expand"></button>
diff --git a/web/src/app.ts b/web/src/app.ts
index 6a100f5..8b7a9d5 100644
--- a/web/src/app.ts
+++ b/web/src/app.ts
@@ -7,8 +7,7 @@ import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getU
 import { deleteDatabase, upsertMessages } from "./db";
 import { showNotification } from "./notification";
 import type { Chat, Message, WebSocketEvent } from "./types";
-import { activeChatState, setActiveChatState } from "./states";
-
+import { activeChatState, clearMentionCache, mentionCacheID, mentionCacheText, setActiveChatState } from "./states";
 if (localStorage.getItem('setupComplete') !== "true") window.location.href = "index.html";
 
 const messageTone = new Audio("./message.ogg");
@@ -20,29 +19,41 @@ if (!mainViewEl) throw console.error();
 const mainView = views.get(mainViewEl);
 
 document.addEventListener('DOMContentLoaded', async () => {
-    updateSidebarPosition();
-    askForNotificationPermission();
-    if (elements.inputApiKey) elements.inputApiKey.value = config.apiKey;
-    if (elements.inputWahaUrl) elements.inputWahaUrl.value = config.wahaUrl;
-    if (elements.inputSession) elements.inputSession.value = config.session;
-    if (elements.inputBackgroundImage) elements.inputBackgroundImage.value = config.bgImg;
-    if (elements.inputBackgroundOpacity) elements.inputBackgroundOpacity.value = config.bgOpacity;
-    if (elements.activeChatContainer) {
-        elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
-        elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
-    }
-    await updateOnlineStatus();
-    setupEventListeners();
-    try {
-        setupElementsData();
-        loadChats();
-        checkWahaStatus();
-        initWebSocket();
-    } finally {
-        elements.chatsLoader.classList.add('hidden');
-    }
+    ui.load(async () => {      
+        ui.loadingMessage("Drawing sidebar...");
+        updateSidebarPosition();
+        ui.loadingMessage("Asking for notification permission...");
+        askForNotificationPermission();
+        ui.loadingMessage("Loading configuration...");
+        if (elements.inputApiKey) elements.inputApiKey.value = config.apiKey;
+        if (elements.inputWahaUrl) elements.inputWahaUrl.value = config.wahaUrl;
+        if (elements.inputSession) elements.inputSession.value = config.session;
+        if (elements.inputBackgroundImage) elements.inputBackgroundImage.value = config.bgImg;
+        if (elements.inputBackgroundOpacity) elements.inputBackgroundOpacity.value = config.bgOpacity;
+        if (elements.activeChatContainer) {
+            elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
+            elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
+        }
+        ui.loadingMessage("Getting server version...");
+        await updateOnlineStatus();
+        ui.loadingMessage("Setting up event listeners...");
+        setupEventListeners();
+        try {
+            ui.loadingMessage("Replacing placeholders...");
+            await setupElementsData();
+            ui.loadingMessage("Loading chats...");
+            await loadChats();
+            ui.loadingMessage("Checking server status...");
+            await checkWahaStatus();
+            ui.loadingMessage("Telling server to send new messages...");
+            await initWebSocket();
+        } finally {
+            elements.chatsLoader.classList.add('hidden');
+        }
+    })
 });
 
+
 async function askForNotificationPermission() {
     notificationAuthorization = await Notification.requestPermission();
 }
@@ -133,7 +144,7 @@ function scrollToList(smooth = true) {
 
 function setupEventListeners() {
     window.addEventListener('resize', updateSidebarPosition);
-
+    
     if (!window.location.hash) {
         window.location.hash = '';
     }
@@ -191,7 +202,7 @@ function setupEventListeners() {
         );
         ui.renderChatList(filtered, activeChatState, selectChat);
     });
-
+    
     ui.autoResizeTextArea(elements.messageInput);
     
     elements.messageForm.addEventListener('submit', (e) => {
@@ -199,11 +210,20 @@ function setupEventListeners() {
         sendMessage();
     });
     
+    elements.messageInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    
     elements.chatBottomBar.style.height = `${elements.chatInputPanel.offsetHeight}px`;
     const observer = new ResizeObserver(() => {
         elements.chatBottomBar.style.height =
         `${elements.chatInputPanel.offsetHeight}px`;
     });
+
+    elements.mentioningIndicator.addEventListener('click', clearMentionCache);
     
     observer.observe(elements.chatInputPanel);
     elements.chatBottomBarBtn.addEventListener('click', ui.toggleChatBottomBar);
@@ -338,11 +358,13 @@ async function handleIncomingMessage(msg: Message) {
 
 async function selectChat(chat: Chat, isPopState = false, smoothScroll = true) {
     if (isLoadingChat) return;
+
+    clearMentionCache();
     
     const pageEl = document.getElementById("chat-page");
     if (!pageEl) return;
     mainView?.scrollTo(pageEl);
-
+    
     isLoadingChat = true;
     setActiveChatState(chat);
     
@@ -416,7 +438,10 @@ async function sendMessage() {
         fromMe: true,
         sender: 'me',
         timestamp: new Date().toISOString(),
-        status: 'sending'
+        status: 'sending',
+        replyTo: mentionCacheID ? {
+            body: mentionCacheText || "Mention (no text)"
+        } : null
     } as any;
     
     ui.appendSingleMessage(tempMsg, activeChatState.name, (await getAppUser()).id);
@@ -445,7 +470,7 @@ async function sendMessage() {
             console.warn('readChat failed (non-fatal):', e.message);
         }
         
-        const responseData = await waha.sendTextMessage(activeChatState.id, text);
+        const responseData = await waha.sendTextMessage(activeChatState.id, text, mentionCacheID);
         
         const tempBubble = document.getElementById(tempMsg.id);
         if (tempBubble) {
@@ -466,6 +491,8 @@ async function sendMessage() {
             if (meta) meta.innerHTML = `<span style="color: #ef4444;">Failed to send</span>`;
         }
     }
+
+    clearMentionCache();
 }
 
 async function sendFileMessage(file: File) {
diff --git a/web/src/states.ts b/web/src/states.ts
index f707e88..0865e98 100644
--- a/web/src/states.ts
+++ b/web/src/states.ts
@@ -1,7 +1,24 @@
 import { Chat } from "./types";
+import { elements } from "./ui";
 
 export let activeChatState: Chat | null = null;
+export let mentionCacheID: string | null = null;
+export let mentionCacheText: string | null = null;
 
 export function setActiveChatState(value: Chat | null) {
     activeChatState = value;
+}
+
+export function prepareMention(id: string, text: string) {
+    mentionCacheID = id;
+    mentionCacheText = text;
+    elements.mentioningIndicator.innerText = `Mentioning "${text}".`;
+    elements.mentioningIndicator.classList.remove('collapsed');
+}
+
+export function clearMentionCache() {
+    mentionCacheID = null;
+    mentionCacheText = null;
+    elements.mentioningIndicator.innerText = ``;
+    elements.mentioningIndicator.classList.add('collapsed');
 }
\ No newline at end of file
diff --git a/web/src/types.ts b/web/src/types.ts
index d65614c..35acc77 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -52,6 +52,7 @@ export interface Message {
   chatId?: string;
   chat?: { id: string };
   participant?: string;
+  replyTo?: Message;
 }
 
 /** Temporary message used for optimistic UI updates */
diff --git a/web/src/ui.ts b/web/src/ui.ts
index fd2ee93..0d1b1dc 100644
--- a/web/src/ui.ts
+++ b/web/src/ui.ts
@@ -1,7 +1,7 @@
 import { formatTime, normalizeId } from "./utils";
 import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage";
 import type { Chat, Message } from "./types";
-import { activeChatState } from "./states";
+import { activeChatState, prepareMention } from "./states";
 import { Parser } from "./parser";
 
 export const elements = {
@@ -46,7 +46,10 @@ export const elements = {
     inputUserStatus: document.getElementById('profile-page-status-input') as HTMLInputElement,
     selectable: document.querySelectorAll('.selectable') as NodeListOf<HTMLElement>,
     nextPageButtons: document.querySelectorAll('.next-page-btn') as NodeListOf<HTMLElement>,
-    scrollableViews: document.querySelectorAll('._scrollableView') as NodeListOf<HTMLElement>
+    scrollableViews: document.querySelectorAll('._scrollableView') as NodeListOf<HTMLElement>,
+    loadingScreen: document.querySelector('#loading-screen') as HTMLElement,
+    loadingScreenStatus: document.querySelector('#loading-screen-status') as HTMLElement,
+    mentioningIndicator: document.querySelector('#mentioning-indicator') as HTMLElement
 };
 
 export const views = new Map<HTMLElement, ScrollableView>;
@@ -276,7 +279,7 @@ export const ui = {
     },
     
     generateMessage(msg: Message, userID: string, chatId: string, isLocal: boolean = false) {
-        if (msg._data && msg._data.type == "gp2") return;
+        if (msg._data && msg._data.type == "gp2") return; // probably group description edit
         const isOutgoing = msg.fromMe || msg.sender === 'me';
         
         function getPrevMessageElem() {
@@ -288,6 +291,7 @@ export const ui = {
         const groupDiv = document.createElement('div');
         groupDiv.className = `message-group selectable ${isOutgoing ? 'outgoing' : 'incoming'}`;
         groupDiv.id = normalizeId(msg._serialized ? (msg._serialized as any) : msg.id) || "msg-id";
+        groupDiv.dataset.id = msg.id.toString();
         groupDiv.dataset.timestamp = msg.timestamp?.toString();
         groupDiv.dataset.from = msg.participant || (msg.from as string);
         
@@ -327,6 +331,31 @@ export const ui = {
         
         const contentEl = document.createElement('div');
         contentEl.classList.add('message-content');
+
+        if (msg.replyTo) {
+            const replyTo = msg.replyTo;
+            const replyIndicatorEl = document.createElement("div");
+            replyIndicatorEl.classList.add('reply-indicator');
+            replyIndicatorEl.textContent = new Parser(replyTo.body || replyTo.text || "")
+                .parse('_', '<i>$1</i>')
+                .parse('*', '<b>$1</b>')
+                .parse('~', '<s>$1</s>')
+                .parse('```', '<span style="font-family: monospace;">$1</span>')
+                .parse('`', '<code>$1</code>')
+                .replace("\n", "<br>")
+                .input;
+
+            replyIndicatorEl.addEventListener('click', () => {
+                const _msg = document.querySelector(`[id*="${replyTo.id}"]`) as HTMLElement;
+                if (_msg) {
+                    _msg.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    this.tempClass(_msg, "mentioned-highlight", 1000);
+                }
+            });
+
+            bubble.appendChild(replyIndicatorEl);
+        }
+
         const textEl = document.createElement('div');
         const parsed = new Parser(msg.body || msg.text || "")
             .parse('_', '<i>$1</i>')
@@ -388,7 +417,7 @@ export const ui = {
                 
                 a.addEventListener('click', clickListener);
             }
-            
+
             this.ensureScroll(elements.messagesContainer, () => {
                 contentEl.appendChild(a);
             });
@@ -398,7 +427,6 @@ export const ui = {
             }
         }
         
-        
         const meta = document.createElement('div');
         meta.className = 'message-meta';
         meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
@@ -426,6 +454,10 @@ export const ui = {
                 groupDiv.appendChild(indicator);
             } else groupDiv.classList.add('same-sender');
         }
+
+        bubble.addEventListener('dblclick', () => {
+            prepareMention(msg.id.toString(), parsed);
+        });
         
         groupDiv.appendChild(bubble);
         return groupDiv;
@@ -486,6 +518,25 @@ export const ui = {
         });
         observer.observe(element);
     },
+
+    async load(fn: Function) {
+        this.loadingMessage("Please wait...");
+        elements.loadingScreen.classList.remove('collapsed');
+        await fn();
+        elements.loadingScreen.classList.add('collapsed');
+        this.loadingMessage("Done!");
+    },
+
+    loadingMessage(message: string) {
+        elements.loadingScreenStatus.innerText = message;
+    },
+
+    tempClass(element: HTMLElement, clazz: string, time: number) {
+        element.classList.add(clazz);
+        setTimeout(() => {
+            element.classList.remove(clazz);
+        }, time)
+    }
 };
 
 export class ScrollableView {
diff --git a/web/src/utils.ts b/web/src/utils.ts
index 0e404fb..59e6799 100644
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@@ -1,10 +1,5 @@
 import type { Message, MessageWithTime } from "./types";
 
-/**
- * Format timestamps (supports Unix epoch seconds/ms, strings and ISO dates)
- * @param {string|number|Date} dateVal 
- * @returns {string} Formatted HH:MM AM/PM string
- */
 export function formatTime(dateVal: string | number | Date): string {
     if (!dateVal) return '';
     let date: Date;
@@ -26,12 +21,6 @@ export function formatTime(dateVal: string | number | Date): string {
     return `${hours}:${minutesStr} ${ampm}`;
 }
 
-/**
- * Adjust outgoing messages backdated behind incoming messages due to clock drift.
- * Uses a 30-second sliding bubble-sort window.
- * @param {Array} messages List of raw messages from WAHA
- * @returns {Array} Compensated chronological message array
- */
 export function compensateMessageOrdering(messages: Message[]): Message[] {
     if (!Array.isArray(messages)) return [];
 
@@ -73,11 +62,6 @@ export function getBase64(file: File): Promise<string> {
     });
 }
 
-/**
- * Normalize a WhatsApp ID (chatId, messageId, etc.) to its string representation
- * @param {string|object} raw
- * @returns {string|null}
- */
 export function normalizeId(raw: string | { _serialized?: string; user?: string } | null | undefined): string | null {
     if (!raw) return null;
     if (typeof raw === 'object') {
diff --git a/web/src/waha.ts b/web/src/waha.ts
index 353c973..cb4638a 100644
--- a/web/src/waha.ts
+++ b/web/src/waha.ts
@@ -138,13 +138,14 @@ export const waha = {
         });
     },
 
-    async sendTextMessage(chatId: string, text: string): Promise<Message> {
+    async sendTextMessage(chatId: string, text: string, replyTo: string | null = null): Promise<Message> {
         return request<Message>('/api/sendText', {
             method: 'POST',
             body: JSON.stringify({
                 chatId,
                 text,
-                session: config.session
+                session: config.session,
+                replyTo: replyTo
             })
         });
     },
diff --git a/web/style.css b/web/style.css
index 8ff2258..871f1ff 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,31 +1,31 @@
 @font-face {
-  font-family: Selawik;
-  src: url(./fonts/selawk.ttf);
-  font-weight: normal;
+    font-family: Selawik;
+    src: url(./fonts/selawk.ttf);
+    font-weight: normal;
 }
 
 @font-face {
-  font-family: Selawik;
-  src: url(./fonts/selawkl.ttf);
-  font-weight: 200;
+    font-family: Selawik;
+    src: url(./fonts/selawkl.ttf);
+    font-weight: 200;
 }
 
 @font-face {
-  font-family: Selawik;
-  src: url(./fonts/selawksl.ttf);
-  font-weight: 300;
+    font-family: Selawik;
+    src: url(./fonts/selawksl.ttf);
+    font-weight: 300;
 }
 
 @font-face {
-  font-family: Selawik;
-  src: url(./fonts/selawkb.ttf);
-  font-weight: bold;
+    font-family: Selawik;
+    src: url(./fonts/selawkb.ttf);
+    font-weight: bold;
 }
 
 @font-face {
-  font-family: Selawik;
-  src: url(./fonts/selawkb.ttf);
-  font-weight: 800;
+    font-family: Selawik;
+    src: url(./fonts/selawkb.ttf);
+    font-weight: 800;
 }
 
 :root {
@@ -368,18 +368,18 @@ li {
 }
 
 .chat-item.selected {
-  background: rgba(255, 255, 255, 0.04);
-  transform: scale(0.98) skewX(10deg);
-  filter: blur(.1px);
-  opacity: .6;
+    background: rgba(255, 255, 255, 0.04);
+    transform: scale(0.98) skewX(10deg);
+    filter: blur(.1px);
+    opacity: .6;
 }
 
 
 .chat-item.selectable:active {
-  background: rgba(255, 255, 255, 0.04);
-  transform: scale(0.98) skewX(10deg);
-  filter: blur(.1px);
-  opacity: .6;
+    background: rgba(255, 255, 255, 0.04);
+    transform: scale(0.98) skewX(10deg);
+    filter: blur(.1px);
+    opacity: .6;
 }
 
 .chat-item-info {
@@ -578,7 +578,7 @@ li {
     flex-direction: column;
     height: 100%;
     position: relative;
-    overflow: hidden;
+    overflow: clip;
     z-index: 0;
 }
 
@@ -612,7 +612,7 @@ li {
     inset: 0;
     pointer-events: none;
     z-index: -1;
-
+    
     background: linear-gradient(
     to bottom,
     rgba(0, 0, 0, 0.75),
@@ -658,7 +658,7 @@ li {
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
-    padding-bottom: .6rem;
+    padding-bottom: 0rem;
     display: flex;
     flex-direction: column;
     user-select: text;
@@ -777,7 +777,7 @@ li {
 .chat-input-panel {
     padding: .8rem;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 16px;
     background-color: var(--bg-main);
 }
@@ -833,7 +833,7 @@ li {
     flex: 1;
     display: flex;
     gap: 12px;
-    align-items: flex-end;
+    align-items: center;
     min-width: 0;
 }
 
@@ -860,15 +860,6 @@ li {
     background: rgba(255, 255, 255, 0.06);
 }
 
-#chat-bottom-bar-btn {
-    margin-bottom: 6px;
-}
-
-#send-button {
-    margin-bottom: 4px;
-    margin-right: 6px;
-}
-
 .send-btn {
     width: 44px;
     height: 44px;
@@ -925,7 +916,7 @@ li {
     scroll-snap-align: start;
     scroll-snap-stop: always;
     flex: 0 0 100%;
-
+    
 }
 
 .extra-page-content {
@@ -1000,6 +991,73 @@ li {
     font-size: 1rem;
 }
 
+.mentioned-highlight {
+    transform: translateX(2em);
+}
+
+.mentioned-highlight .message-bubble {
+    background-color: var(--text-primary);
+    color: var(--bg-primary);
+}
+
+.outgoing.mentioned-highlight {
+    transform: translateX(-2em);
+}
+
+.reply-indicator {
+    opacity: .7;
+    max-width: 10em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.reply-indicator::before {
+    content: "> ";
+}
+
+#loading-screen {
+    transition: .8s;
+    height: 100dvh;
+    width: 100dvw;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--bg-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    outline: thick solid var(--bg-secondary);
+    gap: 1rem;
+}
+
+#loading-screen.collapsed {
+    transform: translateY(100%);
+    opacity: 0;
+}
+
+#mentioning-indicator {
+    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: var(--bg-secondary);
+    padding: 0.4rem 0.8rem;
+    max-height: 3em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    opacity: 1;
+    margin-top: .8rem;
+}
+
+#mentioning-indicator.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
 @media (max-width: 768px) {
     .app-container {
         width: 100%;
@@ -1042,7 +1100,7 @@ li {
         scroll-snap-align: start;
         scroll-snap-stop: always;
     }
-
+    
     #message-input {
         padding: 8px 12px;
         max-height: 10rem;
@@ -1071,7 +1129,7 @@ li {
     .message-group {
         max-width: 90%;
     }
-
+    
     .message-group.image {
         max-width: 60%;
     }
@@ -1083,16 +1141,16 @@ li {
     #desktop-aside {
         display: none;
     }
-
+    
     #profile-page .content {
         flex-direction: column;
     }
-
+    
     #profile-page-picture {
         max-width: 50%;
         margin: auto;
     }
-
+    
     #profile-page-user-number {
         text-align: center;
     }
