diff --git a/packages/features/src/components/app-layout.tsx b/packages/features/src/components/app-layout.tsx
index abb13386..0e120576 100644
--- a/packages/features/src/components/app-layout.tsx
+++ b/packages/features/src/components/app-layout.tsx
@@ -5,9 +5,10 @@ import { useLocation } from "react-router-dom"
 
 interface AppLayoutProps {
   children: React.ReactNode
+  className?: string
 }
 
-export const AppLayout = ({ children }: AppLayoutProps) => {
+export const AppLayout = ({ children, className }: AppLayoutProps) => {
   const location = useLocation()
   // biome-ignore lint: dependent just on location
   useEffect(() => {
@@ -17,7 +18,10 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
     }
   }, [location])
   return (
-    <div className="flex flex-col flex-1 bg-background" data-testid="appLayout">
+    <div
+      className={`flex flex-col flex-1 bg-background ${className}`}
+      data-testid="appLayout"
+    >
       {children}
     </div>
   )
diff --git a/packages/features/src/credentials/views/credential-details.tsx b/packages/features/src/credentials/views/credential-details.tsx
index dc54ba21..855f5c6b 100644
--- a/packages/features/src/credentials/views/credential-details.tsx
+++ b/packages/features/src/credentials/views/credential-details.tsx
@@ -17,16 +17,22 @@ export const CredentialDetailsView = ({
 }: CredentialDetailsViewProps) => {
   const { t } = useTranslation()
   return (
-    <AppLayout>
-      <MenuBar variant="back" onBackClicked={onGoBack} />
-      <section className="flex flex-col flex-1 justify-between px-8 pb-8 gap-8">
-        <h1 className="text-3xl w-full">{id}</h1>
-        <div className="break-all flex-1 p-4 bg-secondary rounded-xl whitespace-pre-wrap overflow-y-scroll">
+    <AppLayout className="h-screen">
+      <section className="flex flex-col justify-between w-full h-full pb-8">
+        <MenuBar variant="back" onBackClicked={onGoBack} />
+        <h1 className="text-3xl w-full px-8">{id}</h1>
+        <div className="break-all flex-1 p-4 bg-secondary rounded-xl whitespace-pre-wrap overflow-y-auto mx-8 mt-8">
           {credential}
         </div>
-        <button type="button" className="btn btn-error" onClick={onDelete}>
-          {t("credentials.delete")}
-        </button>
+        <div className="px-8 pt-8 w-full max-w-md self-center">
+          <button
+            type="button"
+            className="btn btn-error w-full"
+            onClick={onDelete}
+          >
+            {t("credentials.delete")}
+          </button>
+        </div>
       </section>
     </AppLayout>
   )