diff --git a/src/root.tsx b/src/root.tsx
index 2749a7c..a6a687c 100644
--- a/src/root.tsx
+++ b/src/root.tsx
@@ -1,69 +1,22 @@
 // @refresh reload
-import { onCleanup, Suspense } from "solid-js";
+import { Suspense } from "solid-js";
 import {
     Body,
     ErrorBoundary,
-    FileRoutes,
     Head,
     Html,
     Link,
     Meta,
-    Routes,
     Scripts,
     Title,
-    useNavigate
 } from "solid-start";
 
 import "./root.css";
 
-import { App as CapacitorApp } from "@capacitor/app";
-import { Capacitor } from "@capacitor/core";
 
-import { ErrorDisplay, I18nProvider, Toaster } from "~/components";
+import { ErrorDisplay, I18nProvider } from "~/components";
 import { Provider as MegaStoreProvider } from "~/state/megaStore";
-
-function GlobalListeners() {
-    // listeners for native navigation handling
-    // Check if the platform is Android to handle back
-    if (Capacitor.getPlatform() === "android") {
-        const { remove } = CapacitorApp.addListener(
-            "backButton",
-            ({ canGoBack }) => {
-                if (!canGoBack) {
-                    CapacitorApp.exitApp();
-                } else {
-                    window.history.back();
-                }
-            }
-        );
-
-        // Ensure the listener is cleaned up when the component is destroyed
-        onCleanup(() => {
-            console.debug("cleaning up backButton listener");
-            remove();
-        });
-    }
-
-    // Handle app links on native platforms
-    if (Capacitor.isNativePlatform()) {
-        const navigate = useNavigate();
-        const { remove } = CapacitorApp.addListener("appUrlOpen", (data) => {
-            const url = new URL(data.url);
-            const path = url.pathname;
-            const urlParams = new URLSearchParams(url.search);
-
-            console.log(`Navigating to ${path}?${urlParams.toString()}`);
-            navigate(`${path}?${urlParams.toString()}`);
-        });
-
-        onCleanup(() => {
-            console.debug("cleaning up appUrlOpen listener");
-            remove();
-        });
-    }
-
-    return null;
-}
+import { Router } from "~/router";
 
 export default function Root() {
     return (
@@ -126,11 +79,7 @@ export default function Root() {
                     <ErrorBoundary fallback={(e) => <ErrorDisplay error={e} />}>
                         <I18nProvider>
                             <MegaStoreProvider>
-                                <Routes>
-                                    <GlobalListeners />
-                                    <FileRoutes />
-                                </Routes>
-                                <Toaster />
+                                <Router />
                             </MegaStoreProvider>
                         </I18nProvider>
                     </ErrorBoundary>
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..a9afccf
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,74 @@
+// @refresh reload
+import { Match, onCleanup, Switch } from "solid-js";
+import { FileRoutes, Routes, useNavigate } from "solid-start";
+
+import "./root.css";
+
+import { App as CapacitorApp } from "@capacitor/app";
+import { Capacitor } from "@capacitor/core";
+
+import { SetupErrorDisplay, Toaster } from "~/components";
+
+import { useMegaStore } from "./state/megaStore";
+
+function GlobalListeners() {
+    // listeners for native navigation handling
+    // Check if the platform is Android to handle back
+    if (Capacitor.getPlatform() === "android") {
+        const { remove } = CapacitorApp.addListener(
+            "backButton",
+            ({ canGoBack }) => {
+                if (!canGoBack) {
+                    CapacitorApp.exitApp();
+                } else {
+                    window.history.back();
+                }
+            }
+        );
+
+        // Ensure the listener is cleaned up when the component is destroyed
+        onCleanup(() => {
+            console.debug("cleaning up backButton listener");
+            remove();
+        });
+    }
+
+    // Handle app links on native platforms
+    if (Capacitor.isNativePlatform()) {
+        const navigate = useNavigate();
+        const { remove } = CapacitorApp.addListener("appUrlOpen", (data) => {
+            const url = new URL(data.url);
+            const path = url.pathname;
+            const urlParams = new URLSearchParams(url.search);
+
+            console.log(`Navigating to ${path}?${urlParams.toString()}`);
+            navigate(`${path}?${urlParams.toString()}`);
+        });
+
+        onCleanup(() => {
+            console.debug("cleaning up appUrlOpen listener");
+            remove();
+        });
+    }
+
+    return null;
+}
+
+export function Router() {
+    const [state, _] = useMegaStore();
+
+    return (
+        <Switch>
+            <Match when={state.setup_error}>
+                <SetupErrorDisplay initialError={state.setup_error!} />
+            </Match>
+            <Match when={true}>
+                <Routes>
+                    <GlobalListeners />
+                    <FileRoutes />
+                </Routes>
+                <Toaster />
+            </Match>
+        </Switch>
+    );
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 6fe0e92..0f89d44 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,19 +1,105 @@
-import { Match, Switch } from "solid-js";
+import { Match, Show, Suspense, Switch } from "solid-js";
+import { A } from "solid-start";
 
-import { App, FullscreenLoader, SetupErrorDisplay } from "~/components";
+import settings from "~/assets/icons/settings.svg";
+import pixelLogo from "~/assets/mutiny-pixel-logo.png";
+import plusLogo from "~/assets/mutiny-plus-logo.png";
+import {
+    BalanceBox,
+    BetaWarningModal,
+    Card,
+    CombinedActivity,
+    DecryptDialog,
+    DefaultMain,
+    LoadingIndicator,
+    LoadingShimmer,
+    NavBar,
+    OnboardWarning,
+    PendingNwc,
+    ReloadPrompt,
+    SafeArea,
+    VStack
+} from "~/components";
+import { useI18n } from "~/i18n/context";
+import { FeedbackLink } from "~/routes/Feedback";
 import { useMegaStore } from "~/state/megaStore";
 
-export default function Home() {
-    const [state, _] = useMegaStore();
+export default function App() {
+    const i18n = useI18n();
+    const [state, _actions] = useMegaStore();
 
     return (
-        <Switch fallback={<FullscreenLoader />}>
-            <Match when={state.setup_error}>
-                <SetupErrorDisplay initialError={state.setup_error!} />
-            </Match>
-            <Match when={true}>
-                <App />
-            </Match>
-        </Switch>
+        <SafeArea>
+            <DefaultMain>
+                <LoadingIndicator />
+                <header class="mb-2 mt-4 flex w-full items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <Switch>
+                            <Match when={state.mutiny_plus}>
+                                <img
+                                    id="mutiny-logo"
+                                    src={plusLogo}
+                                    class="h-[25px] w-[86px]"
+                                    alt="Mutiny Plus logo"
+                                />
+                            </Match>
+                            <Match when={true}>
+                                <img
+                                    id="mutiny-logo"
+                                    src={pixelLogo}
+                                    class="h-[25px] w-[75px]"
+                                    alt="Mutiny logo"
+                                />
+                            </Match>
+                        </Switch>
+                        <Show
+                            when={
+                                !state.wallet_loading &&
+                                state.mutiny_wallet?.get_network() !== "bitcoin"
+                            }
+                        >
+                            <div class="text-white-400 -my-1 box-border w-fit rounded bg-neutral-800 px-2 py-1 text-xs  uppercase">
+                                {state.mutiny_wallet?.get_network()}
+                            </div>
+                        </Show>
+                    </div>
+                    <A
+                        class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
+                        href="/settings"
+                    >
+                        <img src={settings} alt="Settings" class="h-6 w-6" />
+                    </A>
+                </header>
+                <Show when={!state.wallet_loading}>
+                    <OnboardWarning />
+                    <ReloadPrompt />
+                </Show>
+                <BalanceBox loading={state.wallet_loading} />
+                <Suspense>
+                    <Show when={!state.wallet_loading && !state.safe_mode}>
+                        <PendingNwc />
+                    </Show>
+                </Suspense>
+                <Card title={i18n.t("activity.title")}>
+                    <div class="p-1" />
+                    <VStack>
+                        <Suspense>
+                            <Show
+                                when={!state.wallet_loading}
+                                fallback={<LoadingShimmer />}
+                            >
+                                <CombinedActivity limit={3} />
+                            </Show>
+                        </Suspense>
+                    </VStack>
+                </Card>
+                <div class="mt-4 self-center">
+                    <FeedbackLink />
+                </div>
+            </DefaultMain>
+            <DecryptDialog />
+            <BetaWarningModal />
+            <NavBar activeTab="home" />
+        </SafeArea>
     );
 }