diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 4e2763563..f15300212 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -1,11 +1,28 @@
-<script>
-    export let dashed = false;
-    export let centered = false;
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+    import EmptyLight from '$lib/images/empty-light.svg';
+    import EmptyDark from '$lib/images/empty-dark.svg';
+
+    export let isButton = false;
+    export let single = false;
 </script>
 
-<article
-    class="card common-section u-flex u-flex-vertical"
-    class:is-border-dashed={dashed}
-    class:u-cross-center={centered}>
-    <slot />
-</article>
+{#if isButton}
+    <button
+        on:click
+        class="card u-grid u-cross-center u-width-full-line dashed"
+        class:common-section={single}>
+        <div class="u-flex u-flex-vertical u-cross-center">
+            {#if $app.themeInUse === 'dark'}
+                <img src={EmptyDark} alt="create" aria-hidden="true" />
+            {:else}
+                <img src={EmptyLight} alt="create" aria-hidden="true" />
+            {/if}
+            <slot />
+        </div>
+    </button>
+{:else}
+    <article class="card u-grid u-cross-center u-width-full-line" class:common-section={single}>
+        <slot />
+    </article>
+{/if}
diff --git a/src/lib/components/emptyGridItem.svelte b/src/lib/components/emptyGridItem.svelte
deleted file mode 100644
index 7678addac..000000000
--- a/src/lib/components/emptyGridItem.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<button on:click class="card is-border-dashed u-grid u-cross-center">
-    <div class="u-flex u-flex-vertical u-cross-center">
-        <slot />
-    </div>
-</button>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c45bd5cec..b6f4ffb8b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -24,6 +24,5 @@ export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
-export { default as EmptyGridItem } from './emptyGridItem.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
diff --git a/src/lib/images/empty-dark.svg b/src/lib/images/empty-dark.svg
new file mode 100644
index 000000000..9babf164b
--- /dev/null
+++ b/src/lib/images/empty-dark.svg
@@ -0,0 +1 @@
+<svg width="148" height="105" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M38.51 23.233a4.012 4.012 0 0 1 3.407-4.568l24.203-3.399a3.99 3.99 0 0 1 2.932.746l5.139 3.812a3.99 3.99 0 0 1 1.576 2.673l5.38 39.95a4.012 4.012 0 0 1-3.41 4.506l-28.033 3.995a3.988 3.988 0 0 1-4.508-3.355l-6.686-44.36Z" fill="#fff"/></g><path d="m43.643 23.837 23.556-3.523a3.988 3.988 0 0 1 4.549 3.445l1.943 15.343-27.278 3.888-2.77-19.153Z" fill="url(#b)"/><path d="m49.09 26.97 2.732-.358 1.666 12.379-2.73.358L49.09 26.97Z" fill="url(#c)"/><path d="m54.31 30.946 2.731-.358 1.06 7.835-2.73.359-1.06-7.836Z" fill="url(#d)"/><path d="m58.79 28.826 2.73-.359 1.148 9.366-2.73.358-1.149-9.365Z" fill="url(#e)"/><path d="m63.839 32.53 2.73-.358.688 4.966-2.73.359-.688-4.967Z" fill="url(#f)"/><path d="m68.395 22.448-.656-7.41 8.032 5.866-7.376 1.544Z" fill="#DFE1EE"/><path d="m76.953 83.571 30.488 6.946H35.578L.5 83.571h76.453Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.995 53.8c-.774-.608-1.715-.94-2.63-.928l-20.301.26c-2.172.029-3.526 1.927-2.886 4.046.536 1.775 2.302 3.089 4.121 3.065l20.3-.27c3.266-.044 4.162-4.004 1.396-6.173Zm53.289 9.991c-.051-2.388-2.297-4.507-4.743-4.475l-68.852.917c-2.417.032-3.917 2.153-3.19 4.51l6.938 22.468c.604 1.959 2.559 3.401 4.567 3.371l62.391-.934c1.975-.03 3.405-1.477 3.364-3.406l-.475-22.45Z" fill="#C4C6D7"/><path d="m76.92 24.531-2.066 27.784-6.884-.926-2.754-3.705 2.634-16.48a6 6 0 0 1 5.925-5.052h2.227l.918-1.62Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M71.955 27.705a3.975 3.975 0 0 1 4.343-3.602l28.228 2.718a4.024 4.024 0 0 1 3.616 4.369l-3.97 43.59a3.976 3.976 0 0 1-4.343 3.603l-28.228-2.718a4.025 4.025 0 0 1-3.616-4.369l3.97-43.59Z" fill="#fff"/></g><rect width="26.622" height="1.389" rx=".695" transform="rotate(4.056 -376.174 1105.033) skewX(.071)" fill="#E8E9F0"/><rect width="13.33" height="1.389" rx=".695" transform="rotate(4.056 -428.89 1100.632) skewX(.071)" fill="#E8E9F0"/><path d="m106.608 47.684-36.114-1.389-.459 4.4h36.573v-3.01Z" fill="url(#j)" fill-opacity=".5"/><path d="M60.826 41.236a1.83 1.83 0 0 0-1.46-.73H37.218c-1.014 0-1.836.83-1.836 1.853l3.672 46.306c0 1.023.822 1.852 1.836 1.852h67.01c1.014 0 1.836-.83 1.836-1.852l3.672-36.119a1.844 1.844 0 0 0-1.836-1.852H68.878a1.83 1.83 0 0 1-1.46-.73l-6.592-8.728Z" fill="url(#k)"/><ellipse cx="74.166" cy="85.655" rx="11.245" ry="11.345" fill="url(#l)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.395 81.997c.305 0 .551.249.551.556v2.778H77.7c.304 0 .55.249.55.556a.553.553 0 0 1-.55.555h-2.754v2.779a.553.553 0 0 1-.55.555.553.553 0 0 1-.551-.555v-2.779H71.09a.553.553 0 0 1-.551-.555c0-.307.247-.556.55-.556h2.755v-2.778c0-.307.246-.556.55-.556Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="44.102" y1="4.157" x2="36.884" y2="51.275" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="50.491" y1="26.786" x2="52.116" y2="39.171" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="55.7" y1="30.764" x2="56.729" y2="38.603" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="60.125" y1="28.651" x2="61.353" y2="38.006" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="65.227" y1="32.348" x2="65.88" y2="37.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="90.689" y1="96.769" x2="24.23" y2="74.494" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="65.216" y1="47.453" x2="69.652" y2="17.597" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="98.951" y1="-33.583" x2="84.242" y2="51.577" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.171" y1="9.482" x2="114.21" y2="101.365" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="58.561" y1="78.246" x2="77.573" y2="100.538" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="15.465" y="4.227" width="74.718" height="87.761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-7" dy="5"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.52 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1037_50782" result="shape"/></filter><filter id="i" x="55.968" y=".084" width="90.191" height="104.318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="13" dy="1"/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="5" dy="3"/><feGaussianBlur stdDeviation="7.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="effect1_dropShadow_1037_50782" result="effect2_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_1037_50782" result="shape"/></filter></defs></svg>
\ No newline at end of file
diff --git a/src/lib/images/empty-light.svg b/src/lib/images/empty-light.svg
new file mode 100644
index 000000000..9babf164b
--- /dev/null
+++ b/src/lib/images/empty-light.svg
@@ -0,0 +1 @@
+<svg width="148" height="105" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M38.51 23.233a4.012 4.012 0 0 1 3.407-4.568l24.203-3.399a3.99 3.99 0 0 1 2.932.746l5.139 3.812a3.99 3.99 0 0 1 1.576 2.673l5.38 39.95a4.012 4.012 0 0 1-3.41 4.506l-28.033 3.995a3.988 3.988 0 0 1-4.508-3.355l-6.686-44.36Z" fill="#fff"/></g><path d="m43.643 23.837 23.556-3.523a3.988 3.988 0 0 1 4.549 3.445l1.943 15.343-27.278 3.888-2.77-19.153Z" fill="url(#b)"/><path d="m49.09 26.97 2.732-.358 1.666 12.379-2.73.358L49.09 26.97Z" fill="url(#c)"/><path d="m54.31 30.946 2.731-.358 1.06 7.835-2.73.359-1.06-7.836Z" fill="url(#d)"/><path d="m58.79 28.826 2.73-.359 1.148 9.366-2.73.358-1.149-9.365Z" fill="url(#e)"/><path d="m63.839 32.53 2.73-.358.688 4.966-2.73.359-.688-4.967Z" fill="url(#f)"/><path d="m68.395 22.448-.656-7.41 8.032 5.866-7.376 1.544Z" fill="#DFE1EE"/><path d="m76.953 83.571 30.488 6.946H35.578L.5 83.571h76.453Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.995 53.8c-.774-.608-1.715-.94-2.63-.928l-20.301.26c-2.172.029-3.526 1.927-2.886 4.046.536 1.775 2.302 3.089 4.121 3.065l20.3-.27c3.266-.044 4.162-4.004 1.396-6.173Zm53.289 9.991c-.051-2.388-2.297-4.507-4.743-4.475l-68.852.917c-2.417.032-3.917 2.153-3.19 4.51l6.938 22.468c.604 1.959 2.559 3.401 4.567 3.371l62.391-.934c1.975-.03 3.405-1.477 3.364-3.406l-.475-22.45Z" fill="#C4C6D7"/><path d="m76.92 24.531-2.066 27.784-6.884-.926-2.754-3.705 2.634-16.48a6 6 0 0 1 5.925-5.052h2.227l.918-1.62Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M71.955 27.705a3.975 3.975 0 0 1 4.343-3.602l28.228 2.718a4.024 4.024 0 0 1 3.616 4.369l-3.97 43.59a3.976 3.976 0 0 1-4.343 3.603l-28.228-2.718a4.025 4.025 0 0 1-3.616-4.369l3.97-43.59Z" fill="#fff"/></g><rect width="26.622" height="1.389" rx=".695" transform="rotate(4.056 -376.174 1105.033) skewX(.071)" fill="#E8E9F0"/><rect width="13.33" height="1.389" rx=".695" transform="rotate(4.056 -428.89 1100.632) skewX(.071)" fill="#E8E9F0"/><path d="m106.608 47.684-36.114-1.389-.459 4.4h36.573v-3.01Z" fill="url(#j)" fill-opacity=".5"/><path d="M60.826 41.236a1.83 1.83 0 0 0-1.46-.73H37.218c-1.014 0-1.836.83-1.836 1.853l3.672 46.306c0 1.023.822 1.852 1.836 1.852h67.01c1.014 0 1.836-.83 1.836-1.852l3.672-36.119a1.844 1.844 0 0 0-1.836-1.852H68.878a1.83 1.83 0 0 1-1.46-.73l-6.592-8.728Z" fill="url(#k)"/><ellipse cx="74.166" cy="85.655" rx="11.245" ry="11.345" fill="url(#l)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.395 81.997c.305 0 .551.249.551.556v2.778H77.7c.304 0 .55.249.55.556a.553.553 0 0 1-.55.555h-2.754v2.779a.553.553 0 0 1-.55.555.553.553 0 0 1-.551-.555v-2.779H71.09a.553.553 0 0 1-.551-.555c0-.307.247-.556.55-.556h2.755v-2.778c0-.307.246-.556.55-.556Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="44.102" y1="4.157" x2="36.884" y2="51.275" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="50.491" y1="26.786" x2="52.116" y2="39.171" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="55.7" y1="30.764" x2="56.729" y2="38.603" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="60.125" y1="28.651" x2="61.353" y2="38.006" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="65.227" y1="32.348" x2="65.88" y2="37.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="90.689" y1="96.769" x2="24.23" y2="74.494" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="65.216" y1="47.453" x2="69.652" y2="17.597" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="98.951" y1="-33.583" x2="84.242" y2="51.577" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.171" y1="9.482" x2="114.21" y2="101.365" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="58.561" y1="78.246" x2="77.573" y2="100.538" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="15.465" y="4.227" width="74.718" height="87.761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-7" dy="5"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.52 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1037_50782" result="shape"/></filter><filter id="i" x="55.968" y=".084" width="90.191" height="104.318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="13" dy="1"/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="5" dy="3"/><feGaussianBlur stdDeviation="7.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="effect1_dropShadow_1037_50782" result="effect2_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_1037_50782" result="shape"/></filter></defs></svg>
\ No newline at end of file
diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte
index 4cbf8c259..3dbf640a8 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/routes/console/account/activity/+page.svelte
@@ -87,7 +87,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No logs available</p>
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index f436132b2..998111b0f 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { GridItem1, EmptyGridItem, Empty, Pagination, AvatarGroup } from '$lib/components';
+    import { GridItem1, Empty, Pagination, AvatarGroup } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../_createOrganization.svelte';
@@ -68,16 +68,9 @@
                 {/if}
             {/each}
             {#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
-                <EmptyGridItem on:click={() => (addOrganization = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new organization</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty isButton on:click={() => (addOrganization = true)}>
+                    <p>Create a new organization</p>
+                </Empty>
             {/if}
         </ul>
 
@@ -86,19 +79,8 @@
             <Pagination {limit} bind:offset sum={$organizationList?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <div class="u-flex u-flex-vertical u-cross-center ">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => (addOrganization = true)}>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new organization</p>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (addOrganization = true)}>
+            <p>Create a new organization</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$organizationList?.total}</p>
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/+page.svelte
index fa5906556..a0b90e1e5 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/+page.svelte
@@ -103,7 +103,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No sessions available</p>
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index fce8670e1..45d858f95 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -2,7 +2,7 @@
     import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { GridItem1, EmptyGridItem, Empty, Pagination } from '$lib/components';
+    import { GridItem1, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { Query, type Models } from '@aw-labs/appwrite-console';
@@ -113,16 +113,9 @@
                 {/if}
             {/each}
             {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new project</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty isButton on:click={() => (showCreate = true)}>
+                    <p>Create a new project</p>
+                </Empty>
             {/if}
         </ul>
 
@@ -131,19 +124,8 @@
             <Pagination {limit} bind:offset sum={projects.length} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <div class="u-flex u-flex-vertical u-cross-center ">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => (showCreate = true)}>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new project</p>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Create a new project</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects?.length}</p>
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index ed2a1bc23..b7e097375 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -118,27 +118,17 @@
             <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div
-                    class="common-section"
-                    use:event={{
-                        name: 'console_users',
-                        action: 'click_create',
-                        parameters: {
-                            type: 'user'
-                        }
-                    }}>
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Add Your First User To Get Started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <div
+                class="common-section"
+                use:event={{
+                    name: 'console_users',
+                    action: 'click_create',
+                    parameters: {
+                        type: 'user'
+                    }
+                }}>
+                <p>Add Your First User To Get Started</p>
             </div>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index 918d08281..00936a441 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -97,7 +97,7 @@
             <Pagination {limit} bind:offset sum={$teamsList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <div
                 class="common-section"
                 use:event={{
@@ -107,16 +107,8 @@
                         type: 'team'
                     }
                 }}>
-                <Button secondary round on:click={() => (showCreate = true)}>
-                    <span class="icon-plus" aria-hidden="true" />
-                </Button>
-            </div>
-            <div class="common-section">
                 <p>Create your first team to get started</p>
             </div>
-            <div class="common-section">
-                <Button secondary href="#">Documentation</Button>
-            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
index 243b02046..9b1e3abe6 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
@@ -88,7 +88,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No logs available</p>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index 01b7333bb..ec93ad4e9 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -124,20 +124,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Add your first member to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button external secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Add your first member to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
index c728da920..24148db82 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
@@ -88,7 +88,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No logs available</p>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index 91621be3c..52de8964c 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -78,7 +78,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No memberships available</p>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
index 90a2511dc..4a1c87b33 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
@@ -91,7 +91,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No session available</p>
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index 87ea885b8..98e51b371 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -49,16 +49,9 @@
                 </GridItem1>
             {/each}
             {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new database</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty isButton on:click={() => (showCreate = true)}>
+                    <p>Create a new database</p>
+                </Empty>
             {/if}
         </div>
 
@@ -67,20 +60,8 @@
             <Pagination {limit} bind:offset sum={$databaseList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first Database to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Create your first Database to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 292b78d7e..7e10fbbb8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -63,16 +63,9 @@
                 </GridItem1>
             {/each}
             {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new collection</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty isButton on:click={() => (showCreate = true)}>
+                    <p>Create a new collection</p>
+                </Empty>
             {/if}
         </div>
 
@@ -97,20 +90,8 @@
             <Pagination {limit} bind:offset sum={$collections?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first collection to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Create your first collection to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index 86432284b..df33d2a5e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -82,20 +82,8 @@
             <Pagination {limit} bind:offset sum={$documentList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={openWizard}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Crate your first document to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={openWizard}>
+            <p>Crate your first document to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 406ffb0b5..e99c9e8b8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -115,20 +115,8 @@
             <Pagination {limit} bind:offset sum={$collection?.attributes?.length} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Crate your first attribute to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Crate your first attribute to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
index 28660c810..33a3bf604 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
@@ -157,36 +157,12 @@
             <Pagination {limit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if $collection.indexes?.length}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreateIndex = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first attribute to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#?">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreateIndex = true)}>
+            <p>Create your first attribute to get started</p>
         </Empty>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreateIndex = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first index to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreateIndex = true)}>
+            <p>Create your first index to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index 12ceda635..4d69a9146 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -41,13 +41,18 @@
             <Pagination {limit} bind:offset sum={response.total} />
         {:else if search}
             <Empty>
-                <svelte:fragment slot="header"
-                    >No results found for <b>{search}</b></svelte:fragment>
+                <div class="u-flex u-flex-vertical">
+                    No results found for <b>{search}</b>
+                </div>
             </Empty>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No Functions Found</svelte:fragment>
-                You haven't created any functions for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No Functions Found</div>
+                    <div class="common-section">
+                        You haven't created any functions for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
     {/await}
diff --git a/src/routes/console/project-[project]/keys/+page.svelte b/src/routes/console/project-[project]/keys/+page.svelte
index 7a35ca087..05f59eee2 100644
--- a/src/routes/console/project-[project]/keys/+page.svelte
+++ b/src/routes/console/project-[project]/keys/+page.svelte
@@ -48,8 +48,12 @@
             </Table>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No API Keys Found</svelte:fragment>
-                You haven't created any API keys for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No API Keys Found</div>
+                    <div class="common-section">
+                        You haven't created any API keys for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
         <Button on:click={() => (showCreate = true)}>Add API Key</Button>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 03e7e9c51..9de1c4927 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, EmptyGridItem } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -82,16 +82,9 @@
                 </GridItem1>
             {/each}
             {#if $bucketList.total % 2 !== 0}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Add a new bucket</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty isButton on:click={() => (showCreate = true)}>
+                    <p>Add a new bucket</p>
+                </Empty>
             {/if}
         </ul>
 
@@ -116,22 +109,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <div class="u-flex u-flex-vertical u-cross-center">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => (showCreate = true)}>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Add your first bucket to get started</p>
-                    </div>
-                    <div class="common-section">
-                        <Button secondary href="#">Documentation</Button>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Add your first bucket to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index 1ec1df410..f07504900 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -195,20 +195,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Upload some files to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single on:click={() => (showCreate = true)}>
+            <p>Upload some files to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/webhooks/+page.svelte b/src/routes/console/project-[project]/webhooks/+page.svelte
index 66f1242d7..cf6d0ecfa 100644
--- a/src/routes/console/project-[project]/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/webhooks/+page.svelte
@@ -46,8 +46,12 @@
             </Table>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No Webhooks Found</svelte:fragment>
-                You haven't created any webhooks for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No Webhooks Found</div>
+                    <div class="common-section">
+                        You haven't created any webhooks for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
     {/await}