diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f69fd5..15704d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6164,6 +6164,14 @@ packages:
       pkg-types: 1.0.3
       ufo: 1.3.2
 
+  /mlly@1.6.1:
+    resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
+    dependencies:
+      acorn: 8.11.3
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      ufo: 1.5.3
+
   /mobx-vue-lite@0.4.2(mobx@6.12.0)(vue@3.4.15):
     resolution: {integrity: sha512-Xx5blLWvbH8S+XZqBkQ+5RKUyFmtJZ1r//vQo/Npol3h0ByCbCaxRcf2Icnj2CGt8h/9jPdTLjJEkezoo/OHzw==}
     peerDependencies:
@@ -6627,7 +6635,7 @@ packages:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.1
-      mlly: 1.5.0
+      mlly: 1.6.1
       pathe: 1.1.2
 
   /playwright-core@1.44.0-alpha-2024-04-05:
@@ -7702,6 +7710,9 @@ packages:
   /ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
 
+  /ufo@1.5.3:
+    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+
   /unc-path-regex@0.1.2:
     resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
     engines: {node: '>=0.10.0'}
diff --git a/src/components/popups/ProposalDeposit.vue b/src/components/popups/ProposalDeposit.vue
index c35c4d9..eaae4a9 100644
--- a/src/components/popups/ProposalDeposit.vue
+++ b/src/components/popups/ProposalDeposit.vue
@@ -14,6 +14,8 @@ import CommonButton from "@/components/ui/CommonButton.vue";
 import { useWallet } from "@/composables/useWallet";
 import { useClipboard } from "@vueuse/core";
 import { useProposals } from "@/composables/useProposals";
+import { useTelemetry } from "@/composables/useTelemetry";
+
 import { formatAmount } from "@/utility";
 
 interface Props {
@@ -49,6 +51,7 @@ const toggleModal = (dir: boolean) => {
   resetDeposit();
 };
 
+const { logEvent } = useTelemetry();
 const { depositProposal } = useProposals();
 const { address } = useWallet();
 
@@ -72,6 +75,10 @@ const signDeposit = async (isCLI = false) => {
 
   cliDepositInput.value = (isCLI ? depot : "") as string;
   displayState.value = isCLI ? "CLI" : "deposited";
+
+  logEvent("Sign Popup ProposalDeposit", {
+    signOption: isCLI ? "CLI" : "GUI",
+  });
 };
 
 const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
@@ -82,7 +89,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
     <div>
       <div
         class="justify-center px-6 py-4 rounded link-gradient text-dark text-300 text-center cursor-pointer"
-        @click="toggleModal(true)"
+        @click="() => (logEvent('Click Popup ProposalDeposit'), toggleModal(true))"
       >
         {{ $t("components.ProposalDeposit.cta") }}
       </div>
diff --git a/src/components/popups/ProposalVote.vue b/src/components/popups/ProposalVote.vue
index 1027398..39cb895 100644
--- a/src/components/popups/ProposalVote.vue
+++ b/src/components/popups/ProposalVote.vue
@@ -17,6 +17,7 @@ import UiInfo from "@/components/ui/UiInfo.vue";
 import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 import { useClipboard } from "@vueuse/core";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 interface Props {
   proposalId?: number;
@@ -70,6 +71,7 @@ const checkVoteWeighted = computed(
 
 const { voteProposal, voteWeightedProposal } = useProposals();
 const { address } = useWallet();
+const { logEvent } = useTelemetry();
 
 const signVote = async (isCLI = false) => {
   if (!props.proposalId) return;
@@ -121,6 +123,8 @@ const signVote = async (isCLI = false) => {
 
   cliVoteInput.value = (isCLI ? vote : "") as string;
   displayState.value = isCLI ? "CLI" : "voted";
+
+  logEvent("Sign Popup ProposalVote", { signOption: isCLI ? "CLI" : "GUI" });
 };
 
 const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
@@ -131,7 +135,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
     <div>
       <div
         class="justify-center px-6 py-4 rounded link-gradient hover: text-dark text-300 text-center cursor-pointer"
-        @click="toogleModal(true)"
+        @click="() => (logEvent('Click Popup ProposalVote'), toogleModal(true))"
       >
         {{ $t("components.ProposalVote.cta") }}
       </div>
diff --git a/src/components/popups/WalletConnect.vue b/src/components/popups/WalletConnect.vue
index ad40bc6..a886a48 100644
--- a/src/components/popups/WalletConnect.vue
+++ b/src/components/popups/WalletConnect.vue
@@ -5,6 +5,7 @@ import { Ref, computed, ref } from "vue";
 import { shorten } from "@/utility";
 import UserBalance from "@/components/helper/UserBalance.vue";
 import { bus } from "@/bus";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 const isOpen = ref(false);
 const isConnecting = ref(false);
@@ -64,6 +65,8 @@ const cancelConnect = () => {
 bus.on("open", () => {
   isOpen.value = true;
 });
+
+const { logEvent } = useTelemetry();
 </script>
 
 <template>
@@ -72,7 +75,12 @@ bus.on("open", () => {
     <template v-if="connectState">
       <button
         class="justify-center px-6 py-4 rounded bg-grey-400 text-300 text-center hover:bg-light hover:text-dark duration-200"
-        @click="isOpen = true"
+        @click="
+          () => {
+            isOpen = true;
+            logEvent('Click Header ConnectWallet');
+          }
+        "
       >
         {{ $t("components.WalletConnect.button") }}
       </button>
diff --git a/src/components/proposals/ProposalWrapper.vue b/src/components/proposals/ProposalWrapper.vue
index a3b9efa..72b8a49 100644
--- a/src/components/proposals/ProposalWrapper.vue
+++ b/src/components/proposals/ProposalWrapper.vue
@@ -25,6 +25,8 @@ import * as Utility from "@/utility/index";
 import CommonButton from "../ui/CommonButton.vue";
 import Breakdown from "@/components/proposals/Breakdown.vue";
 import ValidatorBreakdown from "./ValidatorBreakdown.vue";
+import { useTelemetry } from "@/composables/useTelemetry";
+
 import MarkdownParser from "@/components/common/MarkdownParser.vue";
 import ModalBox from "@/components/common/ModalBox.vue";
 import { VCodeBlock } from "@wdns/vue-code-block";
@@ -374,9 +376,13 @@ function isTabSelected(tabName: TabNames) {
   return tabSelected.value.toLowerCase() == tabName.toLowerCase();
 }
 
+const { logEvent } = useTelemetry();
+
 function showBreakdown(type: BreakdownType) {
   breakdownType.value = type;
   breakdownOffset.value = 0;
+  if (type === null) return;
+  logEvent(type === "voters" ? "Click Voters Breakdown" : "Click Validators Breakdown");
 }
 </script>
 
@@ -781,6 +787,7 @@ function showBreakdown(type: BreakdownType) {
         </div>
       </Transition>
     </div>
+    
     <ModalBox v-model="showJsonModal" title="JSON" @close="showJsonModal = false">
       <div v-if="proposal" class="p-4">
         <VCodeBlock :code="JSON.stringify(proposal, null, '\t')" prismjs />
diff --git a/src/components/ui/UiTabs.vue b/src/components/ui/UiTabs.vue
index 22815ac..d93e768 100644
--- a/src/components/ui/UiTabs.vue
+++ b/src/components/ui/UiTabs.vue
@@ -1,5 +1,16 @@
 <template>
-  <DropDown v-model="tabIdx" :values="options" class="md:hidden" v-bind="$attrs" @select="changeTab" />
+  <DropDown
+    v-model="tabIdx"
+    :values="options"
+    class="md:hidden"
+    v-bind="$attrs"
+    @select="
+      (id: number) => {
+        changeTab(id);
+        logEvent('Click Tab', { tabOption: options[id] });
+      }
+    "
+  />
 
   <div class="hidden md:flex flex-col w-full pt-12 relative" v-bind="$attrs">
     <div
@@ -30,6 +41,7 @@
           ref="togglerOption"
           :for="id + option"
           class="flex text-grey-50 py-1.5 text-500 cursor-pointer peer-checked:text-light ease-in-out duration-300"
+          @click="logEvent('Click Tab', { tabOption: option })"
         >
           {{ $t("ui.tabs." + option) }}
         </label>
@@ -45,6 +57,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import DropDown from "./DropDown.vue";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 type Props = {
   modelValue?: string | number;
@@ -75,5 +88,7 @@ function changeTab(idx: number = 0, isClicked = true) {
   line.value.style.width = `${el.getBoundingClientRect().width}px`;
 }
 
+const { logEvent } = useTelemetry();
+
 onMounted(changeTab);
 </script>
diff --git a/src/composables/useTelemetry.ts b/src/composables/useTelemetry.ts
new file mode 100644
index 0000000..43a9df3
--- /dev/null
+++ b/src/composables/useTelemetry.ts
@@ -0,0 +1,241 @@
+/***
+ * Plausible tracker API - 0.3.8: https://github.com/plausible/plausible-tracker/tree/master/src/lib
+ */
+type Eventprops = Record<string, string>;
+type PlausibleInitOptions = {
+  readonly hashMode?: boolean;
+  readonly trackLocalhost?: boolean;
+  readonly domain?: Location["hostname"];
+  readonly apiHost?: string;
+};
+type PlausibleEventData = {
+  readonly url?: Location["href"];
+  readonly referrer?: Document["referrer"] | null;
+  readonly deviceWidth?: Window["innerWidth"];
+};
+type PlausibleOptions = PlausibleInitOptions & PlausibleEventData;
+type TrackEvent = (eventName: string, options?: EventOptions, eventData?: PlausibleOptions) => void;
+type TrackPageview = (eventData?: PlausibleOptions, options?: EventOptions) => void;
+type Cleanup = () => void;
+
+type EventPayload = {
+  readonly n: string;
+  readonly u: Location["href"];
+  readonly d: Location["hostname"];
+  readonly r: Document["referrer"] | null;
+  readonly w: Window["innerWidth"];
+  readonly h: 1 | 0;
+  readonly p?: string;
+};
+
+type EventOptions = {
+  readonly callback?: () => void;
+  readonly props?: { readonly [propName: string]: string | number | boolean };
+};
+
+type EnableAutoPageviews = () => Cleanup;
+type EnableAutoOutboundTracking = (targetNode?: Node & ParentNode, observerInit?: MutationObserverInit) => Cleanup;
+
+/***
+ * FUNC: Plausible API
+ */
+function sendEvent(eventName: string, data: Required<PlausibleOptions>, options?: EventOptions): void {
+  const isLocalhost =
+    /^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*:)*?:?0*1$/.test(location.hostname) ||
+    location.protocol === "file:";
+
+  if (!data.trackLocalhost && isLocalhost) {
+    return console.warn("[Plausible] Ignoring event because website is running locally");
+  }
+
+  try {
+    if (window.localStorage.plausible_ignore === "true") {
+      return console.warn('[Plausible] Ignoring event because "plausible_ignore" is set to "true" in localStorage');
+    }
+  } catch (e) {
+    null;
+  }
+
+  const payload: EventPayload = {
+    n: eventName,
+    u: data.url,
+    d: data.domain,
+    r: data.referrer,
+    w: data.deviceWidth,
+    h: data.hashMode ? 1 : 0,
+    p: options && options.props ? JSON.stringify(options.props) : undefined,
+  };
+
+  const req = new XMLHttpRequest();
+  req.open("POST", `${data.apiHost}/api/event`, true);
+  req.setRequestHeader("Content-Type", "text/plain");
+  req.send(JSON.stringify(payload));
+
+  req.onreadystatechange = () => {
+    if (req.readyState !== 4) return;
+    if (options && options.callback) {
+      options.callback();
+    }
+  };
+}
+
+function Plausible(defaults?: PlausibleInitOptions): {
+  readonly trackEvent: TrackEvent;
+  readonly trackPageview: TrackPageview;
+  readonly enableAutoPageviews: EnableAutoPageviews;
+  readonly enableAutoOutboundTracking: EnableAutoOutboundTracking;
+} {
+  const getConfig = (): Required<PlausibleOptions> => ({
+    hashMode: false,
+    trackLocalhost: false,
+    url: location.href,
+    domain: location.hostname,
+    referrer: document.referrer || null,
+    deviceWidth: window.innerWidth,
+    apiHost: "https://plausible.io",
+    ...defaults,
+  });
+
+  const trackEvent: TrackEvent = (eventName, options, eventData) => {
+    sendEvent(eventName, { ...getConfig(), ...eventData }, options);
+  };
+
+  const trackPageview: TrackPageview = (eventData, options) => {
+    trackEvent("pageview", options, eventData);
+  };
+
+  const enableAutoPageviews: EnableAutoPageviews = () => {
+    const page = () => trackPageview();
+    // Attach pushState and popState listeners
+    const originalPushState = history.pushState;
+    if (originalPushState) {
+      history.pushState = function (data, title, url) {
+        originalPushState.apply(this, [data, title, url]);
+        page();
+      };
+      addEventListener("popstate", page);
+    }
+
+    // Attach hashchange listener
+    if (defaults && defaults.hashMode) {
+      addEventListener("hashchange", page);
+    }
+
+    // Trigger first page view
+    trackPageview();
+
+    return function cleanup() {
+      if (originalPushState) {
+        history.pushState = originalPushState;
+        removeEventListener("popstate", page);
+      }
+      if (defaults && defaults.hashMode) {
+        removeEventListener("hashchange", page);
+      }
+    };
+  };
+
+  const enableAutoOutboundTracking: EnableAutoOutboundTracking = (
+    targetNode: Node & ParentNode = document,
+    observerInit: MutationObserverInit = {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["href"],
+    },
+  ) => {
+    function trackClick(this: HTMLAnchorElement, event: MouseEvent) {
+      trackEvent("Outbound Link: Click", { props: { url: this.href } });
+
+      if (!(typeof process !== "undefined" && process && process.env.NODE_ENV === "test")) {
+        setTimeout(() => {
+          location.href = this.href;
+        }, 150);
+      }
+
+      event.preventDefault();
+    }
+
+    const tracked: Set<HTMLAnchorElement> = new Set();
+
+    function addNode(node: Node | ParentNode) {
+      if (node instanceof HTMLAnchorElement) {
+        if (node.host !== location.host) {
+          node.addEventListener("click", trackClick);
+          tracked.add(node);
+        }
+      } else if ("querySelectorAll" in node) {
+        node.querySelectorAll("a").forEach(addNode);
+      }
+    }
+
+    function removeNode(node: Node | ParentNode) {
+      if (node instanceof HTMLAnchorElement) {
+        node.removeEventListener("click", trackClick);
+        tracked.delete(node);
+      } else if ("querySelectorAll" in node) {
+        node.querySelectorAll("a").forEach(removeNode);
+      }
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes") {
+          // Handle changed href
+          removeNode(mutation.target);
+          addNode(mutation.target);
+        } else if (mutation.type === "childList") {
+          mutation.addedNodes.forEach(addNode);
+          mutation.removedNodes.forEach(removeNode);
+        }
+      });
+    });
+
+    // Track existing nodes
+    targetNode.querySelectorAll("a").forEach(addNode);
+
+    // Observe mutations
+    observer.observe(targetNode, observerInit);
+
+    return function cleanup() {
+      tracked.forEach((a) => {
+        a.removeEventListener("click", trackClick);
+      });
+      tracked.clear();
+      observer.disconnect();
+    };
+  };
+
+  return {
+    trackEvent,
+    trackPageview,
+    enableAutoPageviews,
+    enableAutoOutboundTracking,
+  };
+}
+
+/***
+ * COMPOSABLE: Plausible config
+ */
+const plausible = Plausible({
+  domain: "govgen-governance-dapp.netlify.app",
+  trackLocalhost: true,
+});
+
+/***
+ * COMPOSABLE: useTelemetry
+ */
+const useTelemetry = () => {
+  const { trackEvent, enableAutoPageviews, enableAutoOutboundTracking } = plausible;
+
+  const logEvent = (eventName: string, eventOptions?: Eventprops) => {
+    trackEvent(eventName, { props: eventOptions });
+  };
+
+  const logPageviews = () => enableAutoPageviews();
+  const logOutboundlinks = () => enableAutoOutboundTracking();
+
+  return { logEvent, logPageviews, logOutboundlinks };
+};
+
+export { useTelemetry };
diff --git a/src/router/index.ts b/src/router/index.ts
index ec4060a..73bd15a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "@/views/HomeView.vue";
 import CreateProposalView from "@/views/CreateProposalView.vue";
 import ProposalView from "@/views/ProposalView.vue";
-// import DesignView from "@/views/Design.vue";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 const routerHistory = createWebHistory();
 const routes = [
@@ -25,4 +25,7 @@ const router = createRouter({
   },
 });
 
+const { logPageviews } = useTelemetry();
+logPageviews();
+
 export default router;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4e227b5..d2b45fe 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,6 +11,7 @@ import { provideApolloClient } from "@vue/apollo-composable";
 import apolloClient from "@/apolloClient";
 
 import { useChainData } from "@/composables/useChainData";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 const typeFilterIndex = ref(0);
 const activityFilterIndex = ref(0);
@@ -120,14 +121,21 @@ watch(offset, async (newOffset, oldOffset) => {
     }
   }
 });
+
+const { logEvent } = useTelemetry();
+const typeFilter = ["All Proposals", "Deposit", "Voting", "Passed", "Rejected", "Failed"];
+const activityFilter = ["Active First", "Passed First", "Rejected First", "Failed First"];
+
 function setActivityFilterIndex(idx: number) {
   // Needs integration to filter proposals
   activityFilterIndex.value = idx;
+  logEvent("Select Prop Activity Filter", { filterActivityOption: typeFilter[idx] });
 }
 
 function setTypeFilterIndex(idx: number) {
   // Needs integration to filter proposals
   typeFilterIndex.value = idx;
+  logEvent("Select Prop Type Filter", { filterTypeOption: activityFilter[idx] });
 }
 
 function onSearchInput() {
@@ -148,13 +156,24 @@ function onSearchInput() {
         <!-- Chain Title -->
         <!-- Chain Links -->
         <div class="flex flex-row gap-6 text-grey-100 flex-wrap">
-          <a href="https://govgen.io" target="_blank" class="flex flex-row gap-2 hover:text-grey-50">
+          <a
+            href="https://govgen.io"
+            target="_blank"
+            class="flex flex-row gap-2 hover:text-grey-50"
+            @click="logEvent('Click Home Website')"
+          >
             <Icon icon="link" /><span>{{ $t("homepage.website") }}</span>
           </a>
           <span>|</span>
           <!-- Chain Socials -->
           <div class="flex flex-row gap-4 items-center justify-center">
-            <a v-for="(linkData, index) in links" :key="index" class="flex items-center" :href="linkData.url">
+            <a
+              v-for="(linkData, index) in links"
+              :key="index"
+              class="flex items-center"
+              :href="linkData.url"
+              @click="logEvent('Click Home Social', { socialOption: linkData.title })"
+            >
               <Icon :icon="linkData.icon" class="hover:text-grey-50 hover:cursor-pointer" />
             </a>
           </div>
@@ -180,16 +199,11 @@ function onSearchInput() {
       <!-- Filters -->
       <div class="flex flex-col gap-4 w-full justify-start md:flex-row lg:items-center lg:justify-end">
         <!-- Select Type -->
-        <DropDown
-          v-model="typeFilterIndex"
-          :values="['All Proposals', 'Deposit', 'Voting', 'Passed', 'Rejected', 'Failed']"
-          class="w-full lg:w-fit"
-          @select="setTypeFilterIndex"
-        />
+        <DropDown v-model="typeFilterIndex" :values="typeFilter" class="w-full lg:w-fit" @select="setTypeFilterIndex" />
         <!-- Show 'x' First -->
         <DropDown
           v-model="activityFilterIndex"
-          :values="['Active First', 'Passed First', 'Rejected First', 'Failed First']"
+          :values="activityFilter"
           class="w-full lg:w-fit"
           @select="setActivityFilterIndex"
         />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fa4e89f..31380b0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,11 +1,10 @@
 import { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 import defaultTheme from "tailwindcss/defaultTheme";
-import twTypography from '@tailwindcss/typography'
+import twTypography from "@tailwindcss/typography";
 
 const pxToRem = (dest: number) => 1 / (16 / dest);
 
-
 export default <Config>{
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {