diff --git a/src/components/HeroSection/HeroItemsGroup.tsx b/src/components/HeroSection/HeroItemsGroup.tsx
index f4e9b46f5..40fe39b49 100644
--- a/src/components/HeroSection/HeroItemsGroup.tsx
+++ b/src/components/HeroSection/HeroItemsGroup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { cn } from '../../lib/classname';
 import { HeroTitle } from './HeroTitle';
 
@@ -47,8 +47,6 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
         {
           'py-4': !isLoadingOrCollapsedOrEmpty,
           'py-4 ': isLoadingOrCollapsedOrEmpty,
-          'opacity-50 transition-opacity hover:opacity-100':
-            isCollapsed && !isLoading,
         },
         className,
       )}
diff --git a/src/components/HeroSection/HeroTitle.tsx b/src/components/HeroSection/HeroTitle.tsx
index 7b2173f27..7488e14fa 100644
--- a/src/components/HeroSection/HeroTitle.tsx
+++ b/src/components/HeroSection/HeroTitle.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
 import { cn } from '../../lib/classname.ts';
 
 type HeroTitleProps = {
@@ -29,7 +29,10 @@ export function HeroTitle(props: HeroTitleProps) {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
-        <p className="flex items-center gap-0.5 text-sm text-gray-400">
+        <p
+          onClick={onToggleCollapse}
+          className="flex items-center cursor-default gap-0.5 text-sm text-gray-400"
+        >
           {!isLoading && icon}
           {isLoading && (
             <span className="mr-1.5">