diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index b27464a..384e595 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -170,123 +170,125 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                     <img
                                         src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png"
                                         alt="Logo"
-                                        style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10 }}
+                                        style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10, marginTop: 10 }}
                                     />
                                 ) : (
                                     <img
                                         src="https://cdn.tombutcher.work/logos/logo-horizontal.svg"
                                         alt="Logo"
-                                        style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10 }}
+                                        style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10, marginTop: 10 }}
                                     />
                                 )}
                             </>
                         )}
-                        <Card
-                            style={{
-                                background: darkMode ? "#00000025" : "#fffffff2",
-                                borderRadius: isMobile ? "0px" : "20px",
-                                width: isMobile ? "100vw" : "450px",
-                                zIndex: 1,
-                                height: isMobile ? "100vh" : "unset",
-                                padding: "26px 15px 30px 15px",
-                                boxShadow: darkMode ? "0px 5px 30px 5px rgb(200 200 200 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
-                            }}
-                            variant="borderless"
-                            styles={{
-                                body: {
-                                    padding: 0,
-                                    height: "100%"
-                                }
-                            }}
-                        >
-                            <Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
-                                {isMobile && (
-                                    <Flex style={{ margin: "0 15px", paddingBottom: "16px" }} gap={"middle"} vertical>
-                                        <img
-                                            src="https://cdn.tombutcher.work/logos/logo-auth.png"
-                                            alt="Logo"
-                                            style={{ width: "60%", margin: "0", marginBottom: "4px" }}
-                                        />{" "}
-                                        <Divider style={{ margin: "4px 0" }} />
-                                    </Flex>
-                                )}
-
-                                <Flex style={{ margin: "0 15px", paddingBottom: "18px" }} vertical gap={"middle"}>
-                                    {headerNode && (
-                                        <>
-                                            <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }} className={darkMode ? "dark" : ""}>
-                                                {headerNode}
-                                            </Title>
-                                            {isMobile && <Divider style={{ margin: "4px 0" }} />}
-                                        </>
-                                    )}
-
-                                    {showImutableUsername && (
-                                        <>
-                                            <Card
-                                                style={{ display: "flex", alignItems: "center", margin: 0 }}
-                                                styles={{ body: { padding: "8px 12px" } }}
-                                            >
-                                                <Flex gap={"small"}>
-                                                    <img
-                                                        src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
-                                                        width={14}
-                                                        style={{ marginTop: "0px" }}
-                                                    />
-                                                    <Text strong>{auth.attemptedUsername}</Text>
-                                                    <Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
-                                                        {msg("restartLoginTooltip")}
-                                                    </Link>
-                                                </Flex>
-                                            </Card>
-                                            {isMobile && <Divider style={{ margin: "4px 0" }} />}
-                                        </>
-                                    )}
-                                    {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
-                                    {showMessage && (
-                                        <>
-                                            <Alert
-                                                message={<span dangerouslySetInnerHTML={{ __html: kcSanitize(message.summary) }} />}
-                                                type={
-                                                    message.type === "error"
-                                                        ? "error"
-                                                        : message.type === "success"
-                                                          ? "success"
-                                                          : message.type === "warning"
-                                                            ? "warning"
-                                                            : "info"
-                                                }
-                                                showIcon
-                                                style={{ margin: 0, width: "100%" }}
-                                            />
-                                            {isMobile && <Divider style={{ margin: "4px 0" }} />}
-                                        </>
-                                    )}
-                                </Flex>
-
-                                <Flex vertical style={{ height: "100%" }} gap={"middle"}>
-                                    {children}
+                        <Flex vertical gap={"middle"}>
+                            <Card
+                                style={{
+                                    background: darkMode ? "#00000025" : "#fffffff2",
+                                    borderRadius: isMobile ? "0px" : "20px",
+                                    width: isMobile ? "100vw" : "450px",
+                                    zIndex: 1,
+                                    height: isMobile ? "100vh" : "unset",
+                                    padding: "26px 15px 30px 15px",
+                                    boxShadow: darkMode ? "0px 5px 30px 5px rgb(200 200 200 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
+                                }}
+                                variant="borderless"
+                                styles={{
+                                    body: {
+                                        padding: 0,
+                                        height: "100%"
+                                    }
+                                }}
+                            >
+                                <Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
                                     {isMobile && (
-                                        <Flex gap={"large"} justify="center">
-                                            {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
-                                            {auth !== undefined && auth.showTryAnotherWayLink && (
-                                                <FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
-                                            )}
-                                            {displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
+                                        <Flex style={{ margin: "0 15px", paddingBottom: "16px" }} gap={"middle"} vertical>
+                                            <img
+                                                src="https://cdn.tombutcher.work/logos/logo-auth.png"
+                                                alt="Logo"
+                                                style={{ width: "60%", margin: "0", marginBottom: "4px" }}
+                                            />{" "}
+                                            <Divider style={{ margin: "4px 0" }} />
                                         </Flex>
                                     )}
+
+                                    <Flex style={{ margin: "0 15px", paddingBottom: "18px" }} vertical gap={"middle"}>
+                                        {headerNode && (
+                                            <>
+                                                <Title level={2} style={{ marginBottom: "0", flexGrow: 1 }} className={darkMode ? "dark" : ""}>
+                                                    {headerNode}
+                                                </Title>
+                                                {isMobile && <Divider style={{ margin: "4px 0" }} />}
+                                            </>
+                                        )}
+
+                                        {showImutableUsername && (
+                                            <>
+                                                <Card
+                                                    style={{ display: "flex", alignItems: "center", margin: 0 }}
+                                                    styles={{ body: { padding: "8px 12px" } }}
+                                                >
+                                                    <Flex gap={"small"}>
+                                                        <img
+                                                            src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
+                                                            width={14}
+                                                            style={{ marginTop: "0px" }}
+                                                        />
+                                                        <Text strong>{auth.attemptedUsername}</Text>
+                                                        <Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
+                                                            {msg("restartLoginTooltip")}
+                                                        </Link>
+                                                    </Flex>
+                                                </Card>
+                                                {isMobile && <Divider style={{ margin: "4px 0" }} />}
+                                            </>
+                                        )}
+                                        {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+                                        {showMessage && (
+                                            <>
+                                                <Alert
+                                                    message={<span dangerouslySetInnerHTML={{ __html: kcSanitize(message.summary) }} />}
+                                                    type={
+                                                        message.type === "error"
+                                                            ? "error"
+                                                            : message.type === "success"
+                                                              ? "success"
+                                                              : message.type === "warning"
+                                                                ? "warning"
+                                                                : "info"
+                                                    }
+                                                    showIcon
+                                                    style={{ margin: 0, width: "100%" }}
+                                                />
+                                                {isMobile && <Divider style={{ margin: "4px 0" }} />}
+                                            </>
+                                        )}
+                                    </Flex>
+
+                                    <Flex vertical style={{ height: "100%" }} gap={"middle"}>
+                                        {children}
+                                        {isMobile && (
+                                            <Flex gap={"large"} justify="center">
+                                                {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
+                                                {auth !== undefined && auth.showTryAnotherWayLink && (
+                                                    <FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
+                                                )}
+                                                {displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
+                                            </Flex>
+                                        )}
+                                    </Flex>
                                 </Flex>
-                            </Flex>
-                        </Card>
-                        {!isMobile && (
-                            <Flex gap={"middle"}>
-                                {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
-                                {auth !== undefined && auth.showTryAnotherWayLink && (
-                                    <FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
-                                )}
-                                {displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
-                            </Flex>
-                        )}
+                            </Card>
+                            {!isMobile && (
+                                <Flex gap={"middle"} style={{ width: "100%" }} justify="center">
+                                    {client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
+                                    {auth !== undefined && auth.showTryAnotherWayLink && (
+                                        <FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
+                                    )}
+                                    {displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
+                                </Flex>
+                            )}
+                        </Flex>
 
                         {!isMobile && (
                             <Flex style={{ zIndex: 1 }} gap={"large"}>