diff --git a/components/ChainSelector.vue b/components/ChainSelector.vue
index 27b4245..67df653 100755
--- a/components/ChainSelector.vue
+++ b/components/ChainSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { switchChain, watchAccount } from '@wagmi/core';
+import { switchChain, watchAccount, watchChainId } from '@wagmi/core';
 import { useAccount } from '@wagmi/vue';
 import { config, defaultChain } from '@/config/wagmi.config';
 
@@ -10,7 +10,13 @@ const unwatch = watchAccount(config, {
     console.log('Account changed!', data);
   },
 });
+const unwatchChainId = watchChainId(config, {
+  onChange(data) {
+    console.log('Chain ID changed!', data);
+  },
+});
 unwatch();
+unwatchChainId();
 </script>
 
 <template>
diff --git a/components/DashboardFooter.vue b/components/DashboardFooter.vue
index 4d52238..d75dea5 100644
--- a/components/DashboardFooter.vue
+++ b/components/DashboardFooter.vue
@@ -1,26 +1,126 @@
 <script setup lang="ts">
 import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
+import { ref } from 'vue';
 
 const config = useRuntimeConfig();
 
 const version = config.public.version;
 const commitHash = config.public.commitHash || 'dev';
 
+const contractLinks = [
+  {
+    name: 'Relay Registry',
+    address: config.public.relayRegistryAddress,
+    type: 'arweave',
+  },
+  {
+    name: 'Facilitator',
+    address: config.public.facilitatorContract,
+    type: 'evm',
+  },
+  {
+    name: 'Sepolia ANON Token',
+    address: config.public.sepoliaAtorTokenContract,
+    type: 'evm',
+  },
+  {
+    name: 'Distribution Contract',
+    address: config.public.distributionContract,
+    type: 'arweave',
+  },
+  {
+    name: 'Metrics Deployer',
+    address: config.public.metricsDeployer,
+    type: 'arweave',
+  },
+  {
+    name: 'Registrator',
+    address: config.public.registratorContract,
+    type: 'evm',
+  },
+];
+
+const getLink = (address: string, type: string) => {
+  switch (type) {
+    case 'evmMain':
+      return `https://etherscan.io/address/${address}`;
+    case 'evm':
+      return `https://sepolia.etherscan.io/address/${address}`;
+    case 'arweave':
+      return `https://sonar.warp.cc/#/app/contract/${address}`;
+    default:
+      return '#';
+  }
+};
+
+const isOpen = ref(false);
 </script>
 
 <template>
-   <footer
-      class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center  items-center rounded-xl">
+  <footer
+    class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center items-center flex-col rounded-xl"
+  >
+    <UModal v-model="isOpen">
+      <UCard class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
+        <template #header>
+          <h4 class="text-lg font-semibold mb-4">Contract Links</h4>
+        </template>
+
+        <div class="space-y-4">
+          <ul
+            class="list-disc flex flex-col lg:grid lg:grid-cols-3 gap-2 text-center"
+          >
+            <li
+              v-for="link in contractLinks"
+              :key="link.address"
+              class="ml-5 text-left"
+            >
+              <a
+                :href="getLink(link.address, link.type)"
+                target="_blank"
+                class="text-sm text-cyan-800 dark:text-cyan-200 hover:underline"
+              >
+                {{ link.name }}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <template #footer>
+          <UButton variant="outline" class="mt-4 w-full" @click="isOpen = false"
+            >Close</UButton
+          >
+        </template>
+      </UCard>
+    </UModal>
+
+    <div class="flex justify-between items-center rounded-xl w-full">
       <div class="flex gap-2">
-         <h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
+        <h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
+        <div class="font-brand tracking-wider">
+          <UButton variant="outline" @click="isOpen = true"
+            >View Contracts</UButton
+          >
+        </div>
       </div>
-
-      <div class="text-sm text-gray-600 dark:text-gray-300  justify-self-center margin-auto">
-         Version: {{ version }} | Commit: {{ commitHash }}
+      <div
+        class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto"
+      >
+        Version: {{ version }} | Commit: {{ commitHash }}
       </div>
-
-      <div class="lg:hidden flex items-center gap-2">
-         <ButtonThemeToggle />
+      <div>
+        <div class="lg:hidden flex items-center gap-2">
+          <ButtonThemeToggle />
+        </div>
       </div>
-   </footer>
+    </div>
+  </footer>
 </template>
+<style scoped>
+@media (min-width: 1024px) {
+  ul.list-disc {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/components/ui-kit/ReportIssueButton.vue b/components/ui-kit/ReportIssueButton.vue
index d6e7dcc..a05e0e3 100755
--- a/components/ui-kit/ReportIssueButton.vue
+++ b/components/ui-kit/ReportIssueButton.vue
@@ -1,14 +1,8 @@
 <template>
-  <UButton
-    variant="outline"
-    @click="onReportIssueClicked"
-    class=" flex p-2 gap-3 items-center text-left cursor-pointer hover:bg-slate-100 hover:text-white dark:hover:bg-cyan-600 dark:hover:text-white"
-  >
-  <UIcon
-      name="i-heroicons-exclamation-circle"
-    />
-    <div class="flex flex-col flex-wrap gap-1">
-      <span class="dark:text-white text-xs uppercase text-black">Report Issue</span>
+  <UButton variant="outline" @click="onReportIssueClicked">
+    <UIcon name="i-heroicons-exclamation-circle" />
+    <div>
+      <span>Report Issue</span>
     </div>
   </UButton>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 6f675dd..d58d25d 100755
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,8 +20,7 @@ import { initDistribution, useDistribution } from '@/composables/distribution';
 import { useRegistratorStore } from '@/stores/useRegistratorStore';
 import type { ClaimProcess } from '@/types/facilitator';
 import ReportIssueButton from '@/components/ui-kit/ReportIssueButton.vue';
-import  ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
-
+import ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
 
 const userStore = useUserStore();
 const facilitatorStore = useFacilitatorStore();
@@ -104,23 +103,22 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
   <div
     class="relative grid grid-flow-row grid-cols-1 pt-4 lg:pt-0 gap-6 lg:grid-cols-6"
   >
-    <div
-      class="flex w-full flex-col gap-4  lg:col-span-6 lg:flex-row-reverse"
-    >
+    <div class="flex w-full flex-col gap-4 lg:col-span-6 lg:flex-row-reverse">
       <DashboardMobileSection class="lg:basis-1/2" title="account-balance">
         <Card title="Account balance" :icon="'eos-icons:master-outlined'">
-          <div class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0">
-
-          <p class="mb-4 text-sm">
-            The connected wallet shows the following balance:
-          </p>
-          <ReportIssueButton />
-        </div>
+          <div
+            class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0"
+          >
+            <p class="mb-4 text-sm">
+              The connected wallet shows the following balance:
+            </p>
+            <ReportIssueButton />
+          </div>
 
           <div class="flex gap-5 lg:gap-32 flex-col lg:flex-row">
             <div class="border-l-4 border-cyan-600 pl-3">
               <UserBalance
-                class="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-6xl font-bold text-transparent drop-shadow-lg dark:from-gray-200 dark:to-gray-500 "
+                class="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-6xl font-bold text-transparent drop-shadow-lg dark:from-gray-200 dark:to-gray-500"
               >
                 <p class="ml-1 mt-2 text-sm"><Ticker /> Account balance</p>
               </UserBalance>
@@ -144,10 +142,12 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
 
       <DashboardMobileSection class="lg:basis-1/2" title="my-rewards">
         <Card>
-          <div class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0">
+          <div
+            class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0"
+          >
             <div>
               <h2
-                class="dark:text-cyan-200 lg:text-3xl text-2xl tracking-wide flex items-center  gap-2 font-brand"
+                class="dark:text-cyan-200 lg:text-3xl text-2xl tracking-wide flex items-center gap-2 font-brand"
               >
                 <Icon name="eos-icons:trusted-organization" />
                 Rewards history
@@ -157,7 +157,7 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
               </p>
             </div>
             <div v-if="isConnected" class="redeem flex gap-6 items-center">
-              <div class="divider  hidden lg:visible"></div>
+              <div class="divider hidden lg:visible"></div>
               <div>
                 <Button
                   :disabled="
@@ -233,8 +233,6 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
   </DashboardMobileSection>
   <ReportIssueDialog />
   <SupportIssueDialog />
-
-
 </template>
 
 <style scoped lang="scss">