diff --git a/.github/workflows/web-deploy.yml b/.github/workflows/web-deploy.yml
index 32fee17ad4..6c2691ca35 100644
--- a/.github/workflows/web-deploy.yml
+++ b/.github/workflows/web-deploy.yml
@@ -93,3 +93,13 @@ jobs:
                   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                   command: pages deploy --project-name=ente --commit-dirty=true --branch=deploy/payments web/apps/payments/dist
+
+            - name: Build locker
+              run: yarn build:locker
+
+            - name: Publish locker
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  command: pages deploy --project-name=ente --commit-dirty=true --branch=deploy/locker web/apps/locker/out
diff --git a/web/apps/locker/src/pages/index.tsx b/web/apps/locker/src/pages/index.tsx
index 348024e30f..32f0bcde2a 100644
--- a/web/apps/locker/src/pages/index.tsx
+++ b/web/apps/locker/src/pages/index.tsx
@@ -4,9 +4,21 @@ import React from "react";
 
 const Page: React.FC = () => {
     return (
-        <Stack sx={{ justifyContent: "center", gap: 2 }}>
-            <EnteLogo height={45} />
-            <Typography variant="h2">Coming soon</Typography>
+        <Stack
+            sx={{
+                justifyContent: "center",
+                minHeight: "100vh",
+                gap: 2,
+                bgcolor: "accent.main",
+                color: "white",
+                textAlign: "center",
+            }}
+        >
+            <EnteLogo height={42} />
+            <Typography variant="h1" sx={{ fontWeight: "bold" }}>
+                Locker
+            </Typography>
+            <Typography variant="small">— Coming soon —</Typography>
         </Stack>
     );
 };