diff --git a/package-lock.json b/package-lock.json
index 17693b1..4c3de7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "dotenv": "^16.4.5",
         "electron-updater": "^6.1.7",
         "jszip": "^3.10.1",
+        "lodash": "^4.17.21",
         "playwright": "^1.45.1",
         "react-redux": "^9.1.2",
         "react-router-dom": "^6.23.1",
@@ -2883,6 +2884,7 @@
       "version": "9.2.4",
       "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
       "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
+      "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
         "sax": "^1.2.4"
@@ -4107,11 +4109,11 @@
       "dev": true
     },
     "node_modules/electron-updater": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.2.1.tgz",
-      "integrity": "sha512-83eKIPW14qwZqUUM6wdsIRwVKZyjmHxQ4/8G+1C6iS5PdDt7b1umYQyj1/qPpH510GmHEQe4q0kCPe3qmb3a0Q==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.3.tgz",
+      "integrity": "sha512-Kj1u6kfyxUyatnspvKa6qhGn82rMZfUD03WOvCGJ12PyRss/AC8kkYsN9IrJihKTlN8nRwTjZ1JM2UUXoD0KsA==",
       "dependencies": {
-        "builder-util-runtime": "9.2.4",
+        "builder-util-runtime": "9.2.5",
         "fs-extra": "^10.1.0",
         "js-yaml": "^4.1.0",
         "lazy-val": "^1.0.5",
@@ -4121,6 +4123,18 @@
         "tiny-typed-emitter": "^2.1.0"
       }
     },
+    "node_modules/electron-updater/node_modules/builder-util-runtime": {
+      "version": "9.2.5",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.5.tgz",
+      "integrity": "sha512-HjIDfhvqx/8B3TDN4GbABQcgpewTU4LMRTQPkVpKYV3lsuxEJoIfvg09GyWTNmfVNSUAYf+fbTN//JX4TH20pg==",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "sax": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/electron-updater/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -6464,8 +6478,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
diff --git a/package.json b/package.json
index db51a32..1b9c9e2 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "dotenv": "^16.4.5",
     "electron-updater": "^6.1.7",
     "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
     "playwright": "^1.45.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
diff --git a/src/renderer/src/input.css b/src/renderer/src/input.css
index ebeea98..9634340 100644
--- a/src/renderer/src/input.css
+++ b/src/renderer/src/input.css
@@ -22,16 +22,16 @@
 
 @keyframes spin {
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg) translateZ(0);
   }
 }
 
 .loader {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #4f46e5; /* Tailwind's indigo-600 */
+  border: 0.25rem solid rgba(0, 0, 0, 0.1); /* Use rem for scalable units */
+  border-left-color: #4f46e5;
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1.2s linear infinite;
-  will-change: transform; /* Hint to the browser to optimize this element */
+  width: 2rem;
+  height: 2rem;
+  animation: spin 1s linear infinite; /* Adjusted speed for smoother animation */
+  will-change: transform; /* Optimization hint */
 }
diff --git a/src/renderer/src/output.css b/src/renderer/src/output.css
index 2883b16..710910f 100644
--- a/src/renderer/src/output.css
+++ b/src/renderer/src/output.css
@@ -1324,20 +1324,21 @@ html {
 
 @keyframes spin {
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg) translateZ(0);
   }
 }
 
 .loader {
-  border: 4px solid rgba(0, 0, 0, 0.1);
+  border: 0.25rem solid rgba(0, 0, 0, 0.1);
+  /* Use rem for scalable units */
   border-left-color: #4f46e5;
-  /* Tailwind's indigo-600 */
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1.2s linear infinite;
+  width: 2rem;
+  height: 2rem;
+  animation: spin 1s linear infinite;
+  /* Adjusted speed for smoother animation */
   will-change: transform;
-  /* Hint to the browser to optimize this element */
+  /* Optimization hint */
 }
 
 .hover\:bg-blue-100:hover {
@@ -1380,6 +1381,11 @@ html {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
diff --git a/src/renderer/src/pages/Modals/NotificationModal.jsx b/src/renderer/src/pages/Modals/NotificationModal.jsx
index 25fcf46..9628836 100644
--- a/src/renderer/src/pages/Modals/NotificationModal.jsx
+++ b/src/renderer/src/pages/Modals/NotificationModal.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useMemo } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { clearNotification, handleExit } from '../../reducers/statusReducer'
+import { clearNotification, handleExit, toggleNotifications } from '../../reducers/statusReducer'
 
 // eslint-disable-next-line react/display-name
 const Notification = React.memo(() => {
@@ -25,7 +25,7 @@ const Notification = React.memo(() => {
 
 const NotificationModal = () => {
   const dispatch = useDispatch()
-  const { isLoading, notification } = useSelector((state) => state.status)
+  const { isLoading, notification, showNotifications } = useSelector((state) => state.status)
 
   const handleClose = () => {
     dispatch(handleExit())
@@ -44,10 +44,19 @@ const NotificationModal = () => {
           </div>
         )}
 
-        {/* Notification Content */}
-        <div className="flex-grow overflow-y-auto max-h-48 w-full p-4 bg-gray-100 rounded-lg border border-gray-300">
-          <Notification />
-        </div>
+        <button
+          onClick={() => dispatch(toggleNotifications())}
+          className="text-blue-500 hover:text-blue-700 transition duration-150 ease-in-out focus:outline-none"
+        >
+          {showNotifications ? 'Hide Details' : 'Show Details ▼'}
+        </button>
+
+        {/* Conditional rendering based on toggle */}
+        {showNotifications && (
+          <div className="flex-grow w-full p-4 bg-gray-100 rounded-lg border border-gray-300 overflow-y-auto max-h-48">
+            <Notification />
+          </div>
+        )}
 
         <button
           onClick={handleClose}
diff --git a/src/renderer/src/reducers/statusReducer.js b/src/renderer/src/reducers/statusReducer.js
index d06dcab..ab8dac4 100644
--- a/src/renderer/src/reducers/statusReducer.js
+++ b/src/renderer/src/reducers/statusReducer.js
@@ -1,8 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { openModal } from './modalReducer'
+import { throttle } from 'lodash'
 
 const initialState = {
   isLoading: false,
+  showNotifications: false,
   notification: []
 }
 
@@ -19,21 +21,26 @@ const statusSlice = createSlice({
     clearNotification: (state) => {
       state.notification = []
     },
+    toggleNotifications: (state) => {
+      state.showNotifications = !state.showNotifications
+    },
     handleExit: (state) => {
       return initialState
     }
   }
 })
 
+const throttledDispatch = throttle((dispatch, notification) => {
+  dispatch(addNotification(notification))
+}, 500) // Throttle interval is 500 ms
+
 export const triggerNotification = (payload) => (dispatch) => {
   dispatch(openModal({ type: 'NOTIFICATION' }))
 
-  dispatch(
-    addNotification({
-      message: payload.message,
-      type: payload.type
-    })
-  )
+  throttledDispatch(dispatch, {
+    message: payload.message,
+    type: payload.type
+  })
 }
 
 export const triggerLoading = (isLoading) => (dispatch) => {
@@ -43,5 +50,6 @@ export const triggerLoading = (isLoading) => (dispatch) => {
   }
 }
 
-export const { setLoading, addNotification, clearNotification, handleExit } = statusSlice.actions
+export const { setLoading, addNotification, clearNotification, toggleNotifications, handleExit } =
+  statusSlice.actions
 export default statusSlice.reducer