diff --git a/src/renderer/components/notification/notification-item.component.tsx b/src/renderer/components/notification/notification-item.component.tsx
index a4ad83c7..a0838bd9 100644
--- a/src/renderer/components/notification/notification-item.component.tsx
+++ b/src/renderer/components/notification/notification-item.component.tsx
@@ -1,5 +1,5 @@
 import { NotificationResult, NotificationType, Notification } from "renderer/services/notification.service"
-import { motion } from "framer-motion"
+import { motion, PanInfo } from "framer-motion"
 import { BsmImage } from "../shared/bsm-image.component";
 import BeatRunningImg from "../../../../assets/images/apngs/beat-running.png";
 import BeatConflictImg from "../../../../assets/images/apngs/beat-conflict.png";
@@ -10,27 +10,37 @@ import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function NotificationItem({resolver, notification}: {resolver?: (value: NotificationResult|string) => void, notification: Notification}) {
 
-   const t = useTranslation();
+    const t = useTranslation();
 
-   const renderImage = (() => {
-      if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
-      if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
-      if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
-      return BeatImpatientImg;
-   })()
+    const renderImage = (() => {
+        if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
+        if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
+        if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
+        return BeatImpatientImg;
+    })();
 
-   const renderNeonColors = (() => {
-      if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; }
-      if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; }
-      if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; }
-      return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white";
-   })()
+    const renderNeonColors = (() => {
+        if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; }
+        if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; }
+        if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; }
+        return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white";
+    })();
+
+
+    const handleDragEnd = (e: MouseEvent, info: PanInfo) => {
+        const offset = info.offset.x;
+        const velocity = info.velocity.x;
+
+        if(offset > 30 && velocity > 300){
+            resolver(NotificationResult.CLOSE);
+        }
+    }
 
   return (
-   <motion.li layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
+   <motion.li layout drag="x" dragConstraints={{left: 0, right: 0}} dragElastic={{left: 0, right: .3}} onDragEnd={handleDragEnd} initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 cursor-grab active:cursor-grabbing shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
       <div className="w-full flex flex-col">
          <div className="flex items-center justify-start pl-1">
-            <BsmImage className="h-14 mr-1" image={renderImage}/>
+            <BsmImage className="h-14 mr-1 pointer-events-none" image={renderImage}/>
             <div className="flex flex-col py-2">
                <h1 className="font-bold leading-4 tracking-wide pr-5 my-1">{t(notification.title)}</h1>
                {notification.desc && <p className="text-xs pr-1">{t(notification.desc)}</p>}