diff --git a/README.md b/README.md
index f2e3996..b364d73 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ With the integration of Tailwind CSS, you get access to utility-first CSS for ra
 -   Error
 -   Code
 -   Delete Account Confirm
+-   Delete Credential
 
 Stay tuned as more pages are upgraded with Tailwind CSS and ShadCN UI components!
 
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
index a9a704d..6b6b6d2 100644
--- a/src/login/KcPage.tsx
+++ b/src/login/KcPage.tsx
@@ -11,6 +11,7 @@ import Terms from "./pages/Terms";
 import Error from "./pages/Error";
 import Code from "./pages/Code";
 import DeleteAccountConfirm from "./pages/DeleteAccountConfirm";
+import DeleteCredential from "./pages/DeleteCredential";
 const UserProfileFormFields = lazy(() => import("./UserProfileFormFields"));
 
 // Base component to render DefaultPage
@@ -46,6 +47,16 @@ export default function KcPage(props: { kcContext: KcContext }) {
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
+                    case "delete-credential.ftl":
+                        return (
+                            <DeleteCredential
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classescustom}
+                                Template={CustomTemplate}
+                                doUseDefaultCss={true}
+                            />
+                        );
                     case "delete-account-confirm.ftl":
                         return (
                             <DeleteAccountConfirm
diff --git a/src/login/pages/DeleteCredential.stories.tsx b/src/login/pages/DeleteCredential.stories.tsx
new file mode 100644
index 0000000..e754806
--- /dev/null
+++ b/src/login/pages/DeleteCredential.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "delete-credential.ftl" });
+
+const meta = {
+    title: "login/delete-credential.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
diff --git a/src/login/pages/DeleteCredential.tsx b/src/login/pages/DeleteCredential.tsx
new file mode 100644
index 0000000..5b4fe84
--- /dev/null
+++ b/src/login/pages/DeleteCredential.tsx
@@ -0,0 +1,51 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { buttonVariants } from "../../components/ui/button";
+export default function DeleteCredential(props: PageProps<Extract<KcContext, { pageId: "delete-credential.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { msgStr, msg } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, credentialLabel } = kcContext;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("deleteCredentialTitle", credentialLabel)}
+        >
+            <div id="kc-delete-text" className="mb-5">
+                {msg("deleteCredentialMessage", credentialLabel)}
+            </div>
+            <form className="form-actions" action={url.loginAction} method="POST">
+                <div className="space-x-2 ">
+                    <input
+                        className={buttonVariants({ variant: "default" })}
+                        name="accept"
+                        id="kc-accept"
+                        type="submit"
+                        value={msgStr("doConfirmDelete")}
+                    />
+                    <input
+                        className={buttonVariants({ variant: "secondary" })}
+                        name="cancel-aia"
+                        value={msgStr("doCancel")}
+                        id="kc-decline"
+                        type="submit"
+                    />
+                </div>
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}
diff --git a/src/login/pages/legacy/DeleteCredentialLegacy.tsx b/src/login/pages/legacy/DeleteCredentialLegacy.tsx
new file mode 100644
index 0000000..17c0fe2
--- /dev/null
+++ b/src/login/pages/legacy/DeleteCredentialLegacy.tsx
@@ -0,0 +1,47 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../../KcContext";
+import type { I18n } from "../../i18n";
+
+export default function DeleteCredential(props: PageProps<Extract<KcContext, { pageId: "delete-credential.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { msgStr, msg } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, credentialLabel } = kcContext;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("deleteCredentialTitle", credentialLabel)}
+        >
+            <div id="kc-delete-text">{msg("deleteCredentialMessage", credentialLabel)}</div>
+            <form className="form-actions" action={url.loginAction} method="POST">
+                <input
+                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                    name="accept"
+                    id="kc-accept"
+                    type="submit"
+                    value={msgStr("doConfirmDelete")}
+                />
+                <input
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                    name="cancel-aia"
+                    value={msgStr("doCancel")}
+                    id="kc-decline"
+                    type="submit"
+                />
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}