diff --git a/src/assets/images/heart.svg b/src/assets/images/heart.svg
new file mode 100644
index 00000000..3a4fb922
--- /dev/null
+++ b/src/assets/images/heart.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50" fill="red"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"/></svg>
\ No newline at end of file
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 39601867..bb128f87 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -2,7 +2,8 @@
 import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig';
 
 // Components
-import Footer from '@/layouts/components/Footer.vue';
+// import Footer from '@/layouts/components/Footer.vue';
+import newFooter from '@/layouts/components/newFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
 import UserProfile from '@/layouts/components/ChainProfile.vue';
 
@@ -79,7 +80,8 @@ blockchain.$subscribe((m, s) => {
 
     <!-- 👉 Footer -->
     <template #footer>
-      <Footer />
+      <!-- <Footer /> -->
+      <newFooter />
     </template>
 
     <!-- 👉 Customizer -->
diff --git a/src/layouts/components/newFooter.vue b/src/layouts/components/newFooter.vue
new file mode 100644
index 00000000..197c950f
--- /dev/null
+++ b/src/layouts/components/newFooter.vue
@@ -0,0 +1,26 @@
+<template>
+    <footer class="footer items-center p-4 text-base">
+        <div class="items-center grid-flow-col">
+            &copy;
+            {{ new Date().getFullYear() }}
+            Made With
+            <img src="../../assets/images/heart.svg"/>
+            By
+            <a class="link link-info no-underline" 
+            href="https://ping.pub"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Ping.pub</a>
+        </div> 
+        <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end hidden md:grid">
+            <a  class="link link-info no-underline" 
+                href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
+                target="noopener noreferrer"
+            >License</a>
+            <a class="link link-info no-underline" 
+                href="https://github.com/ping-pub/explorer"
+                target="noopener noreferrer"
+            >Github</a>
+        </div>
+    </footer>
+</template>
\ No newline at end of file
diff --git a/src/plugins/vuetify/@layouts/components/VerticalNavLayout.vue b/src/plugins/vuetify/@layouts/components/VerticalNavLayout.vue
index 459ff6c0..bba64d1f 100644
--- a/src/plugins/vuetify/@layouts/components/VerticalNavLayout.vue
+++ b/src/plugins/vuetify/@layouts/components/VerticalNavLayout.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { PropType } from 'vue'
+import type { PropType} from 'vue'
+import {h} from 'vue'
 import { useLayouts } from '@layouts'
 import { VerticalNav } from '@layouts/components'
 import type { VerticalNavItems } from '@layouts/types'
@@ -101,17 +102,20 @@ export default defineComponent({
       )
 
       // 👉 Footer
-      const footer = h(
-        'footer',
-        { class: 'layout-footer' },
-        [
-          h(
-            'div',
-            { class: 'footer-content-container' },
-            slots.footer?.(),
-          ),
-        ],
-      )
+      // const footer = h(
+      //   'footer',
+      //   { class: 'layout-footer' },
+      //   [
+      //     h(
+      //       'div',
+      //       { class: 'footer-content-container' },
+      //       slots.footer?.(),
+      //     ),
+      //   ],
+      // )
+
+      const footer = h('footer',{},slots.footer?.())
+      
 
       // 👉 Overlay
       const layoutOverlay = h(
diff --git a/tailwind.config.js b/tailwind.config.js
index 714811e2..f1cb56ce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,4 +20,17 @@ module.exports = {
   plugins: [
     require("daisyui")
   ],
+  daisyui: {
+    themes: [
+      {
+        light: {
+          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+          // primary: "blue",
+          info: "#666CFF",
+        }
+      },
+      // "light", 
+      "dark"
+    ],
+  }
 };