diff --git a/.storybook/main.ts b/.storybook/main.ts
index c892705..4d01864 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -5,7 +5,8 @@ const config: StorybookConfig = {
   staticDirs: [{ from: '../stories/public', to: '/' }],
   addons: [
     '@storybook/addon-essentials',
-    '@storybook/addon-links'
+    '@storybook/addon-links',
+    'storybook-addon-vue-mdx'
   ],
 
   core: {
diff --git a/dev.ts b/dev.ts
index 5552919..8af718c 100755
--- a/dev.ts
+++ b/dev.ts
@@ -27,7 +27,15 @@ window['PlusAuth'] = {
       lower_case: 4
     }
   },
+  prompt: {
+    // mode: 'check_email'
+  },
+  // error: {
+  //   error: 'invalid_password'
+  // },
   details: {
+    // dataUrl: 'data:image/png;base64,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',
+    // secret: 'ASFG$E@WRF$ERF$EFG$REG',
     push_code: '02',
     phone_number: '+90********23',
     scopes: {
diff --git a/index.html b/index.html
index c94bbba..dfee638 100755
--- a/index.html
+++ b/index.html
@@ -1,58 +1,80 @@
 <!DOCTYPE html>
 <html lang="en">
-<head >
-  <meta charset="UTF-8" >
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
-  <title >Title</title >
-  <style id="dev-style">
-    html, body{
-      margin: 0;
-      height: 100%;
-    }
-    .dev-navbar {
-      position: absolute;
-      left: 0;
-      display: flex;
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+				content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+	<title>Title</title>
+	<style id="dev-style">
+		html, body {
+			margin: 0;
+			height: 100%;
+		}
+
+		.dev-navbar {
+			position: absolute;
+			left: 0;
+			display: flex;
 			font-family: sans-serif;
-      flex-direction: column;
-      z-index: 123213;
-    }
-    .dev-navbar a {
-      display: inline-flex;
+			flex-direction: column;
+			z-index: 123213;
+		}
+
+		.dev-navbar a {
+			display: inline-flex;
 			color: inherit;
 			text-decoration: inherit;
-      padding: 10px;
-      text-align: center;
-      border: 1px solid #dedede;
-      text-decoration: none;
-    }
-    #app{
-      height: 100%;
-    }
-  </style >
-</head >
-<body >
+			padding: 10px;
+			text-align: center;
+			border: 1px solid #dedede;
+			text-decoration: none;
+		}
+
+		#app {
+			height: 100%;
+		}
+
+		@media (max-width: 1200px) {
+			.dev-navbar {
+				display: none;
+			}
+		}
+
+	</style>
+</head>
+<body>
 <div class="pa__dev-navbar">
-  <a href="/signin" > Login </a >
-  <a href="/signup" > Register </a >
-  <a href="/signin/consent" > Consent </a >
-  <a href="/signin/passwordless/email" > Passwordless Email </a >
-  <a href="/signin/passwordless/sms" > Passwordless Sms </a >
-  <a href="/signin/passwordless/otp" > Passwordless OTP </a >
-  <a href="/signin/passwordless/push" > Passwordless Push </a >
-  <a href="/account/verifyEmail" > VerifyEmail </a >
-  <a href="/account/updateMissingInformation" > Fill Missing </a >
-  <a href="/account/resetPassword/token" > Password Reset </a >
-  <a href="/signin/recovery" > Password Recovery </a >
-  <a href="/signin/challenge" > Challenge </a >
-  <a href="/signin/challenge/sms" > SMS </a >
-  <a href="/signin/challenge/email" > EMAIL </a >
-  <a href="/signin/challenge/otp" > OTP </a >
-  <a href="/signin/challenge/fv" > FingerVein </a >
-  <a href="/signin/challenge/push" > Push </a >
-  <a href="/signin/challenge/webauthn" > WebAuthN </a >
+	<a href="/signin"> Login </a>
+	<a href="/signup"> Register </a>
+	<a href="/signin/consent"> Consent </a>
+	<a href="/signin/passwordless/email"> Passwordless Email </a>
+	<a href="/signin/passwordless/sms"> Passwordless Sms </a>
+	<a href="/signin/passwordless/otp"> Passwordless OTP </a>
+	<a href="/signin/passwordless/push"> Passwordless Push </a>
+	<a href="/account/verifyEmail"> VerifyEmail </a>
+	<a href="/account/updateMissingInformation"> Fill Missing </a>
+	<a href="/account/resetPassword/token"> Password Reset </a>
+	<a href="/signin/recovery"> Password Recovery </a>
+	<a href="/signin/challenge"> Challenge </a>
+	<a href="/signin/challenge/sms"> SMS </a>
+	<a href="/signin/challenge/email"> EMAIL </a>
+	<a href="/signin/challenge/otp"> OTP </a>
+	<a href="/signin/challenge/fv"> FingerVein </a>
+	<a href="/signin/challenge/push"> Push </a>
+	<a href="/signin/challenge/webauthn"> WebAuthN </a>
 </div>
-<div id="pa__app" ></div>
-<script src="/dev.ts" type="module"></script >
-</body >
-</html >
+<div id="pa__app">
+	<template id="pa-content-footer">
+		<style>
+			.my-class {
+				background: red;
+			}
+		</style>
+		<div class="my-class"> test ssss</div>
+		<h1> TEst 22e2323 </h1>
+		<a href="/signin">Signin</a>
+	</template>
+</div>
+<script src="/dev.ts" type="module"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
index 0bb8b72..e0e95ca 100755
--- a/package.json
+++ b/package.json
@@ -34,11 +34,12 @@
     "@popperjs/core": "2.11.8",
     "@simplewebauthn/browser": "^10.0.0",
     "deepmerge": "4.3.1",
-    "vue": "^3.4.26"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+		"storybook-addon-vue-mdx": "^0.1.5",
     "@release-it/conventional-changelog": "^8.0.1",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-interactions": "^8.0.10",
@@ -55,10 +56,10 @@
     "@types/jest": "^29.5.12",
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.26",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vue/language-service": "^2.0.16",
-    "@vue/shared": "^3.4.26",
-    "@vue/test-utils": "^2.4.5",
+    "@vue/shared": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
     "core-js": "^3.37.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3254d5c..656d641 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
         specifier: 4.3.1
         version: 4.3.1
       vue:
-        specifier: ^3.4.26
-        version: 3.4.26(typescript@5.4.5)
+        specifier: ^3.4.27
+        version: 3.4.27(typescript@5.4.5)
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.3.0
@@ -59,10 +59,10 @@ importers:
         version: 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@storybook/vue3':
         specifier: ^8.0.10
-        version: 8.0.10(vue@3.4.26(typescript@5.4.5))
+        version: 8.0.10(vue@3.4.27(typescript@5.4.5))
       '@storybook/vue3-vite':
         specifier: ^8.0.10
-        version: 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.26(typescript@5.4.5))
+        version: 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@stylistic/eslint-plugin':
         specifier: ^1.8.0
         version: 1.8.0(eslint@9.2.0)(typescript@5.4.5)
@@ -74,22 +74,22 @@ importers:
         version: 4.17.12
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.4(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.26(typescript@5.4.5))
+        version: 5.0.4(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/compiler-sfc':
-        specifier: ^3.4.26
-        version: 3.4.26
+        specifier: ^3.4.27
+        version: 3.4.27
       '@vue/language-service':
         specifier: ^2.0.16
         version: 2.0.16(typescript@5.4.5)
       '@vue/shared':
-        specifier: ^3.4.26
-        version: 3.4.26
+        specifier: ^3.4.27
+        version: 3.4.27
       '@vue/test-utils':
-        specifier: ^2.4.5
-        version: 2.4.5
+        specifier: ^2.4.6
+        version: 2.4.6
       '@vue/vue3-jest':
         specifier: ^29.2.6
-        version: 29.2.6(@babel/core@7.23.9)(babel-jest@29.7.0(@babel/core@7.23.9))(jest@29.7.0(@types/node@20.11.19))(typescript@5.4.5)(vue@3.4.26(typescript@5.4.5))
+        version: 29.2.6(@babel/core@7.23.9)(babel-jest@29.7.0(@babel/core@7.23.9))(jest@29.7.0(@types/node@20.11.19))(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
@@ -162,6 +162,9 @@ importers:
       storybook:
         specifier: ^8.0.10
         version: 8.0.10(@babel/preset-env@7.23.9(@babel/core@7.23.9))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      storybook-addon-vue-mdx:
+        specifier: ^0.1.5
+        version: 0.1.5(@storybook/blocks@8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/builder-vite@8.0.10(typescript@5.4.5)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0)))(@storybook/components@8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.0.10)(@storybook/manager-api@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/mdx2-csf@1.1.0)(@storybook/preview-api@8.0.10)(@storybook/theming@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/types@8.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5))
       super-tiny-icons:
         specifier: ^0.6.0
         version: 0.6.0
@@ -199,7 +202,7 @@ importers:
         specifier: ^9.4.2
         version: 9.4.2(eslint@9.2.0)
       vue-tsc:
-        specifier: ^2.0.13
+        specifier: ^2.0.16
         version: 2.0.16(typescript@5.4.5)
 
 packages:
@@ -1638,6 +1641,9 @@ packages:
   '@storybook/manager@8.0.10':
     resolution: {integrity: sha512-bojGglUQNry48L4siURc2zQKswavLzMh69rqsfL3ZXx+i+USfRfB7593azTlaZh0q6HO4bUAjB24RfQCyifLLQ==}
 
+  '@storybook/mdx2-csf@1.1.0':
+    resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
+
   '@storybook/node-logger@8.0.10':
     resolution: {integrity: sha512-UMmaUaA3VOX/mKLsSvOnbZre2/1tZ6hazA6H0eAnClKb51jRD1AJrsBYK+uHr/CAp7t710bB5U8apPov7hayDw==}
 
@@ -2096,17 +2102,23 @@ packages:
   '@vue/compiler-core@3.4.26':
     resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
 
+  '@vue/compiler-core@3.4.27':
+    resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==}
+
   '@vue/compiler-dom@3.4.22':
     resolution: {integrity: sha512-YkAS+jZc6Ip360kT3lZbMQZteiYBbHDSVKr94Jdd8Zjr7VjSkkXKAFFR/FW+2tNtBYXOps6xrWlOquy3GeYB0w==}
 
   '@vue/compiler-dom@3.4.26':
     resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
 
-  '@vue/compiler-sfc@3.4.26':
-    resolution: {integrity: sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==}
+  '@vue/compiler-dom@3.4.27':
+    resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
 
-  '@vue/compiler-ssr@3.4.26':
-    resolution: {integrity: sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==}
+  '@vue/compiler-sfc@3.4.27':
+    resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
+
+  '@vue/compiler-ssr@3.4.27':
+    resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
 
   '@vue/language-core@1.8.27':
     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
@@ -2135,19 +2147,19 @@ packages:
   '@vue/language-service@2.0.16':
     resolution: {integrity: sha512-0e6spw/1hoMUvff/fiIK+6DtO8G7M9x8DXACXbj97WRkYOUcTa0/Etym/iZyYIBqUGsD6kRWUR8I3hbw2i1ztQ==}
 
-  '@vue/reactivity@3.4.26':
-    resolution: {integrity: sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==}
+  '@vue/reactivity@3.4.27':
+    resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
 
-  '@vue/runtime-core@3.4.26':
-    resolution: {integrity: sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==}
+  '@vue/runtime-core@3.4.27':
+    resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
 
-  '@vue/runtime-dom@3.4.26':
-    resolution: {integrity: sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==}
+  '@vue/runtime-dom@3.4.27':
+    resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
 
-  '@vue/server-renderer@3.4.26':
-    resolution: {integrity: sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==}
+  '@vue/server-renderer@3.4.27':
+    resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
     peerDependencies:
-      vue: 3.4.26
+      vue: 3.4.27
 
   '@vue/shared@3.4.22':
     resolution: {integrity: sha512-cg7R9XNk4ovV3bKka/1a464O2oY0l5Fyt0rwGR4hSJRPjUJ0WVjrPdsr4W0JbUriwiM8EKcCcCjeKN5pRMs2Zg==}
@@ -2155,8 +2167,11 @@ packages:
   '@vue/shared@3.4.26':
     resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
 
-  '@vue/test-utils@2.4.5':
-    resolution: {integrity: sha512-oo2u7vktOyKUked36R93NB7mg2B+N7Plr8lxp2JBGwr18ch6EggFjixSCdIVVLkT6Qr0z359Xvnafc9dcKyDUg==}
+  '@vue/shared@3.4.27':
+    resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
+
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
   '@vue/typescript-plugin@2.0.16':
     resolution: {integrity: sha512-hS2RuTG8vL9559rD7ztr736glLZYRMP6d5KbUqkgGL/Nqy2ib1m0uivx7z6dXEHBLk2EhOOruNahDrOX056Xgw==}
@@ -5985,6 +6000,22 @@ packages:
   store2@2.14.3:
     resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==}
 
+  storybook-addon-vue-mdx@0.1.5:
+    resolution: {integrity: sha512-Cac26HWiZT4yWKBXQGZdDRjHS8/ZQUzRONzZ6kstGrI1RLeAvBMwhxvbKKgwIANNFJRXxkLMvLN4U2jfcpEcDA==}
+    peerDependencies:
+      '@storybook/blocks': ^7.0.0
+      '@storybook/builder-vite': ^7.0.0
+      '@storybook/components': ^7.0.0
+      '@storybook/core-events': ^7.0.0
+      '@storybook/manager-api': ^7.0.0
+      '@storybook/mdx2-csf': ^1.1.0
+      '@storybook/preview-api': ^7.0.0
+      '@storybook/theming': ^7.0.0
+      '@storybook/types': ^7.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      vue: ^3.3.0
+
   storybook@8.0.10:
     resolution: {integrity: sha512-9/4oxISopLyr5xz7Du27mmQgcIfB7UTLlNzkK4IklWTiSgsOgYgZpsmIwymoXNtkrvh+QsqskdcUP1C7nNiEtw==}
     hasBin: true
@@ -6487,6 +6518,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  veaury@2.3.18:
+    resolution: {integrity: sha512-18SB/XYuWg8zQexbPRtd2LTH8rj5cSIkjMJj2PtVWFH87PEnJAqtkj3JFXQ2KVYsWZYIWzAjCSzryTLxO5Tt/w==}
+    peerDependencies:
+      react: '>= 16.4.0'
+      react-dom: '>= 16.4.0'
+
   vite-plugin-checker@0.6.4:
     resolution: {integrity: sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==}
     engines: {node: '>=14.16'}
@@ -6684,9 +6721,6 @@ packages:
   vue-component-type-helpers@2.0.16:
     resolution: {integrity: sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==}
 
-  vue-component-type-helpers@2.0.6:
-    resolution: {integrity: sha512-qdGXCtoBrwqk1BT6r2+1Wcvl583ZVkuSZ3or7Y1O2w5AvWtlvvxwjGhmz5DdPJS9xqRdDlgTJ/38ehWnEi0tFA==}
-
   vue-docgen-api@4.75.1:
     resolution: {integrity: sha512-MECZ3uExz+ssmhD/2XrFoQQs93y17IVO1KDYTp8nr6i9GNrk67AAto6QAtilW1H/pTDPMkQxJ7w/25ZIqVtfAA==}
     peerDependencies:
@@ -6718,8 +6752,8 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  vue@3.4.26:
-    resolution: {integrity: sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==}
+  vue@3.4.27:
+    resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -7672,7 +7706,7 @@ snapshots:
   '@babel/template@7.23.9':
     dependencies:
       '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@babel/types': 7.23.9
 
   '@babel/traverse@7.23.9':
@@ -7683,7 +7717,7 @@ snapshots:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@babel/types': 7.23.9
       debug: 4.3.4
       globals: 11.12.0
@@ -8910,6 +8944,8 @@ snapshots:
 
   '@storybook/manager@8.0.10': {}
 
+  '@storybook/mdx2-csf@1.1.0': {}
+
   '@storybook/node-logger@8.0.10': {}
 
   '@storybook/preview-api@8.0.10':
@@ -8991,17 +9027,17 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@storybook/vue3-vite@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.26(typescript@5.4.5))':
+  '@storybook/vue3-vite@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@storybook/builder-vite': 8.0.10(typescript@5.4.5)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))
       '@storybook/core-server': 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/vue3': 8.0.10(vue@3.4.26(typescript@5.4.5))
+      '@storybook/vue3': 8.0.10(vue@3.4.27(typescript@5.4.5))
       find-package-json: 1.2.0
       magic-string: 0.30.8
       typescript: 5.4.5
       vite: 5.2.11(@types/node@20.11.19)(terser@5.31.0)
       vue-component-meta: 2.0.13(typescript@5.4.5)
-      vue-docgen-api: 4.75.1(vue@3.4.26(typescript@5.4.5))
+      vue-docgen-api: 4.75.1(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - bufferutil
@@ -9013,7 +9049,7 @@ snapshots:
       - vite-plugin-glimmerx
       - vue
 
-  '@storybook/vue3@8.0.10(vue@3.4.26(typescript@5.4.5))':
+  '@storybook/vue3@8.0.10(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@storybook/docs-tools': 8.0.10
       '@storybook/global': 5.0.0
@@ -9023,7 +9059,7 @@ snapshots:
       lodash: 4.17.21
       ts-dedent: 2.2.0
       type-fest: 2.19.0
-      vue: 3.4.26(typescript@5.4.5)
+      vue: 3.4.27(typescript@5.4.5)
       vue-component-type-helpers: 2.0.16
     transitivePeerDependencies:
       - encoding
@@ -9119,7 +9155,7 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@babel/types': 7.23.9
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
@@ -9131,7 +9167,7 @@ snapshots:
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@babel/types': 7.23.9
 
   '@types/babel__traverse@7.20.5':
@@ -9458,10 +9494,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.26(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       vite: 5.2.11(@types/node@20.11.19)(terser@5.31.0)
-      vue: 3.4.26(typescript@5.4.5)
+      vue: 3.4.27(typescript@5.4.5)
 
   '@vitest/expect@1.3.1':
     dependencies:
@@ -9559,6 +9595,14 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
+  '@vue/compiler-core@3.4.27':
+    dependencies:
+      '@babel/parser': 7.24.4
+      '@vue/shared': 3.4.27
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
   '@vue/compiler-dom@3.4.22':
     dependencies:
       '@vue/compiler-core': 3.4.22
@@ -9569,29 +9613,34 @@ snapshots:
       '@vue/compiler-core': 3.4.26
       '@vue/shared': 3.4.26
 
-  '@vue/compiler-sfc@3.4.26':
+  '@vue/compiler-dom@3.4.27':
+    dependencies:
+      '@vue/compiler-core': 3.4.27
+      '@vue/shared': 3.4.27
+
+  '@vue/compiler-sfc@3.4.27':
     dependencies:
       '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.26
-      '@vue/compiler-dom': 3.4.26
-      '@vue/compiler-ssr': 3.4.26
-      '@vue/shared': 3.4.26
+      '@vue/compiler-core': 3.4.27
+      '@vue/compiler-dom': 3.4.27
+      '@vue/compiler-ssr': 3.4.27
+      '@vue/shared': 3.4.27
       estree-walker: 2.0.2
       magic-string: 0.30.10
       postcss: 8.4.38
       source-map-js: 1.2.0
 
-  '@vue/compiler-ssr@3.4.26':
+  '@vue/compiler-ssr@3.4.27':
     dependencies:
-      '@vue/compiler-dom': 3.4.26
-      '@vue/shared': 3.4.26
+      '@vue/compiler-dom': 3.4.27
+      '@vue/shared': 3.4.27
 
   '@vue/language-core@1.8.27(typescript@5.4.5)':
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
       '@vue/compiler-dom': 3.4.22
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
       computeds: 0.0.1
       minimatch: 9.0.4
       muggle-string: 0.3.1
@@ -9604,7 +9653,7 @@ snapshots:
     dependencies:
       '@volar/language-core': 2.2.0-alpha.8
       '@vue/compiler-dom': 3.4.22
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
       computeds: 0.0.1
       minimatch: 9.0.4
       path-browserify: 1.0.1
@@ -9616,7 +9665,7 @@ snapshots:
     dependencies:
       '@volar/language-core': 2.2.1
       '@vue/compiler-dom': 3.4.26
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
       computeds: 0.0.1
       minimatch: 9.0.4
       path-browserify: 1.0.1
@@ -9631,7 +9680,7 @@ snapshots:
       '@volar/typescript': 2.2.1
       '@vue/compiler-dom': 3.4.22
       '@vue/language-core': 2.0.16(typescript@5.4.5)
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
       '@vue/typescript-plugin': 2.0.16(typescript@5.4.5)
       computeds: 0.0.1
       path-browserify: 1.0.1
@@ -9649,45 +9698,47 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vue/reactivity@3.4.26':
+  '@vue/reactivity@3.4.27':
     dependencies:
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
 
-  '@vue/runtime-core@3.4.26':
+  '@vue/runtime-core@3.4.27':
     dependencies:
-      '@vue/reactivity': 3.4.26
-      '@vue/shared': 3.4.26
+      '@vue/reactivity': 3.4.27
+      '@vue/shared': 3.4.27
 
-  '@vue/runtime-dom@3.4.26':
+  '@vue/runtime-dom@3.4.27':
     dependencies:
-      '@vue/runtime-core': 3.4.26
-      '@vue/shared': 3.4.26
+      '@vue/runtime-core': 3.4.27
+      '@vue/shared': 3.4.27
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.26(vue@3.4.26(typescript@5.4.5))':
+  '@vue/server-renderer@3.4.27(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      '@vue/compiler-ssr': 3.4.26
-      '@vue/shared': 3.4.26
-      vue: 3.4.26(typescript@5.4.5)
+      '@vue/compiler-ssr': 3.4.27
+      '@vue/shared': 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
 
   '@vue/shared@3.4.22': {}
 
   '@vue/shared@3.4.26': {}
 
-  '@vue/test-utils@2.4.5':
+  '@vue/shared@3.4.27': {}
+
+  '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.1
-      vue-component-type-helpers: 2.0.6
+      vue-component-type-helpers: 2.0.16
 
   '@vue/typescript-plugin@2.0.16(typescript@5.4.5)':
     dependencies:
       '@volar/typescript': 2.2.1
       '@vue/language-core': 2.0.16(typescript@5.4.5)
-      '@vue/shared': 3.4.26
+      '@vue/shared': 3.4.27
     transitivePeerDependencies:
       - typescript
 
-  '@vue/vue3-jest@29.2.6(@babel/core@7.23.9)(babel-jest@29.7.0(@babel/core@7.23.9))(jest@29.7.0(@types/node@20.11.19))(typescript@5.4.5)(vue@3.4.26(typescript@5.4.5))':
+  '@vue/vue3-jest@29.2.6(@babel/core@7.23.9)(babel-jest@29.7.0(@babel/core@7.23.9))(jest@29.7.0(@types/node@20.11.19))(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.23.9
       '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9)
@@ -9698,7 +9749,7 @@ snapshots:
       jest: 29.7.0(@types/node@20.11.19)
       source-map: 0.5.6
       tsconfig: 7.0.0
-      vue: 3.4.26(typescript@5.4.5)
+      vue: 3.4.27(typescript@5.4.5)
     optionalDependencies:
       typescript: 5.4.5
 
@@ -12088,7 +12139,7 @@ snapshots:
   istanbul-lib-instrument@5.2.1:
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -12098,7 +12149,7 @@ snapshots:
   istanbul-lib-instrument@6.0.2:
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.24.4
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 7.6.0
@@ -14081,6 +14132,22 @@ snapshots:
 
   store2@2.14.3: {}
 
+  storybook-addon-vue-mdx@0.1.5(@storybook/blocks@8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/builder-vite@8.0.10(typescript@5.4.5)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0)))(@storybook/components@8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.0.10)(@storybook/manager-api@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/mdx2-csf@1.1.0)(@storybook/preview-api@8.0.10)(@storybook/theming@8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/types@8.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5)):
+    dependencies:
+      '@storybook/blocks': 8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/builder-vite': 8.0.10(typescript@5.4.5)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))
+      '@storybook/components': 8.0.10(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/core-events': 8.0.10
+      '@storybook/manager-api': 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/mdx2-csf': 1.1.0
+      '@storybook/preview-api': 8.0.10
+      '@storybook/theming': 8.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/types': 8.0.10
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      veaury: 2.3.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vue: 3.4.27(typescript@5.4.5)
+
   storybook@8.0.10(@babel/preset-env@7.23.9(@babel/core@7.23.9))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@storybook/cli': 8.0.10(@babel/preset-env@7.23.9(@babel/core@7.23.9))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -14615,6 +14682,11 @@ snapshots:
 
   vary@1.1.2: {}
 
+  veaury@2.3.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   vite-plugin-checker@0.6.4(eslint@9.2.0)(optionator@0.9.3)(typescript@5.4.5)(vite@5.2.11(@types/node@20.11.19)(terser@5.31.0))(vue-tsc@2.0.16(typescript@5.4.5)):
     dependencies:
       '@babel/code-frame': 7.23.5
@@ -14797,22 +14869,20 @@ snapshots:
 
   vue-component-type-helpers@2.0.16: {}
 
-  vue-component-type-helpers@2.0.6: {}
-
-  vue-docgen-api@4.75.1(vue@3.4.26(typescript@5.4.5)):
+  vue-docgen-api@4.75.1(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       '@babel/parser': 7.24.4
       '@babel/types': 7.23.9
       '@vue/compiler-dom': 3.4.22
-      '@vue/compiler-sfc': 3.4.26
+      '@vue/compiler-sfc': 3.4.27
       ast-types: 0.16.1
       hash-sum: 2.0.0
       lru-cache: 8.0.5
       pug: 3.0.2
       recast: 0.23.6
       ts-map: 1.0.3
-      vue: 3.4.26(typescript@5.4.5)
-      vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.4.26(typescript@5.4.5))
+      vue: 3.4.27(typescript@5.4.5)
+      vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.4.27(typescript@5.4.5))
 
   vue-eslint-parser@9.4.2(eslint@9.2.0):
     dependencies:
@@ -14827,9 +14897,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.4.26(typescript@5.4.5)):
+  vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.4.27(typescript@5.4.5)):
     dependencies:
-      vue: 3.4.26(typescript@5.4.5)
+      vue: 3.4.27(typescript@5.4.5)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -14850,13 +14920,13 @@ snapshots:
       semver: 7.6.0
       typescript: 5.4.5
 
-  vue@3.4.26(typescript@5.4.5):
+  vue@3.4.27(typescript@5.4.5):
     dependencies:
-      '@vue/compiler-dom': 3.4.26
-      '@vue/compiler-sfc': 3.4.26
-      '@vue/runtime-dom': 3.4.26
-      '@vue/server-renderer': 3.4.26(vue@3.4.26(typescript@5.4.5))
-      '@vue/shared': 3.4.26
+      '@vue/compiler-dom': 3.4.27
+      '@vue/compiler-sfc': 3.4.27
+      '@vue/runtime-dom': 3.4.27
+      '@vue/server-renderer': 3.4.27(vue@3.4.27(typescript@5.4.5))
+      '@vue/shared': 3.4.27
     optionalDependencies:
       typescript: 5.4.5
 
diff --git a/src/ui/components/WidgetLayout.vue b/src/ui/components/WidgetLayout.vue
index 84d270c..fc65244 100644
--- a/src/ui/components/WidgetLayout.vue
+++ b/src/ui/components/WidgetLayout.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { inject, defineProps, withDefaults } from 'vue'
+
 import { useContext } from '../composables';
 
 import type { ITranslatePath } from '../interfaces';
 import { resolveLogo } from '../utils';
 
 import PFooter from './Footer.vue';
+import WidgetTemplate from './WidgetTemplate.tsx';
 
 withDefaults( defineProps<{
   logo?: string | boolean,
@@ -16,11 +19,13 @@ withDefaults( defineProps<{
 })
 const context = useContext()
 
+const templates = inject('templates')
 </script>
 
 <template>
   <div class="pa__widget-content">
     <div class="pa__widget-content-main">
+      <WidgetTemplate name="content-prepend" />
       <slot
         name="logo"
       >
@@ -55,11 +60,13 @@ const context = useContext()
         <slot name="content-actions" />
       </div>
       <slot name="content-append" />
+      <WidgetTemplate name="content-append" />
       <div
-        v-if="$slots['content-footer']"
+        v-if="$slots['content-footer'] || templates['content-footer']"
         class="pa__widget-content-footer"
       >
         <slot name="content-footer" />
+        <WidgetTemplate name="content-footer" />
       </div>
     </div>
     <PFooter class="pa__widget-footer" />
diff --git a/src/ui/components/WidgetTemplate.tsx b/src/ui/components/WidgetTemplate.tsx
new file mode 100644
index 0000000..e0f273b
--- /dev/null
+++ b/src/ui/components/WidgetTemplate.tsx
@@ -0,0 +1,24 @@
+import type { PropType } from 'vue';
+import { defineComponent, h, inject } from 'vue';
+
+export default defineComponent({
+  functional: true,
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String as PropType<string>,
+      required: true
+    }
+  },
+  setup(props){
+    const templates = inject('templates') || {} as Record<string, HTMLElement>
+    const template=  templates[props.name] as HTMLTemplateElement
+    if(template){
+      return () => h('span', {
+        style: { display: 'contents' },
+        innerHTML: template.innerHTML
+      } )
+    }
+    return () => undefined
+  },
+})
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 5941d98..78ee671 100755
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -39,6 +39,15 @@ export function createWidget(container: Element | string,
 
   installComponents(widget)
 
+  container = typeof container === 'string' ? document.querySelector(container)! : container
+  const templates = {} as Record<string, Node>
+  container.querySelectorAll('template, pa-template').forEach(temp => {
+    if(temp.id && temp.id.startsWith('pa-')){
+      templates[temp.id.replace(/^pa-/, '')] = temp.cloneNode(true)
+    }
+  })
+  widget.provide('templates', templates)
   widget.mount(container)
+
   return widget;
 }
diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index 27c7f79..58ba8c5 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -134,18 +134,17 @@
 			}
 		}
     &-main {
-			@apply relative;
+			@apply relative pt-6 px-6 pb-8;
       box-flex: 1;
       flex-grow: 1;
       overflow: hidden;
-      padding: 24px 24px 36px;
 
       &:has(.widget-content-footer), &:has(.widget-helpers-section){
         padding-bottom: 0;
       }
 
       @media (min-width: 450px) {
-        padding: 36px 40px 36px;
+				@apply px-8 py-6;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -167,12 +166,12 @@
     }
 
     &-footer {
-			@apply space-y-2 mt-auto;
+			@apply space-y-2
+			mt-6 mb-0 -mx-8
+			px-8 py-6;
 
       border: none;
       font-size: 14px;
-      margin: 24px -40px 0px;
-      padding: 12px 0;
 
       @media (min-width: 601px) {
         border-top: 1px solid #dadce0;
@@ -235,8 +234,7 @@
     padding: 0 12px 14px;
 
     @media (min-width: 450px) {
-      padding-left: 40px;
-      padding-right: 40px;
+			@apply px-16;
     }
     @media (min-width: 601px) {
       padding: 4px 0 0;
diff --git a/stories/CustomTemplates/01-Documentation.mdx b/stories/CustomTemplates/01-Documentation.mdx
new file mode 100644
index 0000000..25b1b5d
--- /dev/null
+++ b/stories/CustomTemplates/01-Documentation.mdx
@@ -0,0 +1,34 @@
+import {Meta, Primary, Controls, Story, ArgTypes} from '@storybook/blocks';
+import * as FieldStories from './templating.stories.ts';
+
+<Meta of={FieldStories} />
+
+
+## Custom Templates
+
+You can provide custom templates to inject into widget. To do so, define your template inside to be mounted element.
+
+Template element type must be `template` name must be defined as `id` and must be prefixed with `pa-`.
+
+Available templates are as following:
+```
+pa-content-prepend
+pa-content-append
+pa-content-footer
+```
+
+For example:
+```html
+<div id="widget">
+  <template id="pa-content-prepend">
+    <h1>My Header</h1>
+  </template>
+  <template id="pa-content-footer">
+    My Footer
+  </template>
+</div>
+
+<script type="application/javascript">
+  new PlusAuthWidget('#widget')
+</script>
+```
diff --git a/stories/CustomTemplates/CustomTemplating.vue b/stories/CustomTemplates/CustomTemplating.vue
new file mode 100644
index 0000000..702ab2a
--- /dev/null
+++ b/stories/CustomTemplates/CustomTemplating.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
+
+import PlusAuthWidget from '../../src';
+import type { IPlusAuthContext, IWidgetSettings } from '../../src/ui/interfaces';
+
+import { useConfig } from '../useConfig';
+
+const props = defineProps<{
+  template: string
+  settings: Partial<IWidgetSettings>,
+  context?: Partial<IPlusAuthContext>
+}>()
+const config = ref(useConfig(props.settings || {}, props.context))
+const key = ref()
+const widget = ref<PlusAuthWidget>()
+const inst = getCurrentInstance()
+onMounted(() => {
+  widget.value = new PlusAuthWidget('#wrapper', config.value.settings || {}, config.value.context as any)
+})
+watch(() => props, () => {
+  config.value = useConfig(props.settings, props.context)
+  // @ts-expect-error
+  widget.value?._view.unmount()
+  inst.vnode.el.innerHTML = props.template
+  nextTick(() => {
+    widget.value = new PlusAuthWidget('#wrapper', config.value.settings, config.value.context as any)
+  })
+},{ deep: true })
+
+</script>
+
+<template>
+  <div
+    id="wrapper"
+    :key="props.template"
+    v-html="template"
+  />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/stories/CustomTemplates/templating.stories.ts b/stories/CustomTemplates/templating.stories.ts
new file mode 100644
index 0000000..c1d35d6
--- /dev/null
+++ b/stories/CustomTemplates/templating.stories.ts
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ContentFooterTemplate from './CustomTemplating.vue';
+
+type Story = StoryObj<typeof ContentFooterTemplate>;
+
+
+const ArgTypes = {
+  template: {
+    name: 'Enter your custom template:'
+  },
+  settings: {
+    control: false,
+    table: {
+      disable: true
+    }
+  },
+  context: {
+    control: false,
+    table: {
+      disable: true
+    }
+  }
+}
+
+export const ContentPrepend: Story = {
+  name: 'content-prepend',
+  argTypes: ArgTypes,
+  args: {
+    template: `<template id="pa-content-prepend">
+			<style>
+					#myId {
+						border: 1px solid black;
+						padding: 12px;
+						background: red;
+						color: white;
+					}
+			</style>
+      <a href="https://myuri" id="myId">My Uri</a>
+    </template>`
+  },
+};
+
+export const ContentAppend: Story = {
+  name: 'content-append',
+  argTypes: ArgTypes,
+  args: {
+    template: `<template id="pa-content-append">
+     	<style>
+					#myId {
+						border: 1px solid black;
+						margin-bottom: 24px;
+						padding: 12px;
+						background: red;
+						color: white;
+					}
+			</style>
+      <a href="https://myuri" id="myId">My Uri</a>
+    </template>`
+  },
+};
+
+export const ContentFooter: Story = {
+  name: 'content-footer',
+  argTypes: ArgTypes,
+  args: {
+    template: `<template id="pa-content-footer">
+     	<style>
+					#myId {
+						display: flex;
+						border: 1px solid black;
+						padding: 12px;
+						background: red;
+						color: white;
+					}
+			</style>
+      <a href="https://myuri" id="myId">My Uri</a>
+    </template>`
+  },
+};
+
+
+/**
+ *
+ */
+const meta: Meta<typeof ContentFooterTemplate> = {
+  component: ContentFooterTemplate,
+  title: 'Custom Templates',
+
+}
+
+
+export default meta
diff --git a/vite.config.ts b/vite.config.ts
index b5e8b28..c78d40d 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,7 +31,7 @@ export default defineConfig(({ command  }) => ({
     },
   },
   plugins: [
-    vue(),
+    vue({}),
     libInjectCss(),
     dts({ outDir: 'dist/types' }),
     // checker({