diff --git a/frontend/src/components/MnemonicInputs.tsx b/frontend/src/components/MnemonicInputs.tsx
index ed786cea..0d312bde 100644
--- a/frontend/src/components/MnemonicInputs.tsx
+++ b/frontend/src/components/MnemonicInputs.tsx
@@ -1,8 +1,8 @@
 import { wordlist } from "@scure/bip39/wordlists/english";
-import { useState } from "react";
 import {
   Card,
   CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from "src/components/ui/card";
@@ -12,6 +12,7 @@ type MnemonicInputsProps = {
   mnemonic?: string;
   setMnemonic?(mnemonic: string): void;
   readOnly?: boolean;
+  description?: string;
 };
 
 export default function MnemonicInputs({
@@ -19,11 +20,8 @@ export default function MnemonicInputs({
   setMnemonic,
   readOnly,
   children,
+  description,
 }: React.PropsWithChildren<MnemonicInputsProps>) {
-  const [revealedIndex, setRevealedIndex] = useState<number | undefined>(
-    undefined
-  );
-
   const words = mnemonic?.split(" ") || [];
   while (words.length < 12) {
     words.push("");
@@ -37,32 +35,29 @@ export default function MnemonicInputs({
     <>
       <Card>
         <CardHeader>
-          <CardTitle>Recovery phrase to your wallet</CardTitle>
+          <CardTitle className="text-xl text-center">
+            Wallet Recovery Phrase
+          </CardTitle>
+          <CardDescription className="text-muted-foreground text-sm max-w-xs text-right mt-2">
+            {description}
+          </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-5 justify-center backup sensitive">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5 justify-center backup sensitive">
             {words.map((word, i) => {
-              const isRevealed = revealedIndex === i;
               const inputId = `mnemonic-word-${i}`;
               return (
                 <div key={i} className="flex justify-center items-center gap-2">
-                  <span className="text-muted-foreground text-right">
-                    {i + 1}.
-                  </span>
+                  <span className="text-foreground text-right">{i + 1}.</span>
                   <div className="relative">
                     <Input
                       id={inputId}
                       autoFocus={!readOnly && i === 0}
-                      onFocus={() => setRevealedIndex(i)}
-                      onBlur={() => setRevealedIndex(undefined)}
                       readOnly={readOnly}
-                      className="w-32 text-center"
+                      className="w-32 text-center bg-muted border-zinc-200 text-muted-foreground"
                       list={readOnly ? undefined : "wordlist"}
-                      value={isRevealed ? word : word.length ? "•••••" : ""}
+                      value={word}
                       onChange={(e) => {
-                        if (revealedIndex !== i) {
-                          return;
-                        }
                         words[i] = e.target.value;
                         setMnemonic?.(
                           words
diff --git a/frontend/src/components/SidebarHint.tsx b/frontend/src/components/SidebarHint.tsx
index 059ec548..8eaf2965 100644
--- a/frontend/src/components/SidebarHint.tsx
+++ b/frontend/src/components/SidebarHint.tsx
@@ -1,3 +1,6 @@
+import { UpdateIcon } from "@radix-ui/react-icons";
+import { IconProps } from "@radix-ui/react-icons/dist/types";
+import { compare } from "compare-versions";
 import { ListTodo, LucideIcon, Zap } from "lucide-react";
 import { ReactElement } from "react";
 import { Link, useLocation } from "react-router-dom";
@@ -9,6 +12,8 @@ import {
   CardTitle,
 } from "src/components/ui/card";
 import { Progress } from "src/components/ui/progress";
+import { useAlbyInfo } from "src/hooks/useAlbyInfo";
+import { useInfo } from "src/hooks/useInfo";
 import { useOnboardingData } from "src/hooks/useOnboardingData";
 import useChannelOrderStore from "src/state/ChannelOrderStore";
 
@@ -16,6 +21,8 @@ function SidebarHint() {
   const { isLoading, checklistItems } = useOnboardingData();
   const { order } = useChannelOrderStore();
   const location = useLocation();
+  const { data: albyInfo } = useAlbyInfo();
+  const { data: info } = useInfo();
 
   // User has a channel order
   if (
@@ -67,14 +74,36 @@ function SidebarHint() {
       />
     );
   }
-}
 
+  if (info && albyInfo) {
+    const upToDate =
+      info.version &&
+      info.version.startsWith("v") &&
+      compare(info.version.substring(1), albyInfo.hub.latestVersion, ">=");
+
+    if (!upToDate) {
+      return (
+        <SidebarHintCard
+          icon={UpdateIcon}
+          title="Update Available!"
+          description="New version available! Visit your Alby Account dashboard to update your Hub."
+          buttonText="Update"
+          buttonLink={`https://getalby.com/update/hub?version=${info.version}`}
+        />
+      );
+    }
+  }
+}
 type SidebarHintCardProps = {
   title: string;
   description: string | ReactElement;
   buttonText: string;
   buttonLink: string;
-  icon: LucideIcon;
+  icon:
+    | LucideIcon
+    | React.ForwardRefExoticComponent<
+        IconProps & React.RefAttributes<SVGSVGElement>
+      >;
 };
 function SidebarHintCard({
   title,
diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx
index 4d69eb17..d024f54e 100644
--- a/frontend/src/components/layouts/SettingsLayout.tsx
+++ b/frontend/src/components/layouts/SettingsLayout.tsx
@@ -1,60 +1,14 @@
-import { Power } from "lucide-react";
-import React, { useState } from "react";
-import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import React from "react";
+import { NavLink, Outlet } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "src/components/ui/alert-dialog";
 import { buttonVariants } from "src/components/ui/button";
-import { LoadingButton } from "src/components/ui/loading-button";
-import { useToast } from "src/components/ui/use-toast";
 
 import { useInfo } from "src/hooks/useInfo";
 
 import { cn } from "src/lib/utils";
-import { request } from "src/utils/request";
 
 export default function SettingsLayout() {
-  const {
-    data: info,
-    mutate: refetchInfo,
-    hasMnemonic,
-    hasNodeBackup,
-  } = useInfo();
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const [shuttingDown, setShuttingDown] = useState(false);
-
-  const shutdown = React.useCallback(async () => {
-    setShuttingDown(true);
-    try {
-      await request("/api/stop", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      await refetchInfo();
-      setShuttingDown(false);
-      navigate("/", { replace: true });
-      toast({ title: "Your node has been turned off." });
-    } catch (error) {
-      console.error(error);
-      toast({
-        title: "Failed to shutdown node: " + error,
-        variant: "destructive",
-      });
-    }
-  }, [navigate, refetchInfo, toast]);
+  const { data: info, hasMnemonic, hasNodeBackup } = useInfo();
 
   return (
     <>
@@ -63,35 +17,9 @@ export default function SettingsLayout() {
         description="Manage your Alby Hub settings."
         breadcrumb={false}
         contentRight={
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <LoadingButton
-                variant="destructive"
-                size="icon"
-                loading={shuttingDown}
-              >
-                {!shuttingDown && <Power className="w-4 h-4" />}
-              </LoadingButton>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  Do you want to turn off Alby Hub?
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will turn off your Alby Hub and make your node offline.
-                  You won't be able to send or receive bitcoin until you unlock
-                  it.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={shutdown}>
-                  Continue
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          info?.version && (
+            <p className="text-sm text-muted-foreground">{info.version}</p>
+          )
         }
       />
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
@@ -101,9 +29,8 @@ export default function SettingsLayout() {
             <MenuItem to="/settings/change-unlock-password">
               Unlock Password
             </MenuItem>
-            {hasMnemonic && <MenuItem to="/settings/backup">Backup</MenuItem>}
-            {hasNodeBackup && (
-              <MenuItem to="/settings/node-backup">Migrate Node</MenuItem>
+            {(hasMnemonic || hasNodeBackup) && (
+              <MenuItem to="/settings/backup">Backup</MenuItem>
             )}
             {info?.albyAccountConnected && (
               <MenuItem to="/settings/alby-account">Your Alby Account</MenuItem>
@@ -113,6 +40,7 @@ export default function SettingsLayout() {
             )}
             <MenuItem to="/settings/developer">Developer</MenuItem>
             <MenuItem to="/settings/debug-tools">Debug Tools</MenuItem>
+            <MenuItem to="/settings/shutdown">Shutdown</MenuItem>
           </nav>
         </aside>
         <div className="flex-1 lg:max-w-2xl">
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index 3ec6aeb1..c535c92b 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -42,10 +42,12 @@ import DepositBitcoin from "src/screens/onchain/DepositBitcoin";
 import ConnectPeer from "src/screens/peers/ConnectPeer";
 import Peers from "src/screens/peers/Peers";
 import { AlbyAccount } from "src/screens/settings/AlbyAccount";
+import Backup from "src/screens/settings/Backup";
 import { ChangeUnlockPassword } from "src/screens/settings/ChangeUnlockPassword";
 import DebugTools from "src/screens/settings/DebugTools";
 import DeveloperSettings from "src/screens/settings/DeveloperSettings";
 import Settings from "src/screens/settings/Settings";
+import Shutdown from "src/screens/settings/Shutdown";
 import { ImportMnemonic } from "src/screens/setup/ImportMnemonic";
 import { RestoreNode } from "src/screens/setup/RestoreNode";
 import { SetupAdvanced } from "src/screens/setup/SetupAdvanced";
@@ -175,9 +177,14 @@ const routes = [
               },
               {
                 path: "backup",
-                element: <BackupMnemonic />,
+                element: <Backup />,
                 handle: { crumb: () => "Backup" },
               },
+              {
+                path: "mnemonic-backup",
+                element: <BackupMnemonic />,
+                handle: { crumb: () => "Key Backup" },
+              },
               {
                 path: "node-backup",
                 element: <BackupNode />,
@@ -194,6 +201,10 @@ const routes = [
                 path: "debug-tools",
                 element: <DebugTools />,
               },
+              {
+                path: "shutdown",
+                element: <Shutdown />,
+              },
             ],
           },
         ],
diff --git a/frontend/src/screens/BackupMnemonic.tsx b/frontend/src/screens/BackupMnemonic.tsx
index f086ed6e..10ed400d 100644
--- a/frontend/src/screens/BackupMnemonic.tsx
+++ b/frontend/src/screens/BackupMnemonic.tsx
@@ -1,13 +1,12 @@
 import {
+  CopyIcon,
   ExternalLinkIcon,
   LifeBuoy,
   ShieldAlert,
-  ShieldCheck,
 } from "lucide-react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import Container from "src/components/Container";
 import ExternalLink from "src/components/ExternalLink";
 import MnemonicInputs from "src/components/MnemonicInputs";
 import SettingsHeader from "src/components/SettingsHeader";
@@ -18,6 +17,7 @@ import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
 import { useToast } from "src/components/ui/use-toast";
 import { useInfo } from "src/hooks/useInfo";
+import { copyToClipboard } from "src/lib/clipboard";
 import { MnemonicResponse } from "src/types";
 import { handleRequestError } from "src/utils/handleRequestError";
 import { request } from "src/utils/request";
@@ -92,38 +92,39 @@ export function BackupMnemonic() {
   return (
     <>
       <SettingsHeader
-        title="Backup Your Keys"
-        description="Make sure to your backup somewhere safe"
+        title="Key Backup"
+        description="Key recovery phrase is a group of 12 random words that are the only way to recover access to your wallet on another machine or when you loose your unlock password."
       />
       {!decryptedMnemonic ? (
-        <Container>
-          <h1 className="text-xl font-medium">Please confirm it's you</h1>
-          <p className="text-center text-md text-muted-foreground mb-14">
-            Enter your unlock password to continue
+        <div>
+          <p className="text-muted-foreground">
+            Enter your unlock password to view your recovery phrase.
           </p>
           <form
             onSubmit={onSubmitPassword}
-            className="w-full flex flex-col gap-3"
+            className="max-w-md flex flex-col gap-3 mt-8"
           >
-            <>
-              <div className="grid gap-1.5">
-                <Label htmlFor="password">Password</Label>
-                <Input
-                  type="password"
-                  name="password"
-                  onChange={(e) => setUnlockPassword(e.target.value)}
-                  value={unlockPassword}
-                  placeholder="Password"
-                />
-              </div>
-              <LoadingButton loading={loading}>Continue</LoadingButton>
-            </>
+            <div className="grid gap-1.5 mb-8">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                type="password"
+                name="password"
+                onChange={(e) => setUnlockPassword(e.target.value)}
+                value={unlockPassword}
+                placeholder="Password"
+              />
+            </div>
+            <div className="flex justify-start">
+              <LoadingButton loading={loading}>
+                View Recovery Phrase
+              </LoadingButton>
+            </div>
           </form>
-        </Container>
+        </div>
       ) : (
         <form
           onSubmit={onSubmit}
-          className="flex mt-6 flex-col gap-2 mx-auto max-w-2xl text-sm"
+          className="flex mt-6 flex-col gap-2 mx-auto max-w-md text-sm"
         >
           <div className="flex flex-col gap-4 mb-4 text-muted-foreground">
             <div className="flex gap-2 items-center ">
@@ -148,14 +149,6 @@ export function BackupMnemonic() {
                 )}
               </span>
             </div>
-            <div className="flex gap-2 items-center">
-              <div className="shrink-0">
-                <ShieldCheck className="w-6 h-6" />
-              </div>
-              <span>
-                Make sure to write them down somewhere safe and private.
-              </span>
-            </div>
             <div className="flex gap-2 items-center text-destructive">
               <div className="shrink-0 ">
                 <ShieldAlert className="w-6 h-6" />
@@ -180,8 +173,13 @@ export function BackupMnemonic() {
             </ExternalLink>
           </div>
 
-          <MnemonicInputs mnemonic={decryptedMnemonic} readOnly={true}>
-            <div className="flex items-center mt-5">
+          <MnemonicInputs
+            mnemonic={decryptedMnemonic}
+            readOnly={true}
+            description="  Writing these words down, store them somewhere safe and keep them
+            secret."
+          >
+            <div className="flex items-center mt-5 text-muted-foreground">
               <Checkbox
                 id="backup"
                 required
@@ -193,7 +191,7 @@ export function BackupMnemonic() {
               </Label>
             </div>
             {backedUp && !info?.albyAccountConnected && (
-              <div className="flex mt-5">
+              <div className="flex mt-5 text-muted-foreground">
                 <Checkbox
                   id="backup2"
                   required
@@ -206,6 +204,15 @@ export function BackupMnemonic() {
                 </Label>
               </div>
             )}
+            <Button
+              type="button"
+              variant={"destructive"}
+              className="flex gap-2 items-center justify-center mt-5 mx-auto"
+              onClick={() => copyToClipboard(decryptedMnemonic, toast)}
+            >
+              <CopyIcon className="w-4 h-4 mr-2" />
+              Dangerously Copy
+            </Button>
           </MnemonicInputs>
           <div className="flex justify-center">
             <Button type="submit" size="lg">
diff --git a/frontend/src/screens/settings/Backup.tsx b/frontend/src/screens/settings/Backup.tsx
new file mode 100644
index 00000000..f27c43ec
--- /dev/null
+++ b/frontend/src/screens/settings/Backup.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import SettingsHeader from "src/components/SettingsHeader";
+import { Button } from "src/components/ui/button";
+import { Input } from "src/components/ui/input";
+import { Label } from "src/components/ui/label";
+import { LoadingButton } from "src/components/ui/loading-button";
+import { useToast } from "src/components/ui/use-toast";
+import { useInfo } from "src/hooks/useInfo";
+import { MnemonicResponse } from "src/types";
+import { request } from "src/utils/request";
+
+export default function Backup() {
+  const navigate = useNavigate();
+
+  const { toast } = useToast();
+  const { hasNodeBackup, hasMnemonic } = useInfo();
+
+  const [unlockPassword, setUnlockPassword] = React.useState("");
+
+  const [loading, setLoading] = React.useState(false);
+
+  const onSubmitPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setLoading(true);
+      const result = await request<MnemonicResponse>("/api/mnemonic", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          unlockPassword,
+        }),
+      });
+
+      if (result?.mnemonic) {
+        navigate("/settings/mnemonic-backup");
+      }
+    } catch (error) {
+      toast({
+        title: "Incorrect password",
+        description: "Failed to decrypt mnemonic.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <SettingsHeader
+        title="Backup"
+        description="Backup your wallet recovery phrase and your channels state."
+      />
+
+      {hasMnemonic && (
+        <div className="mb-12">
+          <div>
+            <h3 className="text-lg font-medium">Wallet Keys Backup</h3>
+            <p className="text-sm text-muted-foreground">
+              Key recovery phrase is a group of 12 random words that are the
+              only way to recover access to your wallet on another machine or
+              when you lose your unlock password.
+            </p>
+          </div>
+          <form
+            onSubmit={onSubmitPassword}
+            className="max-w-md flex flex-col gap-3 mt-8"
+          >
+            <div className="grid gap-1.5 mb-8">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                type="password"
+                name="password"
+                onChange={(e) => setUnlockPassword(e.target.value)}
+                value={unlockPassword}
+                placeholder="Password"
+              />
+              <p className="text-sm text-muted-foreground">
+                Enter your unlock password to view your recovery phrase.
+              </p>
+            </div>
+            <div className="flex justify-start">
+              <LoadingButton loading={loading} variant="secondary">
+                View Recovery Phrase
+              </LoadingButton>
+            </div>
+          </form>
+        </div>
+      )}
+      {hasNodeBackup && (
+        <div>
+          <h3 className="text-lg font-medium">Channels Backup</h3>
+          <p className="text-sm text-muted-foreground mb-8">
+            If you’d like to import or host your Hub on another host or machine,
+            you’ll need your channels’ backup file to import your channels
+            state. This instance of Hub will be stopped.
+          </p>
+          <Link to="/settings/node-backup">
+            <Button variant="secondary">Create Channels Backup</Button>
+          </Link>
+        </div>
+      )}
+
+      {!hasMnemonic && !hasNodeBackup && (
+        <p className="text-sm text-muted-foreground">
+          No wallet recovery phrase or channel state backup present.
+        </p>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/screens/settings/ChangeUnlockPassword.tsx b/frontend/src/screens/settings/ChangeUnlockPassword.tsx
index 70b06974..bed32f9d 100644
--- a/frontend/src/screens/settings/ChangeUnlockPassword.tsx
+++ b/frontend/src/screens/settings/ChangeUnlockPassword.tsx
@@ -1,7 +1,8 @@
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import React from "react";
 
-import Container from "src/components/Container";
 import SettingsHeader from "src/components/SettingsHeader";
+import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
@@ -57,12 +58,21 @@ export function ChangeUnlockPassword() {
   return (
     <>
       <SettingsHeader
-        title="Change Unlock Password"
-        description="Enter your current and new unlock password. Your node
-          will be stopped as part of this process."
+        title="Unlock Password"
+        description="Change unlock password to your Hub. Your node will restart after password change."
       />
-      <Container>
-        <form onSubmit={onSubmit} className="w-full flex flex-col gap-3">
+      <div>
+        <Alert variant={"destructive"} className="mb-8">
+          <AlertTitle>
+            <div className="flex gap-2">
+              <ExclamationTriangleIcon /> Important!
+            </div>
+          </AlertTitle>
+          <AlertDescription>
+            Password can't be reset or recovered. Make sure to back it up!
+          </AlertDescription>
+        </Alert>
+        <form onSubmit={onSubmit} className="max-w-md flex flex-col gap-8">
           <div className="grid gap-1.5">
             <Label htmlFor="current-password">Current Password</Label>
             <Input
@@ -96,9 +106,11 @@ export function ChangeUnlockPassword() {
               placeholder="Password"
             />
           </div>
-          <LoadingButton loading={loading}>Change Password</LoadingButton>
+          <div className="flex justify-start">
+            <LoadingButton loading={loading}>Change Password</LoadingButton>
+          </div>
         </form>
-      </Container>
+      </div>
     </>
   );
 }
diff --git a/frontend/src/screens/settings/Shutdown.tsx b/frontend/src/screens/settings/Shutdown.tsx
new file mode 100644
index 00000000..5b76f266
--- /dev/null
+++ b/frontend/src/screens/settings/Shutdown.tsx
@@ -0,0 +1,80 @@
+import { Power } from "lucide-react";
+import React, { useState } from "react";
+import Lottie from "react-lottie";
+import { useNavigate } from "react-router-dom";
+import animationData from "src/assets/lotties/loading.json";
+import SettingsHeader from "src/components/SettingsHeader";
+import { LoadingButton } from "src/components/ui/loading-button";
+import { useToast } from "src/components/ui/use-toast";
+import { useInfo } from "src/hooks/useInfo";
+import { request } from "src/utils/request";
+
+function Shutdown() {
+  const [shuttingDown, setShuttingDown] = useState(false);
+  const { mutate: refetchInfo } = useInfo();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animationData,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice",
+    },
+  };
+
+  const shutdown = React.useCallback(async () => {
+    setShuttingDown(true);
+    try {
+      await request("/api/stop", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      await refetchInfo();
+      setShuttingDown(false);
+      navigate("/", { replace: true });
+      toast({ title: "Your node has been turned off." });
+    } catch (error) {
+      console.error(error);
+      toast({
+        title: "Failed to shutdown node: " + error,
+        variant: "destructive",
+      });
+    }
+  }, [navigate, refetchInfo, toast]);
+
+  return (
+    <>
+      <SettingsHeader
+        title="Shutdown"
+        description="Shutting down Hub temporarily disables all connections and transacting with your wallet until you turn on your Hub with your unlock password."
+      />
+      {shuttingDown ? (
+        <div className="flex flex-col gap-5 justify-center text-center">
+          <Lottie options={defaultOptions} height={400} width={400} />
+          <h1 className="font-semibold text-lg font-headline">
+            Shutting down...
+          </h1>
+        </div>
+      ) : (
+        <>
+          <form onSubmit={shutdown} className="max-w-md flex flex-col gap-8">
+            <div className="flex justify-start">
+              <LoadingButton variant="destructive" loading={shuttingDown}>
+                <div className="flex gap-2 items-center">
+                  <Power className="w-4 h-4" /> Shutdown
+                </div>
+              </LoadingButton>
+            </div>
+          </form>
+        </>
+      )}
+    </>
+  );
+}
+
+export default Shutdown;
diff --git a/frontend/src/screens/setup/ImportMnemonic.tsx b/frontend/src/screens/setup/ImportMnemonic.tsx
index 10ad6470..75edb493 100644
--- a/frontend/src/screens/setup/ImportMnemonic.tsx
+++ b/frontend/src/screens/setup/ImportMnemonic.tsx
@@ -62,7 +62,7 @@ export function ImportMnemonic() {
     <>
       <form
         onSubmit={onSubmit}
-        className="flex flex-col gap-5 mx-auto max-w-2xl text-sm"
+        className="flex flex-col gap-5 mx-auto max-w-md text-sm"
       >
         <TwoColumnLayoutHeader
           title="Import Master Key"