diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx
index c3021424d..c8806b2ca 100644
--- a/src/components/AccountNotifications.test.tsx
+++ b/src/components/AccountNotifications.test.tsx
@@ -49,4 +49,21 @@ describe('components/AccountNotifications.tsx', () => {
     expect(openAccountProfileMock).toHaveBeenCalledTimes(1);
     expect(openAccountProfileMock).toHaveBeenCalledWith(mockGitHubCloudAccount);
   });
+
+  it('should toggle account notifications visibility', async () => {
+    const props = {
+      account: mockGitHubCloudAccount,
+      notifications: mockGitHubNotifications,
+      showAccountHostname: true,
+    };
+
+    await act(async () => {
+      render(<AccountNotifications {...props} />);
+    });
+
+    fireEvent.click(screen.getByTitle('Hide account notifications'));
+
+    const tree = render(<AccountNotifications {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 0bda63707..d4a9ebcfd 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -1,4 +1,9 @@
-import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronUpIcon,
+} from '@primer/octicons-react';
+import { useState } from 'react';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
@@ -26,7 +31,25 @@ export const AccountNotifications = (props: IProps) => {
     ),
   );
 
-  const Chevron = notifications.length > 0 ? ChevronDownIcon : ChevronLeftIcon;
+  const [showNotifications, setShowNotifications] = useState(true);
+
+  const toggleNotifications = () => {
+    setShowNotifications(!showNotifications);
+  };
+
+  const ChevronIcon =
+    notifications.length === 0
+      ? ChevronLeftIcon
+      : showNotifications
+        ? ChevronDownIcon
+        : ChevronUpIcon;
+
+  const toggleNotificationsLabel =
+    notifications.length === 0
+      ? 'No notifications for account'
+      : showNotifications
+        ? 'Hide account notifications'
+        : 'Show account notifications';
 
   return (
     <>
@@ -43,23 +66,30 @@ export const AccountNotifications = (props: IProps) => {
             </button>
           </div>
           <div>
-            <Chevron size={20} />
+            <button
+              type="button"
+              title={toggleNotificationsLabel}
+              onClick={toggleNotifications}
+            >
+              <ChevronIcon size={20} />
+            </button>
           </div>
         </div>
       )}
 
-      {Object.values(groupedNotifications).map((repoNotifications) => {
-        const repoSlug = repoNotifications[0].repository.full_name;
+      {showNotifications &&
+        Object.values(groupedNotifications).map((repoNotifications) => {
+          const repoSlug = repoNotifications[0].repository.full_name;
 
-        return (
-          <RepositoryNotifications
-            key={repoSlug}
-            account={account}
-            repoName={repoSlug}
-            repoNotifications={repoNotifications}
-          />
-        );
-      })}
+          return (
+            <RepositoryNotifications
+              key={repoSlug}
+              account={account}
+              repoName={repoSlug}
+              repoNotifications={repoNotifications}
+            />
+          );
+        })}
     </>
   );
 };
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 024a22adf..0f1e8f305 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -37,20 +37,25 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </button>
         </div>
         <div>
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-chevron-down"
-            fill="currentColor"
-            focusable="false"
-            height="20"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="20"
+          <button
+            title="Hide account notifications"
+            type="button"
           >
-            <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
         </div>
       </div>
       <div>
@@ -91,20 +96,25 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </button>
       </div>
       <div>
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-chevron-down"
-          fill="currentColor"
-          focusable="false"
-          height="20"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="20"
+        <button
+          title="Hide account notifications"
+          type="button"
         >
-          <path
-            d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            fill="currentColor"
+            focusable="false"
+            height="20"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="20"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
       </div>
     </div>
     <div>
@@ -202,6 +212,66 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </button>
         </div>
         <div>
+          <button
+            title="No notifications for account"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-left"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+    >
+      <div>
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+            />
+          </svg>
+        </span>
+        <button
+          title="Open Profile"
+          type="button"
+        >
+          @
+          octocat
+        </button>
+      </div>
+      <div>
+        <button
+          title="No notifications for account"
+          type="button"
+        >
           <svg
             aria-hidden="true"
             class="octicon octicon-chevron-left"
@@ -216,9 +286,181 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
               d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
             />
           </svg>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/AccountNotifications.tsx should toggle account notifications visibility 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+      >
+        <div>
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+          <button
+            title="Open Profile"
+            type="button"
+          >
+            @
+            octocat
+          </button>
+        </div>
+        <div>
+          <button
+            title="Show account notifications"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-up"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M3.22 10.53a.749.749 0 0 1 0-1.06l4.25-4.25a.749.749 0 0 1 1.06 0l4.25 4.25a.749.749 0 1 1-1.06 1.06L8 6.811 4.28 10.53a.749.749 0 0 1-1.06 0Z"
+              />
+            </svg>
+          </button>
         </div>
       </div>
     </div>
+    <div>
+      <div
+        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+      >
+        <div>
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+          <button
+            title="Open Profile"
+            type="button"
+          >
+            @
+            octocat
+          </button>
+        </div>
+        <div>
+          <button
+            title="Hide account notifications"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div>
+        Repository
+      </div>
+    </div>
   </body>,
   "container": <div>
     <div
@@ -253,22 +495,30 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </button>
       </div>
       <div>
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-chevron-left"
-          fill="currentColor"
-          focusable="false"
-          height="20"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="20"
+        <button
+          title="Hide account notifications"
+          type="button"
         >
-          <path
-            d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            fill="currentColor"
+            focusable="false"
+            height="20"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="20"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
       </div>
     </div>
+    <div>
+      Repository
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],