diff --git a/public/demo/images/logo-white.svg b/public/demo/images/logo-white.svg
new file mode 100644
index 0000000..86f08ab
--- /dev/null
+++ b/public/demo/images/logo-white.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>head</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
+            <g id="head" transform="translate(3.000000, 7.000000)">
+                <polygon id="chick-right" fill="#ffffff" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
+                <polygon id="chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
+                <polygon id="mask" fill="#ffffff" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
+                <polygon id="bottom-chick-right" fill="#ffffff" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
+                <polygon id="bottom-chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
+                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
+                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#ffffff" fill-rule="nonzero"></path>
+                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
+                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
+                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
+                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
+                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
+                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#ffffff" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/demo/images/logo.svg b/public/demo/images/logo.svg
new file mode 100644
index 0000000..3e52390
--- /dev/null
+++ b/public/demo/images/logo.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>head</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
+            <g id="head" transform="translate(3.000000, 7.000000)">
+                <polygon id="chick-right" fill="#41B883" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
+                <polygon id="chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
+                <polygon id="mask" fill="#41B883" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
+                <polygon id="bottom-chick-right" fill="#41B883" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
+                <polygon id="bottom-chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
+                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
+                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#41B883" fill-rule="nonzero"></path>
+                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
+                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
+                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
+                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
+                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
+                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#41B883" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/uikit/Button.vue b/src/views/uikit/Button.vue
index 88b08ef..701087d 100644
--- a/src/views/uikit/Button.vue
+++ b/src/views/uikit/Button.vue
@@ -97,23 +97,12 @@ const load = (index) => {
             <div class="card">
                 <h5>Templating</h5>
                 <div class="flex flex-wrap gap-2">
-                    <Button type="button" class="google">
-                        <span class="flex align-items-center px-2 bg-purple-700 text-white">
-                            <i class="pi pi-google"></i>
-                        </span>
-                        <span class="px-3 py-2 flex align-items-center text-white">Google</span>
+                    <Button type="button">
+                        <img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
                     </Button>
-                    <Button type="button" class="twitter">
-                        <span class="flex align-items-center px-2 bg-blue-500 text-white">
-                            <i class="pi pi-twitter"></i>
-                        </span>
-                        <span class="px-3 py-2 flex align-items-center text-white">Twitter</span>
-                    </Button>
-                    <Button type="button" class="discord">
-                        <span class="flex align-items-center px-2 bg-bluegray-800 text-white">
-                            <i class="pi pi-discord"></i>
-                        </span>
-                        <span class="px-3 py-2 flex align-items-center text-white">Discord</span>
+                    <Button type="button" outlined severity="success">
+                        <img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
+                        <span class="ml-2 text-bold">PrimeVue</span>
                     </Button>
                 </div>
             </div>
@@ -194,152 +183,3 @@ const load = (index) => {
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.google {
-    background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    border-color: var(--purple-700);
-    display: flex;
-    align-items: stretch;
-    padding: 0;
-
-    &:enabled:hover {
-        background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
-        background-size: 200% 100%;
-        background-position: left bottom;
-        border-color: var(--purple-700);
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 1px var(--purple-400);
-    }
-}
-
-.twitter {
-    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    border-color: var(--blue-500);
-    padding: 0;
-    display: flex;
-    align-items: stretch;
-
-    &:enabled:hover {
-        background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
-        background-size: 200% 100%;
-        background-position: left bottom;
-        border-color: var(--blue-500);
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 1px var(--blue-200);
-    }
-}
-
-.discord {
-    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    border-color: var(--bluegray-800);
-    padding: 0;
-    display: flex;
-    align-items: stretch;
-
-    &:enabled:hover {
-        background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
-        background-size: 200% 100%;
-        background-position: left bottom;
-        border-color: var(--bluegray-800);
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 1px var(--purple-500);
-    }
-}
-
-.template-button .p-button.twitter {
-    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    color: #fff;
-    border-color: var(--blue-500);
-}
-.template-button .p-button.twitter:hover {
-    background-position: left bottom;
-}
-.template-button .p-button.twitter i {
-    background-color: var(--blue-500);
-}
-.template-button .p-button.twitter:focus {
-    box-shadow: 0 0 0 1px var(--blue-200);
-}
-.template-button .p-button.slack {
-    background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    color: #fff;
-    border-color: var(--orange-500);
-}
-.template-button .p-button.slack:hover {
-    background-position: left bottom;
-}
-.template-button .p-button.slack i {
-    background-color: var(--orange-500);
-}
-.template-button .p-button.slack:focus {
-    box-shadow: 0 0 0 1px var(--orange-200);
-}
-.template-button .p-button.amazon {
-    background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    color: #000;
-    border-color: var(--yellow-500);
-}
-.template-button .p-button.amazon:hover {
-    background-position: left bottom;
-}
-.template-button .p-button.amazon i {
-    background-color: var(--yellow-500);
-}
-.template-button .p-button.amazon:focus {
-    box-shadow: 0 0 0 1px var(--yellow-200);
-}
-.template-button .p-button.discord {
-    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: background-position 0.5s ease-out;
-    color: #fff;
-    border-color: var(--bluegray-800);
-}
-.template-button .p-button.discord:hover {
-    background-position: left bottom;
-}
-.template-button .p-button.discord i {
-    background-color: var(--bluegray-800);
-}
-.template-button .p-button.discord:focus {
-    box-shadow: 0 0 0 1px var(--bluegray-500);
-}
-@media screen and (max-width: 960px) {
-    -button .p-button {
-        margin-bottom: 0.5rem;
-    }
-    -button .p-button:not(.p-button-icon-only) {
-        display: flex;
-        flex-wrap: wrap;
-    }
-    -button .p-buttonset .p-button {
-        margin-bottom: 0;
-    }
-}
-</style>