diff --git a/src/assets/icons/lernfair/ico-settings.svg b/src/assets/icons/lernfair/ico-settings.svg
deleted file mode 100644
index 62a2e22ca..000000000
--- a/src/assets/icons/lernfair/ico-settings.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9978 15.5294C10.0566 15.5294 8.46839 13.9412 8.46839 12C8.46839 10.0588 10.0566 8.47059 11.9978 8.47059C13.939 8.47059 15.5272 10.0588 15.5272 12C15.5272 13.9412 13.939 15.5294 11.9978 15.5294ZM19.939 9.79412C19.7625 9.14706 19.4978 8.52941 19.1743 7.97059L19.9096 5.76471L18.2331 4.08824L16.0272 4.82353C15.439 4.5 14.8213 4.23529 14.1743 4.05882L13.1743 2H10.8213L9.79192 4.05882C9.14486 4.23529 8.52721 4.5 7.96839 4.82353L5.76251 4.08824L4.08604 5.76471L4.82133 7.97059C4.4978 8.55882 4.2331 9.17647 4.05663 9.82353L1.9978 10.8235V13.1765L4.05663 14.2059C4.2331 14.8529 4.4978 15.4706 4.82133 16.0294L4.08604 18.2353L5.76251 19.9118L7.96839 19.1765C8.55663 19.5 9.17427 19.7647 9.82133 19.9412L10.8507 22H13.2037L14.2331 19.9412C14.8802 19.7647 15.4978 19.5 16.0566 19.1765L18.2625 19.9118L19.939 18.2353L19.2037 16.0294C19.5272 15.4412 19.7919 14.8235 19.9684 14.1765L22.0272 13.1471V10.7941L19.939 9.79412Z" fill="#2B4B51"/>
-</svg>
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index 11459c561..397902c68 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -8,6 +8,10 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
+const PopoverArrow = PopoverPrimitive.Arrow;
+
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive.Content>, React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>>(
     ({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
         <PopoverPrimitive.Portal>
@@ -25,4 +29,4 @@ const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive
     )
 );
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverClose };
diff --git a/src/components/notifications/MessageBox.tsx b/src/components/notifications/MessageBox.tsx
index 0c3dcf08e..4b299ab4c 100644
--- a/src/components/notifications/MessageBox.tsx
+++ b/src/components/notifications/MessageBox.tsx
@@ -1,48 +1,32 @@
-import { Box, HStack, Modal, Pressable, Spacer, Text, Tooltip, VStack, useBreakpointValue } from 'native-base';
 import { getIconForMessageType, isMessageValid } from '../../helper/notification-helper';
 import TimeIndicator from './TimeIndicator';
 import { useNavigate } from 'react-router-dom';
-import { FC, useState } from 'react';
-import { InterfaceBoxProps } from 'native-base/lib/typescript/components/primitives/Box';
+import { useState } from 'react';
 import LeavePageModal from '../../modals/LeavePageModal';
 import { Concrete_Notification } from '../../gql/graphql';
-import AppointmentCancelledModal from './NotificationModal';
+import NotificationModal from './NotificationModal';
 import AchievementMessageModal from '../../modals/AchievementMessageModal';
+import { Typography } from '../Typography';
+import { cn } from '@/lib/Tailwind';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip';
 
-type Props = {
+interface MessageBoxProps {
     userNotification: Concrete_Notification;
     isStandalone?: boolean;
     isRead?: boolean;
     updateLastTimeChecked?: () => void;
-};
+}
 
-const MessageBox: FC<Props> = ({ userNotification, isStandalone, isRead, updateLastTimeChecked }) => {
+const MessageBox = ({ userNotification, isStandalone, isRead, updateLastTimeChecked }: MessageBoxProps) => {
     const [leavePageModalOpen, setLeavePageModalOpen] = useState<boolean>(false);
     const [achievementModalForId, setAchievementModalForId] = useState<number | null>(null);
     const [notificationModalOpen, setNotificationModalOpen] = useState<boolean>(false);
     const navigate = useNavigate();
-    const isMobile = useBreakpointValue({
-        base: true,
-        lg: false,
-    });
 
     if (!userNotification || !userNotification.message || !isMessageValid(userNotification.message)) return null;
 
     const { sentAt } = userNotification || { sentAt: '' };
     const { headline, body, type, navigateTo, modalText } = userNotification.message;
-    const boxProps = {
-        mb: 2,
-        height: '100%',
-        fullWidth: 320,
-        width: 270,
-        borderRadius: 10,
-        maxHeight: 500,
-    };
-
-    const vStackProps = {
-        mt: 2,
-        maxW: 200,
-    };
 
     const navigateToLink = () => {
         if (modalText) {
@@ -70,18 +54,21 @@ const MessageBox: FC<Props> = ({ userNotification, isStandalone, isRead, updateL
     const navigateExternal = () => (navigateTo ? window.open(navigateTo, '_blank') : null);
 
     const Icon = getIconForMessageType(type);
-
-    const LinkedBox: FC<InterfaceBoxProps> = ({ children, ...boxProps }) => {
-        const Component = () => <Box {...boxProps}>{children}</Box>;
+    const LinkedBox = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
+        const Component = () => <div {...rest}>{children}</div>;
         if (typeof navigateTo === 'string') {
             return (
                 <>
-                    <Pressable onPress={navigateToLink}>
+                    <div onClick={navigateToLink}>
                         <Component />
-                    </Pressable>
-                    <Modal isOpen={leavePageModalOpen}>
-                        <LeavePageModal url={navigateTo} messageType={type} onClose={() => setLeavePageModalOpen(false)} navigateTo={navigateExternal} />
-                    </Modal>
+                    </div>
+                    <LeavePageModal
+                        isOpen={leavePageModalOpen}
+                        url={navigateTo}
+                        messageType={type}
+                        onOpenChange={setLeavePageModalOpen}
+                        navigateTo={navigateExternal}
+                    />
                     {achievementModalForId !== null && (
                         <AchievementMessageModal achievementId={achievementModalForId} isOpenModal={true} onClose={() => setAchievementModalForId(null)} />
                     )}
@@ -90,17 +77,16 @@ const MessageBox: FC<Props> = ({ userNotification, isStandalone, isRead, updateL
         } else if (modalText) {
             return (
                 <>
-                    <Pressable onPress={navigateToLink}>
+                    <div onClick={navigateToLink}>
                         <Component />
-                    </Pressable>
-                    <Modal isOpen={notificationModalOpen}>
-                        <AppointmentCancelledModal
-                            messageType={type}
-                            onClose={() => setNotificationModalOpen(false)}
-                            modalText={modalText}
-                            headline={headline}
-                        />
-                    </Modal>
+                    </div>
+                    <NotificationModal
+                        messageType={type}
+                        isOpen={notificationModalOpen}
+                        onOpenChange={setNotificationModalOpen}
+                        modalText={modalText}
+                        headline={headline}
+                    />
                 </>
             );
         }
@@ -109,38 +95,46 @@ const MessageBox: FC<Props> = ({ userNotification, isStandalone, isRead, updateL
 
     return (
         <LinkedBox
-            borderRadius={boxProps.borderRadius}
-            bgColor={isRead ? 'ghost' : 'primary.100'}
-            mb={boxProps.mb}
-            h={boxProps.height}
-            w={!isStandalone ? boxProps.fullWidth : boxProps.width}
-            maxH={boxProps.maxHeight}
+            className={cn(
+                'cursor-pointer rounded-md mb-2 py-2 h-full max-h-[500px] hover:bg-primary-lighter',
+                isRead ? 'bg-white' : 'bg-primary-lighter',
+                !isStandalone ? 'w-full' : 'w-[270px]'
+            )}
         >
-            <HStack alignItems="center" space={1}>
-                <VStack>
-                    <Box px="1.5">
-                        <Icon />
-                    </Box>
-                </VStack>
-                <VStack mt={vStackProps.mt} maxW={vStackProps.maxW}>
-                    <Text bold fontSize="md" ellipsizeMode="tail" numberOfLines={1}>
-                        {headline}
-                    </Text>
-                    <Tooltip maxW={300} label={body} _text={{ textAlign: 'center' }}>
-                        <Pressable onPress={navigateToLink}>
-                            <Text fontSize="sm" ellipsizeMode="tail" numberOfLines={isMobile ? 5 : 2}>
+            <div className="flex items-center gap-x-1">
+                <div className="flex flex-col px-1.5">
+                    <Icon />
+                </div>
+                <div className="flex flex-col max-w-[200px]">
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Typography className="font-semibold line-clamp-2 leading-3">{headline}</Typography>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom" className="bg-primary text-primary-foreground border-transparent max-w-80">
+                                {headline}
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Typography className="line-clamp-5 lg:line-clamp-2" variant="sm">
+                                    {body}
+                                </Typography>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom" className="bg-primary text-primary-foreground border-transparent max-w-80">
                                 {body}
-                            </Text>
-                        </Pressable>
-                    </Tooltip>
-                </VStack>
-                <Spacer />
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </div>
                 {!isStandalone && (
-                    <VStack>
+                    <div className="ml-auto">
                         <TimeIndicator sentAt={sentAt} />
-                    </VStack>
+                    </div>
                 )}
-            </HStack>
+            </div>
         </LinkedBox>
     );
 };
diff --git a/src/components/notifications/NotificationAlert.tsx b/src/components/notifications/NotificationAlert.tsx
index a049b586c..8dcf7933b 100644
--- a/src/components/notifications/NotificationAlert.tsx
+++ b/src/components/notifications/NotificationAlert.tsx
@@ -1,13 +1,13 @@
-import { Popover } from 'native-base';
-import { MutableRefObject, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useLastTimeCheckedNotifications } from '../../hooks/useLastTimeCheckedNotifications';
 import { useConcreteNotifications } from '../../hooks/useConcreteNotifications';
 import NotificationPanel from './NotificationPanel';
 import { NotificationsContext } from '../../context/NotificationsProvider';
 import { getNewNotifications } from '../../helper/notification-helper';
 import { Button } from '../Button';
-import { IconBell } from '@tabler/icons-react';
+import { IconBell, IconX } from '@tabler/icons-react';
 import { Badge } from '../Badge';
+import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger } from '../Popover';
 
 const NotificationAlert: React.FC = () => {
     const [count, setCount] = useState<number>(0);
@@ -33,40 +33,44 @@ const NotificationAlert: React.FC = () => {
         setCount(unreadNotifications.length);
     }, [lastTimeCheckedNotifications, userNotifications]);
 
-    const handleTrigger = ({ onPress, ref }: { onPress: () => void; ref: MutableRefObject<any> }): React.ReactElement => {
-        return (
-            <div className="flex flex-col relative">
-                {!!count && (
-                    <Badge className="absolute self-start size-4 top-[4px] right-[5px]" variant="destructive" shape="rounded">
-                        {count}
-                    </Badge>
-                )}
-                <Button onClick={onPress} ref={ref} variant="none" size="icon">
-                    <IconBell size={24} />
-                </Button>
-            </div>
-        );
-    };
-
-    const onOpen = () => {
-        refetch();
-        setIsOpen(true);
-    };
-
-    const onClose = () => {
-        updateLastTimeChecked();
-        setIsOpen(false);
+    const handleOnOpenChange = (value: boolean) => {
+        setIsOpen(value);
+        if (value) {
+            refetch();
+        } else {
+            updateLastTimeChecked();
+        }
     };
 
     return (
         <>
-            <Popover placement="bottom" trigger={(triggerprops) => handleTrigger(triggerprops)} onClose={onClose} onOpen={onOpen}>
-                <NotificationPanel
-                    loading={loading}
-                    userNotifications={userNotifications || []}
-                    lastTimeCheckedNotifications={lastTimeCheckedNotifications}
-                    updateLastTimeChecked={() => updateLastTimeChecked()}
-                />
+            <Popover onOpenChange={handleOnOpenChange}>
+                <PopoverTrigger asChild>
+                    <div className="flex flex-col relative">
+                        {!!count && (
+                            <Badge className="absolute self-start size-4 top-[4px] right-[5px]" variant="destructive" shape="rounded">
+                                {count}
+                            </Badge>
+                        )}
+                        <Button variant="none" size="icon">
+                            <IconBell size={24} />
+                        </Button>
+                    </div>
+                </PopoverTrigger>
+                <PopoverContent align="end" side="bottom" className="min-w-[350px] max-h-[500px] px-0 border-t-transparent">
+                    <div className="px-4">
+                        <PopoverArrow className="fill-white" />
+                        <PopoverClose className="ml-auto block mb-2">
+                            <IconX size={18} />
+                        </PopoverClose>
+                    </div>
+                    <NotificationPanel
+                        loading={loading}
+                        userNotifications={userNotifications || []}
+                        lastTimeCheckedNotifications={lastTimeCheckedNotifications}
+                        updateLastTimeChecked={() => updateLastTimeChecked()}
+                    />
+                </PopoverContent>
             </Popover>
         </>
     );
diff --git a/src/components/notifications/NotificationModal.tsx b/src/components/notifications/NotificationModal.tsx
index a478915fe..1a4b3c7a9 100644
--- a/src/components/notifications/NotificationModal.tsx
+++ b/src/components/notifications/NotificationModal.tsx
@@ -1,52 +1,35 @@
-import { Box, CloseIcon, Heading, Modal, Pressable, useTheme, Row, Button, Text } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import { getIconForNotificationPreferenceModal } from '../../helper/notification-helper';
+import { Button } from '../Button';
+import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '../Modal';
+import { Typography } from '../Typography';
 
-type Props = {
+interface NotificationModalProps extends BaseModalProps {
     messageType: string;
     headline?: string;
     modalText: string;
-    onClose: () => any;
-};
-const AppointmentCancelledModal: React.FC<Props> = ({ messageType, onClose, headline, modalText }) => {
+}
+const NotificationModal = ({ isOpen, onOpenChange, messageType, headline, modalText }: NotificationModalProps) => {
     const { t } = useTranslation();
-    const { space } = useTheme();
 
     const Icon = getIconForNotificationPreferenceModal(messageType);
 
     return (
-        <>
-            <Modal.Content width="350" marginX="auto" backgroundColor="transparent">
-                <Box position="absolute" zIndex="1" right="20px" top="14px">
-                    <Pressable onPress={onClose}>
-                        <CloseIcon color="white" />
-                    </Pressable>
-                </Box>
-                <Modal.Body background="primary.900" padding={space['1']}>
-                    <Box alignItems="center" marginY={space['1']}>
-                        <Icon />
-                    </Box>
-                    <Box paddingY={space['2']} maxW={'100%'}>
-                        {headline && (
-                            <Heading maxWidth="330px" marginX="auto" fontSize="lg" textAlign={'center'} color="lightText" marginBottom={space['0.5']}>
-                                {headline}
-                            </Heading>
-                        )}
-                        <Text my={2} textAlign={'center'} fontSize="sm" color="lightText">
-                            {modalText}
-                        </Text>
-                    </Box>
-                    <Box>
-                        <Row marginBottom={space['0.5']}>
-                            <Button variant={'outlinelight'} onPress={onClose} width="100%">
-                                {t('notification.controlPanel.closeButton')}
-                            </Button>
-                        </Row>
-                    </Box>
-                </Modal.Body>
-            </Modal.Content>
-        </>
+        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+            <ModalHeader>
+                <ModalTitle>{headline}</ModalTitle>
+            </ModalHeader>
+            <div className="flex flex-col items-center">
+                <Icon className="scale-[0.5]" />
+                <Typography>{modalText}</Typography>
+            </div>
+            <ModalFooter>
+                <Button className="w-full lg:w-fit" variant="outline" onClick={() => onOpenChange(false)}>
+                    {t('notification.controlPanel.closeButton')}
+                </Button>
+            </ModalFooter>
+        </Modal>
     );
 };
 
-export default AppointmentCancelledModal;
+export default NotificationModal;
diff --git a/src/components/notifications/NotificationPanel.tsx b/src/components/notifications/NotificationPanel.tsx
index 15ed1831f..95e442b6e 100644
--- a/src/components/notifications/NotificationPanel.tsx
+++ b/src/components/notifications/NotificationPanel.tsx
@@ -1,9 +1,8 @@
-import { Box, Popover, Spinner, useBreakpointValue } from 'native-base';
 import { useEffect, useState } from 'react';
-import SettingsIcon from '../../assets/icons/lernfair/ico-settings.svg';
 import { getAllNewUserNotificationsButMinimumFiveNotifications } from '../../helper/notification-helper';
 import { AllNotifications, NewNotifications, NoNotifications } from './PanelContent';
 import { Concrete_Notification } from '../../gql/graphql';
+import CenterLoadingSpinner from '../CenterLoadingSpinner';
 
 type Props = {
     userNotifications: Concrete_Notification[];
@@ -16,21 +15,6 @@ const NotificationPanel: React.FC<Props> = ({ userNotifications, lastTimeChecked
     const [shouldShowAll, setShouldShowAll] = useState<boolean>(false);
     const [notificationsToShow, setNotificationsToShow] = useState<Concrete_Notification[]>([]);
 
-    const panelMarginLeft = useBreakpointValue({
-        base: 3,
-        lg: 0,
-    });
-
-    const panelMarginRight = useBreakpointValue({
-        base: 0,
-        lg: 10,
-    });
-
-    const panelPropsAllDevices = {
-        maxH: 420,
-        minW: 320,
-    };
-
     const handleClick = () => {
         setShouldShowAll(!shouldShowAll);
     };
@@ -44,29 +28,23 @@ const NotificationPanel: React.FC<Props> = ({ userNotifications, lastTimeChecked
         }
     }, [userNotifications, lastTimeCheckedNotifications, shouldShowAll]);
 
+    const hasNotifications = userNotifications.length && notificationsToShow.length;
     return (
-        <Box>
-            <Popover.Content ml={panelMarginLeft} mr={panelMarginRight} minW={panelPropsAllDevices.minW}>
-                <Popover.Arrow />
-                <Popover.Header height="headerSizePx" />
-                <Popover.CloseButton />
-                <Popover.Body>
-                    {loading && <Spinner />}
-                    <Box maxH={panelPropsAllDevices.maxH}>
-                        {!shouldShowAll && notificationsToShow.length !== 0 && (
-                            <NewNotifications
-                                notificationsToShow={notificationsToShow}
-                                lastTimeChecked={lastTimeCheckedNotifications}
-                                handleClick={handleClick}
-                                updateLastTimeChecked={() => updateLastTimeChecked()}
-                            />
-                        )}
-                        {shouldShowAll && <AllNotifications userNotifications={notificationsToShow} lastTimeChecked={lastTimeCheckedNotifications} />}
-                        {!notificationsToShow.length && <NoNotifications />}
-                    </Box>
-                </Popover.Body>
-            </Popover.Content>
-        </Box>
+        <div className="max-h-[400px] overflow-y-scroll">
+            <div className="px-4">
+                {loading && <CenterLoadingSpinner />}
+                {!shouldShowAll && notificationsToShow.length !== 0 && (
+                    <NewNotifications
+                        notificationsToShow={notificationsToShow}
+                        lastTimeChecked={lastTimeCheckedNotifications}
+                        handleClick={handleClick}
+                        updateLastTimeChecked={() => updateLastTimeChecked()}
+                    />
+                )}
+                {shouldShowAll && <AllNotifications userNotifications={notificationsToShow} lastTimeChecked={lastTimeCheckedNotifications} />}
+                {!loading && !hasNotifications && <NoNotifications />}
+            </div>
+        </div>
     );
 };
 
diff --git a/src/components/notifications/PanelContent.tsx b/src/components/notifications/PanelContent.tsx
index 49aae401d..0e1fe610f 100644
--- a/src/components/notifications/PanelContent.tsx
+++ b/src/components/notifications/PanelContent.tsx
@@ -1,8 +1,9 @@
-import { Box, Button, ScrollView, Text } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import { isNewNotification } from '../../helper/notification-helper';
 import MessageBox from './MessageBox';
 import { Concrete_Notification } from '../../gql/graphql';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
 
 type NewProps = {
     notificationsToShow: Concrete_Notification[];
@@ -16,23 +17,19 @@ const NewNotifications: React.FC<NewProps> = ({ notificationsToShow, lastTimeChe
 
     return (
         <>
-            <ScrollView>
-                <Box>
-                    {notificationsToShow.map(
-                        (notification) =>
-                            notification.message && (
-                                <MessageBox
-                                    key={notification.id}
-                                    userNotification={notification}
-                                    isRead={isNewNotification(notification.sentAt, lastTimeChecked)}
-                                    updateLastTimeChecked={() => updateLastTimeChecked()}
-                                />
-                            )
-                    )}
-                </Box>
-            </ScrollView>
-            <Button onPress={handleClick} variant={'outline'}>
-                <Text fontSize="xs">{t('notification.panel.button.text')}</Text>
+            {notificationsToShow.map(
+                (notification) =>
+                    notification.message && (
+                        <MessageBox
+                            key={notification.id}
+                            userNotification={notification}
+                            isRead={isNewNotification(notification.sentAt, lastTimeChecked)}
+                            updateLastTimeChecked={() => updateLastTimeChecked()}
+                        />
+                    )
+            )}
+            <Button className="w-full mt-2" onClick={handleClick} variant="outline" size="sm">
+                {t('notification.panel.button.text')}
             </Button>
         </>
     );
@@ -46,18 +43,12 @@ type AllProps = {
 const AllNotifications: React.FC<AllProps> = ({ userNotifications, lastTimeChecked }) => {
     return (
         <>
-            <ScrollView>
-                {userNotifications.map(
-                    (notification: Concrete_Notification) =>
-                        notification.message && (
-                            <MessageBox
-                                key={notification.id}
-                                userNotification={notification}
-                                isRead={isNewNotification(notification.sentAt, lastTimeChecked)}
-                            />
-                        )
-                )}
-            </ScrollView>
+            {userNotifications.map(
+                (notification: Concrete_Notification) =>
+                    notification.message && (
+                        <MessageBox key={notification.id} userNotification={notification} isRead={isNewNotification(notification.sentAt, lastTimeChecked)} />
+                    )
+            )}
         </>
     );
 };
@@ -65,9 +56,9 @@ const AllNotifications: React.FC<AllProps> = ({ userNotifications, lastTimeCheck
 const NoNotifications = () => {
     const { t } = useTranslation();
     return (
-        <Box>
-            <Text>{t('notification.panel.noNotifications')}</Text>
-        </Box>
+        <div>
+            <Typography>{t('notification.panel.noNotifications')}</Typography>
+        </div>
     );
 };
 
diff --git a/src/components/notifications/TimeIndicator.tsx b/src/components/notifications/TimeIndicator.tsx
index d03f3371a..8d9b35061 100644
--- a/src/components/notifications/TimeIndicator.tsx
+++ b/src/components/notifications/TimeIndicator.tsx
@@ -1,31 +1,28 @@
 import { useState } from 'react';
-import { Box, Text } from 'native-base';
 import useInterval from '../../hooks/useInterval';
 import { useTranslation } from 'react-i18next';
 import { getTimeText } from '../../helper/notification-helper';
+import { Typography } from '../Typography';
 
 type TimeIndicatorProps = {
     sentAt: string;
 };
 
-const TimeIndicator: React.FC<TimeIndicatorProps> = ({ sentAt }) => {
+const TimeIndicator = ({ sentAt }: TimeIndicatorProps) => {
     const { t } = useTranslation();
     const [toggleRerender, setToggleRerender] = useState<boolean>(false);
     const time = getTimeText(sentAt);
 
-    const boxPropsAllDevices = {
-        maxW: 80,
-        pr: 3,
-    };
-
     useInterval(() => {
         setToggleRerender(!toggleRerender);
     }, 60_000);
 
     return (
-        <Box maxW={boxPropsAllDevices.maxW} pr={boxPropsAllDevices.pr}>
-            {typeof time === 'string' ? <Text fontSize="xs">{time}</Text> : <Text fontSize="xs">{t(time.text, time?.options)}</Text>}
-        </Box>
+        <div className="max-w-[80px] pr-3">
+            <Typography variant="xs" className="text-end">
+                {typeof time === 'string' ? time : t(time.text, time?.options)}
+            </Typography>
+        </div>
     );
 };
 
diff --git a/src/helper/notification-helper.ts b/src/helper/notification-helper.ts
index c1eea6bdd..7a6dfd0e3 100644
--- a/src/helper/notification-helper.ts
+++ b/src/helper/notification-helper.ts
@@ -8,12 +8,12 @@ import {
     NotificationCategories,
     systemNotificationCategories,
 } from './notification-preferences';
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import { NotificationPreferences } from '../types/lernfair/NotificationPreferences';
 import { Concrete_Notification, NotificationMessage } from '../gql/graphql';
 
 const getIconForMessageType = (messageType: string): FC => (messageIcons.hasOwnProperty(messageType) ? messageIcons[messageType] : () => null);
-const getIconForNotificationPreferenceModal = (messageType: string): FC => {
+const getIconForNotificationPreferenceModal = (messageType: string): FC<HTMLAttributes<HTMLOrSVGElement>> => {
     return modalIcons.hasOwnProperty(messageType) ? modalIcons[messageType] : () => null;
 };
 
diff --git a/src/modals/LeavePageModal.tsx b/src/modals/LeavePageModal.tsx
index 1d327b0d0..b598cb467 100644
--- a/src/modals/LeavePageModal.tsx
+++ b/src/modals/LeavePageModal.tsx
@@ -1,57 +1,37 @@
-import { Box, CloseIcon, Heading, Modal, Pressable, useTheme, Row, Button, Text } from 'native-base';
+import { Button } from '@/components/Button';
+import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '@/components/Modal';
+import { Typography } from '@/components/Typography';
 import { useTranslation } from 'react-i18next';
 import { getIconForNotificationPreferenceModal } from '../helper/notification-helper';
 
-type Props = {
+interface LeavePageModalProps extends BaseModalProps {
     url: string;
     messageType: string;
-    onClose: () => any;
     navigateTo: () => void | Window | null;
-};
-const LeavePageModal: React.FC<Props> = ({ url, messageType, onClose, navigateTo }) => {
+}
+const LeavePageModal = ({ isOpen, onOpenChange, url, messageType, navigateTo }: LeavePageModalProps) => {
     const { t } = useTranslation();
-    const { space } = useTheme();
-
     const Icon = getIconForNotificationPreferenceModal(messageType);
 
     return (
-        <>
-            <Modal.Content width="350" marginX="auto" backgroundColor="transparent">
-                <Box position="absolute" zIndex="1" right="20px" top="14px">
-                    <Pressable onPress={onClose}>
-                        <CloseIcon color="white" />
-                    </Pressable>
-                </Box>
-                <Modal.Body background="primary.900" padding={space['1']}>
-                    <Box alignItems="center" marginY={space['1']}>
-                        <Icon />
-                    </Box>
-                    <Box paddingY={space['2']} maxW={'100%'}>
-                        <Heading maxWidth="330px" marginX="auto" fontSize="lg" textAlign={'center'} color="lightText" marginBottom={space['0.5']}>
-                            {t('notification.panel.leavePageModal.text')}
-                        </Heading>
-                        <Text my={2} textAlign={'center'} fontSize="sm" color="lightText">
-                            {t('notification.panel.leavePageModal.description')}
-                        </Text>
-                        <Text italic textAlign={'center'} fontSize="sm" color="lightText" ellipsizeMode="middle" numberOfLines={1}>
-                            {url}
-                        </Text>
-                    </Box>
-                    <Box>
-                        <Row marginBottom={space['0.5']}>
-                            <Button onPress={navigateTo} width="100%">
-                                {t('notification.panel.leavePageModal.button')}
-                            </Button>
-                        </Row>
-                        <Row marginBottom={space['0.5']}>
-                            <Button variant={'outlinelight'} onPress={onClose} width="100%">
-                                {t('notification.controlPanel.closeButton')}
-                            </Button>
-                        </Row>
-                    </Box>
-                </Modal.Body>
-            </Modal.Content>
-        </>
+        <Modal onOpenChange={onOpenChange} isOpen={isOpen}>
+            <ModalHeader>
+                <ModalTitle>{t('notification.panel.leavePageModal.text')}</ModalTitle>
+            </ModalHeader>
+            <div className="flex flex-col items-center">
+                <Icon className="scale-[0.5]" />
+                <Typography className="font-semibold mb-1">{t('notification.panel.leavePageModal.description')}</Typography>
+                <Typography className="italic">{url}</Typography>
+            </div>
+            <ModalFooter>
+                <Button className="w-full lg:w-fit" variant="outline" onClick={() => onOpenChange(false)}>
+                    {t('notification.controlPanel.closeButton')}
+                </Button>
+                <Button className="w-full lg:w-fit" onClick={navigateTo}>
+                    {t('notification.panel.leavePageModal.button')}
+                </Button>
+            </ModalFooter>
+        </Modal>
     );
 };