diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index ba8ecc02..55d42501 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -5,6 +5,7 @@ export interface Props extends HTMLAttributes<HTMLElement> {
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
   children: ReactNode;
   color?: Colors;
+  className?: string;
 }
 
 const colors = {
@@ -16,7 +17,12 @@ const colors = {
 
 type Colors = keyof typeof colors;
 
-export const Alert = ({ as = "p", color = "success", children }: Props) => {
+export const Alert = ({
+  as = "p",
+  color = "success",
+  className,
+  children,
+}: Props) => {
   const Component = as;
 
   return (
@@ -24,6 +30,7 @@ export const Alert = ({ as = "p", color = "success", children }: Props) => {
       className={twMerge(
         "rounded-xl border p-4 text-center font-semibold",
         colors[color],
+        className,
       )}
     >
       {children}
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
deleted file mode 100644
index f2a89a88..00000000
--- a/src/components/Message.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FC } from "react";
-
-type Props = {
-  color?: string;
-  message: string;
-};
-
-const Message: FC<Props> = ({ message, color = "bg-red-500" }) => {
-  return (
-    <p className={`mt-5 break-words rounded ${color} px-5 py-1 text-white`}>
-      {message}
-    </p>
-  );
-};
-
-export default Message;
diff --git a/src/pages/Home/ListChannelModal/Channel.tsx b/src/pages/Home/ListChannelModal/Channel.tsx
index 3cdc0829..c111eb9a 100644
--- a/src/pages/Home/ListChannelModal/Channel.tsx
+++ b/src/pages/Home/ListChannelModal/Channel.tsx
@@ -1,30 +1,23 @@
+import { Alert } from "@/components/Alert";
 import { AppContext, Unit } from "@/context/app-context";
 import { LightningChannel } from "@/models/lightning-channel";
 import { convertSatToBtc, convertToString } from "@/utils/format";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import { Checkbox } from "@nextui-org/checkbox";
 import { Button } from "@nextui-org/react";
-import { FC, useContext, useRef, useState } from "react";
+import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 type Props = {
   isLoading: boolean;
-  showDetails: boolean;
   channel: LightningChannel;
-  onClick: (channelId: string) => void;
   onDelete: (channelId: string, forceClose: boolean) => void;
 };
 
-const Channel: FC<Props> = ({
-  isLoading,
-  showDetails,
-  channel,
-  onClick,
-  onDelete,
-}) => {
-  const { unit } = useContext(AppContext);
+const Channel: FC<Props> = ({ isLoading, channel, onDelete }) => {
   const { t } = useTranslation();
+  const { unit } = useContext(AppContext);
   const [confirm, setConfirm] = useState(false);
-  const forceCloseEl = useRef<HTMLInputElement>(null);
+  const [isForceClose, setIsForceClose] = useState(false);
 
   const convertedLocal =
     unit === Unit.SAT
@@ -35,95 +28,83 @@ const Channel: FC<Props> = ({
       ? convertToString(unit, channel.balance_remote)
       : convertSatToBtc(channel.balance_remote);
 
-  const clickHandler = () => {
-    setConfirm(false);
-    onClick(channel.channel_id);
-  };
-
   const closeChannelHandler = () => {
-    onDelete(channel.channel_id, forceCloseEl.current?.checked || false);
+    onDelete(channel.channel_id, isForceClose);
   };
 
   return (
-    <li className="bg-gray-700 p-3 shadow-inner hover:bg-gray-600">
-      <div
-        className="flex justify-between border-b border-gray-500 pb-2"
-        onClick={clickHandler}
-      >
-        <span>{channel.peer_alias}</span>
-        {showDetails && <ChevronUpIcon className="h-6 w-6" />}
-        {!showDetails && <ChevronDownIcon className="h-6 w-6" />}
-      </div>
+    <section className="flex flex-col gap-4 py-4">
+      <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
+        <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
+          <h4 className="mb-1 font-bold">{t("home.channel_id")}</h4>
+          <p className="mx-2 overflow-x-auto">{channel.channel_id}</p>
+        </div>
+        <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
+          <h4 className="mb-1 font-bold">{t("home.active")}</h4>
+          <p className="mx-2 overflow-x-auto">
+            {channel.active ? t("setup.yes") : t("home.no")}
+          </p>
+        </div>
+      </article>
+      <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
+        <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
+          <h4 className="mb-1 font-bold">{t("home.local_balance")}</h4>
+          <p className="mx-2 overflow-x-auto">
+            {convertedLocal} {unit}
+          </p>
+        </div>
+        <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
+          <h4 className="mb-1 font-bold">{t("home.remote_balance")}</h4>
+          <p className="mx-2 overflow-x-auto">
+            {convertedRemote} {unit}
+          </p>
+        </div>
+      </article>
 
-      {showDetails && (
-        <section className="flex flex-col gap-4 py-4">
-          <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
-            <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
-              <h4 className="mb-1 font-bold">{t("home.channel_id")}</h4>
-              <p className="mx-2 overflow-x-auto">{channel.channel_id}</p>
-            </div>
-            <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
-              <h4 className="mb-1 font-bold">{t("home.active")}</h4>
-              <p className="mx-2 overflow-x-auto">
-                {channel.active ? t("setup.yes") : t("home.no")}
-              </p>
-            </div>
-          </article>
-          <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
-            <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
-              <h4 className="mb-1 font-bold">{t("home.local_balance")}</h4>
-              <p className="mx-2 overflow-x-auto">
-                {convertedLocal} {unit}
-              </p>
-            </div>
-            <div className="mb-1 flex w-full flex-col justify-center md:w-1/2 md:justify-around">
-              <h4 className="mb-1 font-bold">{t("home.remote_balance")}</h4>
-              <p className="mx-2 overflow-x-auto">
-                {convertedRemote} {unit}
-              </p>
-            </div>
-          </article>
-
-          <article>
-            <Button
-              color="primary"
-              isDisabled={confirm}
-              onClick={() => setConfirm(true)}
-            >
-              {t("home.close_channel")}
-            </Button>
+      <article>
+        <Button
+          color="primary"
+          isDisabled={confirm}
+          onClick={() => setConfirm(true)}
+        >
+          {t("home.close_channel")}
+        </Button>
 
-            {/*TODO should be confirm modal*/}
-            {confirm && (
-              <div className="flex flex-col justify-center gap-4">
-                <span>{t("home.confirm_channel_close")}</span>
+        {/* TODO should be confirm modal maybe? */}
+        {confirm && (
+          <Alert color="danger" className="mt-4" as="div">
+            <div className="flex flex-col justify-center gap-4">
+              <p>{t("home.confirm_channel_close")}</p>
 
-                <div className="flex items-center justify-center gap-2">
-                  <label htmlFor="forceClose">{t("home.force_close")}</label>
-                  <input id="forceClose" type="checkbox" ref={forceCloseEl} />
-                </div>
+              <div className="flex items-center justify-center gap-2">
+                <Checkbox
+                  isSelected={isForceClose}
+                  onValueChange={setIsForceClose}
+                >
+                  {t("home.force_close")}
+                </Checkbox>
+              </div>
 
-                <div className="flex justify-center gap-4">
-                  <Button
-                    onClick={() => setConfirm(false)}
-                    isDisabled={isLoading}
-                  >
-                    {t("setup.cancel")}
-                  </Button>
-                  <Button
-                    color="primary"
-                    isLoading={isLoading}
-                    onClick={closeChannelHandler}
-                  >
-                    {t("setup.yes")}
-                  </Button>
-                </div>
+              <div className="flex justify-center gap-4">
+                <Button
+                  onClick={() => setConfirm(false)}
+                  isDisabled={isLoading}
+                >
+                  {t("setup.cancel")}
+                </Button>
+                <Button
+                  color="primary"
+                  isLoading={isLoading}
+                  onClick={closeChannelHandler}
+                >
+                  {t("setup.yes")}
+                </Button>
               </div>
-            )}
-          </article>
-        </section>
-      )}
-    </li>
+            </div>
+          </Alert>
+        )}
+      </article>
+    </section>
   );
 };
 
diff --git a/src/pages/Home/ListChannelModal/ChannelList.tsx b/src/pages/Home/ListChannelModal/ChannelList.tsx
index c120a540..9e7651cf 100644
--- a/src/pages/Home/ListChannelModal/ChannelList.tsx
+++ b/src/pages/Home/ListChannelModal/ChannelList.tsx
@@ -1,6 +1,7 @@
 import Channel from "./Channel";
 import { LightningChannel } from "@/models/lightning-channel";
-import { FC, useState } from "react";
+import { Accordion, AccordionItem } from "@nextui-org/react";
+import { FC } from "react";
 
 type Props = {
   isLoading: boolean;
@@ -9,30 +10,18 @@ type Props = {
 };
 
 const ChannelList: FC<Props> = ({ isLoading, channel, onDelete }) => {
-  const [showDetails, setShowDetails] = useState<string | null>(null);
-
-  const toggleDetailHandler = (channelId: string) => {
-    setShowDetails((prev) => {
-      if (prev === channelId) {
-        return null;
-      }
-      return channelId;
-    });
-  };
-
   return (
-    <ul className="py-8">
+    <Accordion>
       {channel.map((c) => (
-        <Channel
+        <AccordionItem
           key={c.channel_id}
-          channel={c}
-          showDetails={c.channel_id === showDetails}
-          isLoading={isLoading}
-          onClick={toggleDetailHandler}
-          onDelete={onDelete}
-        />
+          aria-label={`Channel: ${c.peer_alias}`}
+          title={c.peer_alias}
+        >
+          <Channel channel={c} isLoading={isLoading} onDelete={onDelete} />
+        </AccordionItem>
       ))}
-    </ul>
+    </Accordion>
   );
 };
 
diff --git a/src/pages/Home/ListChannelModal/ListChannelModal.tsx b/src/pages/Home/ListChannelModal/ListChannelModal.tsx
index a3b22cef..ba121121 100644
--- a/src/pages/Home/ListChannelModal/ListChannelModal.tsx
+++ b/src/pages/Home/ListChannelModal/ListChannelModal.tsx
@@ -4,7 +4,6 @@ import {
   ConfirmModal,
   type Props as ConfirmModalProps,
 } from "@/components/ConfirmModal";
-import Message from "@/components/Message";
 import { LightningChannel } from "@/models/lightning-channel";
 import { checkError } from "@/utils/checkError";
 import { instance } from "@/utils/interceptor";
@@ -84,7 +83,7 @@ export default function ListChannelModal({
             isLoading={isLoading}
           />
         )}
-        {error && <Message message={error} />}
+        {error && <Alert color="danger">{error}</Alert>}
       </ConfirmModal.Body>
     </ConfirmModal>
   );