diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 0178b20..365c83e 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -155,7 +155,7 @@ const ChatFolder = ({
         style={{ background: color || '' }}
         className={`${
           color ? '' : 'hover:bg-gray-850'
-        } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer`}
+        } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
         onClick={toggleExpanded}
         ref={folderRef}
         onMouseEnter={() => {
@@ -272,7 +272,8 @@ const ChatFolder = ({
           )}
         </div>
       </div>
-      <div className='group/folder ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1'>
+      <div className='ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1 parent'>
+        {isExpanded && <NewChat folder={folderId} />}
         {isExpanded &&
           folderChats.map((chat) => (
             <ChatHistory
@@ -281,7 +282,6 @@ const ChatFolder = ({
               key={`${chat.title}-${chat.index}`}
             />
           ))}
-        {isExpanded && <NewChat folder={folderId} />}
       </div>
     </div>
   );
diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx
index b10b553..7144f5d 100644
--- a/src/components/Menu/NewChat.tsx
+++ b/src/components/Menu/NewChat.tsx
@@ -28,7 +28,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
       title={folder ? String(t('newChat')) : ''}
     >
       {folder ? (
-        <div className='max-h-0 group-hover/folder:max-h-10 group-hover/folder:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
+        <div className='max-h-0 parent-sibling-hover:max-h-10 parent-sibling-hover:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
           <PlusIcon /> {t('newChat')}
         </div>
       ) : (
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 0cc6849..345d2dd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,15 @@
 /** @type {import('tailwindcss').Config} */
+
+function parentSiblingHoverPlugin({ addVariant, e }) {
+  addVariant('parent-sibling-hover', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.parent-sibling:hover ~ .parent .${e(
+        `parent-sibling-hover${separator}${className}`
+      )}`;
+    });
+  });
+}
+
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
@@ -52,6 +63,6 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), parentSiblingHoverPlugin],
   darkMode: 'class',
 };