diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx
index fd3b05c..43a5750 100644
--- a/src/components/Menu/ChatHistoryList.tsx
+++ b/src/components/Menu/ChatHistoryList.tsx
@@ -54,9 +54,9 @@ const ShowMoreButton = () => {
 
 const ChatHistoryClass = {
   normal:
-    'flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-[#2A2B32] break-all hover:pr-4 group',
+    'flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-[#2A2B32] break-all hover:pr-4 group transition-opacity',
   active:
-    'flex py-3 px-3 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group',
+    'flex py-3 px-3 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
   normalGradient:
     'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32]',
   activeGradient:
@@ -110,7 +110,11 @@ const ChatHistory = React.memo(
       <a
         className={`${
           active ? ChatHistoryClass.active : ChatHistoryClass.normal
-        } ${generating ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+        } ${
+          generating
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }`}
         onClick={() => {
           if (!generating) setCurrentChatIndex(chatIndex);
         }}
diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx
index 6f3a900..526ca2c 100644
--- a/src/components/Menu/NewChat.tsx
+++ b/src/components/Menu/NewChat.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import useStore from '@store/store';
 
 import PlusIcon from '@icon/PlusIcon';
 
@@ -8,11 +9,18 @@ import useAddChat from '@hooks/useAddChat';
 const NewChat = () => {
   const { t } = useTranslation();
   const addChat = useAddChat();
+  const generating = useStore((state) => state.generating);
 
   return (
     <a
-      className='max-md:hidden flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm md:mb-2 flex-shrink-0 md:border md:border-white/20'
-      onClick={addChat}
+      className={`max-md:hidden flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white text-sm md:mb-2 flex-shrink-0 md:border md:border-white/20 transition-opacity ${
+        generating
+          ? 'cursor-not-allowed opacity-40'
+          : 'cursor-pointer opacity-100'
+      }`}
+      onClick={() => {
+        if (!generating) addChat;
+      }}
     >
       <PlusIcon />{' '}
       <span className='hidden md:inline-flex text-white text-sm'>
diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
index 0288830..e7efad0 100644
--- a/src/components/MobileBar/MobileBar.tsx
+++ b/src/components/MobileBar/MobileBar.tsx
@@ -5,6 +5,7 @@ import PlusIcon from '@icon/PlusIcon';
 import useAddChat from '@hooks/useAddChat';
 
 const MobileBar = () => {
+  const generating = useStore((state) => state.generating);
   const chatTitle = useStore((state) =>
     state.chats &&
     state.chats.length > 0 &&
@@ -48,7 +49,17 @@ const MobileBar = () => {
         </svg>
       </button>
       <h1 className='flex-1 text-center text-base font-normal'>{chatTitle}</h1>
-      <button type='button' className='px-3 text-gray-400' onClick={addChat}>
+      <button
+        type='button'
+        className={`px-3 text-gray-400 transition-opacity ${
+          generating
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }`}
+        onClick={() => {
+          if (!generating) addChat();
+        }}
+      >
         <PlusIcon className='h-6 w-6' />
       </button>
     </div>