diff --git a/components/inbox-mail/CreateNewMailModal.tsx b/components/inbox-mail/CreateNewMailModal.tsx
new file mode 100644
index 0000000..66d07fa
--- /dev/null
+++ b/components/inbox-mail/CreateNewMailModal.tsx
@@ -0,0 +1,421 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import useRefState from "../../hooks/useRefState";
+import { InfoButton } from "../InfoButton";
+import { MemoIconMail } from "../kern-icons/icons";
+import { User, InboxMailThread } from "./types-mail";
+import { Fragment } from 'react'
+import KernButton from "../kern-button/KernButton";
+import KernDropdown from "../KernDropdown";
+interface CreateNewMailModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    handleInboxMailCreation: (content: string, recipientIds?: string[], subject?: string, isImportant?: boolean, metaData?: any, threadId?: string) => void;
+    users: User[];
+    currentUser: User;
+    isAdmin: boolean;
+    translator: (key: string) => string;
+    selectedOrganization?: any;
+    setSelectedOrganization?: (org: any) => void;
+    organizations?: any[];
+    thread?: InboxMailThread;
+    isNewThread?: boolean;
+    isAdminSupportThread?: boolean;
+};
+
+export default function CreateNewMailModal(props: CreateNewMailModalProps) {
+    const router = useRouter();
+    const t = useMemo(() => props.translator, [props.translator]);
+
+    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: isImportant, setState: setIsImportant, ref: isImportantRef } = useRefState(false);
+    const { state: selectedPeople, setState: setSelectedPeople, ref: selectedPeopleRef } = useRefState<User[]>([]);
+
+
+    const cancelButtonRef = useRef(null);
+
+    useEffect(() => {
+        if (!(props.open && props.thread && !props.isNewThread && props.thread.latestMail && props.users)) return;
+
+        const currentThreadPeople = props.thread.participantIds;
+        setSelectedPeople(props.users.filter((user) => currentThreadPeople.includes(user.id) && user.id !== props.currentUser.id));
+        setSubject(props.thread.subject);
+    }, [props.open, props.thread, props.isNewThread, props.users]);
+
+    useEffect(() => {
+        if (projectId) {
+            setIncludeProject(true);
+        }
+        if (chatId) {
+            setIncludeChat(true);
+        }
+    }, [projectId, chatId]);
+
+    const initModal = useCallback(() => {
+        setSelectedPeople([]);
+        setSubject('');
+        setContent('');
+        props.setSelectedOrganization?.(null);
+        setIsImportant(false);
+    }, [props.setSelectedOrganization]);
+
+    const clearRouterParams = useCallback(() => {
+        router.replace('/inbox-mail');
+    }, []);
+
+    const disabledSend = useMemo(() => {
+        return (props.isAdminSupportThread ? false : selectedPeople.length === 0) || subject.trim() === '' || content.trim() === '';
+    }, [selectedPeople, subject, content, props.isAdminSupportThread]);
+
+    const handleCreateMail = useCallback(() => {
+        const metaData = {
+            ...(projectId && includeProjectRef.current && { projectId }),
+            ...(chatId && includeChatRef.current && { conversationId: chatId })
+        };
+        props.handleInboxMailCreation(contentRef.current, selectedPeopleRef.current.map((user) => user.id), subjectRef.current, isImportantRef.current, metaData, props.isNewThread ? undefined : props.thread?.id);
+        initModal();
+        clearRouterParams();
+    }, [props.thread?.id, props.isNewThread, projectId, chatId]);
+
+    return (
+        <Transition.Root show={props.open} as={Fragment}>
+            <Dialog as="div" className="relative z-50" initialFocus={cancelButtonRef} onClose={props.setOpen ? props.setOpen : () => null}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full justify-center p-4 items-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <div className="flex justify-center w-full">
+                                <div className="w-full max-w-2xl">
+                                    <Dialog.Panel className="relative rounded-lg bg-white shadow-xl sm:my-8">
+
+                                        <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">
+                                                        {props.isNewThread ? t("inboxMail.modalTitle") : t("inboxMail.replyModalTitle")}
+                                                    </Dialog.Title>
+                                                    <div className='mt-3 flex flex-col gap-y-2'>
+                                                        {props.isAdmin && props.isNewThread && !props.isAdminSupportThread &&
+                                                            <div className="text-sm text-gray-500 text-left">
+                                                                <label className="block text-sm font-medium text-gray-700 mb-1">{t("inboxMail.organization")}</label>
+                                                                <KernDropdown options={props.organizations} buttonName={props.selectedOrganization?.name || t("inboxMail.orgSelectionPlaceholder")} selectedOption={props.setSelectedOrganization} scrollAfterNOptions={5} />
+                                                            </div>
+                                                        }
+                                                        {props.isAdminSupportThread ?
+                                                            <KernAIReport translator={t} />
+                                                            :
+                                                            <UserSelector
+                                                                label={t("inboxMail.sendTo")}
+                                                                users={props.users}
+                                                                selectedUsers={selectedPeople}
+                                                                onChange={setSelectedPeople}
+                                                                disabled={!props.isNewThread}
+                                                                translator={t}
+                                                            />
+                                                        }
+                                                        <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 disabled:cursor-not-allowed disabled:bg-slate-50"
+                                                                    value={subject}
+                                                                    onChange={(e) => setSubject(e.target.value)}
+                                                                    disabled={!props.isNewThread}
+                                                                    placeholder={t("inboxMail.subjectPlaceholder")}
+                                                                />
+                                                            </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}
+                                                                    placeholder={t("inboxMail.contentPlaceholder")}
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                        {props.isNewThread &&
+                                                            <div className="flex items-center gap-x-2">
+                                                                <input
+                                                                    type="checkbox"
+                                                                    name="isImportant"
+                                                                    id="isImportant"
+                                                                    checked={isImportant}
+                                                                    onChange={(e) => setIsImportant(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="isImportant" className="block text-sm font-medium text-gray-700 cursor-pointer">
+                                                                    {t("inboxMail.isImportant")}
+                                                                </label>
+                                                                <InfoButton content={t("inboxMail.isImportantInfo")} infoButtonSize="sm" />
+                                                            </div>
+                                                        }
+                                                        {props.isAdminSupportThread && 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>}
+                                                        {props.isAdminSupportThread && projectId && 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>
+                                            <div className="mt-5 flex gap-x-2 flex-row-reverse">
+                                                <KernButton
+                                                    text={t("inboxMail.sendButton")}
+                                                    disabled={disabledSend}
+                                                    buttonColor="green"
+                                                    solidTheme={true}
+                                                    textColor="white"
+                                                    size="solid-large"
+                                                    onClick={handleCreateMail}
+                                                />
+                                                <KernButton
+                                                    text={t("inboxMail.cancelButton")}
+                                                    innerRef={cancelButtonRef}
+                                                    onClick={() => props.setOpen(false)}
+                                                />
+                                            </div>
+                                        </div>
+                                    </Dialog.Panel>
+                                </div>
+                            </div>
+                        </Transition.Child>
+                    </div>
+                </div >
+            </Dialog >
+        </Transition.Root >
+    )
+}
+
+
+
+interface UserSelectorProps {
+    users: User[];
+    selectedUsers: User[];
+    onChange: (selected: User[]) => void;
+    translator: (key: string) => string;
+    disabled?: boolean;
+    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);
+    const t = useMemo(() => props.translator, [props.translator]);
+
+    useEffect(() => {
+        if (inputValue.trim() === "") {
+            setFilteredUsers(props.showAll ? props.users : []);
+        } 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, props.selectedUsers, props.showAll]);
+
+    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 = useCallback((user: User) => {
+        if (!props.selectedUsers.some((u) => u.id === user.id)) {
+            props.onChange([...props.selectedUsers, user]);
+        }
+        setInputValue("");
+        if (editableRef.current) editableRef.current.textContent = "";
+        setIsOpen(false);
+    }, [props.selectedUsers, props.onChange]);
+
+    const handleInput = useCallback((e: React.FormEvent<HTMLDivElement>) => {
+        const value = e.currentTarget.textContent || "";
+        setInputValue(value);
+    }, []);
+
+    const handleRemove = useCallback((mail: string) => {
+        props.onChange(props.selectedUsers.filter((p) => p.mail !== mail));
+    }, [props.selectedUsers, props.onChange]);
+
+    const handleKeyDown = useCallback((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);
+        }
+    }, [filteredUsers, inputValue, props.selectedUsers, handleRemove, handleUserSelect]);
+
+    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 ${props.disabled ? 'bg-slate-50 cursor-not-allowed' : 'bg-white cursor-text'} min-h-[40px] relative`}
+                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-1 rounded-lg leading-none min-h-[1.5rem]"
+                    >
+                        {`${user.firstName} ${user.lastName}`}
+                        {props.disabled ? null : (
+                            <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={!props.disabled}
+                    suppressContentEditableWarning
+                    onInput={handleInput}
+                    onFocus={() => setIsOpen(true)}
+                    onKeyDown={handleKeyDown}
+                    className="flex-grow border-none text-sm outline-none focus:ring-0 focus:border-transparent min-w-[100px] min-h-[1.5rem] relative"
+                />
+                {props.selectedUsers.length === 0 && !inputValue && (
+                    <span
+                        className="absolute left-4 bottom-2 text-gray-400 pointer-events-none select-none text-sm italic min-h-[1.5rem] "
+                    >
+                        {t("inboxMail.searchPlaceholder")}
+                    </span>
+                )}
+            </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>
+    );
+}
+
+interface KernAIReportProps {
+    translator: (key: string) => string;
+}
+
+function KernAIReport(props: KernAIReportProps) {
+    const t = useMemo(() => props.translator, [props.translator]);
+    return (
+        <div className="relative">
+            <label
+                htmlFor="kernai-team"
+                className="block text-sm font-medium text-gray-700 mb-1"
+            >
+                {t("inboxMail.sendTo")}:
+            </label>
+
+            <div
+                id="kernai-team"
+                className="w-full flex flex-wrap items-center gap-1 border border-gray-300 rounded-md shadow-sm px-3 py-2 bg-slate-50"
+            >
+                <span className="flex items-center bg-purple-100 text-purple-800 text-sm px-2 py-1 rounded-lg leading-none min-h-[1.5rem] cursor-not-allowed">
+                    {t("inboxMail.kernAITeam")}
+                </span>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/DeleteInboxMailModal.tsx b/components/inbox-mail/DeleteInboxMailModal.tsx
new file mode 100644
index 0000000..239a12c
--- /dev/null
+++ b/components/inbox-mail/DeleteInboxMailModal.tsx
@@ -0,0 +1,97 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { Fragment, useMemo, useRef } from "react";
+
+interface ConfirmDeleteModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onConfirm: () => void;
+    translator: (key: string) => string;
+}
+
+
+export default function DeleteInboxMailModal(props: ConfirmDeleteModalProps) {
+
+    const cancelRef = useRef(null);
+    const t = useMemo(() => props.translator, [props.translator]);
+
+    return (
+        <Transition.Root show={props.open} as={Fragment}>
+            <Dialog as="div" className="relative z-50" initialFocus={cancelRef} onClose={props.setOpen ? props.setOpen : () => null}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full justify-center p-4 items-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <div className="flex justify-center w-full">
+                                <div className="w-full max-w-md">
+                                    <Dialog.Panel className="relative rounded-lg bg-white shadow-xl sm:my-8">
+                                        <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-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                                                    <IconAlertTriangle className="h-6 w-6 text-red-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.deleteHeader")}
+                                                    </Dialog.Title>
+
+                                                    <p className="mt-2 text-sm text-gray-600">{t("inboxMail.deleteConfirmation")}</p>
+                                                </div>
+                                            </div>
+                                            <div className="mt-6 sm:flex sm:flex-row-reverse gap-3">
+                                                <button
+                                                    onClick={() => {
+                                                        props.onConfirm();
+                                                        props.setOpen(false);
+                                                    }}
+                                                    className="inline-flex w-full justify-center rounded-md border border-transparent 
+                                                                bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm 
+                                                                hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm"
+                                                >
+                                                    {t("inboxMail.deleteButton")}
+                                                </button>
+                                                <button
+                                                    ref={cancelRef}
+                                                    onClick={() => props.setOpen(false)}
+                                                    className="inline-flex w-full justify-center rounded-md border border-gray-300 
+                                                                bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm 
+                                                                hover:bg-gray-50 sm:w-auto sm:text-sm"
+                                                >
+                                                    {t("inboxMail.cancelButton")}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </Dialog.Panel>
+                                </div>
+                            </div>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/InboxMailAdminPanel.tsx b/components/inbox-mail/InboxMailAdminPanel.tsx
new file mode 100644
index 0000000..8425cac
--- /dev/null
+++ b/components/inbox-mail/InboxMailAdminPanel.tsx
@@ -0,0 +1,129 @@
+import React, { useCallback } from "react";
+import { InboxMailThread, InboxMailThreadSupportProgressState, User } from "./types-mail";
+import { IconExternalLink, IconProgressCheck } from "@tabler/icons-react";
+import KernDropdown from "../KernDropdown";
+import { addUserToOrganization, removeUserFromOrganization } from "./service-mail";
+
+interface ProgressOption {
+    name: string;
+    value: InboxMailThreadSupportProgressState;
+}
+
+interface InboxMailAdminPanelProps {
+    selectedThread: InboxMailThread;
+    progressStateOptions: ProgressOption[];
+    handleInboxMailProgressChange: (value: InboxMailThreadSupportProgressState) => void;
+    currentUser: User;
+}
+
+function InboxMailAdminPanel(props: InboxMailAdminPanelProps) {
+    // No translations needed, admin only
+    const assignAndJump = useCallback((toConversation: boolean) => {
+        if (!props.currentUser) return;
+        const currentOrganizationId = props.currentUser?.organizationId;
+        if (!currentOrganizationId) {
+            addUserToOrganization(props.currentUser.mail, props.selectedThread.organizationName, (res) => {
+                jumptoConversationOrProject(toConversation);
+
+            });
+        } else if (currentOrganizationId === props.selectedThread.organizationId) {
+            jumptoConversationOrProject(toConversation);
+
+        } else {
+            removeUserFromOrganization(props.currentUser.mail, (res) => {
+                addUserToOrganization(props.currentUser.mail, props.selectedThread.organizationName, (res) => {
+                    jumptoConversationOrProject(toConversation);
+                });
+            });
+        }
+    }, [props.currentUser, props.selectedThread]);
+
+    const jumptoConversationOrProject = useCallback((toConversation: boolean) => {
+        if (toConversation) {
+            window.open(`/cognition/projects/${props.selectedThread.metaData?.projectId}/ui/${props.selectedThread.metaData?.conversationId}`, '_blank');
+        }
+        else {
+            window.open(`/cognition/projects/${props.selectedThread.metaData.projectId}/pipeline`, '_blank');
+        }
+    }, [props.selectedThread.metaData]);
+
+    return (
+        <div>
+            <div className="flex items-center gap-x-2">
+                <div className="flex items-center gap-x-1 mb-2 mt-1 overflow-y-visible z-10">
+                    <span className="text-sm font-medium mr-2">Progress:</span>
+                    <KernDropdown
+                        dropdownWidth="w-40"
+                        buttonName={
+                            props.progressStateOptions.find(
+                                (option) => option.value === props.selectedThread.progressState
+                            )?.name || "Set progress"
+                        }
+                        options={props.progressStateOptions}
+                        selectedOption={(option: { label: string; value: InboxMailThreadSupportProgressState }) =>
+                            props.handleInboxMailProgressChange(option.value)
+                        }
+                    />
+                </div>
+                {props.selectedThread.progressState !== InboxMailThreadSupportProgressState.PENDING && props.selectedThread.metaData?.supportOwnerName && (
+                    <div className="bg-orange-400 text-white rounded-full px-2 py-0.5 text-xs flex items-center gap-x-2 ml-2">
+                        <IconProgressCheck className="w-5 h-5" />
+                        {props.selectedThread.metaData.supportOwnerName.first}{" "}
+                        {props.selectedThread.metaData.supportOwnerName.last}
+                    </div>
+                )}
+            </div>
+
+            {props.selectedThread.metaData?.projectId && (
+                <div className="flex items-center gap-3 ml-2 my-2 px-3 py-1 rounded-xl bg-slate-400/60 text-white w-fit">
+                    <div className="flex items-center gap-1.5 text-xs">
+                        <span className="font-semibold">Project</span>
+                    </div>
+
+                    <div className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md">
+                        <span>ID:</span>
+                        <span>{props.selectedThread.metaData.projectId}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md">
+                        <span>{props.selectedThread.metaData.projectName}</span>
+                    </div>
+                    <button
+                        className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md"
+                        onClick={() =>
+                            assignAndJump(false)
+                        }
+                    >
+                        <IconExternalLink className="w-4 h-4" />
+                    </button>
+                </div>
+            )
+            }
+
+            {
+                props.selectedThread.metaData?.conversationId && (
+                    <div className="flex items-center gap-3 ml-2 my-2 px-3 py-1 rounded-xl bg-gray-400/60 text-white w-fit">
+                        <div className="flex items-center gap-1.5 text-xs">
+                            <span className="font-semibold">Conversation</span>
+                        </div>
+
+                        <div className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md">
+                            <span>ID:</span>
+                            <span>{props.selectedThread.metaData.conversationId}</span>
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md">
+                            <span>{props.selectedThread.metaData.conversationHeader || "N/A"}</span>
+                        </div>
+                        <button
+                            className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md"
+                            onClick={() => assignAndJump(true)}
+                        >
+                            <IconExternalLink className="w-4 h-4" />
+                        </button>
+                    </div>
+                )
+            }
+        </div >
+    );
+};
+
+export default InboxMailAdminPanel;
diff --git a/components/inbox-mail/InboxMailItem.tsx b/components/inbox-mail/InboxMailItem.tsx
new file mode 100644
index 0000000..0da1e04
--- /dev/null
+++ b/components/inbox-mail/InboxMailItem.tsx
@@ -0,0 +1,69 @@
+import { IconTrash } from "@tabler/icons-react";
+import KernButton from "../kern-button/KernButton";
+import DeleteInboxMailModal from "./DeleteInboxMailModal";
+import { InboxMail, User } from "./types-mail";
+import { useCallback, useMemo, useState } from "react";
+import { formatDisplayTimestampFull } from "@/submodules/javascript-functions/date-parser";
+
+interface ThreadMailItemProps {
+    mail: InboxMail;
+    currentUser: User;
+    translator: (key: string) => string;
+    onDelete?: (id: string) => void;
+}
+
+export default function ThreadMailItem(props: ThreadMailItemProps) {
+
+    const t = useMemo(() => props.translator, [props.translator]);
+    const [openDeleteConfirm, setOpenDeleteConfirm] = useState(false);
+    const handleConfirmDelete = useCallback(() => {
+        if (props.onDelete) {
+            props.onDelete(props.mail.id);
+        }
+    }, [props.mail.id, props.onDelete]);
+
+    return (
+        <>
+            <div className="py-3 px-4 mb-2 border border-gray-300 rounded-lg shadow-sm bg-white">
+                <div className="flex items-center justify-between text-sm">
+                    <div className="grow min-w-0">
+                        <div className="flex items-center justify-between gap-x-2 flex-nowrap">
+                            <span className="font-medium text-gray-700">
+                                {props.mail.senderName?.first} {props.mail.senderName?.last}
+                            </span>
+
+                            <span className="ml-auto text-xs text-gray-400 whitespace-nowrap">
+                                {formatDisplayTimestampFull(props.mail.createdAt)}
+                            </span>
+                        </div>
+
+                        <span className="text-sm text-gray-500">
+                            {t("inboxMail.to")}: {props.mail.recipientNames.map((name) => `${name.first} ${name.last}`).join(", ")}
+                        </span>
+                    </div>
+                </div>
+
+                <div className="border-t border-gray-200 mt-2 pt-2 text-gray-700 whitespace-pre-line break-words">
+                    {props.mail.content}
+                </div>
+
+                <div className="mt-2 flex items-center justify-end space-x-3">
+                    {props.currentUser.id === props.mail.senderId && (
+                        <KernButton
+                            icon={IconTrash}
+                            size="small"
+                            className="text-gray-700 hover:text-red-700"
+                            onClick={() => setOpenDeleteConfirm(true)}
+                        />
+                    )}
+                </div>
+            </div>
+            <DeleteInboxMailModal
+                open={openDeleteConfirm}
+                setOpen={setOpenDeleteConfirm}
+                onConfirm={handleConfirmDelete}
+                translator={props.translator}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/InboxMailNavigator.tsx b/components/inbox-mail/InboxMailNavigator.tsx
new file mode 100644
index 0000000..7e67ba2
--- /dev/null
+++ b/components/inbox-mail/InboxMailNavigator.tsx
@@ -0,0 +1,73 @@
+import { MemoIconMail } from "@/submodules/react-components/components/kern-icons/icons";
+import { useRouter } from "next/router";
+import tinycolor from 'tinycolor2'
+import { useNewMailCount } from "./helper";
+import { useCallback, useMemo } from "react";
+
+type InboxMailNavigatorProps = {
+    forChatArea?: boolean;
+    project?: { customerColorPrimary: string; id: string; };
+    chatId?: string;
+    refreshToken?: any;
+}
+
+export default function InboxMailNavigator(props: InboxMailNavigatorProps) {
+    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 />
+            <InboxMailBadge forChatArea={props.forChatArea} refreshToken={props.refreshToken} />
+        </button>
+    </div>
+}
+
+
+
+interface NewMailBadgeProps {
+    forChatArea?: boolean;
+    refreshInterval?: number; // optional, default to 60000ms
+    refreshToken?: any; // optional, to trigger refresh when changed
+}
+
+export function InboxMailBadge(props: NewMailBadgeProps) {
+    const newMailCount = useNewMailCount(props.refreshInterval, props.refreshToken);
+
+    if (newMailCount === 0) return;
+
+    const badgeClasses = props.forChatArea
+        ? 'top-0 right-0'
+        : 'top-1 right-1';
+
+    return (
+        <div className={`absolute flex items-center justify-center w-3 h-3 bg-red-500 rounded-full text-white text-[0.625rem] font-bold pointer-events-none ${badgeClasses}`}>
+            {newMailCount}
+        </div>
+    );
+}
+
+export function InboxMailTitleBadge(props: { newMailCount?: number, refreshToken?: any }) {
+    return (
+        <div className="relative inline-flex items-center pr-5">
+            <span >Inbox Mail</span>
+            <InboxMailBadge forChatArea={false} refreshToken={props.refreshToken} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/InboxMailThreadOverview.tsx b/components/inbox-mail/InboxMailThreadOverview.tsx
new file mode 100644
index 0000000..d47284e
--- /dev/null
+++ b/components/inbox-mail/InboxMailThreadOverview.tsx
@@ -0,0 +1,118 @@
+import { useMemo } from "react";
+import { InboxMailThread, InboxMailThreadSupportProgressState } from "./types-mail";
+import { Tooltip } from "@nextui-org/react";
+import { MemoIconAlertTriangle, MemoIconCircleCheck, MemoIconHelpCircle, MemoIconProgressCheck, MemoIconUser } from "../kern-icons/icons";
+import { formatDisplayTimestamp } from "@/submodules/javascript-functions/date-parser";
+
+interface InboxMailThreadOverviewProps {
+    thread: InboxMailThread;
+    isAdmin: boolean;
+    selectedThread: InboxMailThread | null;
+    setSelectedThread: (t: InboxMailThread) => void;
+    translator: (key: string) => string;
+};
+
+export default function InboxMailThreadOverview(props: InboxMailThreadOverviewProps) {
+    const t = useMemo(() => props.translator, [props.translator]);
+    const {
+        displayName,
+        displayInitials,
+        background,
+        text,
+        recipientIds,
+        DisplayIcon
+    } = props.thread.display;
+
+    const unreadMailCount = useMemo(() => {
+        if (props.isAdmin && props.thread.isAdminSupportThread) {
+            return props.thread.metaData.unreadMailCountAdmin
+        }
+        else {
+            return props.thread.unreadMailCount
+        }
+    }, [props.thread, props.isAdmin]);
+
+    return (
+        <div
+            key={props.thread.id}
+            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
+            ${props.selectedThread?.id === props.thread.id ? "bg-slate-100" : "hover:bg-slate-50"}`}
+            onClick={() => props.setSelectedThread(props.thread)}
+        >
+            <div className="flex items-center space-x-4">
+
+                {!props.thread.isAdminSupportThread || props.isAdmin ? (
+                    <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 relative"
+                    >
+                        {displayInitials || <DisplayIcon /> || <MemoIconUser />}
+                        {recipientIds?.length > 1 && (
+                            <div className="absolute -bottom-0.5 -right-0.5 bg-gray-600 text-white text-xs font-semibold rounded-full w-4 h-4 flex items-center justify-center">
+                                {recipientIds.length}
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div 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 bg-[#18181B]">
+                        <img className="h-8 w-auto" src="/cognition/kernai.svg" alt="Kern AI" />
+                    </div>
+                )}
+
+                <div className="grow min-w-0">
+                    <div className="flex items-start justify-between gap-x-2 flex-nowrap">
+                        <div className="flex items-center">
+                            <div className="text-gray-800 font-medium truncate mt-0.5">
+                                {displayName ?? `<${t("inboxMail.unknownUser")}>`}
+                            </div>
+                            {unreadMailCount > 0 && (
+                                <span className="ml-2 inline-flex items-center justify-center bg-slate-400 text-white text-[0.625rem] font-semibold rounded-full h-4 min-w-4 px-1.5 whitespace-nowrap">
+                                    {unreadMailCount} {t("inboxMail.newBadge")}
+                                </span>
+                            )}
+                        </div>
+                        <div className="flex ml-auto items-center gap-x-2 flex-wrap gap-y-2 justify-end">
+                            <div className={` ${(props.thread.isAdminSupportThread || props.thread.isImportant || props.thread.progressState === InboxMailThreadSupportProgressState.IN_PROGRESS) ? "flex" : "hidden"} items-center gap-x-2 bg-slate-100/70 py-1 px-2 rounded-full`}>
+                                {props.thread.isAdminSupportThread && (
+                                    <Tooltip
+                                        content={t("inboxMail.supportRequest")}
+                                        placement="top"
+                                        color="invert"
+                                        className="cursor-help"
+                                    >
+                                        <MemoIconHelpCircle className="h-[1.125rem] w-auto text-red-600 mb-0.5" />
+                                    </Tooltip>
+                                )}
+                                {props.thread.isImportant && (
+                                    <Tooltip content={t("inboxMail.highPriority")} placement="top" color="invert" className="cursor-help">
+                                        <MemoIconAlertTriangle className="h-[1.125rem] w-auto text-orange-600 mb-0.5" />
+                                    </Tooltip>
+                                )}
+                                {props.thread.progressState === InboxMailThreadSupportProgressState.IN_PROGRESS && (
+                                    <Tooltip content={t("inboxMail.inProgress")} placement="top" color="invert" className="cursor-help">
+                                        <MemoIconProgressCheck className="h-[1.125rem] w-auto text-orange-600 mb-0.5" />
+                                    </Tooltip>
+                                )}
+                                {props.thread.progressState === InboxMailThreadSupportProgressState.RESOLVED && (
+                                    <Tooltip content={t("inboxMail.resolved")} placement="top" color="invert" className="cursor-help">
+                                        <MemoIconCircleCheck className="h-[1.125rem] w-auto text-green-600 mb-0.5" />
+                                    </Tooltip>
+                                )}
+                            </div>
+                            <div className="text-xs text-gray-400 whitespace-nowrap ml-2 shrink-0 py-1.5">
+                                {formatDisplayTimestamp(props.thread.latestMail?.createdAt)}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="text-gray-800 font-medium truncate min-h-[1.5rem]">
+                        {props.thread.subject}
+                    </div>
+                    <div className="text-gray-500 truncate min-h-[1.5rem]">
+                        {props.thread.latestMail?.content}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/inbox-mail/InboxMailView.tsx b/components/inbox-mail/InboxMailView.tsx
new file mode 100644
index 0000000..d64a367
--- /dev/null
+++ b/components/inbox-mail/InboxMailView.tsx
@@ -0,0 +1,274 @@
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import CreateNewMailModal from "./CreateNewMailModal";
+import { InboxMail, InboxMailThread, User, InboxMailThreadSupportProgressState } from "./types-mail";
+import { getInboxMailOverviewByThreadsPaginated, getInboxMailsByThread, createInboxMailByThread, updateInboxMailThreadProgress, deleteInboxMailById } from "./service-mail";
+import KernButton from "../kern-button/KernButton";
+import { MemoIconPlus, MemoIconRefresh, MemoIconHelpCircle } from "../kern-icons/icons";
+import useRefState from "../../hooks/useRefState";
+import { MAIL_LIMIT_PER_PAGE, prepareThreadDisplayData } from "./helper";
+import useEnumOptionsTranslated, { getEnumOptionsForLanguage } from "../../hooks/enums/useEnumOptionsTranslated";
+import { getUsers, getUserInfoExtended, getIsAdmin, getAllOrganizations } from "./service-mail";
+import Pagination from "../pagination/Pagination";
+import InboxMailAdminPanel from "./InboxMailAdminPanel";
+import { UserRole } from "@/submodules/javascript-functions/enums/enums";
+import InboxMailThreadOverview from "./InboxMailThreadOverview";
+import ThreadMailItem from "./InboxMailItem";
+
+
+interface InboxMailViewProps {
+    InboxMailHeader: (props: { children: React.ReactNode }) => JSX.Element;
+    translatorScope: { type: "i18n" | "local"; translator: (key: string) => string };
+    handleInboxMailRefreshToken?: (token: any) => void;
+}
+export default function InboxMailView(props: InboxMailViewProps) {
+
+    const t = props.translatorScope?.translator;
+    const [inboxMailThreads, setInboxMailThreads] = useState<InboxMailThread[]>([]);
+    const [openCreateMail, setOpenCreateMail] = useState(false);
+    const [isNewThread, setIsNewThread] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [fullCount, setFullCount] = useState(0);
+    const [selectedThread, setSelectedThread] = useState<InboxMailThread>(null);
+    const [threadMails, setThreadMails] = useState<InboxMail[]>([]);
+    const [refreshing, setRefreshing] = useState(false);
+    const { state: isAdminSupportThread, setState: setIsAdminSupportThread, ref: isAdminSupportThreadRef } = useRefState(false);
+    const [currentUser, setCurrentUser] = useState(null);
+    const [users, setUsers] = useState<User[]>([]);
+    const [organizations, setOrganizations] = useState([]);
+    const [selectedOrganization, setSelectedOrganization] = useState(null);
+    const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
+
+    const progressStateOptions = props.translatorScope?.type === "local"
+        ? getEnumOptionsForLanguage(InboxMailThreadSupportProgressState, "InboxMailThreadSupportProgressState", t, "en")
+        : props.translatorScope?.type === "i18n" ? useEnumOptionsTranslated(InboxMailThreadSupportProgressState, "InboxMailThreadSupportProgressState", "enums") : [];
+
+    useEffect(() => {
+        getUserInfoExtended(res => {
+            setCurrentUser(res);
+        });
+        getIsAdmin((isAdmin) => setIsAdmin(isAdmin));
+    }, []);
+
+    useEffect(() => {
+        if (!isAdmin) return;
+        getAllOrganizations((res) => {
+            setOrganizations(res);
+        });
+    }, [isAdmin]);
+
+    useEffect(() => {
+        if (isAdmin === undefined || !currentUser) return;
+        const limitedTeams = (currentUser?.role == UserRole.ENGINEER || isAdmin) ? false : true;
+        getUsers((res) => setUsers(res.filter(u => u.id !== currentUser.id)), true, limitedTeams, limitedTeams, selectedOrganization?.id);
+    }, [isAdmin, selectedOrganization, currentUser]);
+
+    useEffect(() => {
+        refetchInboxMailOverview();
+    }, [currentPage]);
+
+    useEffect(() => {
+        if (!selectedThread?.id) return
+        refetchSelectedThreadMails();
+
+    }, [selectedThread?.id, props.handleInboxMailRefreshToken, isAdmin]);
+
+    const refetchInboxMailOverview = useCallback(() => {
+        getInboxMailOverviewByThreadsPaginated(currentPage, MAIL_LIMIT_PER_PAGE, (res) => {
+            setInboxMailThreads(res.threads);
+            setFullCount(res?.totalThreads);
+            props.handleInboxMailRefreshToken?.(Date.now());
+        });
+    }, [currentPage, props.handleInboxMailRefreshToken]);
+
+    const refetchSelectedThreadMails = useCallback((resetRefreshToken: boolean = true) => {
+        if (!selectedThread) return;
+        getInboxMailsByThread(selectedThread.id, (res) => {
+            setThreadMails(res);
+            if (selectedThread.unreadMailCount > 0) {
+                setInboxMailThreads(prevThreads => prevThreads.map(t => t.id === selectedThread.id ? { ...t, unreadMailCount: 0 } : t));
+                if (resetRefreshToken) props.handleInboxMailRefreshToken?.(Date.now());
+            }
+            if (selectedThread.isAdminSupportThread && isAdmin && selectedThread.metaData?.unreadMailCountAdmin > 0) {
+                setInboxMailThreads(prevThreads => prevThreads.map(t => t.id === selectedThread.id ? {
+                    ...t,
+                    metaData: {
+                        ...t.metaData,
+                        unreadMailCountAdmin: 0
+                    },
+                } : t));
+                if (resetRefreshToken) props.handleInboxMailRefreshToken?.(Date.now());
+            }
+        });
+    }, [selectedThread, isAdmin, props.handleInboxMailRefreshToken]);
+
+    const handleInboxMailCreation = useCallback((content: string, recipientIds?: string[], subject?: string, isImportant?: boolean, metaData?: any) => {
+        createInboxMailByThread(content, (result) => {
+            setOpenCreateMail(false);
+            getInboxMailOverviewByThreadsPaginated(currentPage, MAIL_LIMIT_PER_PAGE, (res) => {
+                if (isNewThread && res.threads.length > 0) {
+                    setSelectedThread(res.threads.find((thread) => thread.id === result.threadId));
+                }
+                setInboxMailThreads(res.threads);
+                setFullCount(res?.totalThreads);
+                if (selectedThread && !isNewThread) {
+                    refetchSelectedThreadMails();
+                }
+            });
+        }, recipientIds, subject, isImportant, metaData, isNewThread ? undefined : selectedThread?.id, isAdminSupportThreadRef.current);
+    }, [isNewThread, refetchSelectedThreadMails, selectedThread, currentPage]);
+
+    const handleInboxMailProgressChange = useCallback((progressState: InboxMailThreadSupportProgressState) => {
+        if (!selectedThread) return;
+        updateInboxMailThreadProgress(selectedThread.id, progressState, () => {
+            let supportOwnerName = selectedThread.metaData?.supportOwnerName || "";
+            if (progressState === InboxMailThreadSupportProgressState.IN_PROGRESS) {
+                supportOwnerName = currentUser ? { "first": currentUser.firstName, "last": currentUser.lastName } : null;
+            } else if (progressState === InboxMailThreadSupportProgressState.PENDING) {
+                supportOwnerName = null;
+            }
+            setSelectedThread({
+                ...selectedThread,
+                progressState: progressState,
+                metaData: { ...selectedThread.metaData, supportOwnerName }
+            });
+            setInboxMailThreads(prevThreads =>
+                prevThreads.map(t =>
+                    t.id === selectedThread.id
+                        ? { ...t, progressState: progressState, metaData: { ...t.metaData, supportOwnerName } }
+                        : t
+                )
+            );
+        });
+    }, [selectedThread, currentUser]);
+
+    const refreshIconFn = useCallback(
+        () => (
+            <MemoIconRefresh
+                className={refreshing ? "animate-spin [animation-iteration-count:1]" : ""}
+            />
+        ),
+        [refreshing]
+    );
+
+    const setOffset = useCallback((offset: number) => setCurrentPage(~~(offset / MAIL_LIMIT_PER_PAGE + 1)), [])
+
+    const preparedThreads = useMemo(
+        () => inboxMailThreads.map(t => ({
+            ...t,
+            display: prepareThreadDisplayData(t, currentUser, isAdmin)
+        })),
+        [inboxMailThreads, currentUser, isAdmin]
+    )
+
+    const refretchAll = useCallback(() => {
+        setRefreshing(true);
+        refetchInboxMailOverview();
+        refetchSelectedThreadMails(false);
+        setTimeout(() => setRefreshing(false), 1000);
+    }, [refetchInboxMailOverview, refetchSelectedThreadMails]);
+
+    if (!currentUser) return;
+
+    return (
+        <div className='flex flex-col h-full overflow-hidden'>
+            <props.InboxMailHeader >
+                <div className="flex items-center gap-x-2">
+                    <KernButton
+                        className="text-gray-700"
+                        icon={refreshIconFn}
+                        onClick={refretchAll}
+                        disabled={refreshing}
+                    />
+                    <KernButton
+                        text={t("inboxMail.getSupport")}
+                        icon={MemoIconHelpCircle}
+                        iconColor="red"
+                        onClick={() => {
+                            setIsNewThread(true);
+                            setOpenCreateMail(true);
+                            setIsAdminSupportThread(true);
+                        }} />
+                    <KernButton
+                        text={t("inboxMail.newMail")}
+                        iconColor="green"
+                        icon={MemoIconPlus}
+                        onClick={() => {
+                            setIsNewThread(true);
+                            setOpenCreateMail(true);
+                            setIsAdminSupportThread(false);
+                        }} />
+                </div>
+            </ props.InboxMailHeader >
+            {inboxMailThreads?.length === 0 ? (
+                <div className="flex flex-col items-center justify-center mt-20">
+                    <div className="text-2xl font-semibold mb-4">{t("inboxMail.noMails")}</div>
+                    <div className="text-gray-500 mb-6">{t("inboxMail.noMailsInfo")}</div>
+                </div>
+            ) : <div className="grid grid-cols-3 gap-x-4 p-3 overflow-hidden flex-1 ">
+                <div className="col-span-1">
+                    <div className="border border-gray-300 rounded-lg mb-2">
+                        {preparedThreads.map((threadOverview: InboxMailThread) => (
+                            <InboxMailThreadOverview
+                                key={threadOverview.id}
+                                thread={threadOverview}
+                                isAdmin={isAdmin}
+                                selectedThread={selectedThread}
+                                setSelectedThread={setSelectedThread}
+                                translator={t}
+                            />
+                        ))}
+                    </div>
+                    <Pagination offset={(currentPage - 1) * MAIL_LIMIT_PER_PAGE} setOffset={setOffset} fullCount={fullCount} limit={MAIL_LIMIT_PER_PAGE} previousLabel={t("inboxMail.previous")} nextLabel={t("inboxMail.next")} />
+                </div>
+                <div className="col-span-2 overflow-y-auto pr-2 pb-12 h-0 min-h-full">
+                    {selectedThread && threadMails && threadMails.length > 0 ? (
+                        <>
+                            {isAdmin && selectedThread.isAdminSupportThread &&
+                                <InboxMailAdminPanel
+                                    selectedThread={selectedThread}
+                                    progressStateOptions={progressStateOptions}
+                                    handleInboxMailProgressChange={handleInboxMailProgressChange}
+                                    currentUser={currentUser}
+                                />
+                            }
+                            {threadMails.map((mail: InboxMail) => (
+                                <ThreadMailItem
+                                    key={mail.id}
+                                    mail={mail}
+                                    currentUser={currentUser}
+                                    onDelete={() => deleteInboxMailById(mail.id, () => {
+                                        if (threadMails.length === 1) {
+                                            setSelectedThread(null);
+                                            refetchInboxMailOverview();
+                                            return;
+                                        }
+                                        refetchSelectedThreadMails(false);
+                                    })}
+                                    translator={t}
+                                />
+                            ))}
+                            <div className="flex items-center">
+                                <KernButton
+                                    className="ml-auto"
+                                    text={t("inboxMail.reply")}
+                                    onClick={() => {
+                                        setIsNewThread(false);
+                                        setOpenCreateMail(true);
+                                        setIsAdminSupportThread(selectedThread.isAdminSupportThread);
+                                    }}
+                                />
+                            </div>
+                        </>
+                    )
+                        : <div className="flex flex-col items-center justify-center mt-20">
+                            <div className="text-gray-500 mb-6">{t("inboxMail.mailSelectionPlaceholder")}</div>
+                        </div>}
+                </div>
+            </div>
+            }
+            <CreateNewMailModal isAdmin={isAdmin} isAdminSupportThread={isAdminSupportThread} open={openCreateMail} setOpen={setOpenCreateMail} thread={selectedThread} isNewThread={isNewThread} handleInboxMailCreation={handleInboxMailCreation} users={users} currentUser={currentUser} translator={t} organizations={organizations} selectedOrganization={selectedOrganization} setSelectedOrganization={setSelectedOrganization} />
+        </div >
+
+    )
+}
\ No newline at end of file
diff --git a/components/inbox-mail/helper.ts b/components/inbox-mail/helper.ts
new file mode 100644
index 0000000..778fe7f
--- /dev/null
+++ b/components/inbox-mail/helper.ts
@@ -0,0 +1,188 @@
+import { InboxMailThread, User } from "./types-mail";
+import { IconBug, IconUserOff } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { getNewInboxMailsInfo } from "./service-mail";
+
+export const MAIL_LIMIT_PER_PAGE = 8;
+
+const setInitials = (first: string, last: string) => first[0]?.toUpperCase() + last[0]?.toUpperCase();
+
+export function prepareThreadDisplayData(
+    thread: InboxMailThread,
+    currentUser: User,
+    isAdmin: boolean
+): {
+    displayName: string;
+    displayInitials: string;
+    background: string;
+    text: string;
+    recipientIds: string[];
+    DisplayIcon?: React.FC
+} {
+    let background = "";
+    let text = "";
+    let displayName = "";
+    let displayInitials = "";
+    let DisplayIcon: React.FC = null;
+
+    if (!currentUser || !thread) return
+
+    const recipientIds = thread.participantIds.filter(
+        id => id !== currentUser.id
+    );
+
+    const setColor = (id: string) => {
+        [background, text] = uuidToPastelColorWithMatchingFont(id);
+    };
+
+    // This should not happen
+    if (!thread.latestMail) {
+        displayName = "<empty>";
+        DisplayIcon = IconUserOff
+        background = "#F5F5F5";
+        text = "#757575";
+    }
+    else if (!thread.isAdminSupportThread) {
+        if (thread.latestMail.senderId === currentUser.id) {
+            displayName = thread.latestMail.recipientNames.map(r => `${r.first} ${r.last}`).join(", ");
+            const r = thread.latestMail.recipientNames[0];
+            displayInitials = setInitials(r.first, r.last);
+            setColor(recipientIds[0]);
+        } else {
+            const s = thread.latestMail.senderName;
+            const first = s.first ?? "";
+            const last = s.last ?? "";
+            displayName = `${first} ${last}`.trim();
+            displayInitials = setInitials(first, last);
+            setColor(thread.latestMail.senderId);
+        }
+    } else if (thread.isAdminSupportThread && thread.metaData?.autoGenerated) {
+        if (thread.latestMail.senderId) {
+            displayName = thread.latestMail.recipientNames.map(r => `${r.first} ${r.last}`).join(", ");
+        }
+        else {
+            displayName = `${thread.latestMail.senderName.first} ${thread.latestMail.senderName.last}`;
+            DisplayIcon = IconBug
+            background = "#FFE5E5";
+            text = "#A30000";
+        }
+    } else if (thread.isAdminSupportThread && isAdmin && thread.latestMail.senderId === currentUser.id) {
+        displayName = `${thread.latestMail.senderName.first} ${thread.latestMail.senderName.last}`;
+        displayInitials = setInitials(thread.latestMail.senderName.first, thread.latestMail.senderName.last);
+        setColor(thread.latestMail.senderId);
+
+    } else if (thread.isAdminSupportThread && isAdmin) {
+        if (thread.latestMail.senderId === currentUser.id && thread.latestMail.recipientNames.length === 0) {
+            displayName = `${thread.latestMail.senderName.first} ${thread.latestMail.senderName.last}`;
+        } else if (thread.latestMail.senderId === currentUser.id) {
+            displayName = thread.latestMail.recipientNames.map(r => `${r.first} ${r.last}`).join(", ");
+            const r = thread.latestMail.recipientNames[0];
+            displayInitials = setInitials(r.first, r.last);
+            setColor(recipientIds[0]);
+        } else {
+            const s = thread.latestMail.senderName;
+            displayName = `${s.first} ${s.last}`;
+            displayInitials = setInitials(s.first ?? "", s.last ?? "");
+            setColor(thread.latestMail.senderId ?? thread.createdBy);
+        }
+    } else {
+        if (thread.latestMail.senderId === currentUser.id) {
+            displayName = thread.latestMail.recipientNames.map(r => `${r.first} ${r.last}`).join(", ");
+        } else {
+            displayName = `${thread.latestMail.senderName.first} ${thread.latestMail.senderName.last}`;
+        }
+    }
+
+    return {
+        displayName,
+        displayInitials,
+        background,
+        text,
+        recipientIds,
+        DisplayIcon
+    };
+}
+
+export function isSameDay(d1: Date, d2: Date): boolean {
+    return (
+        d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate()
+    );
+}
+
+export function uuidToPastelColorWithMatchingFont(uuid: string): [string, 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];
+}
+
+export 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))}`;
+}
+
+export function clamp(num: number, min: number, max: number): number {
+    return Math.min(Math.max(num, min), max);
+}
+
+
+export function useLocalTranslation(translations: Record<string, any>) {
+    const t = (key: string) => {
+        const parts = key.split(".");
+        let current: any = translations;
+
+        for (const p of parts) {
+            if (current[p] === undefined) return key;
+            current = current[p];
+        }
+
+        return current;
+    };
+
+    return { t };
+}
+
+export function useNewMailCount(interval: number = 60000, refreshToken?: any): number {
+    const [newMailCount, setNewMailCount] = useState(0);
+
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+
+        function fetchNewMailCount() {
+            getNewInboxMailsInfo((result: any) => {
+                const count = result?.totalNewInboxMails ?? 0;
+                setNewMailCount(count);
+            });
+        }
+
+        fetchNewMailCount();
+        timer = setInterval(fetchNewMailCount, interval);
+
+        return () => clearInterval(timer);
+    }, [interval, refreshToken]);
+
+    return newMailCount;
+}
\ No newline at end of file
diff --git a/components/inbox-mail/inboxMailLocalTranslations.json b/components/inbox-mail/inboxMailLocalTranslations.json
new file mode 100644
index 0000000..0374ec2
--- /dev/null
+++ b/components/inbox-mail/inboxMailLocalTranslations.json
@@ -0,0 +1,46 @@
+{
+    "inboxMail": {
+        "header": "Inbox Mail",
+        "headerDescription": "Manage your inbox messages.",
+        "getSupport": "Get Support",
+        "newMail": "New Mail",
+        "noMails": "No inbox mails",
+        "noMailsInfo": "You have no mails in your inbox",
+        "reply": "Reply",
+        "organization": "Organization",
+        "orgSelectionPlaceholder": "Select organization",
+        "mailSelectionPlaceholder": "Select mail to see the details",
+        "kernAITeam": "Kern AI Team",
+        "searchPlaceholder": "Search by name or email...",
+        "subjectPlaceholder": "Add subject",
+        "contentPlaceholder": "This is the content of the new mail.",
+        "deleteHeader": "Delete Mail",
+        "deleteConfirmation": "Are you sure you want to delete this inbox mail? This action cannot be undone.",
+        "supportRequest": "Support Request",
+        "highPriority": "High Priority",
+        "inProgress": "In Progress",
+        "resolved": "Resolved",
+        "newBadge": "new",
+        "unknownUser": "Unknown User",
+        "modalTitle": "Send New Inbox Mail",
+        "replyModalTitle": "Reply",
+        "sendTo": "Send To",
+        "subject": "Subject",
+        "content": "Content",
+        "isImportant": "Important",
+        "isImportantInfo": "Use this option to highlight messages that require immediate attention.",
+        "includeProjectInfo": "Reference project",
+        "includeChatInfo": "Reference chat",
+        "sendButton": "Send",
+        "deleteButton": "Delete",
+        "cancelButton": "Cancel",
+        "previous": "Previous",
+        "next": "Next",
+        "to": "To"
+    },
+    "InboxMailThreadSupportProgressState": {
+        "PENDING": "Pending",
+        "IN_PROGRESS": "In progress",
+        "RESOLVED": "Resolved"
+    }
+}
\ 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..c34c3a9
--- /dev/null
+++ b/components/inbox-mail/service-mail.tsx
@@ -0,0 +1,89 @@
+import { FetchType, jsonFetchWrapper } from "@/submodules/javascript-functions/basic-fetch";
+import { InboxMailThreadSupportProgressState } from "./types-mail";
+import { convertCamelToSnakeCase } from "@/submodules/javascript-functions/case-types-parser";
+
+const url = `/refinery-gateway/api/v1`;
+
+export function createInboxMailByThread(content: string, onResult: (result: any) => void, recipientIds?: string[], subject?: string, isImportant?: boolean, metaData?: any, threadId?: string, isAdminSupportThread?: boolean) {
+    const fetchUrl = `${url}/inbox-mail`;
+    const body = JSON.stringify({ recipientIds, threadId, subject, content, isImportant, metaData, isAdminSupportThread });
+    jsonFetchWrapper(fetchUrl, FetchType.POST, onResult, body);
+}
+
+
+export function getInboxMailOverviewByThreadsPaginated(page: number, limit: number, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/inbox-mail/overview?page=${page}&limit=${limit}`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
+
+
+export function getInboxMailsByThread(threadId: string, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/inbox-mail/thread/${threadId}`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
+
+
+export function updateInboxMailThreadProgress(threadId: string, progressState: InboxMailThreadSupportProgressState, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/inbox-mail/thread/${threadId}/progress`;
+    const body = JSON.stringify({ progressState });
+    jsonFetchWrapper(fetchUrl, FetchType.PUT, onResult, body);
+}
+
+
+export function deleteInboxMailById(mailId: string, onResult: (result: any) => void) {
+    const fetchUrl = `${url}/inbox-mail/${mailId}`;
+    jsonFetchWrapper(fetchUrl, FetchType.DELETE, onResult);
+}
+
+
+export function getNewInboxMailsInfo(onResult: (result: any) => void) {
+    const fetchUrl = `${url}/inbox-mail/new`;
+    jsonFetchWrapper(fetchUrl, FetchType.GET, onResult);
+}
+
+export function getUsers(
+    onResult: (result: any) => void,
+    includeAdmins?: boolean,
+    includeEngineers?: boolean,
+    limitedTeams?: boolean,
+    orgId?: string
+) {
+    const searchParams = new URLSearchParams();
+    if (includeAdmins) searchParams.append("include_admins", "true");
+    if (includeEngineers) searchParams.append("include_engineers", "true");
+    if (limitedTeams) searchParams.append("limited_teams", "true");
+    if (orgId) searchParams.append("org_id", orgId);
+
+    const finalUrl = `${url}/organization/all-users${searchParams.toString() ? `?${searchParams}` : ""}`;
+    jsonFetchWrapper(finalUrl, FetchType.GET, onResult);
+}
+
+
+export function getUserInfoExtended(onResult: (result: any) => void) {
+    const finalUrl = `${url}/organization/get-user-info-extended`;
+    jsonFetchWrapper(finalUrl, FetchType.GET, onResult);
+}
+
+
+export function getIsAdmin(onResult: (result: any) => void) {
+    const finalUrl = `${url}/misc/is-admin`;
+    jsonFetchWrapper(finalUrl, FetchType.GET, onResult);
+}
+
+
+export function getAllOrganizations(onResult: (result: any) => void) {
+    const finalUrl = `${url}/organization/all-organizations`;
+    jsonFetchWrapper(finalUrl, FetchType.GET, onResult);
+}
+
+export function addUserToOrganization(userMail: string, organizationName: string, onResult: (result: any) => void) {
+    const finalUrl = `${url}/organization/add-user-to-organization`;
+    const body = { userMail, organizationName };
+    jsonFetchWrapper(finalUrl, FetchType.POST, onResult, JSON.stringify(convertCamelToSnakeCase(body)));
+}
+
+
+export function removeUserFromOrganization(userMail: string, onResult: (result: any) => void) {
+    const finalUrl = `${url}/organization/remove-user-from-organization`;
+    jsonFetchWrapper(finalUrl, FetchType.POST, onResult, JSON.stringify({ "user_mail": userMail }));
+}
\ No newline at end of file
diff --git a/components/inbox-mail/types-mail.tsx b/components/inbox-mail/types-mail.tsx
new file mode 100644
index 0000000..6dfe86b
--- /dev/null
+++ b/components/inbox-mail/types-mail.tsx
@@ -0,0 +1,62 @@
+export type InboxMail = {
+    id: string;
+    threadId: string;
+    senderId: string;
+    content: string;
+    createdAt: string;
+    isSeen: boolean;
+    senderName?: {
+        first: string;
+        last: string;
+    };
+    recipientNames?: {
+        first: string;
+        last: string;
+    }[];
+}
+
+export type InboxMailThread = {
+    id: string;
+    createdBy: string;
+    organizationId: string;
+    subject: string;
+    isImportant: boolean;
+    isAdminSupportThread: boolean;
+    participantIds: string[];
+    latestMail: InboxMail;
+    organizationName: string;
+    progressState?: string;
+    supportOwnerId?: string;
+    metaData?: any;
+    unreadMailCount?: number;
+    projectName?: string;
+    conversationHeader?: string;
+    display?: {
+        displayName: string;
+        displayInitials: string;
+        background: string;
+        text: string;
+        recipientIds: string[];
+        DisplayIcon?: React.FC;
+    }
+}
+
+export type User = {
+    id: string;
+    organizationId: string;
+    firstName: string;
+    lastName: string;
+    mail: string;
+    role: string;
+    languageDisplay: string;
+    logoutUrl: string;
+    isAdmin: boolean;
+    autoLogoutMinutes: number;
+}
+
+
+export enum InboxMailThreadSupportProgressState {
+    PENDING = "PENDING",
+    IN_PROGRESS = "IN_PROGRESS",
+    RESOLVED = "RESOLVED"
+}
\ No newline at end of file
diff --git a/components/kern-icons/icons.ts b/components/kern-icons/icons.ts
index bb7ff6b..d8c7f04 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, IconHelpCircle, IconProgressCheck } from '@tabler/icons-react';
 
 export const MemoIconHome = memo(IconHome);
 export const MemoIconInfoCircle = memo(IconInfoCircle);
@@ -184,4 +184,7 @@ 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);
+export const MemoIconHelpCircle = memo(IconHelpCircle);
+export const MemoIconProgressCheck = memo(IconProgressCheck);
\ No newline at end of file
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
new file mode 100644
index 0000000..3b9af42
--- /dev/null
+++ b/components/pagination/Pagination.tsx
@@ -0,0 +1,49 @@
+import { PaginationProps } from '../../types/pagination'
+import { MemoIconArrowLeft, MemoIconArrowRight } from '../kern-icons/icons';
+import { useEffect, useMemo, useState } from 'react';
+
+
+export default function Pagination(props: PaginationProps) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const [totalPages, setTotalPages] = useState(0);
+
+    useMemo(() => {
+        setCurrentPage(props.offset / props.limit + 1);
+    }, [props.offset, props.limit]);
+
+    useMemo(() => {
+        setTotalPages(Math.ceil(props.fullCount / props.limit));
+    }, [props.fullCount, props.limit]);
+
+    useEffect(() => {
+        props.setOffset((currentPage - 1) * props.limit);
+    }, [currentPage, props.limit]);
+
+    return (
+        <nav className="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
+            <div className="-mt-px flex w-0 flex-1">
+                <button onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1 || !totalPages}
+                    className="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                    <MemoIconArrowLeft className="mr-3 h-5 w-5 text-gray-400" />
+                    {props.previousLabel}
+                </button>
+            </div>
+            <div className="hidden md:-mt-px md:flex">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                    <button key={page} onClick={() => setCurrentPage(page)}
+                        className={`inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium ${currentPage === page ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}`}>
+                        {page}
+                    </button>
+                ))}
+            </div>
+            <div className="-mt-px flex w-0 flex-1 justify-end">
+                <button onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages || !totalPages}
+                    className="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                    {props.nextLabel}
+                    <MemoIconArrowRight className="ml-3 h-5 w-5 text-gray-400" aria-hidden="true" />
+                </button>
+            </div>
+        </nav>
+    )
+}
diff --git a/hooks/enums/useEnumOptionsTranslated.tsx b/hooks/enums/useEnumOptionsTranslated.tsx
index d33e602..262729f 100644
--- a/hooks/enums/useEnumOptionsTranslated.tsx
+++ b/hooks/enums/useEnumOptionsTranslated.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 const cache = {};
 
-function getEnumOptionsForLanguage<T>(enumObj: T, lookupKey: string, t: any, language: string): { name: string, value: T[keyof T] }[] {
+export function getEnumOptionsForLanguage<T>(enumObj: T, lookupKey: string, t: any, language: string): { name: string, value: T[keyof T] }[] {
     if (!(lookupKey in cache)) cache[lookupKey] = {};
     if (cache[lookupKey][language]) return cache[lookupKey][language];
     const finalArray = enumToArray(enumObj, { nameFunction: (s) => { return t(`${lookupKey}.${s}`) } });
diff --git a/types/pagination.ts b/types/pagination.ts
new file mode 100644
index 0000000..3f4689c
--- /dev/null
+++ b/types/pagination.ts
@@ -0,0 +1,8 @@
+export type PaginationProps = {
+    offset: number;
+    setOffset: (offset: number) => void;
+    fullCount: number;
+    limit: number;
+    previousLabel?: string;
+    nextLabel?: string;
+}
\ No newline at end of file