diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
new file mode 100644
index 00000000..3e22f4b7
--- /dev/null
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,57 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 00000000..79ee123c
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..e53576e2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}
diff --git a/prettier.config.cjs b/prettier.config.cjs
deleted file mode 100644
index ad939877..00000000
--- a/prettier.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    "prettier-plugin-tailwindcss",
-    "@trivago/prettier-plugin-sort-imports",
-  ],
-};
diff --git a/src/ErrorBoundary.tsx b/src/ErrorBoundary.tsx
index 9b923d7f..2faf68b6 100644
--- a/src/ErrorBoundary.tsx
+++ b/src/ErrorBoundary.tsx
@@ -31,7 +31,7 @@ class ErrorBoundary extends Component<PropsWithChildren<Props>, State> {
     if (this.state.hasError) {
       const { t } = this.props;
       return (
-        <main className="flex h-screen w-screen flex-col items-center justify-center gap-5 p-10 transition-colors bg-gray-700 text-white">
+        <main className="flex h-screen w-screen flex-col items-center justify-center gap-5 bg-gray-700 p-10 text-white transition-colors">
           <h1 className="text-xl font-bold">{t("login.error")} 😓</h1>
           <section>
             <p className="rounded bg-red-500 p-2 text-center text-white">
diff --git a/src/components/AmountInput.tsx b/src/components/AmountInput.tsx
index 682e6c48..a72701a1 100644
--- a/src/components/AmountInput.tsx
+++ b/src/components/AmountInput.tsx
@@ -76,7 +76,7 @@ const AmountInput: FC<Props> = ({
           disabled={disabled}
         />
         <span
-          className="ml-6 flex w-4/12 items-center justify-center rounded p-1 shadow-md bg-gray-600"
+          className="ml-6 flex w-4/12 items-center justify-center rounded bg-gray-600 p-1 shadow-md"
           onClick={toggleHandler}
         >
           {unit}
@@ -85,9 +85,7 @@ const AmountInput: FC<Props> = ({
       </div>
 
       <p
-        className={`
-        text-left text-sm text-red-500
-        ${errorMessage ? "" : "invisible"}`}
+        className={`text-left text-sm text-red-500 ${errorMessage ? "" : "invisible"}`}
       >
         {errorMessage?.message || "error"}
       </p>
diff --git a/src/components/AppStatusItem.tsx b/src/components/AppStatusItem.tsx
index 4057486b..15b507ca 100644
--- a/src/components/AppStatusItem.tsx
+++ b/src/components/AppStatusItem.tsx
@@ -19,7 +19,7 @@ export const AppStatusItem: FC<Props> = ({ app }) => {
     return (
       <span
         onClick={() => navigate(`/apps/${id}`)}
-        className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 text-white hover:text-yellow-500 md:flex-col lg:flex-row"
+        className="flex w-full cursor-pointer items-center justify-center py-4 text-white opacity-80 hover:text-yellow-500 md:flex-col lg:flex-row"
       >
         {/* Icon */}
         <AppIcon appId={id} className="h-19 inline w-10" />
@@ -34,7 +34,7 @@ export const AppStatusItem: FC<Props> = ({ app }) => {
       href={getHrefFromApp(app)}
       target={"_blank"}
       rel={"noopener noreferrer"}
-      className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 text-white hover:text-yellow-500 md:flex-col lg:flex-row"
+      className="flex w-full cursor-pointer items-center justify-center py-4 text-white opacity-80 hover:text-yellow-500 md:flex-col lg:flex-row"
     >
       {/* Icon */}
       <AppIcon appId={id} className="h-19 inline w-10" />
diff --git a/src/components/CapsLockWarning.tsx b/src/components/CapsLockWarning.tsx
index 0f4c0814..c0719ebb 100644
--- a/src/components/CapsLockWarning.tsx
+++ b/src/components/CapsLockWarning.tsx
@@ -6,7 +6,7 @@ const CapsLockWarning = () => {
   const { t } = useTranslation();
   return (
     <Alert as="p" color="warning">
-      <ExclamationTriangleIcon className="size-4 inline" />
+      <ExclamationTriangleIcon className="inline size-4" />
       &nbsp;
       {t("login.caps_lock")}
     </Alert>
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index cd35e197..5e566bb9 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -30,11 +30,7 @@ const InputField = forwardRef(
           <input
             {...rest}
             autoFocus={autoFocus}
-            className={`
-               ${errorMessage ? "input-error" : "input-underline"}
-               ${textAlign === "right" || type === "number" ? "text-right" : ""}
-               ${inputRightAddon || inputRightElement ? "w-7/12" : ""}
-               `}
+            className={` ${errorMessage ? "input-error" : "input-underline"} ${textAlign === "right" || type === "number" ? "text-right" : ""} ${inputRightAddon || inputRightElement ? "w-7/12" : ""} `}
             id={name}
             name={name}
             onChange={onChange}
@@ -52,9 +48,7 @@ const InputField = forwardRef(
         </div>
 
         <p
-          className={`
-        text-left text-sm text-red-500
-        ${errorMessage ? "" : "invisible"}`}
+          className={`text-left text-sm text-red-500 ${errorMessage ? "" : "invisible"}`}
         >
           {errorMessage?.message || "error"}
         </p>
diff --git a/src/layouts/BottomNav.tsx b/src/layouts/BottomNav.tsx
index e915a26c..e6091ca3 100644
--- a/src/layouts/BottomNav.tsx
+++ b/src/layouts/BottomNav.tsx
@@ -18,7 +18,7 @@ const BottomNav: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <footer className="fixed bottom-0 z-10 flex h-16 w-full flex-wrap items-center justify-evenly border-t-2 shadow-inner transition-colors bg-gray-800 lg:hidden">
+    <footer className="fixed bottom-0 z-10 flex h-16 w-full flex-wrap items-center justify-evenly border-t-2 bg-gray-800 shadow-inner transition-colors lg:hidden">
       <NavLink to="/home" className={(props) => createClassName(props)}>
         <HomeIcon className={navIconClasses} />
         <span className={navLabelClasses}>{t("navigation.home")}</span>
diff --git a/src/layouts/DropdownMenu.tsx b/src/layouts/DropdownMenu.tsx
index 1b9de999..a3be5c4d 100644
--- a/src/layouts/DropdownMenu.tsx
+++ b/src/layouts/DropdownMenu.tsx
@@ -16,7 +16,7 @@ const DropdownMenu = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <div
       ref={ref}
-      className="absolute right-5 top-14 z-10 flex w-56 rounded-lg border shadow-lg  border-gray-300 bg-gray-800"
+      className="absolute right-5 top-14 z-10 flex w-56 rounded-lg border border-gray-300 bg-gray-800 shadow-lg"
     >
       <div className="flex w-full flex-col items-center justify-center text-center">
         <div className="w-full py-4">
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index c0afea02..04234e0e 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -35,7 +35,7 @@ export default function Header() {
   };
 
   return (
-    <header className="fixed top-0 z-50 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 px-8 shadow-md transition-colors bg-gray-800 text-gray-300">
+    <header className="fixed top-0 z-50 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">
       <NavLink to="/">
         <RaspiBlitzMobileLogo className="h-8 w-8 text-white md:hidden" />
         <RaspiBlitzLogoDark className="hidden h-8 md:block" />
diff --git a/src/layouts/ModalDialog.tsx b/src/layouts/ModalDialog.tsx
index 670acba6..18a37232 100644
--- a/src/layouts/ModalDialog.tsx
+++ b/src/layouts/ModalDialog.tsx
@@ -43,7 +43,7 @@ const ModalDialog: FC<PropsWithChildren<Props>> = ({
 
   return (
     <ModalBackground>
-      <div className="xl:max-w-screen-sm flex h-screen max-h-full w-screen flex-col overflow-y-auto rounded-lg pb-8 text-center shadow-xl bg-gray-800 text-white md:h-auto md:w-4/5 lg:w-1/2 xl:mx-5 xl:w-2/5">
+      <div className="flex h-screen max-h-full w-screen flex-col overflow-y-auto rounded-lg bg-gray-800 pb-8 text-center text-white shadow-xl md:h-auto md:w-4/5 lg:w-1/2 xl:mx-5 xl:w-2/5 xl:max-w-screen-sm">
         <div className="flex pr-2 pt-1">
           <button
             onClick={closeModal}
diff --git a/src/layouts/PageLoadingScreen.tsx b/src/layouts/PageLoadingScreen.tsx
index 7f1d2ea5..19ec938d 100644
--- a/src/layouts/PageLoadingScreen.tsx
+++ b/src/layouts/PageLoadingScreen.tsx
@@ -5,7 +5,7 @@ import { FC } from "react";
 const PageLoadingScreen: FC = () => {
   return (
     <main
-      className={`content-container page-container p-5 transition-colors bg-gray-700 text-white lg:pb-8 lg:pr-8 lg:pt-8`}
+      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" />
diff --git a/src/layouts/SetupContainer.tsx b/src/layouts/SetupContainer.tsx
index b222cbf5..7c8d06b7 100644
--- a/src/layouts/SetupContainer.tsx
+++ b/src/layouts/SetupContainer.tsx
@@ -13,8 +13,8 @@ export default function SetupContainer({
   children,
 }: PropsWithChildren<Props>) {
   return (
-    <main className="flex min-h-screen h-full w-screen flex-col items-center justify-center bg-primary-900 transition-colors text-white">
-      <div className="fixed md:right-16 top-16 md:top-8 flex h-8 w-48 md:w-96 md:flex-row flex-col-reverse gap-6 md:gap-4 justify-center items-center">
+    <main className="flex h-full min-h-screen w-screen flex-col items-center justify-center bg-primary-900 text-white transition-colors">
+      <div className="fixed top-16 flex h-8 w-48 flex-col-reverse items-center justify-center gap-6 md:right-16 md:top-8 md:w-96 md:flex-row md:gap-4">
         <Button
           as="a"
           href="https://docs.raspiblitz.org/"
@@ -22,8 +22,8 @@ export default function SetupContainer({
           rel="noreferrer"
           color="primary"
           variant="ghost"
-          className="p-4 w-full"
-          startContent={<BookOpenIcon className="w-5 h-5" />}
+          className="w-full p-4"
+          startContent={<BookOpenIcon className="h-5 w-5" />}
         >
           Documentation
         </Button>
@@ -31,7 +31,7 @@ export default function SetupContainer({
       </div>
 
       {currentStep !== null && (
-        <div className="fixed mb-4 top-24 flex items-center justify-around w-1/3">
+        <div className="fixed top-24 mb-4 flex w-1/3 items-center justify-around">
           <Stepper currentStep={currentStep} />
         </div>
       )}
diff --git a/src/layouts/SideDrawer.tsx b/src/layouts/SideDrawer.tsx
index daeff0c0..dd045780 100644
--- a/src/layouts/SideDrawer.tsx
+++ b/src/layouts/SideDrawer.tsx
@@ -25,7 +25,7 @@ export const SideDrawer: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <nav className="content-container sidebar fixed hidden w-full flex-col justify-between overflow-y-auto px-2 pb-16 pt-8 shadow-md transition-colors bg-gray-800 lg:flex lg:w-64">
+    <nav className="content-container sidebar fixed hidden w-full flex-col justify-between overflow-y-auto bg-gray-800 px-2 pb-16 pt-8 shadow-md transition-colors lg:flex lg:w-64">
       <div className="flex flex-col items-center justify-center">
         <NavLink to="/home" className={(props) => createClassName(props)}>
           <HomeIcon className={navIconClasses} />
diff --git a/src/layouts/SkeletonLoadingScreen.tsx b/src/layouts/SkeletonLoadingScreen.tsx
index 8b318cf9..b552d66a 100644
--- a/src/layouts/SkeletonLoadingScreen.tsx
+++ b/src/layouts/SkeletonLoadingScreen.tsx
@@ -4,8 +4,8 @@ import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
 export default function SkeletonLoadingScreen() {
   return (
     <>
-      <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 px-8 shadow-md transition-colors bg-gray-800 text-gray-300"></header>
-      <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between px-2 pt-8 shadow-lg transition-colors bg-gray-800 md:flex md:w-2/12"></nav>
+      <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" />
       </main>
diff --git a/src/pages/Apps/AppCard.tsx b/src/pages/Apps/AppCard.tsx
index 920ebb9a..43cfe4fd 100644
--- a/src/pages/Apps/AppCard.tsx
+++ b/src/pages/Apps/AppCard.tsx
@@ -58,7 +58,7 @@ export const AppCard: FC<Props> = ({
   };
 
   return (
-    <article className="bd-card transition-colors bg-gray-800">
+    <article className="bd-card bg-gray-800 transition-colors">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {installed && (
           <>
diff --git a/src/pages/Apps/AppCardAlby.tsx b/src/pages/Apps/AppCardAlby.tsx
index 54fa48c5..f4a755ec 100644
--- a/src/pages/Apps/AppCardAlby.tsx
+++ b/src/pages/Apps/AppCardAlby.tsx
@@ -67,7 +67,7 @@ export const AppCardAlby: FC = () => {
   };
 
   return (
-    <article className="bd-card transition-colors bg-gray-800">
+    <article className="bd-card bg-gray-800 transition-colors">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {/* Icon */}
         <div className="mt-4 flex w-1/4 items-center justify-center p-2">
diff --git a/src/pages/Apps/customApps/Electrs.tsx b/src/pages/Apps/customApps/Electrs.tsx
index 568ac8c3..c4b5e477 100644
--- a/src/pages/Apps/customApps/Electrs.tsx
+++ b/src/pages/Apps/customApps/Electrs.tsx
@@ -62,7 +62,7 @@ const Electrs = () => {
   }
 
   return (
-    <main className="page-container content-container w-full bg-gray-700 text-white flex flex-col items-center">
+    <main className="page-container content-container flex w-full flex-col items-center bg-gray-700 text-white">
       {/* Back Button */}
       <section className="w-full px-5 py-9 text-gray-200">
         <Button
@@ -97,7 +97,7 @@ const Electrs = () => {
                 <Tab key="local" title="Local Connection">
                   <span>{t("appInfo.electrs.connectLocal")}: </span>
                   {QRAddressLocal ? (
-                    <div className="flex flex-col justify-center items-center mt-4 gap-4">
+                    <div className="mt-4 flex flex-col items-center justify-center gap-4">
                       <QRCodeSVG
                         value={QRAddressLocal}
                         size={256}
@@ -114,7 +114,7 @@ const Electrs = () => {
                       >{`${localIP}:${portSSL}:s`}</Snippet>
                     </div>
                   ) : (
-                    <span className="text-center mt-4">
+                    <span className="mt-4 text-center">
                       {t("appInfo.electrs.not_available")}
                     </span>
                   )}
@@ -122,11 +122,11 @@ const Electrs = () => {
                 <Tab key="tor" title="Tor">
                   <span>{t("appInfo.electrs.connectTor")}:</span>
                   {QRAddressTor ? (
-                    <div className="flex flex-col justify-center items-center mt-4 gap-4">
+                    <div className="mt-4 flex flex-col items-center justify-center gap-4">
                       <QRCodeSVG
                         value={QRAddressTor}
                         size={256}
-                        className="border-2 border-white "
+                        className="border-2 border-white"
                       />
                       <Snippet
                         classNames={{
@@ -139,7 +139,7 @@ const Electrs = () => {
                       >{`${TORaddress}:${portSSL}:s`}</Snippet>
                     </div>
                   ) : (
-                    <span className="text-center mt-4">
+                    <span className="mt-4 text-center">
                       {t("appInfo.electrs.not_available")}
                     </span>
                   )}
diff --git a/src/pages/Apps/index.tsx b/src/pages/Apps/index.tsx
index 94aa8dbc..3b8d432b 100644
--- a/src/pages/Apps/index.tsx
+++ b/src/pages/Apps/index.tsx
@@ -39,7 +39,7 @@ export const Apps: FC = () => {
   }
 
   return (
-    <main className="content-container page-container p-5 transition-colors bg-gray-700 text-white lg:pb-8 lg:pr-8 lg:pt-8">
+    <main className="content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8">
       <>
         <AppList
           apps={installedApps}
diff --git a/src/pages/Home/ListChannelModal/Channel.tsx b/src/pages/Home/ListChannelModal/Channel.tsx
index 13162322..1c3768a6 100644
--- a/src/pages/Home/ListChannelModal/Channel.tsx
+++ b/src/pages/Home/ListChannelModal/Channel.tsx
@@ -45,7 +45,7 @@ const Channel: FC<Props> = ({
   };
 
   return (
-    <li className="p-3 shadow-inner bg-gray-700 hover:bg-gray-600">
+    <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}
diff --git a/src/pages/Home/TransactionCard/SingleTransaction.tsx b/src/pages/Home/TransactionCard/SingleTransaction.tsx
index 1934c194..eacc825d 100644
--- a/src/pages/Home/TransactionCard/SingleTransaction.tsx
+++ b/src/pages/Home/TransactionCard/SingleTransaction.tsx
@@ -50,7 +50,7 @@ export const SingleTransaction: FC<Props> = ({ transaction, onClick }) => {
 
   return (
     <li
-      className="flex h-24 cursor-pointer flex-col justify-center border-b px-0 py-2 text-center border-gray-400 hover:bg-gray-700 md:px-4"
+      className="flex h-24 cursor-pointer flex-col justify-center border-b border-gray-400 px-0 py-2 text-center hover:bg-gray-700 md:px-4"
       onClick={onClick}
     >
       <div className="flex w-full items-center justify-center">
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 63b189fb..04df0e87 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -226,7 +226,7 @@ const Home: FC = () => {
     <>
       {modalComponent()}
       <main
-        className={`content-container page-container grid h-full grid-cols-1 grid-rows-1 gap-5 p-5 transition-colors bg-gray-700 text-white md:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8 xl:grid-cols-4`}
+        className={`content-container page-container grid h-full grid-cols-1 grid-rows-1 gap-5 bg-gray-700 p-5 text-white transition-colors md:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8 xl:grid-cols-4`}
       >
         {!btcOnlyMode && (
           <article className="col-span-2 row-span-2 md:col-span-1 xl:col-span-2">
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 005d854c..b9deb566 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -67,7 +67,7 @@ const Login: FC = () => {
   };
 
   return (
-    <main className="flex h-screen w-screen flex-col items-center justify-center transition-colors bg-gray-700">
+    <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-700 transition-colors">
       <div className="fixed right-16 top-4 flex h-8 w-48 items-center justify-around">
         <I18nSelect />
       </div>
diff --git a/src/pages/Settings/ActionBox.tsx b/src/pages/Settings/ActionBox.tsx
index 16f0b910..3382a41d 100644
--- a/src/pages/Settings/ActionBox.tsx
+++ b/src/pages/Settings/ActionBox.tsx
@@ -22,8 +22,8 @@ const ActionBox: FC<PropsWithChildren<Props>> = ({
   return (
     <>
       {showChild && children}
-      <div className="box-border w-full transition-colors text-white">
-        <article className="relative rounded p-5 shadow-xl bg-gray-800">
+      <div className="box-border w-full text-white transition-colors">
+        <article className="relative rounded bg-gray-800 p-5 shadow-xl">
           <div className="flex justify-between">
             <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
               {name}
diff --git a/src/pages/Settings/DebugLogBox.tsx b/src/pages/Settings/DebugLogBox.tsx
index 171ac273..1bebbd5c 100644
--- a/src/pages/Settings/DebugLogBox.tsx
+++ b/src/pages/Settings/DebugLogBox.tsx
@@ -39,8 +39,8 @@ const DebugLogBox: FC = () => {
   };
 
   return (
-    <div className="box-border w-full transition-colors text-white">
-      <article className="relative rounded p-5 shadow-xl bg-gray-800">
+    <div className="box-border w-full text-white transition-colors">
+      <article className="relative rounded bg-gray-800 p-5 shadow-xl">
         <div className="flex justify-between">
           <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
             {t("settings.generate_debug")}
diff --git a/src/pages/Settings/I18nBox.tsx b/src/pages/Settings/I18nBox.tsx
index 5a8f0a16..0fbc2130 100644
--- a/src/pages/Settings/I18nBox.tsx
+++ b/src/pages/Settings/I18nBox.tsx
@@ -9,8 +9,8 @@ const I18nBox: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="box-border w-full transition-colors text-white">
-      <article className="relative rounded p-5 shadow-xl bg-gray-800">
+    <div className="box-border w-full text-white transition-colors">
+      <article className="relative rounded bg-gray-800 p-5 shadow-xl">
         <div className="flex justify-between gap-2">
           <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
             {t("settings.curr_lang")}
diff --git a/src/pages/Settings/VersionBox.tsx b/src/pages/Settings/VersionBox.tsx
index 16bcab2e..8008caef 100644
--- a/src/pages/Settings/VersionBox.tsx
+++ b/src/pages/Settings/VersionBox.tsx
@@ -13,8 +13,8 @@ const VersionBox: FC = () => {
   const { platform_version, api_version } = systemInfo;
 
   return (
-    <article className="box-border w-full transition-colors text-white">
-      <div className="relative flex flex-col gap-3 rounded p-5 shadow-xl bg-gray-800">
+    <article className="box-border w-full text-white transition-colors">
+      <div className="relative flex flex-col gap-3 rounded bg-gray-800 p-5 shadow-xl">
         <h5 className="font-bold">{t("home.versions")}</h5>
         <article>
           <p>
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 85dbc1f9..9325a3d2 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -13,7 +13,7 @@ const Settings: FC = () => {
   }, []);
 
   return (
-    <main className="content-container page-container grid auto-rows-min gap-5 p-5 pt-8 transition-colors bg-gray-700 text-white lg:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8">
+    <main className="content-container page-container grid auto-rows-min gap-5 bg-gray-700 p-5 pt-8 text-white transition-colors lg:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8">
       <I18nBox />
       <ChangePwModal />
       <RebootModal />
diff --git a/src/pages/Setup/FinalDialog.tsx b/src/pages/Setup/FinalDialog.tsx
index cbb1b986..bf067adc 100644
--- a/src/pages/Setup/FinalDialog.tsx
+++ b/src/pages/Setup/FinalDialog.tsx
@@ -39,7 +39,7 @@ export default function FinalDialog({
         onSubmit={handleSubmit(callback)}
         className="flex flex-col items-center"
       >
-        <section className="flex h-full flex-col items-center justify-center gap-y-10 lg:w-3/5 lg:p-8 pt-8">
+        <section className="flex h-full flex-col items-center justify-center gap-y-10 pt-8 lg:w-3/5 lg:p-8">
           <div className="text-center">
             <CheckCircleIcon className="inline-block h-24 w-auto stroke-1 text-success" />
             <Headline>{t(`setup.final_${setupPhase || "setup"}`)}</Headline>
@@ -72,7 +72,7 @@ export default function FinalDialog({
             />
           )}
 
-          <article className="justify-center flex flex-col items-center pb-4">
+          <article className="flex flex-col items-center justify-center pb-4">
             <Button
               type="submit"
               isDisabled={!isValid && !!seedWords}
diff --git a/src/pages/Setup/LightningDialog.tsx b/src/pages/Setup/LightningDialog.tsx
index 2308d46d..eefe1e67 100644
--- a/src/pages/Setup/LightningDialog.tsx
+++ b/src/pages/Setup/LightningDialog.tsx
@@ -38,7 +38,7 @@ export default function LightningDialog({ callback }: Props) {
 
   return (
     <SetupContainer currentStep={3}>
-      <section className="flex max-w-3xl flex-col items-center justify-center gap-y-8 lg:px-8 mt-16 lg:mt-32 lg:pb-1 lg:pt-0">
+      <section className="mt-16 flex max-w-3xl flex-col items-center justify-center gap-y-8 lg:mt-32 lg:px-8 lg:pb-1 lg:pt-0">
         <div>
           <Headline>{t("setup.select_lightning")}</Headline>
 
diff --git a/src/pages/Setup/Stepper.tsx b/src/pages/Setup/Stepper.tsx
index 76660a8b..2d2a4cfc 100644
--- a/src/pages/Setup/Stepper.tsx
+++ b/src/pages/Setup/Stepper.tsx
@@ -13,20 +13,20 @@ export default function Stepper({ currentStep }: Props) {
   return (
     <div
       className={cn(
-        "w-full lg:block hidden",
-        "after:block after:relative after:bottom-5 after:border after:border-gray-700 after:content-['']",
+        "hidden w-full lg:block",
+        "after:relative after:bottom-5 after:block after:border after:border-gray-700 after:content-['']",
       )}
     >
-      <ul className="lg:flex hidden justify-between items-center relative z-10">
+      <ul className="relative z-10 hidden items-center justify-between lg:flex">
         {Array.from({ length: NUMBER_OF_STEPS }).map((_, index: number) => (
-          <li className="list-none px-4 bg-primary-900" key={index}>
+          <li className="list-none bg-primary-900 px-4" key={index}>
             <span
               className={cn(
-                "text-center flex flex-col",
+                "flex flex-col text-center",
                 index >= currentStep && "opacity-30",
               )}
             >
-              <span className="font-bold whitespace-nowrap">
+              <span className="whitespace-nowrap font-bold">
                 {t(`setup.step.step`)} {index + 1}
               </span>
               <span className="text-sm text-secondary">
diff --git a/vite.config.ts b/vite.config.ts
index 81bfa2af..82d84984 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import react from "@vitejs/plugin-react";
-import {defineConfig} from "vite";
+import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 
@@ -8,47 +8,47 @@ const BACKEND_SERVER = "http://localhost:8000";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), viteTsconfigPaths(), svgr()],
-    build: {
-        outDir: "build",
-        rollupOptions: {
-            output: {
-                // see https://github.com/vitejs/vite/issues/11804#issuecomment-2009619365
-                chunkFileNames: "chunk-[hash].js",
-            },
-        },
+  plugins: [react(), viteTsconfigPaths(), svgr()],
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      output: {
+        // see https://github.com/vitejs/vite/issues/11804#issuecomment-2009619365
+        chunkFileNames: "chunk-[hash].js",
+      },
     },
-    resolve: {
-        alias: {
-            "@": "/src",
-        },
+  },
+  resolve: {
+    alias: {
+      "@": "/src",
     },
-    server: {
-        port: 3000,
-        proxy: {
-            "/api": {
-                target: BACKEND_SERVER,
-                changeOrigin: true,
-                secure: false,
-            },
-        },
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": {
+        target: BACKEND_SERVER,
+        changeOrigin: true,
+        secure: false,
+      },
     },
-    test: {
-        globals: true,
-        environment: "jsdom",
-        setupFiles: ["./src/setupTests.ts"],
-        coverage: {
-            reporter: ["text", "html"],
-            all: true,
-            include: ["src"],
-            exclude: [
-                "src/setupTests.ts",
-                "**/*.test.ts",
-                "**/*.test.tsx",
-                "**/*.d.ts",
-                "src/testServer.ts",
-                "src/utils/test-utils.tsx",
-            ],
-        },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/setupTests.ts"],
+    coverage: {
+      reporter: ["text", "html"],
+      all: true,
+      include: ["src"],
+      exclude: [
+        "src/setupTests.ts",
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/*.d.ts",
+        "src/testServer.ts",
+        "src/utils/test-utils.tsx",
+      ],
     },
+  },
 });