diff --git a/apps/portal/src/app/features/auth/components/AuthShell.tsx b/apps/portal/src/app/features/auth/components/AuthShell.tsx
index 621f6fc89..74a6f62fb 100644
--- a/apps/portal/src/app/features/auth/components/AuthShell.tsx
+++ b/apps/portal/src/app/features/auth/components/AuthShell.tsx
@@ -40,9 +40,8 @@ interface AuthShellProps {
 }
 
 /**
- * Two-pane auth layout: a branded gradient panel (hidden below `md`) and the
- * form pane. Standalone (rendered outside the portal chrome and i18n provider),
- * so copy here is plain English to match the other auth pages.
+ * Two-pane auth card: a centered card with a form panel (left) and a branded
+ * gradient panel (right, hidden below `lg`). Inspired by the UM login layout.
  */
 export function AuthShell({
   children,
@@ -53,104 +52,115 @@ export function AuthShell({
   const heroGradient = theme.other.heroGradient as string;
 
   return (
-    <Flex mih="100vh">
-      {/* ---- Brand panel ---------------------------------------------- */}
+    <Flex
+      mih="100vh"
+      align="center"
+      justify="center"
+      style={{ background: '#f7f8fa' }}
+      p="md"
+    >
       <Box
-        visibleFrom="md"
-        w={500}
-        p={48}
-        pos="relative"
-        style={{ background: heroGradient, overflow: 'hidden' }}
+        mx="auto"
+        maw={1280}
+        w="100%"
+        bg="white"
+        p={12}
+        style={{
+          borderRadius: rem(16),
+          boxShadow: '0 20px 60px rgba(0,0,0,0.15)',
+          overflow: 'hidden',
+        }}
       >
-        {/* Decorative blurred orbs for depth */}
-        <Box
-          pos="absolute"
-          top={-120}
-          right={-80}
-          w={360}
-          h={360}
-          style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
-        />
-        <Box
-          pos="absolute"
-          bottom={-140}
-          left={-100}
-          w={320}
-          h={320}
-          style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
-        />
+        <Flex direction={{ base: 'column', lg: 'row' }}>
+          {/* ---- Form panel (left) ---------------------------------------- */}
+          <Box
+            w={{ base: '100%', lg: '50%' }}
+            px="xl"
+            py={32}
+            style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
+          >
+            {children}
+          </Box>
 
-        <Flex
-          direction="column"
-          h="100%"
-          pos="relative"
-          style={{ zIndex: 1 }}
-        >
-          <Box style={{ flex: 1 }} />
+          {/* ---- Brand panel (right) -------------------------------------- */}
+          <Box
+            visibleFrom="lg"
+            w="50%"
+            p="lg"
+            pos="relative"
+            style={{ background: heroGradient, overflow: 'hidden' }}
+          >
+            {/* Decorative blurred orbs */}
+            <Box
+              pos="absolute"
+              top={-80}
+              right={-40}
+              w={240}
+              h={240}
+              style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
+            />
+            <Box
+              pos="absolute"
+              bottom={-80}
+              left={-60}
+              w={220}
+              h={220}
+              style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
+            />
 
-          <Stack gap="xl" maw={400}>
-            <Center>
-              <Box
-                component="img"
-                src="/brand/ema-white.png"
-                alt="EMA Portal"
-                style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
-              />
-            </Center>
+            <Stack
+              gap="lg"
+              pos="relative"
+              style={{ zIndex: 1 }}
+              h="100%"
+              justify="center"
+            >
+              <Center>
+                <Box
+                  component="img"
+                  src="/brand/ema-white.png"
+                  alt="EMA Portal"
+                  style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
+                />
+              </Center>
 
-            <Stack gap="sm">
-              <Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}>
-                {brandTitle}
-              </Title>
-              <Text fz="md" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
-                {brandSubtitle}
+              <Stack gap={6}>
+                <Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
+                  {brandTitle}
+                </Title>
+                <Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
+                  {brandSubtitle}
+                </Text>
+              </Stack>
+
+              <Stack gap="sm">
+                {FEATURES.map((feature) => (
+                  <Group key={feature} gap="sm" wrap="nowrap">
+                    <Center
+                      w={22}
+                      h={22}
+                      style={{
+                        borderRadius: '50%',
+                        background: 'rgba(255,255,255,0.2)',
+                        flexShrink: 0,
+                      }}
+                    >
+                      <IconCheck size={12} color="white" stroke={2.4} />
+                    </Center>
+                    <Text c="white" fz="sm" fw={500}>
+                      {feature}
+                    </Text>
+                  </Group>
+                ))}
+              </Stack>
+
+              <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
+                © 2026 Ethiopian Maritime Authority
               </Text>
             </Stack>
-
-            <Stack gap="md">
-              {FEATURES.map((feature) => (
-                <Group key={feature} gap="sm" wrap="nowrap">
-                  <Center
-                    w={24}
-                    h={24}
-                    style={{
-                      borderRadius: '50%',
-                      background: 'rgba(255,255,255,0.2)',
-                      flexShrink: 0,
-                    }}
-                  >
-                    <IconCheck size={14} color="white" stroke={2.4} />
-                  </Center>
-                  <Text c="white" fz="sm" fw={500}>
-                    {feature}
-                  </Text>
-                </Group>
-              ))}
-            </Stack>
-          </Stack>
-
-          <Box style={{ flex: 1 }} />
-
-          <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
-            © 2026 Ethiopian Maritime Authority
-          </Text>
+          </Box>
         </Flex>
       </Box>
-
-      {/* ---- Form panel ----------------------------------------------- */}
-      <Center flex={1} p="xl">
-        <Box w="100%" maw={420}>
-          <Center hiddenFrom="md" mb="xl">
-            <Box
-              component="img"
-              src="/ema-logo.png"
-              alt="EMA Portal"
-              style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
-            />
-          </Center>
-          {children}
-        </Box>
-      </Center>
     </Flex>
   );
 }