diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index b11d05e5b..411cdb369 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -31,30 +31,31 @@ export const AccountNotifications = (props: IProps) => {
     ),
   );
 
-  const [showNotifications, setShowNotifications] = useState(true);
+  const [showAccountNotifications, setShowAccountNotifications] =
+    useState(true);
 
-  const toggleNotifications = () => {
-    setShowNotifications(!showNotifications);
+  const toggleAccountNotifications = () => {
+    setShowAccountNotifications(!showAccountNotifications);
   };
 
   const ChevronIcon =
     notifications.length === 0
       ? ChevronLeftIcon
-      : showNotifications
+      : showAccountNotifications
         ? ChevronDownIcon
         : ChevronUpIcon;
 
-  const toggleNotificationsLabel =
+  const toggleAccountNotificationsLabel =
     notifications.length === 0
       ? 'No notifications for account'
-      : showNotifications
+      : showAccountNotifications
         ? 'Hide account notifications'
         : 'Show account notifications';
 
   return (
     <>
       {showAccountHostname && (
-        <div className="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
+        <div className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
           <div>
             <PlatformIcon type={account.platform} size={16} />
             <button
@@ -65,11 +66,12 @@ export const AccountNotifications = (props: IProps) => {
               @{account.user.login}
             </button>
           </div>
-          <div>
+          <div className="opacity-0 transition-opacity group-hover:opacity-80">
             <button
               type="button"
-              title={toggleNotificationsLabel}
-              onClick={toggleNotifications}
+              className="h-full hover:text-green-500 focus:outline-none"
+              title={toggleAccountNotificationsLabel}
+              onClick={toggleAccountNotifications}
             >
               <ChevronIcon size={20} />
             </button>
@@ -77,7 +79,7 @@ export const AccountNotifications = (props: IProps) => {
         </div>
       )}
 
-      {showNotifications &&
+      {showAccountNotifications &&
         Object.values(groupedNotifications).map((repoNotifications) => {
           const repoSlug = repoNotifications[0].repository.full_name;
 
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index ace1d48a4..835eb7069 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -1,5 +1,11 @@
-import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react';
-import { type FC, useCallback, useContext } from 'react';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MarkGithubIcon,
+  ReadIcon,
+} from '@primer/octicons-react';
+import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
@@ -28,10 +34,25 @@ export const RepositoryNotifications: FC<IProps> = ({
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
   const repoSlug = repoNotifications[0].repository.full_name;
 
+  const [showRepositoryNotifications, setShowRepositoryNotifications] =
+    useState(true);
+
+  const toggleRepositoryNotifications = () => {
+    setShowRepositoryNotifications(!showRepositoryNotifications);
+  };
+
+  const ChevronIcon = showRepositoryNotifications
+    ? ChevronDownIcon
+    : ChevronUpIcon;
+
+  const toggleRepositoryNotificationsLabel = showRepositoryNotifications
+    ? 'Hide repository notifications'
+    : 'Show repository notifications';
+
   return (
     <>
-      <div className="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
-        <div className="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
+      <div className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
+        <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
           {avatarUrl ? (
             <img
               className="size-5 rounded"
@@ -51,6 +72,14 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
 
         <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
+          <button
+            type="button"
+            className="h-full hover:text-green-500 focus:outline-none"
+            title={toggleRepositoryNotificationsLabel}
+            onClick={toggleRepositoryNotifications}
+          >
+            <ChevronIcon size={16} />
+          </button>
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -73,9 +102,10 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
       </div>
 
-      {repoNotifications.map((obj) => (
-        <NotificationRow key={obj.id} notification={obj} />
-      ))}
+      {showRepositoryNotifications &&
+        repoNotifications.map((obj) => (
+          <NotificationRow key={obj.id} notification={obj} />
+        ))}
     </>
   );
 };
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index fbd8f9167..f002b5238 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -36,8 +36,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             octocat
           </button>
         </div>
-        <div>
+        <div
+          class="opacity-0 transition-opacity group-hover:opacity-80"
+        >
           <button
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Hide account notifications"
             type="button"
           >
@@ -65,7 +68,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
@@ -95,8 +98,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           octocat
         </button>
       </div>
-      <div>
+      <div
+        class="opacity-0 transition-opacity group-hover:opacity-80"
+      >
         <button
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Hide account notifications"
           type="button"
         >
@@ -181,7 +187,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -211,8 +217,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             octocat
           </button>
         </div>
-        <div>
+        <div
+          class="opacity-0 transition-opacity group-hover:opacity-80"
+        >
           <button
+            class="h-full hover:text-green-500 focus:outline-none"
             title="No notifications for account"
             type="button"
           >
@@ -237,7 +246,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
@@ -267,8 +276,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           octocat
         </button>
       </div>
-      <div>
+      <div
+        class="opacity-0 transition-opacity group-hover:opacity-80"
+      >
         <button
+          class="h-full hover:text-green-500 focus:outline-none"
           title="No notifications for account"
           type="button"
         >
@@ -350,7 +362,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -380,8 +392,11 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             octocat
           </button>
         </div>
-        <div>
+        <div
+          class="opacity-0 transition-opacity group-hover:opacity-80"
+        >
           <button
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Show account notifications"
             type="button"
           >
@@ -405,7 +420,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
     </div>
     <div>
       <div
-        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -435,8 +450,11 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             octocat
           </button>
         </div>
-        <div>
+        <div
+          class="opacity-0 transition-opacity group-hover:opacity-80"
+        >
           <button
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Hide account notifications"
             type="button"
           >
@@ -464,7 +482,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
@@ -494,8 +512,11 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           octocat
         </button>
       </div>
-      <div>
+      <div
+        class="opacity-0 transition-opacity group-hover:opacity-80"
+      >
         <button
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Hide account notifications"
           type="button"
         >
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index d2e19b9de..372e1194a 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -6,10 +6,10 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+        class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
@@ -25,6 +25,26 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Hide repository notifications"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
+              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="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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Done"
@@ -82,10 +102,10 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+      class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
@@ -101,6 +121,26 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Hide repository notifications"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            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="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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Done"
@@ -215,10 +255,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
   "baseElement": <body>
     <div>
       <div
-        class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+        class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
         >
           <svg
             aria-hidden="true"
@@ -243,6 +283,26 @@ exports[`components/Repository.tsx should use default repository icon when avata
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Hide repository notifications"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
+              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="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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Done"
@@ -300,10 +360,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
   </body>,
   "container": <div>
     <div
-      class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+      class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
       >
         <svg
           aria-hidden="true"
@@ -328,6 +388,26 @@ exports[`components/Repository.tsx should use default repository icon when avata
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Hide repository notifications"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            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="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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Done"