diff --git a/src/app/_components/AuthModal.tsx b/src/app/_components/AuthModal.tsx
index 8ac0aa9..32a60fa 100644
--- a/src/app/_components/AuthModal.tsx
+++ b/src/app/_components/AuthModal.tsx
@@ -1,23 +1,27 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { useAuth } from './AuthProvider';
-import { Lock, User, AlertCircle } from 'lucide-react';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { useAuth } from "./AuthProvider";
+import { Lock, User, AlertCircle } from "lucide-react";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface AuthModalProps {
   isOpen: boolean;
 }
 
 export function AuthModal({ isOpen }: AuthModalProps) {
-  const { t } = useTranslation('authModal');
-  useRegisterModal(isOpen, { id: 'auth-modal', allowEscape: false, onClose: () => null });
+  const { t } = useTranslation("authModal");
+  useRegisterModal(isOpen, {
+    id: "auth-modal",
+    allowEscape: false,
+    onClose: () => null,
+  });
   const { login } = useAuth();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -27,44 +31,49 @@ export function AuthModal({ isOpen }: AuthModalProps) {
     setError(null);
 
     const success = await login(username, password);
-    
+
     if (!success) {
-      setError(t('error'));
+      setError(t("error"));
     }
-    
+
     setIsLoading(false);
   };
 
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-md rounded-lg border shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-center p-6 border-b border-border">
+        <div className="border-border flex items-center justify-center border-b p-6">
           <div className="flex items-center gap-3">
-            <Lock className="h-8 w-8 text-primary" />
-            <h2 className="text-2xl font-bold text-card-foreground">{t('title')}</h2>
+            <Lock className="text-primary h-8 w-8" />
+            <h2 className="text-card-foreground text-2xl font-bold">
+              {t("title")}
+            </h2>
           </div>
         </div>
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-muted-foreground text-center mb-6">
-            {t('description')}
+          <p className="text-muted-foreground mb-6 text-center">
+            {t("description")}
           </p>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-2">
-                {t('username.label')}
+              <label
+                htmlFor="username"
+                className="text-foreground mb-2 block text-sm font-medium"
+              >
+                {t("username.label")}
               </label>
               <div className="relative">
-                <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <User className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
                 <Input
                   id="username"
                   type="text"
-                  placeholder={t('username.placeholder')}
+                  placeholder={t("username.placeholder")}
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
                   disabled={isLoading}
@@ -75,15 +84,18 @@ export function AuthModal({ isOpen }: AuthModalProps) {
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
-                {t('password.label')}
+              <label
+                htmlFor="password"
+                className="text-foreground mb-2 block text-sm font-medium"
+              >
+                {t("password.label")}
               </label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Lock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
                 <Input
                   id="password"
                   type="password"
-                  placeholder={t('password.placeholder')}
+                  placeholder={t("password.placeholder")}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   disabled={isLoading}
@@ -94,7 +106,7 @@ export function AuthModal({ isOpen }: AuthModalProps) {
             </div>
 
             {error && (
-              <div className="flex items-center gap-2 p-3 bg-error/10 text-error-foreground border border-error/20 rounded-md">
+              <div className="bg-error/10 text-error-foreground border-error/20 flex items-center gap-2 rounded-md border p-3">
                 <AlertCircle className="h-4 w-4" />
                 <span className="text-sm">{error}</span>
               </div>
@@ -105,7 +117,7 @@ export function AuthModal({ isOpen }: AuthModalProps) {
               disabled={isLoading || !username.trim() || !password.trim()}
               className="w-full"
             >
-              {isLoading ? t('actions.signingIn') : t('actions.signIn')}
+              {isLoading ? t("actions.signingIn") : t("actions.signIn")}
             </Button>
           </form>
         </div>
diff --git a/src/app/_components/Badge.tsx b/src/app/_components/Badge.tsx
index 49739a8..1c645b3 100644
--- a/src/app/_components/Badge.tsx
+++ b/src/app/_components/Badge.tsx
@@ -1,94 +1,108 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import React from "react";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface BadgeProps {
-  variant: 'type' | 'updateable' | 'privileged' | 'status' | 'note' | 'execution-mode';
+  variant:
+    | "type"
+    | "updateable"
+    | "privileged"
+    | "status"
+    | "note"
+    | "execution-mode";
   type?: string;
-  noteType?: 'info' | 'warning' | 'error';
-  status?: 'success' | 'failed' | 'in_progress';
-  executionMode?: 'local' | 'ssh';
+  noteType?: "info" | "warning" | "error";
+  status?: "success" | "failed" | "in_progress";
+  executionMode?: "local" | "ssh";
   children: React.ReactNode;
   className?: string;
 }
 
-export function Badge({ variant, type, noteType, status, executionMode, children, className = '' }: BadgeProps) {
+export function Badge({
+  variant,
+  type,
+  noteType,
+  status,
+  executionMode,
+  children,
+  className = "",
+}: BadgeProps) {
   const getTypeStyles = (scriptType: string) => {
     switch (scriptType.toLowerCase()) {
-      case 'ct':
-        return 'bg-primary/10 text-primary border-primary/20';
-      case 'addon':
-        return 'bg-primary/10 text-primary border-primary/20';
-      case 'vm':
-        return 'bg-success/10 text-success border-success/20';
-      case 'pve':
-        return 'bg-warning/10 text-warning border-warning/20';
+      case "ct":
+        return "bg-primary/10 text-primary border-primary/20";
+      case "addon":
+        return "bg-primary/10 text-primary border-primary/20";
+      case "vm":
+        return "bg-success/10 text-success border-success/20";
+      case "pve":
+        return "bg-warning/10 text-warning border-warning/20";
       default:
-        return 'bg-muted text-muted-foreground border-border';
+        return "bg-muted text-muted-foreground border-border";
     }
   };
 
   const getVariantStyles = () => {
     switch (variant) {
-      case 'type':
-        return `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${type ? getTypeStyles(type) : getTypeStyles('unknown')}`;
-      
-      case 'updateable':
-        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20';
-      
-      case 'privileged':
-        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive border border-destructive/20';
-      
-      case 'status':
+      case "type":
+        return `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${type ? getTypeStyles(type) : getTypeStyles("unknown")}`;
+
+      case "updateable":
+        return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20";
+
+      case "privileged":
+        return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive border border-destructive/20";
+
+      case "status":
         switch (status) {
-          case 'success':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20';
-          case 'failed':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error/10 text-error border border-error/20';
-          case 'in_progress':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning border border-warning/20';
+          case "success":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20";
+          case "failed":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error/10 text-error border border-error/20";
+          case "in_progress":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning border border-warning/20";
           default:
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border';
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border";
         }
-      
-      case 'execution-mode':
+
+      case "execution-mode":
         switch (executionMode) {
-          case 'local':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20';
-          case 'ssh':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20';
+          case "local":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20";
+          case "ssh":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20";
           default:
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border';
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border";
         }
-      
-      case 'note':
+
+      case "note":
         switch (noteType) {
-          case 'warning':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning border border-warning/20';
-          case 'error':
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive border border-destructive/20';
+          case "warning":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning border border-warning/20";
+          case "error":
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive border border-destructive/20";
           default:
-            return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20';
+            return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20";
         }
-      
+
       default:
-        return 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border';
+        return "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground border border-border";
     }
   };
 
   // Format the text for type badges
   const formatText = () => {
-    if (variant === 'type' && type) {
+    if (variant === "type" && type) {
       switch (type.toLowerCase()) {
-        case 'ct':
-          return 'LXC';
-        case 'addon':
-          return 'ADDON';
-        case 'vm':
-          return 'VM';
-        case 'pve':
-          return 'PVE';
+        case "ct":
+          return "LXC";
+        case "addon":
+          return "ADDON";
+        case "vm":
+          return "VM";
+        case "pve":
+          return "PVE";
         default:
           return type.toUpperCase();
       }
@@ -97,51 +111,79 @@ export function Badge({ variant, type, noteType, status, executionMode, children
   };
 
   return (
-    <span className={`${getVariantStyles()} ${className}`}>
-      {formatText()}
-    </span>
+    <span className={`${getVariantStyles()} ${className}`}>{formatText()}</span>
   );
 }
 
 // Convenience components for common use cases
-export const TypeBadge = ({ type, className }: { type: string; className?: string }) => (
+export const TypeBadge = ({
+  type,
+  className,
+}: {
+  type: string;
+  className?: string;
+}) => (
   <Badge variant="type" type={type} className={className}>
     {type}
   </Badge>
 );
 
 export const UpdateableBadge = ({ className }: { className?: string }) => {
-  const { t } = useTranslation('badge');
+  const { t } = useTranslation("badge");
   return (
     <Badge variant="updateable" className={className}>
-      {t('updateable')}
+      {t("updateable")}
     </Badge>
   );
 };
 
 export const PrivilegedBadge = ({ className }: { className?: string }) => {
-  const { t } = useTranslation('badge');
+  const { t } = useTranslation("badge");
   return (
     <Badge variant="privileged" className={className}>
-      {t('privileged')}
+      {t("privileged")}
     </Badge>
   );
 };
 
-export const StatusBadge = ({ status, children, className }: { status: 'success' | 'failed' | 'in_progress'; children: React.ReactNode; className?: string }) => (
+export const StatusBadge = ({
+  status,
+  children,
+  className,
+}: {
+  status: "success" | "failed" | "in_progress";
+  children: React.ReactNode;
+  className?: string;
+}) => (
   <Badge variant="status" status={status} className={className}>
     {children}
   </Badge>
 );
 
-export const ExecutionModeBadge = ({ mode, children, className }: { mode: 'local' | 'ssh'; children: React.ReactNode; className?: string }) => (
+export const ExecutionModeBadge = ({
+  mode,
+  children,
+  className,
+}: {
+  mode: "local" | "ssh";
+  children: React.ReactNode;
+  className?: string;
+}) => (
   <Badge variant="execution-mode" executionMode={mode} className={className}>
     {children}
   </Badge>
 );
 
-export const NoteBadge = ({ noteType, children, className }: { noteType: 'info' | 'warning' | 'error'; children: React.ReactNode; className?: string }) => (
+export const NoteBadge = ({
+  noteType,
+  children,
+  className,
+}: {
+  noteType: "info" | "warning" | "error";
+  children: React.ReactNode;
+  className?: string;
+}) => (
   <Badge variant="note" noteType={noteType} className={className}>
     {children}
   </Badge>
-);
\ No newline at end of file
+);
diff --git a/src/app/_components/ConfirmationModal.tsx b/src/app/_components/ConfirmationModal.tsx
index 404bb04..9f274b8 100644
--- a/src/app/_components/ConfirmationModal.tsx
+++ b/src/app/_components/ConfirmationModal.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useMemo, useState } from 'react';
-import { Button } from './ui/button';
-import { AlertTriangle, Info } from 'lucide-react';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '~/lib/i18n/useTranslation';
+import { useMemo, useState } from "react";
+import { Button } from "./ui/button";
+import { AlertTriangle, Info } from "lucide-react";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "~/lib/i18n/useTranslation";
 
 interface ConfirmationModalProps {
   isOpen: boolean;
@@ -12,7 +12,7 @@ interface ConfirmationModalProps {
   onConfirm: () => void;
   title: string;
   message: string;
-  variant: 'simple' | 'danger';
+  variant: "simple" | "danger";
   confirmText?: string; // What the user must type for danger variant
   confirmButtonText?: string;
   cancelButtonText?: string;
@@ -27,19 +27,19 @@ export function ConfirmationModal({
   variant,
   confirmText,
   confirmButtonText,
-  cancelButtonText
+  cancelButtonText,
 }: ConfirmationModalProps) {
-  const { t } = useTranslation('confirmationModal');
-  const { t: tc } = useTranslation('common.actions');
-  const [typedText, setTypedText] = useState('');
-  const isDanger = variant === 'danger';
+  const { t } = useTranslation("confirmationModal");
+  const { t: tc } = useTranslation("common.actions");
+  const [typedText, setTypedText] = useState("");
+  const isDanger = variant === "danger";
   const allowEscape = useMemo(() => !isDanger, [isDanger]);
-  
-  // Use provided button texts or fallback to translations
-  const finalConfirmText = confirmButtonText ?? tc('confirm');
-  const finalCancelText = cancelButtonText ?? tc('cancel');
 
-  useRegisterModal(isOpen, { id: 'confirmation-modal', allowEscape, onClose });
+  // Use provided button texts or fallback to translations
+  const finalConfirmText = confirmButtonText ?? tc("confirm");
+  const finalCancelText = cancelButtonText ?? tc("cancel");
+
+  useRegisterModal(isOpen, { id: "confirmation-modal", allowEscape, onClose });
 
   if (!isOpen) return null;
   const isConfirmEnabled = isDanger ? typedText === confirmText : true;
@@ -47,57 +47,67 @@ export function ConfirmationModal({
   const handleConfirm = () => {
     if (isConfirmEnabled) {
       onConfirm();
-      setTypedText(''); // Reset for next time
+      setTypedText(""); // Reset for next time
     }
   };
 
   const handleClose = () => {
     onClose();
-    setTypedText(''); // Reset when closing
+    setTypedText(""); // Reset when closing
   };
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-md rounded-lg border shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-center p-6 border-b border-border">
+        <div className="border-border flex items-center justify-center border-b p-6">
           <div className="flex items-center gap-3">
             {isDanger ? (
-              <AlertTriangle className="h-8 w-8 text-error" />
+              <AlertTriangle className="text-error h-8 w-8" />
             ) : (
-              <Info className="h-8 w-8 text-info" />
+              <Info className="text-info h-8 w-8" />
             )}
-            <h2 className="text-2xl font-bold text-card-foreground">{title}</h2>
+            <h2 className="text-card-foreground text-2xl font-bold">{title}</h2>
           </div>
         </div>
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-sm text-muted-foreground mb-6">
-            {message}
-          </p>
+          <p className="text-muted-foreground mb-6 text-sm">{message}</p>
 
           {/* Type-to-confirm input for danger variant */}
           {isDanger && confirmText && (
             <div className="mb-6">
-              <label className="block text-sm font-medium text-foreground mb-2">
-                {t('typeToConfirm', { values: { text: confirmText } }).split(confirmText)[0]}
-                <code className="bg-muted px-2 py-1 rounded text-sm">{confirmText}</code>
-                {t('typeToConfirm', { values: { text: confirmText } }).split(confirmText)[1]}
+              <label className="text-foreground mb-2 block text-sm font-medium">
+                {
+                  t("typeToConfirm", { values: { text: confirmText } }).split(
+                    confirmText,
+                  )[0]
+                }
+                <code className="bg-muted rounded px-2 py-1 text-sm">
+                  {confirmText}
+                </code>
+                {
+                  t("typeToConfirm", { values: { text: confirmText } }).split(
+                    confirmText,
+                  )[1]
+                }
               </label>
               <input
                 type="text"
                 value={typedText}
                 onChange={(e) => setTypedText(e.target.value)}
-                className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
-                placeholder={t('placeholder', { values: { text: confirmText } })}
+                className="border-input bg-background text-foreground placeholder:text-muted-foreground focus:ring-ring focus:border-ring w-full rounded-md border px-3 py-2 focus:ring-2 focus:outline-none"
+                placeholder={t("placeholder", {
+                  values: { text: confirmText },
+                })}
                 autoComplete="off"
               />
             </div>
           )}
 
           {/* Action Buttons */}
-          <div className="flex flex-col sm:flex-row justify-end gap-3">
+          <div className="flex flex-col justify-end gap-3 sm:flex-row">
             <Button
               onClick={handleClose}
               variant="outline"
diff --git a/src/app/_components/ErrorModal.tsx b/src/app/_components/ErrorModal.tsx
index e29000a..345e784 100644
--- a/src/app/_components/ErrorModal.tsx
+++ b/src/app/_components/ErrorModal.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useEffect } from 'react';
-import { Button } from './ui/button';
-import { AlertCircle, CheckCircle } from 'lucide-react';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '~/lib/i18n/useTranslation';
+import { useEffect } from "react";
+import { Button } from "./ui/button";
+import { AlertCircle, CheckCircle } from "lucide-react";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "~/lib/i18n/useTranslation";
 
 interface ErrorModalProps {
   isOpen: boolean;
@@ -12,7 +12,7 @@ interface ErrorModalProps {
   title: string;
   message: string;
   details?: string;
-  type?: 'error' | 'success';
+  type?: "error" | "success";
 }
 
 export function ErrorModal({
@@ -21,11 +21,11 @@ export function ErrorModal({
   title,
   message,
   details,
-  type = 'error'
+  type = "error",
 }: ErrorModalProps) {
-  const { t } = useTranslation('errorModal');
-  const { t: tc } = useTranslation('common.actions');
-  useRegisterModal(isOpen, { id: 'error-modal', allowEscape: true, onClose });
+  const { t } = useTranslation("errorModal");
+  const { t: tc } = useTranslation("common.actions");
+  useRegisterModal(isOpen, { id: "error-modal", allowEscape: true, onClose });
   // Auto-close after 10 seconds
   useEffect(() => {
     if (isOpen) {
@@ -39,41 +39,47 @@ export function ErrorModal({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-lg w-full border border-border">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-lg rounded-lg border shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-center p-6 border-b border-border">
+        <div className="border-border flex items-center justify-center border-b p-6">
           <div className="flex items-center gap-3">
-            {type === 'success' ? (
-              <CheckCircle className="h-8 w-8 text-success" />
+            {type === "success" ? (
+              <CheckCircle className="text-success h-8 w-8" />
             ) : (
-              <AlertCircle className="h-8 w-8 text-error" />
+              <AlertCircle className="text-error h-8 w-8" />
             )}
-            <h2 className="text-xl font-semibold text-foreground">{title}</h2>
+            <h2 className="text-foreground text-xl font-semibold">{title}</h2>
           </div>
         </div>
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-sm text-foreground mb-4">{message}</p>
+          <p className="text-foreground mb-4 text-sm">{message}</p>
           {details && (
-            <div className={`rounded-lg p-3 ${
-              type === 'success'
-                ? 'bg-success/10 border border-success/20'
-                : 'bg-error/10 border border-error/20'
-            }`}>
-              <p className={`text-xs font-medium mb-1 ${
-                type === 'success'
-                  ? 'text-success-foreground'
-                  : 'text-error-foreground'
-              }`}>
-                {type === 'success' ? t('detailsLabel') : t('errorDetailsLabel')}
+            <div
+              className={`rounded-lg p-3 ${
+                type === "success"
+                  ? "bg-success/10 border-success/20 border"
+                  : "bg-error/10 border-error/20 border"
+              }`}
+            >
+              <p
+                className={`mb-1 text-xs font-medium ${
+                  type === "success"
+                    ? "text-success-foreground"
+                    : "text-error-foreground"
+                }`}
+              >
+                {type === "success"
+                  ? t("detailsLabel")
+                  : t("errorDetailsLabel")}
               </p>
-              <pre className={`text-xs whitespace-pre-wrap break-words ${
-                type === 'success'
-                  ? 'text-success/80'
-                  : 'text-error/80'
-              }`}>
+              <pre
+                className={`text-xs break-words whitespace-pre-wrap ${
+                  type === "success" ? "text-success/80" : "text-error/80"
+                }`}
+              >
                 {details}
               </pre>
             </div>
@@ -81,9 +87,9 @@ export function ErrorModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 p-6 border-t border-border">
+        <div className="border-border flex justify-end gap-3 border-t p-6">
           <Button variant="outline" onClick={onClose}>
-            {tc('close')}
+            {tc("close")}
           </Button>
         </div>
       </div>
diff --git a/src/app/_components/ExecutionModeModal.tsx b/src/app/_components/ExecutionModeModal.tsx
index 10c452c..fc7539e 100644
--- a/src/app/_components/ExecutionModeModal.tsx
+++ b/src/app/_components/ExecutionModeModal.tsx
@@ -1,24 +1,32 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import type { Server } from '../../types/server';
-import { Button } from './ui/button';
-import { ColorCodedDropdown } from './ColorCodedDropdown';
-import { SettingsModal } from './SettingsModal';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+"use client";
 
+import { useState, useEffect } from "react";
+import type { Server } from "../../types/server";
+import { Button } from "./ui/button";
+import { ColorCodedDropdown } from "./ColorCodedDropdown";
+import { SettingsModal } from "./SettingsModal";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface ExecutionModeModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onExecute: (mode: 'local' | 'ssh', server?: Server) => void;
+  onExecute: (mode: "local" | "ssh", server?: Server) => void;
   scriptName: string;
 }
 
-export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: ExecutionModeModalProps) {
-  const { t } = useTranslation('executionModeModal');
-  useRegisterModal(isOpen, { id: 'execution-mode-modal', allowEscape: true, onClose });
+export function ExecutionModeModal({
+  isOpen,
+  onClose,
+  onExecute,
+  scriptName,
+}: ExecutionModeModalProps) {
+  const { t } = useTranslation("executionModeModal");
+  useRegisterModal(isOpen, {
+    id: "execution-mode-modal",
+    allowEscape: true,
+    onClose,
+  });
   const [servers, setServers] = useState<Server[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -36,18 +44,18 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch('/api/servers');
+      const response = await fetch("/api/servers");
       if (!response.ok) {
-        throw new Error(t('errors.fetchFailed'));
+        throw new Error(t("errors.fetchFailed"));
       }
       const data = await response.json();
       // Sort servers by name alphabetically
-      const sortedServers = (data as Server[]).sort((a, b) => 
-        (a.name ?? '').localeCompare(b.name ?? '')
+      const sortedServers = (data as Server[]).sort((a, b) =>
+        (a.name ?? "").localeCompare(b.name ?? ""),
       );
       setServers(sortedServers);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('errors.fetchFailed'));
+      setError(err instanceof Error ? err.message : t("errors.fetchFailed"));
     } finally {
       setLoading(false);
     }
@@ -57,7 +65,7 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
     if (isOpen) {
       void fetchServers();
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
   // Auto-select server when exactly one server is available
@@ -69,37 +77,45 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
 
   const handleExecute = () => {
     if (!selectedServer) {
-      setError(t('errors.noServerSelected'));
+      setError(t("errors.noServerSelected"));
       return;
     }
-    
-    onExecute('ssh', selectedServer);
+
+    onExecute("ssh", selectedServer);
     onClose();
   };
 
-
   const handleServerSelect = (server: Server | null) => {
     setSelectedServer(server);
   };
 
-
   if (!isOpen) return null;
 
   return (
     <>
-      <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-        <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+        <div className="bg-card border-border w-full max-w-md rounded-lg border shadow-xl">
           {/* Header */}
-          <div className="flex items-center justify-between p-6 border-b border-border">
-            <h2 className="text-xl font-bold text-foreground">{t('title')}</h2>
+          <div className="border-border flex items-center justify-between border-b p-6">
+            <h2 className="text-foreground text-xl font-bold">{t("title")}</h2>
             <Button
               onClick={onClose}
               variant="ghost"
               size="icon"
               className="text-muted-foreground hover:text-foreground"
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              <svg
+                className="h-6 w-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </Button>
           </div>
@@ -107,60 +123,72 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
           {/* Content */}
           <div className="p-6">
             {error && (
-              <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <div className="bg-destructive/10 border-destructive/20 mb-4 rounded-md border p-3">
                 <div className="flex">
                   <div className="flex-shrink-0">
-                    <svg className="h-5 w-5 text-destructive" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                    <svg
+                      className="text-destructive h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                        clipRule="evenodd"
+                      />
                     </svg>
                   </div>
                   <div className="ml-3">
-                    <p className="text-sm text-destructive">{error}</p>
+                    <p className="text-destructive text-sm">{error}</p>
                   </div>
                 </div>
               </div>
             )}
 
             {loading ? (
-              <div className="text-center py-8">
-                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-                <p className="mt-2 text-sm text-muted-foreground">{t('loadingServers')}</p>
+              <div className="py-8 text-center">
+                <div className="border-primary inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
+                <p className="text-muted-foreground mt-2 text-sm">
+                  {t("loadingServers")}
+                </p>
               </div>
             ) : servers.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground">
-                <p className="text-sm">{t('noServersConfigured')}</p>
-                <p className="text-xs mt-1">{t('addServersHint')}</p>
+              <div className="text-muted-foreground py-8 text-center">
+                <p className="text-sm">{t("noServersConfigured")}</p>
+                <p className="mt-1 text-xs">{t("addServersHint")}</p>
                 <Button
                   onClick={() => setSettingsModalOpen(true)}
                   variant="outline"
                   size="sm"
                   className="mt-3"
                 >
-                  {t('openServerSettings')}
+                  {t("openServerSettings")}
                 </Button>
               </div>
             ) : servers.length === 1 ? (
               /* Single Server Confirmation View */
               <div className="space-y-6">
                 <div className="text-center">
-                  <h3 className="text-lg font-medium text-foreground mb-2">
-                    {t('installConfirmation.title')}
+                  <h3 className="text-foreground mb-2 text-lg font-medium">
+                    {t("installConfirmation.title")}
                   </h3>
-                  <p className="text-sm text-muted-foreground">
-                    {t('installConfirmation.description', { values: { scriptName } })}
+                  <p className="text-muted-foreground text-sm">
+                    {t("installConfirmation.description", {
+                      values: { scriptName },
+                    })}
                   </p>
                 </div>
-                
-                <div className="bg-muted/50 rounded-lg p-4 border border-border">
+
+                <div className="bg-muted/50 border-border rounded-lg border p-4">
                   <div className="flex items-center space-x-3">
                     <div className="flex-shrink-0">
-                      <div className="w-3 h-3 bg-success rounded-full"></div>
+                      <div className="bg-success h-3 w-3 rounded-full"></div>
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-foreground truncate">
-                        {selectedServer?.name ?? t('unnamedServer')}
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground truncate text-sm font-medium">
+                        {selectedServer?.name ?? t("unnamedServer")}
                       </p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-muted-foreground text-sm">
                         {selectedServer?.ip}
                       </p>
                     </div>
@@ -169,19 +197,15 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
 
                 {/* Action Buttons */}
                 <div className="flex justify-end space-x-3">
-                  <Button
-                    onClick={onClose}
-                    variant="outline"
-                    size="default"
-                  >
-                    {t('actions.cancel')}
+                  <Button onClick={onClose} variant="outline" size="default">
+                    {t("actions.cancel")}
                   </Button>
                   <Button
                     onClick={handleExecute}
                     variant="default"
                     size="default"
                   >
-                    {t('actions.install')}
+                    {t("actions.install")}
                   </Button>
                 </div>
               </div>
@@ -189,41 +213,44 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
               /* Multiple Servers Selection View */
               <div className="space-y-6">
                 <div className="mb-6">
-                  <h3 className="text-lg font-medium text-foreground mb-2">
-                    {t('multipleServers.title', { values: { scriptName } })}
+                  <h3 className="text-foreground mb-2 text-lg font-medium">
+                    {t("multipleServers.title", { values: { scriptName } })}
                   </h3>
                 </div>
 
                 {/* Server Selection */}
                 <div className="mb-6">
-                  <label htmlFor="server" className="block text-sm font-medium text-foreground mb-2">
-                    {t('multipleServers.selectServerLabel')}
+                  <label
+                    htmlFor="server"
+                    className="text-foreground mb-2 block text-sm font-medium"
+                  >
+                    {t("multipleServers.selectServerLabel")}
                   </label>
                   <ColorCodedDropdown
                     servers={servers}
                     selectedServer={selectedServer}
                     onServerSelect={handleServerSelect}
-                    placeholder={t('multipleServers.placeholder')}
+                    placeholder={t("multipleServers.placeholder")}
                   />
                 </div>
 
                 {/* Action Buttons */}
                 <div className="flex justify-end space-x-3">
-                  <Button
-                    onClick={onClose}
-                    variant="outline"
-                    size="default"
-                  >
-                    {t('actions.cancel')}
+                  <Button onClick={onClose} variant="outline" size="default">
+                    {t("actions.cancel")}
                   </Button>
                   <Button
                     onClick={handleExecute}
                     disabled={!selectedServer}
                     variant="default"
                     size="default"
-                    className={!selectedServer ? 'bg-muted-foreground cursor-not-allowed' : ''}
+                    className={
+                      !selectedServer
+                        ? "bg-muted-foreground cursor-not-allowed"
+                        : ""
+                    }
                   >
-                    {t('actions.runOnServer')}
+                    {t("actions.runOnServer")}
                   </Button>
                 </div>
               </div>
@@ -233,9 +260,9 @@ export function ExecutionModeModal({ isOpen, onClose, onExecute, scriptName }: E
       </div>
 
       {/* Server Settings Modal */}
-      <SettingsModal 
-        isOpen={settingsModalOpen} 
-        onClose={handleSettingsModalClose} 
+      <SettingsModal
+        isOpen={settingsModalOpen}
+        onClose={handleSettingsModalClose}
       />
     </>
   );
diff --git a/src/app/_components/HelpButton.tsx b/src/app/_components/HelpButton.tsx
index 122bcbb..0c5e53f 100644
--- a/src/app/_components/HelpButton.tsx
+++ b/src/app/_components/HelpButton.tsx
@@ -1,40 +1,40 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { HelpModal } from './HelpModal';
-import { Button } from './ui/button';
-import { HelpCircle } from 'lucide-react';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { HelpModal } from "./HelpModal";
+import { Button } from "./ui/button";
+import { HelpCircle } from "lucide-react";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface HelpButtonProps {
   initialSection?: string;
 }
 
 export function HelpButton({ initialSection }: HelpButtonProps) {
-  const { t } = useTranslation('helpButton');
+  const { t } = useTranslation("helpButton");
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-        <div className="text-sm text-muted-foreground font-medium">
-          {t('needHelp')}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="text-muted-foreground text-sm font-medium">
+          {t("needHelp")}
         </div>
         <Button
           onClick={() => setIsOpen(true)}
           variant="outline"
           size="default"
           className="inline-flex items-center"
-          title={t('openHelp')}
+          title={t("openHelp")}
         >
-          <HelpCircle className="w-5 h-5 mr-2" />
-          {t('help')}
+          <HelpCircle className="mr-2 h-5 w-5" />
+          {t("help")}
         </Button>
       </div>
 
-      <HelpModal 
-        isOpen={isOpen} 
-        onClose={() => setIsOpen(false)} 
+      <HelpModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
         initialSection={initialSection}
       />
     </>
diff --git a/src/app/_components/LoadingModal.tsx b/src/app/_components/LoadingModal.tsx
index 8b7ffbe..bbe0c77 100644
--- a/src/app/_components/LoadingModal.tsx
+++ b/src/app/_components/LoadingModal.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { Loader2 } from 'lucide-react';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { Loader2 } from "lucide-react";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface LoadingModalProps {
   isOpen: boolean;
@@ -10,27 +10,29 @@ interface LoadingModalProps {
 }
 
 export function LoadingModal({ isOpen, action }: LoadingModalProps) {
-  const { t } = useTranslation('loadingModal');
-  useRegisterModal(isOpen, { id: 'loading-modal', allowEscape: false, onClose: () => null });
+  const { t } = useTranslation("loadingModal");
+  useRegisterModal(isOpen, {
+    id: "loading-modal",
+    allowEscape: false,
+    onClose: () => null,
+  });
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border p-8">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-md rounded-lg border p-8 shadow-xl">
         <div className="flex flex-col items-center space-y-4">
           <div className="relative">
-            <Loader2 className="h-12 w-12 animate-spin text-primary" />
-            <div className="absolute inset-0 rounded-full border-2 border-primary/20 animate-pulse"></div>
+            <Loader2 className="text-primary h-12 w-12 animate-spin" />
+            <div className="border-primary/20 absolute inset-0 animate-pulse rounded-full border-2"></div>
           </div>
           <div className="text-center">
-            <h3 className="text-lg font-semibold text-card-foreground mb-2">
-              {t('processing')}
+            <h3 className="text-card-foreground mb-2 text-lg font-semibold">
+              {t("processing")}
             </h3>
-            <p className="text-sm text-muted-foreground">
-              {action}
-            </p>
-            <p className="text-xs text-muted-foreground mt-2">
-              {t('pleaseWait')}
+            <p className="text-muted-foreground text-sm">{action}</p>
+            <p className="text-muted-foreground mt-2 text-xs">
+              {t("pleaseWait")}
             </p>
           </div>
         </div>
@@ -38,4 +40,3 @@ export function LoadingModal({ isOpen, action }: LoadingModalProps) {
     </div>
   );
 }
-
diff --git a/src/app/_components/PublicKeyModal.tsx b/src/app/_components/PublicKeyModal.tsx
index 70e37d4..dc05b0a 100644
--- a/src/app/_components/PublicKeyModal.tsx
+++ b/src/app/_components/PublicKeyModal.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { X, Copy, Check, Server, Globe } from 'lucide-react';
-import { Button } from './ui/button';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { X, Copy, Check, Server, Globe } from "lucide-react";
+import { Button } from "./ui/button";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface PublicKeyModalProps {
   isOpen: boolean;
@@ -14,9 +14,19 @@ interface PublicKeyModalProps {
   serverIp: string;
 }
 
-export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverIp }: PublicKeyModalProps) {
-  const { t } = useTranslation('publicKeyModal');
-  useRegisterModal(isOpen, { id: 'public-key-modal', allowEscape: true, onClose });
+export function PublicKeyModal({
+  isOpen,
+  onClose,
+  publicKey,
+  serverName,
+  serverIp,
+}: PublicKeyModalProps) {
+  const { t } = useTranslation("publicKeyModal");
+  useRegisterModal(isOpen, {
+    id: "public-key-modal",
+    allowEscape: true,
+    onClose,
+  });
   const [copied, setCopied] = useState(false);
   const [commandCopied, setCommandCopied] = useState(false);
 
@@ -31,31 +41,31 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
         setTimeout(() => setCopied(false), 2000);
       } else {
         // Fallback for older browsers or non-HTTPS
-        const textArea = document.createElement('textarea');
+        const textArea = document.createElement("textarea");
         textArea.value = publicKey;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         try {
-          document.execCommand('copy');
+          document.execCommand("copy");
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
         } catch (fallbackError) {
-          console.error('Fallback copy failed:', fallbackError);
+          console.error("Fallback copy failed:", fallbackError);
           // If all else fails, show the key in an alert
-          alert(t('copyFallback') + publicKey);
+          alert(t("copyFallback") + publicKey);
         }
-        
+
         document.body.removeChild(textArea);
       }
     } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
+      console.error("Failed to copy to clipboard:", error);
       // Fallback: show the key in an alert
-      alert(t('copyFallback') + publicKey);
+      alert(t("copyFallback") + publicKey);
     }
   };
 
@@ -69,44 +79,46 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
         setTimeout(() => setCommandCopied(false), 2000);
       } else {
         // Fallback for older browsers or non-HTTPS
-        const textArea = document.createElement('textarea');
+        const textArea = document.createElement("textarea");
         textArea.value = command;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         try {
-          document.execCommand('copy');
+          document.execCommand("copy");
           setCommandCopied(true);
           setTimeout(() => setCommandCopied(false), 2000);
         } catch (fallbackError) {
-          console.error('Fallback copy failed:', fallbackError);
-          alert(t('copyCommandFallback') + command);
+          console.error("Fallback copy failed:", fallbackError);
+          alert(t("copyCommandFallback") + command);
         }
-        
+
         document.body.removeChild(textArea);
       }
     } catch (error) {
-      console.error('Failed to copy command to clipboard:', error);
-      alert(t('copyCommandFallback') + command);
+      console.error("Failed to copy command to clipboard:", error);
+      alert(t("copyCommandFallback") + command);
     }
   };
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full border border-border">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-2xl rounded-lg border shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border">
+        <div className="border-border flex items-center justify-between border-b p-6">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-info/10 rounded-lg">
-              <Server className="h-6 w-6 text-info" />
+            <div className="bg-info/10 rounded-lg p-2">
+              <Server className="text-info h-6 w-6" />
             </div>
             <div>
-              <h2 className="text-xl font-semibold text-card-foreground">{t('title')}</h2>
-              <p className="text-sm text-muted-foreground">{t('subtitle')}</p>
+              <h2 className="text-card-foreground text-xl font-semibold">
+                {t("title")}
+              </h2>
+              <p className="text-muted-foreground text-sm">{t("subtitle")}</p>
             </div>
           </div>
           <Button
@@ -120,14 +132,14 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-6">
+        <div className="space-y-6 p-6">
           {/* Server Info */}
-          <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <div className="bg-muted/50 flex items-center gap-4 rounded-lg p-4">
+            <div className="text-muted-foreground flex items-center gap-2 text-sm">
               <Server className="h-4 w-4" />
               <span className="font-medium">{serverName}</span>
             </div>
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <div className="text-muted-foreground flex items-center gap-2 text-sm">
               <Globe className="h-4 w-4" />
               <span>{serverIp}</span>
             </div>
@@ -135,19 +147,39 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
 
           {/* Instructions */}
           <div className="space-y-2">
-            <h3 className="font-medium text-foreground">{t('instructions.title')}</h3>
-            <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
-              <li>{t('instructions.step1')}</li>
-              <li>{t('instructions.step2')} <code className="bg-muted px-1 rounded">ssh root@{serverIp}</code></li>
-              <li>{t('instructions.step3')} <code className="bg-muted px-1 rounded">echo &quot;&lt;paste-key&gt;&quot; &gt;&gt; ~/.ssh/authorized_keys</code></li>
-              <li>{t('instructions.step4')} <code className="bg-muted px-1 rounded">chmod 600 ~/.ssh/authorized_keys</code></li>
+            <h3 className="text-foreground font-medium">
+              {t("instructions.title")}
+            </h3>
+            <ol className="text-muted-foreground list-inside list-decimal space-y-1 text-sm">
+              <li>{t("instructions.step1")}</li>
+              <li>
+                {t("instructions.step2")}{" "}
+                <code className="bg-muted rounded px-1">
+                  ssh root@{serverIp}
+                </code>
+              </li>
+              <li>
+                {t("instructions.step3")}{" "}
+                <code className="bg-muted rounded px-1">
+                  echo &quot;&lt;paste-key&gt;&quot; &gt;&gt;
+                  ~/.ssh/authorized_keys
+                </code>
+              </li>
+              <li>
+                {t("instructions.step4")}{" "}
+                <code className="bg-muted rounded px-1">
+                  chmod 600 ~/.ssh/authorized_keys
+                </code>
+              </li>
             </ol>
           </div>
 
           {/* Public Key */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-foreground">{t('publicKeyLabel')}</label>
+              <label className="text-foreground text-sm font-medium">
+                {t("publicKeyLabel")}
+              </label>
               <Button
                 variant="outline"
                 size="sm"
@@ -157,12 +189,12 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
                 {copied ? (
                   <>
                     <Check className="h-4 w-4" />
-                    {t('actions.copied')}
+                    {t("actions.copied")}
                   </>
                 ) : (
                   <>
                     <Copy className="h-4 w-4" />
-                    {t('actions.copy')}
+                    {t("actions.copy")}
                   </>
                 )}
               </Button>
@@ -170,15 +202,17 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
             <textarea
               value={publicKey}
               readOnly
-              className="w-full px-3 py-2 border rounded-md shadow-sm bg-card text-foreground font-mono text-xs min-h-[60px] resize-none border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
-              placeholder={t('placeholder')}
+              className="bg-card text-foreground border-border focus:ring-ring focus:border-ring min-h-[60px] w-full resize-none rounded-md border px-3 py-2 font-mono text-xs shadow-sm focus:ring-2 focus:outline-none"
+              placeholder={t("placeholder")}
             />
           </div>
 
           {/* Quick Command */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-foreground">{t('quickCommandLabel')}</label>
+              <label className="text-foreground text-sm font-medium">
+                {t("quickCommandLabel")}
+              </label>
               <Button
                 variant="outline"
                 size="sm"
@@ -188,30 +222,30 @@ export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverI
                 {commandCopied ? (
                   <>
                     <Check className="h-4 w-4" />
-                    {t('actions.copied')}
+                    {t("actions.copied")}
                   </>
                 ) : (
                   <>
                     <Copy className="h-4 w-4" />
-                    {t('actions.copyCommand')}
+                    {t("actions.copyCommand")}
                   </>
                 )}
               </Button>
             </div>
-            <div className="p-3 bg-muted/50 rounded-md border border-border">
-              <code className="text-sm font-mono text-foreground break-all">
+            <div className="bg-muted/50 border-border rounded-md border p-3">
+              <code className="text-foreground font-mono text-sm break-all">
                 echo &quot;{publicKey}&quot; &gt;&gt; ~/.ssh/authorized_keys
               </code>
             </div>
-            <p className="text-xs text-muted-foreground">
-              {t('quickCommandHint')}
+            <p className="text-muted-foreground text-xs">
+              {t("quickCommandHint")}
             </p>
           </div>
 
           {/* Footer */}
-          <div className="flex justify-end gap-3 pt-4 border-t border-border">
+          <div className="border-border flex justify-end gap-3 border-t pt-4">
             <Button variant="outline" onClick={onClose}>
-              {t('actions.close')}
+              {t("actions.close")}
             </Button>
           </div>
         </div>
diff --git a/src/app/_components/ResyncButton.tsx b/src/app/_components/ResyncButton.tsx
index c945c6f..f4a9627 100644
--- a/src/app/_components/ResyncButton.tsx
+++ b/src/app/_components/ResyncButton.tsx
@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { api } from '~/trpc/react';
-import { Button } from './ui/button';
-import { ContextualHelpIcon } from './ContextualHelpIcon';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { api } from "~/trpc/react";
+import { Button } from "./ui/button";
+import { ContextualHelpIcon } from "./ContextualHelpIcon";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 export function ResyncButton() {
-  const { t } = useTranslation('resyncButton');
+  const { t } = useTranslation("resyncButton");
   const [isResyncing, setIsResyncing] = useState(false);
   const [lastSync, setLastSync] = useState<Date | null>(null);
   const [syncMessage, setSyncMessage] = useState<string | null>(null);
@@ -17,20 +17,22 @@ export function ResyncButton() {
       setIsResyncing(false);
       setLastSync(new Date());
       if (data.success) {
-        setSyncMessage(data.message ?? t('messages.success'));
+        setSyncMessage(data.message ?? t("messages.success"));
         // Reload the page after successful sync
         setTimeout(() => {
           window.location.reload();
         }, 2000); // Wait 2 seconds to show the success message
       } else {
-        setSyncMessage(data.error ?? t('messages.failed'));
+        setSyncMessage(data.error ?? t("messages.failed"));
         // Clear message after 3 seconds for errors
         setTimeout(() => setSyncMessage(null), 3000);
       }
     },
     onError: (error) => {
       setIsResyncing(false);
-      setSyncMessage(t('messages.error', { values: { message: error.message } }));
+      setSyncMessage(
+        t("messages.error", { values: { message: error.message } }),
+      );
       setTimeout(() => setSyncMessage(null), 3000);
     },
   });
@@ -42,11 +44,11 @@ export function ResyncButton() {
   };
 
   return (
-    <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-      <div className="text-sm text-muted-foreground font-medium">
-        {t('syncDescription')}
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+      <div className="text-muted-foreground text-sm font-medium">
+        {t("syncDescription")}
       </div>
-      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <div className="flex items-center gap-2">
           <Button
             onClick={handleResync}
@@ -57,34 +59,51 @@ export function ResyncButton() {
           >
             {isResyncing ? (
               <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
-                <span>{t('syncing')}</span>
+                <div className="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
+                <span>{t("syncing")}</span>
               </>
             ) : (
               <>
-                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                <svg
+                  className="mr-2 h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
                 </svg>
-                <span>{t('syncJsonFiles')}</span>
+                <span>{t("syncJsonFiles")}</span>
               </>
             )}
           </Button>
-          <ContextualHelpIcon section="sync-button" tooltip={t('helpTooltip')} />
+          <ContextualHelpIcon
+            section="sync-button"
+            tooltip={t("helpTooltip")}
+          />
         </div>
 
         {lastSync && (
-          <div className="text-xs text-muted-foreground">
-            {t('lastSync', { values: { time: lastSync.toLocaleTimeString() } })}
+          <div className="text-muted-foreground text-xs">
+            {t("lastSync", { values: { time: lastSync.toLocaleTimeString() } })}
           </div>
         )}
       </div>
 
       {syncMessage && (
-        <div className={`text-sm px-3 py-1 rounded-lg ${
-          syncMessage.includes('Error') || syncMessage.includes('Failed') || syncMessage.includes('Fehler')
-            ? 'bg-error/10 text-error'
-            : 'bg-success/10 text-success'
-        }`}>
+        <div
+          className={`rounded-lg px-3 py-1 text-sm ${
+            syncMessage.includes("Error") ||
+            syncMessage.includes("Failed") ||
+            syncMessage.includes("Fehler")
+              ? "bg-error/10 text-error"
+              : "bg-success/10 text-success"
+          }`}
+        >
           {syncMessage}
         </div>
       )}
diff --git a/src/app/_components/ScriptCard.tsx b/src/app/_components/ScriptCard.tsx
index 8037372..b2640aa 100644
--- a/src/app/_components/ScriptCard.tsx
+++ b/src/app/_components/ScriptCard.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import Image from 'next/image';
-import type { ScriptCard } from '~/types/script';
-import { TypeBadge, UpdateableBadge } from './Badge';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import Image from "next/image";
+import type { ScriptCard } from "~/types/script";
+import { TypeBadge, UpdateableBadge } from "./Badge";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface ScriptCardProps {
   script: ScriptCard;
@@ -13,8 +13,13 @@ interface ScriptCardProps {
   onToggleSelect?: (slug: string) => void;
 }
 
-export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect }: ScriptCardProps) {
-  const { t } = useTranslation('scriptCard');
+export function ScriptCard({
+  script,
+  onClick,
+  isSelected = false,
+  onToggleSelect,
+}: ScriptCardProps) {
+  const { t } = useTranslation("scriptCard");
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = () => {
@@ -30,32 +35,36 @@ export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect
 
   return (
     <div
-      className="bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-border hover:border-primary h-full flex flex-col relative"
+      className="bg-card border-border hover:border-primary relative flex h-full cursor-pointer flex-col rounded-lg border shadow-md transition-shadow duration-200 hover:shadow-lg"
       onClick={() => onClick(script)}
     >
       {/* Checkbox in top-left corner */}
       {onToggleSelect && (
         <div className="absolute top-2 left-2 z-10">
-          <div 
-            className={`w-4 h-4 border-2 rounded cursor-pointer transition-all duration-200 flex items-center justify-center ${
-              isSelected 
-                ? 'bg-primary border-primary text-primary-foreground' 
-                : 'bg-card border-border hover:border-primary/60 hover:bg-accent'
+          <div
+            className={`flex h-4 w-4 cursor-pointer items-center justify-center rounded border-2 transition-all duration-200 ${
+              isSelected
+                ? "bg-primary border-primary text-primary-foreground"
+                : "bg-card border-border hover:border-primary/60 hover:bg-accent"
             }`}
             onClick={handleCheckboxClick}
           >
             {isSelected && (
-              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
               </svg>
             )}
           </div>
         </div>
       )}
-      
-      <div className="p-6 flex-1 flex flex-col">
+
+      <div className="flex flex-1 flex-col p-6">
         {/* Header with logo and name */}
-        <div className="flex items-start space-x-4 mb-4">
+        <div className="mb-4 flex items-start space-x-4">
           <div className="flex-shrink-0">
             {script.logo && !imageError ? (
               <Image
@@ -63,37 +72,41 @@ export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect
                 alt={`${script.name} logo`}
                 width={48}
                 height={48}
-                className="w-12 h-12 rounded-lg object-contain"
+                className="h-12 w-12 rounded-lg object-contain"
                 onError={handleImageError}
               />
             ) : (
-              <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center">
+              <div className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
                 <span className="text-muted-foreground text-lg font-semibold">
-                  {script.name?.charAt(0)?.toUpperCase() || '?'}
+                  {script.name?.charAt(0)?.toUpperCase() || "?"}
                 </span>
               </div>
             )}
           </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-semibold text-foreground truncate">
-              {script.name || t('unnamedScript')}
+          <div className="min-w-0 flex-1">
+            <h3 className="text-foreground truncate text-lg font-semibold">
+              {script.name || t("unnamedScript")}
             </h3>
             <div className="mt-2 space-y-2">
               {/* Type and Updateable status on first row */}
-              <div className="flex items-center space-x-2 flex-wrap gap-1">
-                <TypeBadge type={script.type ?? 'unknown'} />
+              <div className="flex flex-wrap items-center gap-1 space-x-2">
+                <TypeBadge type={script.type ?? "unknown"} />
                 {script.updateable && <UpdateableBadge />}
               </div>
-              
+
               {/* Download Status */}
               <div className="flex items-center space-x-1">
-                <div className={`w-2 h-2 rounded-full ${
-                  script.isDownloaded ? 'bg-success' : 'bg-error'
-                }`}></div>
-                <span className={`text-xs font-medium ${
-                  script.isDownloaded ? 'text-success' : 'text-error'
-                }`}>
-                  {script.isDownloaded ? t('downloaded') : t('notDownloaded')}
+                <div
+                  className={`h-2 w-2 rounded-full ${
+                    script.isDownloaded ? "bg-success" : "bg-error"
+                  }`}
+                ></div>
+                <span
+                  className={`text-xs font-medium ${
+                    script.isDownloaded ? "text-success" : "text-error"
+                  }`}
+                >
+                  {script.isDownloaded ? t("downloaded") : t("notDownloaded")}
                 </span>
               </div>
             </div>
@@ -101,8 +114,8 @@ export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect
         </div>
 
         {/* Description */}
-        <p className="text-muted-foreground text-sm line-clamp-3 mb-4 flex-1">
-          {script.description || t('noDescription')}
+        <p className="text-muted-foreground mb-4 line-clamp-3 flex-1 text-sm">
+          {script.description || t("noDescription")}
         </p>
 
         {/* Footer with website link */}
@@ -112,12 +125,22 @@ export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect
               href={script.website}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-info hover:text-info/80 text-sm font-medium flex items-center space-x-1"
+              className="text-info hover:text-info/80 flex items-center space-x-1 text-sm font-medium"
               onClick={(e) => e.stopPropagation()}
             >
-              <span>{t('website')}</span>
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              <span>{t("website")}</span>
+              <svg
+                className="h-3 w-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
               </svg>
             </a>
           </div>
diff --git a/src/app/_components/ServerSettingsButton.tsx b/src/app/_components/ServerSettingsButton.tsx
index be03029..e298068 100644
--- a/src/app/_components/ServerSettingsButton.tsx
+++ b/src/app/_components/ServerSettingsButton.tsx
@@ -1,29 +1,29 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { SettingsModal } from './SettingsModal';
-import { Button } from './ui/button';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { SettingsModal } from "./SettingsModal";
+import { Button } from "./ui/button";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 export function ServerSettingsButton() {
-  const { t } = useTranslation('serverSettingsButton');
+  const { t } = useTranslation("serverSettingsButton");
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-        <div className="text-sm text-muted-foreground font-medium">
-          {t('description')}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="text-muted-foreground text-sm font-medium">
+          {t("description")}
         </div>
         <Button
           onClick={() => setIsOpen(true)}
           variant="outline"
           size="default"
           className="inline-flex items-center"
-          title={t('buttonTitle')}
+          title={t("buttonTitle")}
         >
           <svg
-            className="w-5 h-5 mr-2"
+            className="mr-2 h-5 w-5"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -42,7 +42,7 @@ export function ServerSettingsButton() {
               d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
             />
           </svg>
-          {t('buttonLabel')}
+          {t("buttonLabel")}
         </Button>
       </div>
 
diff --git a/src/app/_components/SettingsButton.tsx b/src/app/_components/SettingsButton.tsx
index fd05d93..dbd9916 100644
--- a/src/app/_components/SettingsButton.tsx
+++ b/src/app/_components/SettingsButton.tsx
@@ -1,30 +1,30 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { GeneralSettingsModal } from './GeneralSettingsModal';
-import { Button } from './ui/button';
-import { Settings } from 'lucide-react';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { GeneralSettingsModal } from "./GeneralSettingsModal";
+import { Button } from "./ui/button";
+import { Settings } from "lucide-react";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 export function SettingsButton() {
-  const { t } = useTranslation('settingsButton');
+  const { t } = useTranslation("settingsButton");
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-        <div className="text-sm text-muted-foreground font-medium">
-          {t('description')}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="text-muted-foreground text-sm font-medium">
+          {t("description")}
         </div>
         <Button
           onClick={() => setIsOpen(true)}
           variant="outline"
           size="default"
           className="inline-flex items-center"
-          title={t('buttonTitle')}
+          title={t("buttonTitle")}
         >
-          <Settings className="w-5 h-5 mr-2" />
-          {t('buttonLabel')}
+          <Settings className="mr-2 h-5 w-5" />
+          {t("buttonLabel")}
         </Button>
       </div>
 
diff --git a/src/app/_components/SetupModal.tsx b/src/app/_components/SetupModal.tsx
index 4b5f150..13d4c2c 100644
--- a/src/app/_components/SetupModal.tsx
+++ b/src/app/_components/SetupModal.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Toggle } from './ui/toggle';
-import { Lock, User, Shield, AlertCircle } from 'lucide-react';
-import { useRegisterModal } from './modal/ModalStackProvider';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Toggle } from "./ui/toggle";
+import { Lock, User, Shield, AlertCircle } from "lucide-react";
+import { useRegisterModal } from "./modal/ModalStackProvider";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface SetupModalProps {
   isOpen: boolean;
@@ -14,11 +14,15 @@ interface SetupModalProps {
 }
 
 export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
-  const { t } = useTranslation('setupModal');
-  useRegisterModal(isOpen, { id: 'setup-modal', allowEscape: true, onClose: () => null });
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const { t } = useTranslation("setupModal");
+  useRegisterModal(isOpen, {
+    id: "setup-modal",
+    allowEscape: true,
+    onClose: () => null,
+  });
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [enableAuth, setEnableAuth] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -30,31 +34,31 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
 
     // Only validate passwords if authentication is enabled
     if (enableAuth && password !== confirmPassword) {
-      setError(t('errors.passwordMismatch'));
+      setError(t("errors.passwordMismatch"));
       setIsLoading(false);
       return;
     }
 
     try {
-      const response = await fetch('/api/auth/setup', {
-        method: 'POST',
+      const response = await fetch("/api/auth/setup", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
-        body: JSON.stringify({ 
-          username: enableAuth ? username : undefined, 
-          password: enableAuth ? password : undefined, 
-          enabled: enableAuth 
+        body: JSON.stringify({
+          username: enableAuth ? username : undefined,
+          password: enableAuth ? password : undefined,
+          enabled: enableAuth,
         }),
       });
 
       if (response.ok) {
         // If authentication is enabled, automatically log in the user
         if (enableAuth) {
-          const loginResponse = await fetch('/api/auth/login', {
-            method: 'POST',
+          const loginResponse = await fetch("/api/auth/login", {
+            method: "POST",
             headers: {
-              'Content-Type': 'application/json',
+              "Content-Type": "application/json",
             },
             body: JSON.stringify({ username, password }),
           });
@@ -64,7 +68,7 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
             onComplete();
           } else {
             // Setup succeeded but login failed, still complete setup
-            console.warn('Setup completed but auto-login failed');
+            console.warn("Setup completed but auto-login failed");
             onComplete();
           }
         } else {
@@ -72,119 +76,131 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
           onComplete();
         }
       } else {
-        const errorData = await response.json() as { error: string };
-        setError(errorData.error ?? t('errors.setupFailed'));
+        const errorData = (await response.json()) as { error: string };
+        setError(errorData.error ?? t("errors.setupFailed"));
       }
     } catch (error) {
-      console.error('Setup error:', error);
-      setError(t('errors.setupFailed'));
+      console.error("Setup error:", error);
+      setError(t("errors.setupFailed"));
     }
-    
+
     setIsLoading(false);
   };
 
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="bg-card border-border w-full max-w-md rounded-lg border shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-center p-6 border-b border-border">
+        <div className="border-border flex items-center justify-center border-b p-6">
           <div className="flex items-center gap-3">
-            <Shield className="h-8 w-8 text-success" />
-            <h2 className="text-2xl font-bold text-card-foreground">{t('title')}</h2>
+            <Shield className="text-success h-8 w-8" />
+            <h2 className="text-card-foreground text-2xl font-bold">
+              {t("title")}
+            </h2>
           </div>
         </div>
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-muted-foreground text-center mb-6">
-            {t('description')}
+          <p className="text-muted-foreground mb-6 text-center">
+            {t("description")}
           </p>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label htmlFor="setup-username" className="block text-sm font-medium text-foreground mb-2">
-                {t('username.label')}
+              <label
+                htmlFor="setup-username"
+                className="text-foreground mb-2 block text-sm font-medium"
+              >
+                {t("username.label")}
               </label>
               <div className="relative">
-                <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input
-                          id="setup-username"
-                          type="text"
-                          placeholder={t('username.placeholder')}
-                          value={username}
-                          onChange={(e) => setUsername(e.target.value)}
-                          disabled={isLoading}
-                          className="pl-10"
-                          required={enableAuth}
-                          minLength={3}
-                        />
+                <User className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+                <Input
+                  id="setup-username"
+                  type="text"
+                  placeholder={t("username.placeholder")}
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  disabled={isLoading}
+                  className="pl-10"
+                  required={enableAuth}
+                  minLength={3}
+                />
               </div>
             </div>
 
             <div>
-              <label htmlFor="setup-password" className="block text-sm font-medium text-foreground mb-2">
-                {t('password.label')}
+              <label
+                htmlFor="setup-password"
+                className="text-foreground mb-2 block text-sm font-medium"
+              >
+                {t("password.label")}
               </label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input
-                          id="setup-password"
-                          type="password"
-                          placeholder={t('password.placeholder')}
-                          value={password}
-                          onChange={(e) => setPassword(e.target.value)}
-                          disabled={isLoading}
-                          className="pl-10"
-                          required={enableAuth}
-                          minLength={6}
-                        />
+                <Lock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+                <Input
+                  id="setup-password"
+                  type="password"
+                  placeholder={t("password.placeholder")}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  disabled={isLoading}
+                  className="pl-10"
+                  required={enableAuth}
+                  minLength={6}
+                />
               </div>
             </div>
 
             <div>
-              <label htmlFor="confirm-password" className="block text-sm font-medium text-foreground mb-2">
-                {t('confirmPassword.label')}
+              <label
+                htmlFor="confirm-password"
+                className="text-foreground mb-2 block text-sm font-medium"
+              >
+                {t("confirmPassword.label")}
               </label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input
-                          id="confirm-password"
-                          type="password"
-                          placeholder={t('confirmPassword.placeholder')}
-                          value={confirmPassword}
-                          onChange={(e) => setConfirmPassword(e.target.value)}
-                          disabled={isLoading}
-                          className="pl-10"
-                          required={enableAuth}
-                          minLength={6}
-                        />
+                <Lock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  placeholder={t("confirmPassword.placeholder")}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  disabled={isLoading}
+                  className="pl-10"
+                  required={enableAuth}
+                  minLength={6}
+                />
               </div>
             </div>
 
-            <div className="p-4 border border-border rounded-lg bg-muted/30">
+            <div className="border-border bg-muted/30 rounded-lg border p-4">
               <div className="flex items-center justify-between">
                 <div>
-                  <h4 className="font-medium text-foreground mb-1">{t('enableAuth.title')}</h4>
-                  <p className="text-sm text-muted-foreground">
-                    {enableAuth 
-                      ? t('enableAuth.descriptionEnabled')
-                      : t('enableAuth.descriptionDisabled')
-                    }
+                  <h4 className="text-foreground mb-1 font-medium">
+                    {t("enableAuth.title")}
+                  </h4>
+                  <p className="text-muted-foreground text-sm">
+                    {enableAuth
+                      ? t("enableAuth.descriptionEnabled")
+                      : t("enableAuth.descriptionDisabled")}
                   </p>
                 </div>
                 <Toggle
                   checked={enableAuth}
                   onCheckedChange={setEnableAuth}
                   disabled={isLoading}
-                  label={t('enableAuth.label')}
+                  label={t("enableAuth.label")}
                 />
               </div>
             </div>
 
             {error && (
-              <div className="flex items-center gap-2 p-3 bg-error/10 text-error-foreground border border-error/20 rounded-md">
+              <div className="bg-error/10 text-error-foreground border-error/20 flex items-center gap-2 rounded-md border p-3">
                 <AlertCircle className="h-4 w-4" />
                 <span className="text-sm">{error}</span>
               </div>
@@ -193,12 +209,15 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
             <Button
               type="submit"
               disabled={
-                isLoading || 
-                (enableAuth && (!username.trim() || !password.trim() || !confirmPassword.trim()))
+                isLoading ||
+                (enableAuth &&
+                  (!username.trim() ||
+                    !password.trim() ||
+                    !confirmPassword.trim()))
               }
               className="w-full"
             >
-              {isLoading ? t('actions.settingUp') : t('actions.completeSetup')}
+              {isLoading ? t("actions.settingUp") : t("actions.completeSetup")}
             </Button>
           </form>
         </div>
diff --git a/src/app/_components/VersionDisplay.tsx b/src/app/_components/VersionDisplay.tsx
index 3ded99e..6d70aa9 100644
--- a/src/app/_components/VersionDisplay.tsx
+++ b/src/app/_components/VersionDisplay.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { api } from "~/trpc/react";
 import { Badge } from "./ui/badge";
@@ -14,53 +14,53 @@ interface VersionDisplayProps {
 }
 
 // Loading overlay component with log streaming
-function LoadingOverlay({ 
-  isNetworkError = false, 
-  logs = [] 
-}: { 
-  isNetworkError?: boolean; 
+function LoadingOverlay({
+  isNetworkError = false,
+  logs = [],
+}: {
+  isNetworkError?: boolean;
   logs?: string[];
 }) {
-  const { t } = useTranslation('versionDisplay.loadingOverlay');
+  const { t } = useTranslation("versionDisplay.loadingOverlay");
   const logsEndRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to bottom when new logs arrive
   useEffect(() => {
-    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [logs]);
 
-
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-card rounded-lg p-8 shadow-2xl border border-border max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
+      <div className="bg-card border-border mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg border p-8 shadow-2xl">
         <div className="flex flex-col items-center space-y-4">
           <div className="relative">
-            <Loader2 className="h-12 w-12 animate-spin text-primary" />
-            <div className="absolute inset-0 rounded-full border-2 border-primary/20 animate-pulse"></div>
+            <Loader2 className="text-primary h-12 w-12 animate-spin" />
+            <div className="border-primary/20 absolute inset-0 animate-pulse rounded-full border-2"></div>
           </div>
           <div className="text-center">
-            <h3 className="text-lg font-semibold text-card-foreground mb-2">
-              {isNetworkError ? t('serverRestarting') : t('updatingApplication')}
+            <h3 className="text-card-foreground mb-2 text-lg font-semibold">
+              {isNetworkError
+                ? t("serverRestarting")
+                : t("updatingApplication")}
             </h3>
-            <p className="text-sm text-muted-foreground">
-              {isNetworkError 
-                ? t('serverRestartingMessage')
-                : t('updatingMessage')
-              }
+            <p className="text-muted-foreground text-sm">
+              {isNetworkError
+                ? t("serverRestartingMessage")
+                : t("updatingMessage")}
             </p>
-            <p className="text-xs text-muted-foreground mt-2">
-              {isNetworkError 
-                ? t('serverRestartingNote')
-                : t('updatingNote')
-              }
+            <p className="text-muted-foreground mt-2 text-xs">
+              {isNetworkError ? t("serverRestartingNote") : t("updatingNote")}
             </p>
           </div>
-          
+
           {/* Log output */}
           {logs.length > 0 && (
-            <div className="w-full mt-4 bg-card border border-border rounded-lg p-4 font-mono text-xs text-chart-2 max-h-60 overflow-y-auto terminal-output">
+            <div className="bg-card border-border text-chart-2 terminal-output mt-4 max-h-60 w-full overflow-y-auto rounded-lg border p-4 font-mono text-xs">
               {logs.map((log, index) => (
-                <div key={index} className="mb-1 whitespace-pre-wrap break-words">
+                <div
+                  key={index}
+                  className="mb-1 break-words whitespace-pre-wrap"
+                >
                   {log}
                 </div>
               ))}
@@ -69,9 +69,15 @@ function LoadingOverlay({
           )}
 
           <div className="flex space-x-1">
-            <div className="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
-            <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-            <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+            <div className="bg-primary h-2 w-2 animate-bounce rounded-full"></div>
+            <div
+              className="bg-primary h-2 w-2 animate-bounce rounded-full"
+              style={{ animationDelay: "0.1s" }}
+            ></div>
+            <div
+              className="bg-primary h-2 w-2 animate-bounce rounded-full"
+              style={{ animationDelay: "0.2s" }}
+            ></div>
           </div>
         </div>
       </div>
@@ -79,27 +85,36 @@ function LoadingOverlay({
   );
 }
 
-export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {}) {
-  const { t } = useTranslation('versionDisplay');
-  const { t: tOverlay } = useTranslation('versionDisplay.loadingOverlay');
-  const { data: versionStatus, isLoading, error } = api.version.getVersionStatus.useQuery();
+export function VersionDisplay({
+  onOpenReleaseNotes,
+}: VersionDisplayProps = {}) {
+  const { t } = useTranslation("versionDisplay");
+  const { t: tOverlay } = useTranslation("versionDisplay.loadingOverlay");
+  const {
+    data: versionStatus,
+    isLoading,
+    error,
+  } = api.version.getVersionStatus.useQuery();
   const [isUpdating, setIsUpdating] = useState(false);
-  const [updateResult, setUpdateResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [updateResult, setUpdateResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
   const [isNetworkError, setIsNetworkError] = useState(false);
   const [updateLogs, setUpdateLogs] = useState<string[]>([]);
   const [shouldSubscribe, setShouldSubscribe] = useState(false);
   const [updateStartTime, setUpdateStartTime] = useState<number | null>(null);
   const lastLogTimeRef = useRef<number>(Date.now());
   const reconnectIntervalRef = useRef<NodeJS.Timeout | null>(null);
-  
+
   const executeUpdate = api.version.executeUpdate.useMutation({
     onSuccess: (result) => {
       setUpdateResult({ success: result.success, message: result.message });
-      
+
       if (result.success) {
         // Start subscribing to update logs
         setShouldSubscribe(true);
-        setUpdateLogs([tOverlay('updateStarted')]);
+        setUpdateLogs([tOverlay("updateStarted")]);
       } else {
         setIsUpdating(false);
       }
@@ -107,35 +122,38 @@ export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {})
     onError: (error) => {
       setUpdateResult({ success: false, message: error.message });
       setIsUpdating(false);
-    }
+    },
   });
 
   // Poll for update logs
-  const { data: updateLogsData } = api.version.getUpdateLogs.useQuery(undefined, {
-    enabled: shouldSubscribe,
-    refetchInterval: 1000, // Poll every second
-    refetchIntervalInBackground: true,
-  });
+  const { data: updateLogsData } = api.version.getUpdateLogs.useQuery(
+    undefined,
+    {
+      enabled: shouldSubscribe,
+      refetchInterval: 1000, // Poll every second
+      refetchIntervalInBackground: true,
+    },
+  );
 
   // Attempt to reconnect and reload page when server is back
   const startReconnectAttempts = useCallback(() => {
     if (reconnectIntervalRef.current) return;
-    
-    setUpdateLogs(prev => [...prev, tOverlay('reconnecting')]);
-    
+
+    setUpdateLogs((prev) => [...prev, tOverlay("reconnecting")]);
+
     reconnectIntervalRef.current = setInterval(() => {
       void (async () => {
         try {
           // Try to fetch the root path to check if server is back
-          const response = await fetch('/', { method: 'HEAD' });
+          const response = await fetch("/", { method: "HEAD" });
           if (response.ok || response.status === 200) {
-            setUpdateLogs(prev => [...prev, tOverlay('serverBackOnline')]);
-            
+            setUpdateLogs((prev) => [...prev, tOverlay("serverBackOnline")]);
+
             // Clear interval and reload
             if (reconnectIntervalRef.current) {
               clearInterval(reconnectIntervalRef.current);
             }
-            
+
             setTimeout(() => {
               window.location.reload();
             }, 1000);
@@ -152,9 +170,9 @@ export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {})
     if (updateLogsData?.success && updateLogsData.logs) {
       lastLogTimeRef.current = Date.now();
       setUpdateLogs(updateLogsData.logs);
-      
+
       if (updateLogsData.isComplete) {
-        setUpdateLogs(prev => [...prev, tOverlay('updateComplete')]);
+        setUpdateLogs((prev) => [...prev, tOverlay("updateComplete")]);
         setIsNetworkError(true);
         // Start reconnection attempts when we know update is complete
         startReconnectAttempts();
@@ -169,23 +187,36 @@ export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {})
     // Only use this as a fallback - the main trigger should be completion detection
     const checkInterval = setInterval(() => {
       const timeSinceLastLog = Date.now() - lastLogTimeRef.current;
-      
+
       // Only start reconnection if we've been updating for at least 3 minutes
       // and no logs for 60 seconds (very conservative fallback)
-      const hasBeenUpdatingLongEnough = updateStartTime && (Date.now() - updateStartTime) > 180000; // 3 minutes
+      const hasBeenUpdatingLongEnough =
+        updateStartTime && Date.now() - updateStartTime > 180000; // 3 minutes
       const noLogsForAWhile = timeSinceLastLog > 60000; // 60 seconds
-      
-      if (hasBeenUpdatingLongEnough && noLogsForAWhile && isUpdating && !isNetworkError) {
+
+      if (
+        hasBeenUpdatingLongEnough &&
+        noLogsForAWhile &&
+        isUpdating &&
+        !isNetworkError
+      ) {
         setIsNetworkError(true);
-        setUpdateLogs(prev => [...prev, tOverlay('serverRestarting2')]);
-        
+        setUpdateLogs((prev) => [...prev, tOverlay("serverRestarting2")]);
+
         // Start trying to reconnect
         startReconnectAttempts();
       }
     }, 10000); // Check every 10 seconds
 
     return () => clearInterval(checkInterval);
-  }, [shouldSubscribe, isUpdating, updateStartTime, isNetworkError, tOverlay, startReconnectAttempts]);
+  }, [
+    shouldSubscribe,
+    isUpdating,
+    updateStartTime,
+    isNetworkError,
+    tOverlay,
+    startReconnectAttempts,
+  ]);
 
   // Cleanup reconnect interval on unmount
   useEffect(() => {
@@ -211,7 +242,7 @@ export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {})
     return (
       <div className="flex items-center gap-2">
         <Badge variant="secondary" className="animate-pulse">
-          {t('loading')}
+          {t("loading")}
         </Badge>
       </div>
     );
@@ -221,88 +252,104 @@ export function VersionDisplay({ onOpenReleaseNotes }: VersionDisplayProps = {})
     return (
       <div className="flex items-center gap-2">
         <Badge variant="destructive">
-          v{versionStatus?.currentVersion ?? t('unknownVersion')}
+          v{versionStatus?.currentVersion ?? t("unknownVersion")}
         </Badge>
-        <span className="text-xs text-muted-foreground">
-          {t('unableToCheck')}
+        <span className="text-muted-foreground text-xs">
+          {t("unableToCheck")}
         </span>
       </div>
     );
   }
 
-  const { currentVersion, isUpToDate, updateAvailable, releaseInfo } = versionStatus;
+  const { currentVersion, isUpToDate, updateAvailable, releaseInfo } =
+    versionStatus;
 
   return (
     <>
       {/* Loading overlay */}
-      {isUpdating && <LoadingOverlay isNetworkError={isNetworkError} logs={updateLogs} />}
-      
-      <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-2">
-        <Badge 
-          variant={isUpToDate ? "default" : "secondary"} 
-          className={`text-xs ${onOpenReleaseNotes ? 'cursor-pointer hover:opacity-80 transition-opacity' : ''}`}
+      {isUpdating && (
+        <LoadingOverlay isNetworkError={isNetworkError} logs={updateLogs} />
+      )}
+
+      <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-2">
+        <Badge
+          variant={isUpToDate ? "default" : "secondary"}
+          className={`text-xs ${onOpenReleaseNotes ? "cursor-pointer transition-opacity hover:opacity-80" : ""}`}
           onClick={onOpenReleaseNotes}
         >
           v{currentVersion}
         </Badge>
-        
+
         {updateAvailable && releaseInfo && (
-          <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
+          <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
             <div className="flex items-center gap-2">
               <Button
                 onClick={handleUpdate}
                 disabled={isUpdating}
                 size="sm"
                 variant="destructive"
-                className="text-xs h-6 px-2"
+                className="h-6 px-2 text-xs"
               >
                 {isUpdating ? (
                   <>
-                    <RefreshCw className="h-3 w-3 mr-1 animate-spin" />
-                    <span className="hidden sm:inline">{t('update.updating')}</span>
-                    <span className="sm:hidden">{t('update.updatingShort')}</span>
+                    <RefreshCw className="mr-1 h-3 w-3 animate-spin" />
+                    <span className="hidden sm:inline">
+                      {t("update.updating")}
+                    </span>
+                    <span className="sm:hidden">
+                      {t("update.updatingShort")}
+                    </span>
                   </>
                 ) : (
                   <>
-                    <Download className="h-3 w-3 mr-1" />
-                    <span className="hidden sm:inline">{t('update.updateNow')}</span>
-                    <span className="sm:hidden">{t('update.updateNowShort')}</span>
+                    <Download className="mr-1 h-3 w-3" />
+                    <span className="hidden sm:inline">
+                      {t("update.updateNow")}
+                    </span>
+                    <span className="sm:hidden">
+                      {t("update.updateNowShort")}
+                    </span>
                   </>
                 )}
               </Button>
-              
-              <ContextualHelpIcon section="update-system" tooltip={t('helpTooltip')} />
+
+              <ContextualHelpIcon
+                section="update-system"
+                tooltip={t("helpTooltip")}
+              />
             </div>
-            
+
             <div className="flex items-center gap-1">
-              <span className="text-xs text-muted-foreground">{t('releaseNotes')}</span>
+              <span className="text-muted-foreground text-xs">
+                {t("releaseNotes")}
+              </span>
               <a
                 href={releaseInfo.htmlUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs transition-colors"
                 title="View latest release"
               >
                 <ExternalLink className="h-3 w-3" />
               </a>
             </div>
-            
+
             {updateResult && (
-              <div className={`text-xs px-2 py-1 rounded text-center ${
-                updateResult.success 
-                  ? 'bg-chart-2/20 text-chart-2 border border-chart-2/30' 
-                  : 'bg-destructive/20 text-destructive border border-destructive/30'
-              }`}>
+              <div
+                className={`rounded px-2 py-1 text-center text-xs ${
+                  updateResult.success
+                    ? "bg-chart-2/20 text-chart-2 border-chart-2/30 border"
+                    : "bg-destructive/20 text-destructive border-destructive/30 border"
+                }`}
+              >
                 {updateResult.message}
               </div>
             )}
           </div>
         )}
-        
+
         {isUpToDate && (
-          <span className="text-xs text-chart-2">
-            {t('upToDate')}
-          </span>
+          <span className="text-chart-2 text-xs">{t("upToDate")}</span>
         )}
       </div>
     </>
diff --git a/src/app/_components/ViewToggle.tsx b/src/app/_components/ViewToggle.tsx
index 3e39b27..d4ff462 100644
--- a/src/app/_components/ViewToggle.tsx
+++ b/src/app/_components/ViewToggle.tsx
@@ -1,46 +1,46 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Button } from './ui/button';
-import { Grid3X3, List } from 'lucide-react';
-import { useTranslation } from '@/lib/i18n/useTranslation';
+import React from "react";
+import { Button } from "./ui/button";
+import { Grid3X3, List } from "lucide-react";
+import { useTranslation } from "@/lib/i18n/useTranslation";
 
 interface ViewToggleProps {
-  viewMode: 'card' | 'list';
-  onViewModeChange: (mode: 'card' | 'list') => void;
+  viewMode: "card" | "list";
+  onViewModeChange: (mode: "card" | "list") => void;
 }
 
 export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {
-  const { t } = useTranslation('viewToggle');
+  const { t } = useTranslation("viewToggle");
 
   return (
-    <div className="flex justify-center mb-6">
-      <div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
+    <div className="mb-6 flex justify-center">
+      <div className="bg-muted flex items-center space-x-1 rounded-lg p-1">
         <Button
-          onClick={() => onViewModeChange('card')}
-          variant={viewMode === 'card' ? 'default' : 'ghost'}
+          onClick={() => onViewModeChange("card")}
+          variant={viewMode === "card" ? "default" : "ghost"}
           size="sm"
           className={`flex items-center space-x-2 ${
-            viewMode === 'card'
-              ? 'bg-primary text-primary-foreground shadow-sm'
-              : 'text-muted-foreground hover:text-foreground'
+            viewMode === "card"
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
           <Grid3X3 className="h-4 w-4" />
-          <span className="text-sm">{t('cardView')}</span>
+          <span className="text-sm">{t("cardView")}</span>
         </Button>
         <Button
-          onClick={() => onViewModeChange('list')}
-          variant={viewMode === 'list' ? 'default' : 'ghost'}
+          onClick={() => onViewModeChange("list")}
+          variant={viewMode === "list" ? "default" : "ghost"}
           size="sm"
           className={`flex items-center space-x-2 ${
-            viewMode === 'list'
-              ? 'bg-primary text-primary-foreground shadow-sm'
-              : 'text-muted-foreground hover:text-foreground'
+            viewMode === "list"
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
           <List className="h-4 w-4" />
-          <span className="text-sm">{t('listView')}</span>
+          <span className="text-sm">{t("listView")}</span>
         </Button>
       </div>
     </div>