diff --git a/components/inbox-mail/CreateNewMailModal.tsx b/components/inbox-mail/CreateNewMailModal.tsx
new file mode 100644
index 0000000..fb2cef2
--- /dev/null
+++ b/components/inbox-mail/CreateNewMailModal.tsx
@@ -0,0 +1,315 @@
+import BaseModal from "@/src/components/Common/ModalComponents/Modal";
+import ModalCreateFooter from "@/src/components/Common/ModalComponents/ModalCreateFooter";
+import { Dialog } from "@headlessui/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+import { sendNewMail } from "./service-mail";
+import useRefState from "../../hooks/useRefState";
+import { InfoButton } from "../InfoButton";
+import { MemoIconMail } from "../kern-icons/icons";
+import { User } from "../inbox-mail/InboxMailView";
+
+
+interface CreateNewMailModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    refetchInboxMailOverview: () => void;
+    users: User[];
+    threadId?: string;
+    isNewThread?: boolean;
+};
+
+export default function CreateNewMailModal(props: CreateNewMailModalProps) {
+    const router = useRouter();
+    const { t } = useTranslation('projectOverview');
+    const projectId = router.query.projectId as string;
+    const chatId = router.query.chatId as string;
+    const { state: subject, setState: setSubject, ref: subjectRef } = useRefState('');
+    const { state: content, setState: setContent, ref: contentRef } = useRefState('');
+    const { state: includeProject, setState: setIncludeProject, ref: includeProjectRef } = useRefState(false);
+    const { state: includeChat, setState: setIncludeChat, ref: includeChatRef } = useRefState(false);
+    const { state: markAsImportant, setState: setMarkAsImportant, ref: markAsImportantRef } = useRefState(false);
+    const { state: selectedPeople, setState: setSelectedPeople, ref: selectedPeopleRef } = useRefState<User[]>([]);
+
+
+    const cancelButtonRef = useRef(null);
+
+    const initModal = useCallback(() => {
+        setSelectedPeople([]);
+        setSubject('');
+        setContent('');
+        setIncludeProject(false);
+        setIncludeChat(false);
+        setMarkAsImportant(false);
+    }, []);
+
+    const onTransitionComplete = useCallback(initModal, []);
+
+    const disabledSend = useMemo(() => {
+        return selectedPeople.length === 0 || subject.trim() === '' || content.trim() === '';
+    }, [selectedPeople, subject, content]);
+
+    const handleCreateMail = useCallback(() => {
+        const metaData = {
+            includeProject: includeProjectRef.current,
+            includeChat: includeChatRef.current
+        };
+
+        sendNewMail(selectedPeopleRef.current.map((user) => user.id), subjectRef.current, contentRef.current, markAsImportantRef.current, metaData, (result) => {
+            props.setOpen(false);
+            initModal();
+            props.refetchInboxMailOverview();
+        }, props.isNewThread ? undefined : props.threadId);
+    }, [props.threadId, props.isNewThread]);
+
+    return (
+        <BaseModal
+            open={props.open}
+            setOpen={props.setOpen}
+            onTransitionComplete={onTransitionComplete}
+            maxWidth="2xl"
+            initialFocus={cancelButtonRef}
+        >
+            <div className="p-6">
+                <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <MemoIconMail className="h-6 w-6 text-green-600" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                            {t("inboxMail.modalTitle")}
+                        </Dialog.Title>
+                        <div className='mt-2 flex flex-col gap-y-2'>
+
+                            <UserSelector
+                                label={t("inboxMail.sendTo")}
+                                users={props.users}
+                                selectedUsers={selectedPeople}
+                                onChange={setSelectedPeople}
+                            />
+                            <div>
+                                <label htmlFor="subject" className="block text-sm font-medium text-gray-700">
+                                    {t("inboxMail.subject")}:
+                                </label>
+                                <div className="mt-1">
+                                    <input
+                                        type="text"
+                                        name="subject"
+                                        id="subject"
+                                        className="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                        value={subject}
+                                        onChange={(e) => setSubject(e.target.value)}
+                                    />
+                                </div>
+                            </div>
+                            <div>
+                                <label htmlFor="content" className="block text-sm font-medium text-gray-700">
+                                    {t("inboxMail.content")}:
+                                </label>
+                                <div className="mt-1">
+                                    <textarea
+                                        name="content"
+                                        id="content"
+                                        className="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                        value={content}
+                                        onChange={(e) => setContent(e.target.value)}
+                                        rows={8}
+                                    />
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-x-2">
+                                <input
+                                    type="checkbox"
+                                    name="markAsImportant"
+                                    id="markAsImportant"
+                                    checked={markAsImportant}
+                                    onChange={(e) => setMarkAsImportant(e.target.checked)}
+                                    className="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                />
+                                <label htmlFor="markAsImportant" className="block text-sm font-medium text-gray-700 cursor-pointer">
+                                    {t("inboxMail.markAsImportant")}
+                                </label>
+                                <InfoButton content={t("inboxMail.markAsImportantInfo")} infoButtonSize="sm" />
+                            </div>
+                            {projectId && <div className="flex items-center gap-x-2">
+                                <input
+                                    type="checkbox"
+                                    name="includeProject"
+                                    id="includeProject"
+                                    checked={includeProject}
+                                    onChange={(e) => setIncludeProject(e.target.checked)}
+                                    className="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                />
+                                <label htmlFor="includeProject" className="block text-sm font-medium text-gray-700 cursor-pointer">
+                                    {t("inboxMail.includeProjectInfo")}
+                                </label>
+                            </div>}
+                            {chatId && <div className="flex items-center gap-x-2">
+                                <input
+                                    type="checkbox"
+                                    name="includeChat"
+                                    id="includeChat"
+                                    checked={includeChat}
+                                    onChange={(e) => setIncludeChat(e.target.checked)}
+                                    className="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                />
+                                <label htmlFor="includeChat" className="block text-sm font-medium text-gray-700 cursor-pointer">
+                                    {t("inboxMail.includeChatInfo")}
+                                </label>
+                            </div>}
+                        </div>
+                    </div>
+                </div>
+                <ModalCreateFooter
+                    handleCreate={handleCreateMail}
+                    closeDialog={() => props.setOpen(false)}
+                    cancelButtonRef={cancelButtonRef}
+                    createButtonName={t("inboxMail.sendButton")}
+                    disabledButton={disabledSend}
+                />
+            </div>
+        </BaseModal>
+    )
+}
+
+
+
+interface UserSelectorProps {
+    users: User[];
+    selectedUsers: User[];
+    onChange: (selected: User[]) => void;
+    showAll?: boolean;
+    label?: string;
+}
+
+function UserSelector(props: UserSelectorProps) {
+    const [inputValue, setInputValue] = useState("");
+    const [filteredUsers, setFilteredUsers] = useState<User[]>([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const editableRef = useRef<HTMLDivElement | null>(null);
+
+
+    useEffect(() => {
+        if (inputValue.trim() === "") {
+            if (props.showAll)
+                setFilteredUsers(props.users);
+            else
+                setFilteredUsers([]);
+        } else {
+            const lower = inputValue.toLowerCase();
+            setFilteredUsers(
+                props.users.filter(
+                    (u) =>
+                        u.firstName.toLowerCase().includes(lower) ||
+                        u.lastName.toLowerCase().includes(lower) ||
+                        u.mail.toLowerCase().includes(lower)
+                ).filter((u) => !props.selectedUsers.some((selected) => selected.id === u.id))
+            );
+        }
+    }, [inputValue, props.users]);
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const handleUserSelect = (user: any) => {
+        if (!props.selectedUsers.some((u) => u.id === user.id)) {
+            props.onChange([...props.selectedUsers, user]);
+        }
+        setInputValue("");
+        if (editableRef.current) editableRef.current.textContent = "";
+        setIsOpen(false);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
+        const value = e.currentTarget.textContent || "";
+        setInputValue(value);
+    };
+
+    const handleRemove = (mail: string) => {
+        props.onChange(props.selectedUsers.filter((p) => p.mail !== mail));
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter" && filteredUsers.length > 0) {
+            e.preventDefault();
+            handleUserSelect(filteredUsers[0]);
+        } else if (e.key === "Backspace" && !inputValue && props.selectedUsers.length) {
+            handleRemove(props.selectedUsers[props.selectedUsers.length - 1].mail);
+        }
+    };
+    return (
+        <div className="relative" ref={containerRef}>
+            {props.label && (
+                <label
+                    htmlFor="people"
+                    className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                    {props.label}
+                </label>
+            )}
+
+            <div
+                className="w-full flex flex-wrap items-center gap-1 border border-gray-300 rounded-md shadow-sm px-3 py-2 focus-within:ring-2 focus-within:ring-purple-500"
+                onClick={() => {
+                    setIsOpen(true);
+                    editableRef.current?.focus();
+                }}
+            >
+                {props.selectedUsers.map((user) => (
+                    <span
+                        key={user.mail}
+                        className="flex items-center bg-purple-100 text-purple-800 text-sm px-2 py-0.5 rounded-lg leading-none"
+                    >
+                        {`${user.firstName} ${user.lastName}`}
+                        <button
+                            type="button"
+                            onClick={() => handleRemove(user.mail)}
+                            className="ml-1 text-purple-500 hover:text-purple-700 focus:outline-none"
+                        >
+                            ✕
+                        </button>
+                    </span>
+                ))}
+
+                <div
+                    ref={editableRef}
+                    id="people"
+                    contentEditable
+                    suppressContentEditableWarning
+                    onInput={handleInput}
+                    onFocus={() => setIsOpen(true)}
+                    onKeyDown={handleKeyDown}
+                    className="flex-grow border-none sm:text-sm outline-none focus:ring-0 focus:border-transparent min-w-[100px]"
+                    data-placeholder={
+                        props.selectedUsers.length ? "" : "Type a name or email..."
+                    }
+                    style={{ minHeight: "1.5rem" }}
+                />
+            </div>
+
+            {isOpen && filteredUsers.length > 0 && (
+                <ul className="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-sm max-h-48 overflow-auto">
+                    {filteredUsers.map((user) => (
+                        <li
+                            key={user.id}
+                            onClick={() => handleUserSelect(user)}
+                            className="px-3 py-2 hover:bg-slate-50 cursor-pointer flex flex-col"
+                        >
+                            <span className="font-medium text-gray-800">{`${user.firstName} ${user.lastName}`}</span>
+                            <span className="text-xs text-gray-500">{user.mail}</span>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/InboxMail.tsx b/components/inbox-mail/InboxMail.tsx
new file mode 100644
index 0000000..d6f7169
--- /dev/null
+++ b/components/inbox-mail/InboxMail.tsx
@@ -0,0 +1,36 @@
+import { MemoIconMail } from "@/submodules/react-components/components/kern-icons/icons";
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
+import tinycolor from 'tinycolor2'
+
+type InboxMailProps = {
+    project: { customerColorPrimary: string; id: string; };
+    forChatArea?: boolean;
+    chatId?: string;
+}
+
+export default function InboxMail(props: InboxMailProps) {
+    const router = useRouter();
+    const navigateToMailPage = useCallback(() => {
+        const chatIdParam = props.chatId ? `?chatId=${props.chatId}` : '';
+        const projectIdParam = props.project ? props.chatId ? `&projectId=${props.project.id}` : `?projectId=${props.project.id}` : '';
+        router.push(`/inbox-mail${chatIdParam}${projectIdParam}`);
+    }, [props.chatId, props.project]);
+
+    const isLightDesign = useMemo(() => tinycolor(props.project?.customerColorPrimary).isLight(), [props.project?.customerColorPrimary]);
+
+    const buttonClasses = useMemo(() => {
+        if (props.forChatArea) {
+            const classes = "items-center justify-center w-8 h-8 border group flex -x-3 rounded-md p-1 text-sm leading-6 font-semibold"
+            if (isLightDesign) return 'bg-gray-100 text-gray-700 border-gray-300 ' + classes;
+            else return 'bg-zinc-900 text-zinc-100 border-zinc-700 ' + classes;
+        }
+        return "text-gray-400 hover:text-green-600 hover:bg-zinc-800 border-gray-700 items-center justify-center w-10 h-10 border group flex -x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+    }, [props.forChatArea, isLightDesign]);
+
+    return <div className="relative">
+        <button className={buttonClasses} onClick={navigateToMailPage}>
+            <MemoIconMail />
+        </button>
+    </div>
+}
diff --git a/components/inbox-mail/InboxMailView.tsx b/components/inbox-mail/InboxMailView.tsx
new file mode 100644
index 0000000..8461719
--- /dev/null
+++ b/components/inbox-mail/InboxMailView.tsx
@@ -0,0 +1,299 @@
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import CreateNewMailModal from "./CreateNewMailModal";
+import { InboxMail } from "./types-mail";
+import { getInboxMessages, getInboxMailOverviewByThreadsPaginated, getInboxMailsByThread } from "./service-mail";
+import KernButton from "../kern-button/KernButton";
+import { MemoIconPlus } from "../kern-icons/icons";
+import { IconUser } from "@tabler/icons-react";
+
+
+const MAIL_LIMIT_PER_PAGE = 10;
+
+export interface User {
+    id: string;
+    organizationId: string;
+    firstName: string;
+    lastName: string;
+    mail: string;
+    role: string;
+    languageDisplay: string;
+    logoutUrl: string;
+    isAdmin: boolean;
+    autoLogoutMinutes: number;
+}
+
+export default function InboxMailView(props: { currentUser, orgUsers }) {
+    const [inboxMailThreads, setInboxMailThreads] = useState([]);
+    const [openCreateMail, setOpenCreateMail] = useState(false);
+    const [isNewThread, setIsNewThread] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [selectedThread, setSelectedThread] = useState(null);
+    const [threadMails, setThreadMails] = useState<InboxMail[]>([]);
+
+    useEffect(() => {
+        refetchInboxMailOverview();
+    }, []);
+
+    const refetchInboxMailOverview = useCallback(() => {
+        getInboxMailOverviewByThreadsPaginated(currentPage, MAIL_LIMIT_PER_PAGE, (res) =>
+            setInboxMailThreads(res.threads));
+    }, [currentPage]);
+
+
+
+    useEffect(() => {
+        if (!selectedThread) return
+        getInboxMailsByThread(selectedThread.threadId, (res) => {
+            setThreadMails(res);
+        })
+    }, [selectedThread]);
+
+
+    const userById = useMemo(() => {
+        const map: { [key: string]: { id: string; firstName: string; lastName: string; email: string } } = {};
+        props.orgUsers?.forEach(user => {
+            map[user.id] = user;
+        });
+        return map;
+    }, [props.orgUsers]);
+
+    if (!props.currentUser) return;
+
+    return (
+        <div className='pt-16'>
+            <div className="flex items-center w-full justify-between mb-2 px-4 py-2 border border-gray-200">
+                <div className="flex justify-between items-center">
+                    <div>
+                        <h2 className="font-semibold">
+                            Inbox Mail
+                        </h2>
+                        <p>
+                            Manage your inbox messages.
+                        </p>
+                    </div>
+                </div>
+                <KernButton
+                    text="Send new mail"
+                    icon={MemoIconPlus}
+                    onClick={() => {
+                        setIsNewThread(true);
+                        setOpenCreateMail(true);
+                    }} />
+            </div>
+
+            {inboxMailThreads?.length === 0 ? (
+                <div className="flex flex-col items-center justify-center mt-20">
+                    <div className="text-2xl font-semibold mb-4">No Inbox Messages</div>
+                    <div className="text-gray-500 mb-6">You have no messages in your inbox</div>
+                </div>
+            ) : <div className="grid grid-cols-3 gap-x-4 p-3">
+                <div className="col-span-1">
+                    <div className="border border-gray-300 rounded-lg ">
+                        {inboxMailThreads.map((thread) => {
+                            const latestMail = thread.latestMail;
+                            const relevantUserIdThreadOverview =
+                                latestMail.senderId === props.currentUser.id
+                                    ? latestMail.recipientId
+                                    : latestMail.senderId;
+
+                            const { background, text } = uuidToPastelColorWithMatchingFont(relevantUserIdThreadOverview);
+                            const initials = userById[relevantUserIdThreadOverview]
+                                ? userById[relevantUserIdThreadOverview].firstName[0] + userById[relevantUserIdThreadOverview].lastName[0]
+                                : <IconUser />;
+
+                            return (
+
+                                <div
+                                    key={thread.threadId}
+                                    className={`flex flex-col py-3 px-4 border-b border-gray-200 last:border-b-0 first:rounded-t-lg last:rounded-b-lg cursor-pointer  transition-all transition-duration-150 ${selectedThread?.threadId === thread.threadId ? 'bg-slate-100 ' : 'hover:bg-slate-50'}`}
+                                    onClick={() => setSelectedThread(thread)}
+                                >
+                                    <div className="flex items-center space-x-4">
+                                        <div style={{ backgroundColor: background, color: text }} className="self-start shrink-0 mt-1  flex items-center justify-center w-10 h-10 border rounded-md p-2 text-sm font-semibold">
+                                            {initials}
+                                        </div>
+                                        <div className="grow min-w-0">
+                                            <div className="flex items-center justify-between gap-x-2 flex-nowrap">
+                                                <div className="text-gray-800 font-medium truncate">
+                                                    {userById[relevantUserIdThreadOverview]
+                                                        ? userById[relevantUserIdThreadOverview].firstName + " " + userById[relevantUserIdThreadOverview].lastName
+                                                        : "<Unknown User>"}
+                                                </div>
+                                                <div className="ml-auto text-xs text-gray-400 whitespace-nowrap">
+                                                    {formatDisplayTimestamp(latestMail.createdAt)}
+                                                </div>
+                                            </div>
+
+                                            <div className="text-gray-800 font-medium truncate">
+                                                {latestMail.subject}
+                                            </div>
+
+                                            <div className="text-gray-500 truncate">
+                                                {latestMail.content}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            )
+                        })}
+
+                    </div>
+                </div>
+                <div className="col-span-2">
+                    {selectedThread && threadMails && threadMails.length > 0 ? (
+                        threadMails.map(mail => (
+                            <div key={mail.id} className="py-3 px-4 border border-gray-300 rounded-lg shadow-sm bg-white">
+                                <div className="flex items-center justify-between mb-4">
+                                    <div className="grow min-w-0">
+                                        <h3 className="text-xl font-semibold text-gray-800">{mail.subject}</h3>
+                                        <div className="flex items-center justify-between gap-x-2 flex-nowrap">
+                                            <span className="font-medium text-gray-700">{userById[mail.senderId]?.firstName} {userById[mail.senderId]?.lastName}</span>
+                                            <span className="ml-auto text-xs text-gray-400 whitespace-nowrap">
+                                                {formatDisplayTimestampFull(mail.createdAt)}
+                                            </span>
+                                        </div>
+                                        <span className="text-sm text-gray-500">To: {userById[mail.recipientId]?.firstName} {userById[mail.recipientId]?.lastName}</span>
+
+                                    </div>
+                                </div>
+
+                                <div className="border-t border-gray-200 mt-4 pt-4 text-gray-700 whitespace-pre-line">
+                                    {mail.content}
+                                </div>
+
+                                <div className="mt-6 flex items-center justify-end space-x-3">
+                                    <KernButton
+                                        text="Reply"
+                                        onClick={() => {
+                                            setIsNewThread(false);
+                                            setOpenCreateMail(true);
+                                        }}
+                                    />
+                                    <KernButton
+                                        text="Delete"
+                                        onClick={() => {/* delete handler here */ }}
+                                    />
+                                </div>
+                            </div>
+                        ))
+                    ) : <div className="flex flex-col items-center justify-center mt-20">
+                        <div className="text-gray-500 mb-6">Select mail to see the details</div>
+                    </div>}
+                </div>
+
+            </div>}
+
+            <CreateNewMailModal open={openCreateMail} setOpen={setOpenCreateMail} threadId={selectedThread?.threadId} isNewThread={isNewThread} refetchInboxMailOverview={refetchInboxMailOverview} users={props.orgUsers} />
+        </div>
+
+    )
+}
+
+
+// Helper, export later if needed elsewhere
+function formatDisplayTimestamp(createdAt: string | Date): string {
+    const date = new Date(createdAt);
+    const now = new Date();
+
+    const isSameDay = (d1: Date, d2: Date) =>
+        d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate();
+
+    if (isSameDay(date, now)) {
+        const hours = date.getHours().toString().padStart(2, "0");
+        const minutes = date.getMinutes().toString().padStart(2, "0");
+        return `${hours}:${minutes}`;
+    }
+
+    const yesterday = new Date();
+    yesterday.setDate(now.getDate() - 1);
+    if (isSameDay(date, yesterday)) {
+        return "Yesterday";
+    }
+
+    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const weekday = weekdays[date.getDay()];
+    const day = date.getDate().toString().padStart(2, "0");
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const year = date.getFullYear().toString().slice(-2);
+
+    return `${weekday}, ${day}.${month}.${year}`;
+}
+
+function formatDisplayTimestampFull(createdAt: string | Date): string {
+    const date = new Date(createdAt);
+    const now = new Date();
+
+    const diffMs = now.getTime() - date.getTime();
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const weekday = weekdays[date.getDay()];
+    const day = date.getDate().toString().padStart(2, "0");
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const year = date.getFullYear().toString().padStart(4, "0");
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+
+    let relative = "";
+    if (diffMinutes < 1) {
+        relative = "(just now)";
+    } else if (diffMinutes < 60) {
+        relative = `(${diffMinutes} minute${diffMinutes !== 1 ? "s" : ""} ago)`;
+    } else if (diffHours < 24 && isSameDay(date, now)) {
+        relative = `(${diffHours} hour${diffHours !== 1 ? "s" : ""} ago)`;
+    } else {
+        relative = `(${diffDays} day${diffDays !== 1 ? "s" : ""} ago)`;
+    }
+
+    return `${weekday}, ${day}.${month}.${year} ${hours}:${minutes} ${relative}`;
+}
+
+function isSameDay(d1: Date, d2: Date): boolean {
+    return (
+        d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate()
+    );
+}
+
+function uuidToPastelColorWithMatchingFont(uuid: string): { background: string; text: string } {
+    let hash = 0;
+    for (let i = 0; i < uuid.length; i++) {
+        hash = (hash * 31 + uuid.charCodeAt(i)) >>> 0;
+    }
+
+    const hue = hash % 360;
+    const saturation = 40 + (hash % 15); // 40–55%
+    const lightness = 70 + (hash % 10);  // 70–80%
+    const background = hslToHex(hue, saturation, lightness);
+
+    const textLightness = lightness - 40;
+    const text = hslToHex(hue, saturation, clamp(textLightness, 20, 90));
+    return { background, text };
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+    s /= 100;
+    l /= 100;
+
+    const k = (n: number) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n: number) =>
+        l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+
+    const toHex = (x: number) =>
+        Math.round(255 * x)
+            .toString(16)
+            .padStart(2, "0");
+
+    return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`;
+}
+
+function clamp(num: number, min: number, max: number): number {
+    return Math.min(Math.max(num, min), max);
+}
\ No newline at end of file
diff --git a/components/inbox-mail/service-mail.tsx b/components/inbox-mail/service-mail.tsx
new file mode 100644
index 0000000..e0eef5e
--- /dev/null
+++ b/components/inbox-mail/service-mail.tsx
@@ -0,0 +1,28 @@
+import { FetchType, jsonFetchWrapper } from "@/submodules/javascript-functions/basic-fetch";
+
+export const BACKEND_BASE_URI = '/cognition-gateway';
+const url = `${BACKEND_BASE_URI}/api/v1/inbox-mail`;
+
+export function sendNewMail(recipientIds: string[], subject: string, content: string, isImportant: boolean, metaData: any, onResult: (result: any) => void, threadId?: string) {
+    const body = JSON.stringify({ recipientIds, threadId, subject, content, isImportant, metaData });
+    jsonFetchWrapper(url, FetchType.POST, onResult, body);
+}
+
+export function getInboxMessages(onResult: (result: any) => void) {
+    jsonFetchWrapper(url, FetchType.GET, onResult);
+}
+
+export function getAccessibleSendToEmails(onResult: (result: any) => void) {
+    const fetchUrl = `${url}/accessible-emails`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
+
+export function getInboxMailOverviewByThreadsPaginated(page: number, limit: number, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/overview?page=${page}&limit=${limit}`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
+
+export function getInboxMailsByThread(threadId: string, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/thread/${threadId}`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
diff --git a/components/inbox-mail/types-mail.tsx b/components/inbox-mail/types-mail.tsx
new file mode 100644
index 0000000..aa5341f
--- /dev/null
+++ b/components/inbox-mail/types-mail.tsx
@@ -0,0 +1,16 @@
+export type InboxMail = {
+    id: string;
+    threadId: string;
+    senderId: string;
+    recipientId: string;
+    subject: string;
+    content: string;
+    beingWorkedOn: boolean;
+    childId: string;
+    parentId: string;
+    createdAt: string;
+    isSeen: boolean;
+    metaData: any;
+    organizationId: string;
+    markAsImportant: boolean;
+}
\ No newline at end of file
diff --git a/components/kern-icons/icons.ts b/components/kern-icons/icons.ts
index bb7ff6b..4c10820 100644
--- a/components/kern-icons/icons.ts
+++ b/components/kern-icons/icons.ts
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandGithub, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheck, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconClock, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGitCommit, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMinus, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRecycle, IconRefresh, IconRefreshAlert, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShare, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode, IconDragDrop2, IconCircleDotted, IconWorld } from '@tabler/icons-react';
+import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandGithub, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheck, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconClock, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGitCommit, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMinus, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRecycle, IconRefresh, IconRefreshAlert, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShare, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode, IconDragDrop2, IconCircleDotted, IconWorld, IconMail } from '@tabler/icons-react';
 
 export const MemoIconHome = memo(IconHome);
 export const MemoIconInfoCircle = memo(IconInfoCircle);
@@ -184,4 +184,5 @@ export const MemoIconArrowNarrowRight = memo(IconArrowNarrowRight);
 export const MemoIconMinus = memo(IconMinus);
 export const MemoIconDragDrop2 = memo(IconDragDrop2);
 export const MemoIconCircleDotted = memo(IconCircleDotted);
-export const MemoIconWorld = memo(IconWorld);
\ No newline at end of file
+export const MemoIconWorld = memo(IconWorld);
+export const MemoIconMail = memo(IconMail);