diff --git a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css b/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css
deleted file mode 100644
index 2080d076..00000000
--- a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css
+++ /dev/null
@@ -1,146 +0,0 @@
-.sk-fading-circle {
-  width: 24px;
-  height: 24px;
-  position: relative;
-}
-
-.sk-fading-circle .sk-circle {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.sk-fading-circle .sk-circle:before {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  width: 15%;
-  height: 15%;
-  background-color: white;
-  border-radius: 100%;
-  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-}
-.sk-fading-circle .sk-circle2 {
-  -webkit-transform: rotate(30deg);
-  -ms-transform: rotate(30deg);
-  transform: rotate(30deg);
-}
-.sk-fading-circle .sk-circle3 {
-  -webkit-transform: rotate(60deg);
-  -ms-transform: rotate(60deg);
-  transform: rotate(60deg);
-}
-.sk-fading-circle .sk-circle4 {
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-.sk-fading-circle .sk-circle5 {
-  -webkit-transform: rotate(120deg);
-  -ms-transform: rotate(120deg);
-  transform: rotate(120deg);
-}
-.sk-fading-circle .sk-circle6 {
-  -webkit-transform: rotate(150deg);
-  -ms-transform: rotate(150deg);
-  transform: rotate(150deg);
-}
-.sk-fading-circle .sk-circle7 {
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-.sk-fading-circle .sk-circle8 {
-  -webkit-transform: rotate(210deg);
-  -ms-transform: rotate(210deg);
-  transform: rotate(210deg);
-}
-.sk-fading-circle .sk-circle9 {
-  -webkit-transform: rotate(240deg);
-  -ms-transform: rotate(240deg);
-  transform: rotate(240deg);
-}
-.sk-fading-circle .sk-circle10 {
-  -webkit-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-.sk-fading-circle .sk-circle11 {
-  -webkit-transform: rotate(300deg);
-  -ms-transform: rotate(300deg);
-  transform: rotate(300deg);
-}
-.sk-fading-circle .sk-circle12 {
-  -webkit-transform: rotate(330deg);
-  -ms-transform: rotate(330deg);
-  transform: rotate(330deg);
-}
-.sk-fading-circle .sk-circle2:before {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-.sk-fading-circle .sk-circle3:before {
-  -webkit-animation-delay: -1s;
-  animation-delay: -1s;
-}
-.sk-fading-circle .sk-circle4:before {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-.sk-fading-circle .sk-circle5:before {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-.sk-fading-circle .sk-circle6:before {
-  -webkit-animation-delay: -0.7s;
-  animation-delay: -0.7s;
-}
-.sk-fading-circle .sk-circle7:before {
-  -webkit-animation-delay: -0.6s;
-  animation-delay: -0.6s;
-}
-.sk-fading-circle .sk-circle8:before {
-  -webkit-animation-delay: -0.5s;
-  animation-delay: -0.5s;
-}
-.sk-fading-circle .sk-circle9:before {
-  -webkit-animation-delay: -0.4s;
-  animation-delay: -0.4s;
-}
-.sk-fading-circle .sk-circle10:before {
-  -webkit-animation-delay: -0.3s;
-  animation-delay: -0.3s;
-}
-.sk-fading-circle .sk-circle11:before {
-  -webkit-animation-delay: -0.2s;
-  animation-delay: -0.2s;
-}
-.sk-fading-circle .sk-circle12:before {
-  -webkit-animation-delay: -0.1s;
-  animation-delay: -0.1s;
-}
-
-@-webkit-keyframes sk-circleFadeDelay {
-  0%,
-  39%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
-@keyframes sk-circleFadeDelay {
-  0%,
-  39%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
diff --git a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx b/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx
deleted file mode 100644
index a9dd6ebf..00000000
--- a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import "./ButtonSpinner.css";
-
-const ButtonSpinner = () => {
-  return (
-    <div className="mr-3 inline-block h-6 w-6">
-      <div className="sk-fading-circle">
-        <div className="sk-circle1 sk-circle"></div>
-        <div className="sk-circle2 sk-circle"></div>
-        <div className="sk-circle3 sk-circle"></div>
-        <div className="sk-circle4 sk-circle"></div>
-        <div className="sk-circle5 sk-circle"></div>
-        <div className="sk-circle6 sk-circle"></div>
-        <div className="sk-circle7 sk-circle"></div>
-        <div className="sk-circle8 sk-circle"></div>
-        <div className="sk-circle9 sk-circle"></div>
-        <div className="sk-circle10 sk-circle"></div>
-        <div className="sk-circle11 sk-circle"></div>
-        <div className="sk-circle12 sk-circle"></div>
-      </div>
-    </div>
-  );
-};
-
-export default ButtonSpinner;
diff --git a/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx b/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx
deleted file mode 100644
index 544e6ecd..00000000
--- a/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import ButtonSpinner from "./ButtonSpinner/ButtonSpinner";
-import type { ButtonHTMLAttributes, FC, ReactElement } from "react";
-
-type Props = {
-  className?: string;
-  loading?: boolean;
-  icon?: ReactElement;
-} & ButtonHTMLAttributes<unknown>;
-
-const ButtonWithSpinner: FC<Props> = ({
-  className,
-  children,
-  loading,
-  disabled,
-  onClick,
-  icon,
-  type,
-}) => {
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={className}
-      disabled={disabled || loading}
-    >
-      <div className="flex items-center justify-center">
-        {loading && <ButtonSpinner />}
-        {!loading && icon}
-        {children}
-      </div>
-    </button>
-  );
-};
-
-export default ButtonWithSpinner;
diff --git a/src/components/LoadingBox.tsx b/src/components/LoadingBox.tsx
deleted file mode 100644
index 45b1e770..00000000
--- a/src/components/LoadingBox.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LoadingSpinner from "./LoadingSpinner/LoadingSpinner";
-import type { FC } from "react";
-
-export const LoadingBox: FC = () => (
-  <div className="h-full p-5">
-    <div className="bd-card flex items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  </div>
-);
-
-export default LoadingBox;
diff --git a/src/components/LoadingSpinner/LoadingSpinner.css b/src/components/LoadingSpinner/LoadingSpinner.css
deleted file mode 100644
index 7285ebe3..00000000
--- a/src/components/LoadingSpinner/LoadingSpinner.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* from https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 8px solid currentColor;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: currentColor transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/LoadingSpinner/LoadingSpinner.tsx b/src/components/LoadingSpinner/LoadingSpinner.tsx
deleted file mode 100644
index 0a095959..00000000
--- a/src/components/LoadingSpinner/LoadingSpinner.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import "./LoadingSpinner.css";
-import type { FC } from "react";
-
-type Props = {
-  color?: string;
-};
-
-const LoadingSpinner: FC<Props> = ({ color }) => {
-  return (
-    <div
-      id="loading-spinner"
-      className={`${color || "text-yellow-500"} lds-ring`}
-    >
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-  );
-};
-
-export default LoadingSpinner;
diff --git a/src/layouts/LoadingScreen.tsx b/src/layouts/LoadingScreen.tsx
index 9b89c608..1d562ba7 100644
--- a/src/layouts/LoadingScreen.tsx
+++ b/src/layouts/LoadingScreen.tsx
@@ -1,12 +1,12 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
 import RaspiBlitzLogoDark from "@/assets/RaspiBlitz_Logo_Main_Negative.svg?react";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen for the initial loading of the app
 export default function LoadingScreen() {
   return (
     <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-700">
       <RaspiBlitzLogoDark className="mb-5 h-12" />
-      <LoadingSpinner color="text-yellow-500" />
+      <Spinner size="lg" />
     </main>
   );
 }
diff --git a/src/layouts/PageLoadingScreen.tsx b/src/layouts/PageLoadingScreen.tsx
index 19ec938d..8c07309a 100644
--- a/src/layouts/PageLoadingScreen.tsx
+++ b/src/layouts/PageLoadingScreen.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 import { FC } from "react";
 
 // Loading Screen where sidebar is visible and usable
@@ -8,7 +8,7 @@ const PageLoadingScreen: FC = () => {
       className={`content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8`}
     >
       <section className="content-container flex items-center justify-center">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </section>
     </main>
   );
diff --git a/src/layouts/SkeletonLoadingScreen.tsx b/src/layouts/SkeletonLoadingScreen.tsx
index b552d66a..d770cefa 100644
--- a/src/layouts/SkeletonLoadingScreen.tsx
+++ b/src/layouts/SkeletonLoadingScreen.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen when sidebar is visible but not usable
 export default function SkeletonLoadingScreen() {
@@ -7,7 +7,7 @@ export default function SkeletonLoadingScreen() {
       <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 bg-gray-800 px-8 text-gray-300 shadow-md transition-colors"></header>
       <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between bg-gray-800 px-2 pt-8 shadow-lg transition-colors md:flex md:w-2/12"></nav>
       <main className="content-container page-container flex items-center justify-center bg-gray-700">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </main>
     </>
   );
diff --git a/src/pages/Home/BitcoinCard.tsx b/src/pages/Home/BitcoinCard.tsx
index e3a93ca5..4495573d 100644
--- a/src/pages/Home/BitcoinCard.tsx
+++ b/src/pages/Home/BitcoinCard.tsx
@@ -1,6 +1,6 @@
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
 import { checkPropsUndefined } from "@/utils";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -9,7 +9,14 @@ export const BitcoinCard: FC = () => {
   const { btcInfo, systemInfo } = useContext(SSEContext);
 
   if (checkPropsUndefined({ btcInfo, systemInfo })) {
-    return <LoadingBox />;
+    return (
+      <div className="h-full">
+        <section className="bd-card">
+          <h2 className="text-lg font-bold">{t("home.bitcoin")}</h2>
+          <Spinner size="lg" />
+        </section>
+      </div>
+    );
   }
 
   const {
@@ -33,6 +40,7 @@ export const BitcoinCard: FC = () => {
     <div className="h-full">
       <section className="bd-card">
         <h2 className="text-lg font-bold">{t("home.bitcoin")}</h2>
+
         <div className="flex overflow-hidden py-4">
           <article className="w-1/2">
             <h6 className="text-sm text-gray-200">{t("home.version")}</h6>
diff --git a/src/pages/Home/ConnectionCard.tsx b/src/pages/Home/ConnectionCard.tsx
index dfd7439e..139011cc 100644
--- a/src/pages/Home/ConnectionCard.tsx
+++ b/src/pages/Home/ConnectionCard.tsx
@@ -1,5 +1,4 @@
 import QRCodeModal from "./QRCodeModal";
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
 import useClipboard from "@/hooks/use-clipboard";
 import {
@@ -8,6 +7,7 @@ import {
   EyeSlashIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "react-tooltip";
@@ -33,8 +33,8 @@ export const ConnectionCard: FC = () => {
 
   if (!sshAddress) {
     return (
-      <div className="h-full w-1/2">
-        <LoadingBox />
+      <div className="bd-card w-full transition-colors lg:mr-2 lg:w-1/2">
+        <Spinner size="lg" />
       </div>
     );
   }
@@ -52,6 +52,7 @@ export const ConnectionCard: FC = () => {
       {showModal && (
         <QRCodeModal closeModal={closeModalHandler} identityUri={nodeId} />
       )}
+
       <div className="bd-card w-full transition-colors lg:mr-2 lg:w-1/2">
         <div className="flex items-center text-lg font-bold">
           {t("home.conn_details")}&nbsp;
@@ -72,6 +73,7 @@ export const ConnectionCard: FC = () => {
             {<div>{showAddress ? t("home.hide") : t("home.show")}</div>}
           </Tooltip>
         </div>
+
         <article className="flex flex-col overflow-hidden py-4">
           <h6 className="text-sm text-gray-200">
             {`${t("home.webui")} (${t("home.tor")})`}
@@ -103,8 +105,10 @@ export const ConnectionCard: FC = () => {
               </Tooltip>
             </div>
           )}
+
           {!torAddress && <div>{t("home.not_available")}</div>}
         </article>
+
         <article className="flex flex-col overflow-hidden py-4">
           <h6 className="text-sm text-gray-200">
             {`${t("home.webui")} (${t("home.ssh")})`}
@@ -135,6 +139,7 @@ export const ConnectionCard: FC = () => {
             </Tooltip>
           </div>
         </article>
+
         {nodeId && (
           <article className="flex flex-col overflow-hidden py-4">
             <h6 className="text-sm text-gray-200">{t("home.node_id")}</h6>
diff --git a/src/pages/Home/HardwareCard.tsx b/src/pages/Home/HardwareCard.tsx
index 4757250f..815ab619 100644
--- a/src/pages/Home/HardwareCard.tsx
+++ b/src/pages/Home/HardwareCard.tsx
@@ -1,5 +1,5 @@
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -15,8 +15,13 @@ export const HardwareCard: FC = () => {
 
   if (!hardwareInfo) {
     return (
-      <div className="h-full w-1/2">
-        <LoadingBox />
+      <div className="bd-card mt-8 w-full transition-colors lg:ml-2 lg:mt-0 lg:w-1/2">
+        <h5 className="flex items-center text-lg font-bold">
+          {t("hardware.header")}
+        </h5>
+        <article className="flex flex-row overflow-hidden py-4">
+          <Spinner size="lg" />
+        </article>
       </div>
     );
   }
diff --git a/src/pages/Home/LightningCard.tsx b/src/pages/Home/LightningCard.tsx
index b814f98b..6925b5e4 100644
--- a/src/pages/Home/LightningCard.tsx
+++ b/src/pages/Home/LightningCard.tsx
@@ -1,8 +1,8 @@
-import LoadingBox from "@/components/LoadingBox";
 import { AppContext, Unit } from "@/context/app-context";
 import { SSEContext } from "@/context/sse-context";
 import { checkPropsUndefined } from "@/utils";
 import { convertMSatToBtc, convertToString } from "@/utils/format";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,7 +27,14 @@ export const LightningCard: FC = () => {
   } = balance;
 
   if (checkPropsUndefined({ lnInfo, balance })) {
-    return <LoadingBox />;
+    return (
+      <div className="h-full">
+        <section className="bd-card">
+          <h2 className="text-lg font-bold">{t("home.lightning")}</h2>
+          <Spinner size="lg" />
+        </section>
+      </div>
+    );
   }
 
   // remove 'commit=...' from version string if exists
diff --git a/src/pages/Home/ListChannelModal/Channel.tsx b/src/pages/Home/ListChannelModal/Channel.tsx
index 1c3768a6..3cdc0829 100644
--- a/src/pages/Home/ListChannelModal/Channel.tsx
+++ b/src/pages/Home/ListChannelModal/Channel.tsx
@@ -1,8 +1,8 @@
-import ButtonWithSpinner from "@/components/ButtonWithSpinner/ButtonWithSpinner";
 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 { Button } from "@nextui-org/react";
 import { FC, useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -54,6 +54,7 @@ const Channel: FC<Props> = ({
         {showDetails && <ChevronUpIcon className="h-6 w-6" />}
         {!showDetails && <ChevronDownIcon className="h-6 w-6" />}
       </div>
+
       {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">
@@ -82,36 +83,40 @@ const Channel: FC<Props> = ({
               </p>
             </div>
           </article>
+
           <article>
-            <button
-              className="bd-button mb-3 p-2"
-              disabled={confirm}
+            <Button
+              color="primary"
+              isDisabled={confirm}
               onClick={() => setConfirm(true)}
             >
               {t("home.close_channel")}
-            </button>
+            </Button>
+
+            {/*TODO should be confirm modal*/}
             {confirm && (
               <div className="flex flex-col justify-center gap-4">
                 <span>{t("home.confirm_channel_close")}</span>
+
                 <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 justify-center gap-4">
-                  <button
+                  <Button
                     onClick={() => setConfirm(false)}
-                    disabled={isLoading}
-                    className="bd-button-red p-2"
+                    isDisabled={isLoading}
                   >
                     {t("setup.cancel")}
-                  </button>
-                  <ButtonWithSpinner
-                    loading={isLoading}
-                    className="bd-button p-2"
+                  </Button>
+                  <Button
+                    color="primary"
+                    isLoading={isLoading}
                     onClick={closeChannelHandler}
                   >
                     {t("setup.yes")}
-                  </ButtonWithSpinner>
+                  </Button>
                 </div>
               </div>
             )}