diff --git a/public/index.html b/public/index.html
index fdd2ce36..da3034d1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,5 +25,6 @@
       >
     </noscript>
     <div id="app"></div>
+    <script src="/svg-inject.min.js"></script>
   </body>
 </html>
diff --git a/public/svg-inject.min.js b/public/svg-inject.min.js
new file mode 100644
index 00000000..c2947ca8
--- /dev/null
+++ b/public/svg-inject.min.js
@@ -0,0 +1,322 @@
+!(function (o, l) {
+  var r,
+    a,
+    s = 'createElement',
+    g = 'getElementsByTagName',
+    b = 'length',
+    E = 'style',
+    d = 'title',
+    y = 'undefined',
+    k = 'setAttribute',
+    w = 'getAttribute',
+    x = null,
+    A = '__svgInject',
+    C = '--inject-',
+    S = new RegExp(C + '\\d+', 'g'),
+    I = 'LOAD_FAIL',
+    t = 'SVG_NOT_SUPPORTED',
+    L = 'SVG_INVALID',
+    v = ['src', 'alt', 'onload', 'onerror'],
+    j = l[s]('a'),
+    G = typeof SVGRect != y,
+    f = { useCache: !0, copyAttributes: !0, makeIdsUnique: !0 },
+    N = {
+      clipPath: ['clip-path'],
+      'color-profile': x,
+      cursor: x,
+      filter: x,
+      linearGradient: ['fill', 'stroke'],
+      marker: ['marker', 'marker-end', 'marker-mid', 'marker-start'],
+      mask: x,
+      pattern: ['fill', 'stroke'],
+      radialGradient: ['fill', 'stroke'],
+    },
+    u = 1,
+    c = 2,
+    O = 1
+  function T(e) {
+    return (r = r || new XMLSerializer()).serializeToString(e)
+  }
+  function P(e, r) {
+    var t,
+      n,
+      i,
+      o,
+      a = C + O++,
+      f = /url\("?#([a-zA-Z][\w:.-]*)"?\)/g,
+      u = e.querySelectorAll('[id]'),
+      c = r ? [] : x,
+      l = {},
+      s = [],
+      d = !1
+    if (u[b]) {
+      for (i = 0; i < u[b]; i++) (n = u[i].localName) in N && (l[n] = 1)
+      for (n in l)
+        (N[n] || [n]).forEach(function (e) {
+          s.indexOf(e) < 0 && s.push(e)
+        })
+      s[b] && s.push(E)
+      var v,
+        p,
+        m,
+        h = e[g]('*'),
+        y = e
+      for (i = -1; y != x; ) {
+        if (y.localName == E)
+          (m =
+            (p = y.textContent) &&
+            p.replace(f, function (e, r) {
+              return c && (c[r] = 1), 'url(#' + r + a + ')'
+            })) !== p && (y.textContent = m)
+        else if (y.hasAttributes()) {
+          for (o = 0; o < s[b]; o++)
+            (v = s[o]),
+              (m =
+                (p = y[w](v)) &&
+                p.replace(f, function (e, r) {
+                  return c && (c[r] = 1), 'url(#' + r + a + ')'
+                })) !== p && y[k](v, m)
+          ;['xlink:href', 'href'].forEach(function (e) {
+            var r = y[w](e)
+            ;/^\s*#/.test(r) &&
+              ((r = r.trim()), y[k](e, r + a), c && (c[r.substring(1)] = 1))
+          })
+        }
+        y = h[++i]
+      }
+      for (i = 0; i < u[b]; i++)
+        (t = u[i]), (c && !c[t.id]) || ((t.id += a), (d = !0))
+    }
+    return d
+  }
+  function V(e, r, t, n) {
+    if (r) {
+      r[k]('data-inject-url', t)
+      var i = e.parentNode
+      if (i) {
+        n.copyAttributes &&
+          (function c(e, r) {
+            for (var t, n, i, o = e.attributes, a = 0; a < o[b]; a++)
+              if (((n = (t = o[a]).name), -1 == v.indexOf(n)))
+                if (((i = t.value), n == d)) {
+                  var f,
+                    u = r.firstElementChild
+                  u && u.localName.toLowerCase() == d
+                    ? (f = u)
+                    : ((f = l[s + 'NS']('http://www.w3.org/2000/svg', d)),
+                      r.insertBefore(f, u)),
+                    (f.textContent = i)
+                } else r[k](n, i)
+          })(e, r)
+        var o = n.beforeInject,
+          a = (o && o(e, r)) || r
+        i.replaceChild(a, e), (e[A] = u), m(e)
+        var f = n.afterInject
+        f && f(e, a)
+      }
+    } else D(e, n)
+  }
+  function p() {
+    for (var e = {}, r = arguments, t = 0; t < r[b]; t++) {
+      var n = r[t]
+      for (var i in n) n.hasOwnProperty(i) && (e[i] = n[i])
+    }
+    return e
+  }
+  function _(e, r) {
+    if (r) {
+      var t
+      try {
+        t = (function i(e) {
+          return (a = a || new DOMParser()).parseFromString(e, 'text/xml')
+        })(e)
+      } catch (o) {
+        return x
+      }
+      return t[g]('parsererror')[b] ? x : t.documentElement
+    }
+    var n = l.createElement('div')
+    return (n.innerHTML = e), n.firstElementChild
+  }
+  function m(e) {
+    e.removeAttribute('onload')
+  }
+  function n(e) {
+    console.error('SVGInject: ' + e)
+  }
+  function i(e, r, t) {
+    ;(e[A] = c), t.onFail ? t.onFail(e, r) : n(r)
+  }
+  function D(e, r) {
+    m(e), i(e, L, r)
+  }
+  function F(e, r) {
+    m(e), i(e, t, r)
+  }
+  function M(e, r) {
+    i(e, I, r)
+  }
+  function q(e) {
+    ;(e.onload = x), (e.onerror = x)
+  }
+  function R(e) {
+    n('no img element')
+  }
+  var e = (function z(e, r) {
+    var t = p(f, r),
+      h = {}
+    function n(a, f) {
+      f = p(t, f)
+      var e = function (r) {
+        var e = function () {
+          var e = f.onAllFinish
+          e && e(), r && r()
+        }
+        if (a && typeof a[b] != y) {
+          var t = 0,
+            n = a[b]
+          if (0 == n) e()
+          else
+            for (
+              var i = function () {
+                  ++t == n && e()
+                },
+                o = 0;
+              o < n;
+              o++
+            )
+              u(a[o], f, i)
+        } else u(a, f, e)
+      }
+      return typeof Promise == y ? e() : new Promise(e)
+    }
+    function u(u, c, e) {
+      if (u) {
+        var r = u[A]
+        if (r) Array.isArray(r) ? r.push(e) : e()
+        else {
+          if ((q(u), !G)) return F(u, c), void e()
+          var t = c.beforeLoad,
+            n = (t && t(u)) || u[w]('src')
+          if (!n) return '' === n && M(u, c), void e()
+          var i = []
+          u[A] = i
+          var l = function () {
+              e(),
+                i.forEach(function (e) {
+                  e()
+                })
+            },
+            s = (function f(e) {
+              return (j.href = e), j.href
+            })(n),
+            d = c.useCache,
+            v = c.makeIdsUnique,
+            p = function (r) {
+              d &&
+                (h[s].forEach(function (e) {
+                  e(r)
+                }),
+                (h[s] = r))
+            }
+          if (d) {
+            var o,
+              a = function (e) {
+                if (e === I) M(u, c)
+                else if (e === L) D(u, c)
+                else {
+                  var r,
+                    t = e[0],
+                    n = e[1],
+                    i = e[2]
+                  v &&
+                    (t === x
+                      ? ((t = P((r = _(n, !1)), !1)),
+                        (e[0] = t),
+                        (e[2] = t && T(r)))
+                      : t &&
+                        (n = (function o(e) {
+                          return e.replace(S, C + O++)
+                        })(i))),
+                    (r = r || _(n, !1)),
+                    V(u, r, s, c)
+                }
+                l()
+              }
+            if (typeof (o = h[s]) != y)
+              return void (o.isCallbackQueue ? o.push(a) : a(o))
+            ;((o = []).isCallbackQueue = !0), (h[s] = o)
+          }
+          !(function m(e, r, t) {
+            if (e) {
+              var n = new XMLHttpRequest()
+              ;(n.onreadystatechange = function () {
+                if (4 == n.readyState) {
+                  var e = n.status
+                  200 == e
+                    ? r(n.responseXML, n.responseText.trim())
+                    : 400 <= e
+                    ? t()
+                    : 0 == e && t()
+                }
+              }),
+                n.open('GET', e, !0),
+                n.send()
+            }
+          })(
+            s,
+            function (e, r) {
+              var t = e instanceof Document ? e.documentElement : _(r, !0),
+                n = c.afterLoad
+              if (n) {
+                var i = n(t, r) || t
+                if (i) {
+                  var o = 'string' == typeof i
+                  ;(r = o ? i : T(t)), (t = o ? _(i, !0) : i)
+                }
+              }
+              if (t instanceof SVGElement) {
+                var a = x
+                if ((v && (a = P(t, !1)), d)) {
+                  var f = a && T(t)
+                  p([a, r, f])
+                }
+                V(u, t, s, c)
+              } else D(u, c), p(L)
+              l()
+            },
+            function () {
+              M(u, c), p(I), l()
+            }
+          )
+        }
+      } else R()
+    }
+    return (
+      G &&
+        (function i(e) {
+          var r = l[g]('head')[0]
+          if (r) {
+            var t = l[s](E)
+            ;(t.type = 'text/css'),
+              t.appendChild(l.createTextNode(e)),
+              r.appendChild(t)
+          }
+        })('img[onload^="' + e + '("]{visibility:hidden;}'),
+      (n.setOptions = function (e) {
+        t = p(t, e)
+      }),
+      (n.create = z),
+      (n.err = function (e, r) {
+        e
+          ? e[A] != c &&
+            (q(e), G ? (m(e), M(e, t)) : F(e, t), r && (m(e), (e.src = r)))
+          : R()
+      }),
+      (o[e] = n)
+    )
+  })('SVGInject')
+  'object' == typeof module &&
+    'object' == typeof module.exports &&
+    (module.exports = e)
+})(window, document)
diff --git a/src/App.vue b/src/App.vue
index cc149842..27b4513f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,25 @@
 <script setup lang="ts">
 import { AppMode } from '@arcana/auth'
 import { useMotions } from '@vueuse/motion'
-import { computed, toRefs, watch, defineAsyncComponent, onMounted } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+// eslint-disable-next-line no-restricted-imports
+import { useSVGInjector } from './utils/useSvgInjector.ts'
+// eslint-disable-next-line no-restricted-imports
+import {
+  getFontFaimly,
+  getFontSizeStyle,
+  getRadius,
+} from './utils/utilsFunction'
+
 import BaseModal from '@/components/BaseModal.vue'
 import type { Theme } from '@/models/Theme'
 import { useActivitiesStore } from '@/store/activities'
@@ -260,15 +276,40 @@ const dragHandler = ({ movement: [_, y], elapsedTime, cancel, dragging }) => {
     cancel()
   }
 }
+
+const expandContainer = ref<HTMLElement | null>(null)
+const collapseContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [expandContainer, collapseContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs, true)
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
+  <div
+    class="flex flex-col h-full"
+    :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+    :style="{
+      backgroundColor: app.theme === 'dark' ? '#13171A' : '#F7F7F7',
+      color: app.theme_settings.font_color,
+      borderRadius: `${getRadius(app.theme_settings.radius)}`,
+      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+        .secondaryFontClass,
+    }"
+  >
     <div
       v-show="expandWallet || app.expandRestoreScreen"
       v-motion="'dragTarget'"
       v-drag="dragHandler"
-      class="flex flex-col h-full bg-white-200 dark:bg-black-eerie overflow-hidden rounded-md"
+      class="flex flex-col h-full overflow-hidden rounded-md"
+      :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+      :style="{
+        backgroundColor: app.theme === 'dark' ? '#13171A' : '#F7F7F7',
+        color: app.theme_settings.font_color,
+        borderRadius: `${getRadius(app.theme_settings.radius)}`,
+        fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+          .secondaryFontClass,
+      }"
     >
       <div
         v-if="AUTH_NETWORK !== 'mainnet'"
@@ -287,8 +328,26 @@ const dragHandler = ({ movement: [_, y], elapsedTime, cancel, dragging }) => {
           class="flex flex-grow justify-center"
           @click="onClickOfHeader"
         >
-          <img v-if="compactMode" :src="getImage('expand-arrow.svg')" />
-          <img v-else :src="getImage('collapse-arrow.svg')" />
+          <div v-if="compactMode" ref="expandContainer">
+            <img
+              :src="getImage('expand-arrow.svg')"
+              alt="Expand Arrow Icon"
+              :style="{
+                fill: app.theme_settings.font_color + '!important',
+              }"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
+          <div v-else ref="collapseContainer">
+            <img
+              :src="getImage('collapse-arrow.svg')"
+              alt="Collapse Arrow Icon"
+              :style="{
+                fill: app.theme_settings.font_color + '!important',
+              }"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
         </button>
       </div>
       <WalletHeader v-if="showHeader" />
@@ -350,8 +409,8 @@ body {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
-  color: var(--fg-color);
-  background: var(--container-bg-color);
+  /* color: var(--fg-color);
+  background: var(--container-bg-color); */
 }
 
 .flow-container > *:not(:first-child) {
@@ -371,8 +430,8 @@ body {
   height: 110px;
   font-size: var(--fs-300);
   font-weight: 400;
-  color: #f9f9f9;
-  background-color: #101010;
+  /* color: #f9f9f9;
+  background-color: #101010; */
 }
 
 .fade-enter-active,
diff --git a/src/assets/fonts/nunito/Nunito-Bold.ttf b/src/assets/fonts/nunito/Nunito-Bold.ttf
new file mode 100644
index 00000000..886134dc
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-Bold.ttf differ
diff --git a/src/assets/fonts/nunito/Nunito-ExtraBold.ttf b/src/assets/fonts/nunito/Nunito-ExtraBold.ttf
new file mode 100644
index 00000000..711765e6
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-ExtraBold.ttf differ
diff --git a/src/assets/fonts/nunito/Nunito-Light.ttf b/src/assets/fonts/nunito/Nunito-Light.ttf
new file mode 100644
index 00000000..e64c0fef
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-Light.ttf differ
diff --git a/src/assets/fonts/nunito/Nunito-Medium.ttf b/src/assets/fonts/nunito/Nunito-Medium.ttf
new file mode 100644
index 00000000..e24c1d61
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-Medium.ttf differ
diff --git a/src/assets/fonts/nunito/Nunito-Regular.ttf b/src/assets/fonts/nunito/Nunito-Regular.ttf
new file mode 100644
index 00000000..9411bfbe
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-Regular.ttf differ
diff --git a/src/assets/fonts/nunito/Nunito-SemiBold.ttf b/src/assets/fonts/nunito/Nunito-SemiBold.ttf
new file mode 100644
index 00000000..1326a7dc
Binary files /dev/null and b/src/assets/fonts/nunito/Nunito-SemiBold.ttf differ
diff --git a/src/assets/fonts/onest/Onest-Bold.ttf b/src/assets/fonts/onest/Onest-Bold.ttf
new file mode 100644
index 00000000..d210ddae
Binary files /dev/null and b/src/assets/fonts/onest/Onest-Bold.ttf differ
diff --git a/src/assets/fonts/onest/Onest-ExtraBold.ttf b/src/assets/fonts/onest/Onest-ExtraBold.ttf
new file mode 100644
index 00000000..0c94fb5f
Binary files /dev/null and b/src/assets/fonts/onest/Onest-ExtraBold.ttf differ
diff --git a/src/assets/fonts/onest/Onest-ExtraLight.ttf b/src/assets/fonts/onest/Onest-ExtraLight.ttf
new file mode 100644
index 00000000..8b310c0d
Binary files /dev/null and b/src/assets/fonts/onest/Onest-ExtraLight.ttf differ
diff --git a/src/assets/fonts/onest/Onest-Light.ttf b/src/assets/fonts/onest/Onest-Light.ttf
new file mode 100644
index 00000000..75534d20
Binary files /dev/null and b/src/assets/fonts/onest/Onest-Light.ttf differ
diff --git a/src/assets/fonts/onest/Onest-Medium.ttf b/src/assets/fonts/onest/Onest-Medium.ttf
new file mode 100644
index 00000000..af129b9a
Binary files /dev/null and b/src/assets/fonts/onest/Onest-Medium.ttf differ
diff --git a/src/assets/fonts/onest/Onest-Regular.ttf b/src/assets/fonts/onest/Onest-Regular.ttf
new file mode 100644
index 00000000..1ef71b68
Binary files /dev/null and b/src/assets/fonts/onest/Onest-Regular.ttf differ
diff --git a/src/assets/fonts/onest/Onest-SemiBold.ttf b/src/assets/fonts/onest/Onest-SemiBold.ttf
new file mode 100644
index 00000000..57d25c35
Binary files /dev/null and b/src/assets/fonts/onest/Onest-SemiBold.ttf differ
diff --git a/src/assets/fonts/onest/Onest-Thin.ttf b/src/assets/fonts/onest/Onest-Thin.ttf
new file mode 100644
index 00000000..a6dc0787
Binary files /dev/null and b/src/assets/fonts/onest/Onest-Thin.ttf differ
diff --git a/src/assets/fonts/pt_sans/PTSans-Bold.ttf b/src/assets/fonts/pt_sans/PTSans-Bold.ttf
new file mode 100644
index 00000000..f82c3bda
Binary files /dev/null and b/src/assets/fonts/pt_sans/PTSans-Bold.ttf differ
diff --git a/src/assets/fonts/pt_sans/PTSans-Regular.ttf b/src/assets/fonts/pt_sans/PTSans-Regular.ttf
new file mode 100644
index 00000000..adaf6718
Binary files /dev/null and b/src/assets/fonts/pt_sans/PTSans-Regular.ttf differ
diff --git a/src/assets/fonts/syne/Syne-Bold.ttf b/src/assets/fonts/syne/Syne-Bold.ttf
new file mode 100644
index 00000000..ced7219d
Binary files /dev/null and b/src/assets/fonts/syne/Syne-Bold.ttf differ
diff --git a/src/assets/fonts/syne/Syne-ExtraBold.ttf b/src/assets/fonts/syne/Syne-ExtraBold.ttf
new file mode 100644
index 00000000..331b59b4
Binary files /dev/null and b/src/assets/fonts/syne/Syne-ExtraBold.ttf differ
diff --git a/src/assets/fonts/syne/Syne-Medium.ttf b/src/assets/fonts/syne/Syne-Medium.ttf
new file mode 100644
index 00000000..dea196c7
Binary files /dev/null and b/src/assets/fonts/syne/Syne-Medium.ttf differ
diff --git a/src/assets/fonts/syne/Syne-Regular.ttf b/src/assets/fonts/syne/Syne-Regular.ttf
new file mode 100644
index 00000000..ebca9226
Binary files /dev/null and b/src/assets/fonts/syne/Syne-Regular.ttf differ
diff --git a/src/assets/fonts/syne/Syne-SemiBold.ttf b/src/assets/fonts/syne/Syne-SemiBold.ttf
new file mode 100644
index 00000000..8ee519c6
Binary files /dev/null and b/src/assets/fonts/syne/Syne-SemiBold.ttf differ
diff --git a/src/assets/images/dark/refresh.svg b/src/assets/images/dark/refresh.svg
index a5b10820..35206df1 100644
--- a/src/assets/images/dark/refresh.svg
+++ b/src/assets/images/dark/refresh.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20.453 12.8927C20.1752 15.5026 18.6964 17.9483 16.2494 19.3611C12.1839 21.7083 6.98539 20.3153 4.63818 16.2499L4.38818 15.8168M3.54613 11.1066C3.82393 8.49674 5.30272 6.05102 7.74971 4.63825C11.8152 2.29104 17.0137 3.68398 19.3609 7.74947L19.6109 8.18248M3.49316 18.0657L4.22521 15.3336L6.95727 16.0657M17.0424 7.93364L19.7744 8.66569L20.5065 5.93364" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/ActivityView.vue b/src/components/ActivityView.vue
index 7c57ed86..92bd2475 100644
--- a/src/components/ActivityView.vue
+++ b/src/components/ActivityView.vue
@@ -21,6 +21,7 @@ import { ChainType } from '@/utils/chainType'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { truncateEnd, truncateMid } from '@/utils/stringUtils'
 import { getIconAsset } from '@/utils/useImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type ActivityViewProps = {
   currencyExchangeRate: number | string | null
@@ -261,24 +262,39 @@ async function stopTransaction(activity) {
           <div class="flex">
             <span
               v-if="activity.customToken"
-              class="font-medium text-lg"
               :title="`${activity.operation} ${activity.customToken.symbol}`"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               {{ truncateEnd(activity.operation, 12) }}
               {{ activity.customToken.symbol }}
             </span>
             <span
               v-else-if="activity.nft"
-              class="font-medium text-lg"
               :title="`${activity.operation} NFT`"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               {{ truncateEnd(activity.operation, 12) }}
               NFT
             </span>
             <span
               v-else
-              class="font-medium text-lg"
               :title="activity.operation"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               {{ truncateEnd(activity.operation, 12) }}
             </span>
@@ -296,17 +312,35 @@ async function stopTransaction(activity) {
           </div>
           <span
             v-if="activity.transaction && activity.address.to"
-            class="text-sm text-gray-spanish"
             :title="activity.address.to"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             >To: {{ truncateMid(activity.address.to) }}</span
           >
           <span
             v-if="activity.file"
-            class="text-sm text-gray-spanish"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             :title="activity.file.did"
             >File DID: {{ truncateMid(activity.file.did) }}</span
           >
-          <div class="flex text-sm text-gray-spanish gap-1 items-center">
+          <div
+            class="flex gap-1 items-center"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
+          >
             <span class="whitespace-nowrap">{{
               dayjs(activity.date).format('MMM D, YYYY H:mm')
             }}</span>
@@ -318,8 +352,14 @@ async function stopTransaction(activity) {
         >
           <span
             v-if="activity.customToken"
-            class="font-medium text-lg leading-5 text-right whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
+            class="leading-5 text-right whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
             :title="`${activity.customToken.amount} ${activity.customToken.symbol}`"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             >{{
               new Decimal(activity.customToken.amount)
                 .toDecimalPlaces(5)
@@ -331,7 +371,13 @@ async function stopTransaction(activity) {
             v-else-if="
               activity.transaction && app.chainType === ChainType.evm_secp256k1
             "
-            class="font-medium text-lg leading-5 text-right whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
+            class="leading-5 text-right whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             :title="`${getAmountInNativeCurrency(
               activity.transaction.amount
             )} ${rpcStore.currency}`"
@@ -342,7 +388,13 @@ async function stopTransaction(activity) {
             v-if="
               !activity.customToken && !activity.nft && activity.transaction
             "
-            class="flex text-xs text-[#8d8d8d] text-right"
+            class="flex text-right"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             >{{ calculateCurrencyValue(activity.transaction.amount).amount }}
             {{
               calculateCurrencyValue(activity.transaction.amount).currency
@@ -350,12 +402,17 @@ async function stopTransaction(activity) {
           >
           <span
             v-else-if="activity.sellDetails"
-            class="flex text-xs text-[#8d8d8d] text-right"
+            class="flex text-right"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             >{{ activity.sellDetails.fiat.amount }}
             {{ activity.sellDetails.fiat.currency }}</span
           >
           <span
-            class="text-sm"
             :class="{
               'text-green-system': activity.status === 'Success',
               'text-red-pink-orange': [
@@ -370,6 +427,12 @@ async function stopTransaction(activity) {
                 'Refunded',
                 'Expired',
               ].includes(activity.status),
+              [getFontSizeStyle(Number(app.theme_settings.font_size))]: true,
+            }"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
             }"
           >
             {{ activity.status }}
@@ -383,12 +446,24 @@ async function stopTransaction(activity) {
         <div v-if="activity.file?.recipient">
           <div class="flex flex-col gap-[5px]">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
               >To</span
             >
             <span
-              class="text-base font-normal leading-5"
+              class="leading-5"
               :title="activity.file.recipient"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               {{ truncateMid(activity.file.recipient) }}
             </span>
@@ -397,12 +472,24 @@ async function stopTransaction(activity) {
         <div v-if="activity.file?.ruleHash">
           <div class="flex flex-col gap-[5px]">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
               >Rule Hash</span
             >
             <span
-              class="text-base font-normal leading-5"
+              class="leading-5"
               :title="activity.file.ruleHash"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               {{ truncateMid(activity.file.ruleHash) }}
             </span>
@@ -413,11 +500,26 @@ async function stopTransaction(activity) {
             <div class="flex justify-between">
               <div class="flex flex-col gap-1">
                 <span
-                  class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+                  class="uppercase"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   >From</span
                 >
                 <span
-                  class="text-base text-medium"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   :title="activity.address.from"
                 >
                   {{ truncateMid(activity.address.from) }}
@@ -432,12 +534,27 @@ async function stopTransaction(activity) {
               />
               <div v-if="activity.address.to" class="flex flex-col gap-1">
                 <span
-                  class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+                  class="uppercase"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   >To</span
                 >
                 <span
-                  class="text-base text-medium"
                   :title="activity.address.to"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
                   {{ truncateMid(activity.address.to) }}
                 </span>
@@ -445,15 +562,31 @@ async function stopTransaction(activity) {
             </div>
             <div class="flex flex-col gap-2">
               <span
-                class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+                class="uppercase"
+                :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+                :style="{
+                  fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                    .primaryFontClass,
+                  color: app.theme_settings.font_color,
+                }"
                 >Transaction Details</span
               >
-              <div class="flex flex-col gap-2 text-base">
+              <div class="flex flex-col gap-2">
                 <div
                   v-if="activity.sellDetails.provider"
                   class="flex justify-between"
                 >
-                  <span>Provider</span>
+                  <span
+                    :class="
+                      getFontSizeStyle(Number(app.theme_settings.font_size))
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                        .primaryFontClass,
+                      color: app.theme_settings.font_color,
+                    }"
+                    >Provider</span
+                  >
                   <span>{{
                     OffRampProviders[activity.sellDetails.provider]
                   }}</span>
@@ -462,7 +595,17 @@ async function stopTransaction(activity) {
                   v-if="activity.sellDetails.crypto.amount"
                   class="flex justify-between"
                 >
-                  <span>Crypto Amount (Sent)</span>
+                  <span
+                    :class="
+                      getFontSizeStyle(Number(app.theme_settings.font_size))
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                        .primaryFontClass,
+                      color: app.theme_settings.font_color,
+                    }"
+                    >Crypto Amount (Sent)</span
+                  >
                   <span
                     >{{ activity.sellDetails.crypto.amount }}
                     {{ activity.sellDetails.crypto.currency }}</span
@@ -472,7 +615,17 @@ async function stopTransaction(activity) {
                   v-if="activity.sellDetails.fiat.amount"
                   class="flex justify-between"
                 >
-                  <span>Fiat Amount (Received)</span>
+                  <span
+                    :class="
+                      getFontSizeStyle(Number(app.theme_settings.font_size))
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                        .primaryFontClass,
+                      color: app.theme_settings.font_color,
+                    }"
+                    >Fiat Amount (Received)</span
+                  >
                   <span
                     >{{ activity.sellDetails.fiat.amount }}
                     {{ activity.sellDetails.fiat.currency }}</span
@@ -482,7 +635,17 @@ async function stopTransaction(activity) {
                   v-if="activity.sellDetails.fiat.fee"
                   class="flex justify-between"
                 >
-                  <span>Provider Fees</span>
+                  <span
+                    :class="
+                      getFontSizeStyle(Number(app.theme_settings.font_size))
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                        .primaryFontClass,
+                      color: app.theme_settings.font_color,
+                    }"
+                    >Provider Fees</span
+                  >
                   <span
                     >{{ activity.sellDetails.fiat.fee }}
                     {{ activity.sellDetails.fiat.currency }}</span
@@ -491,6 +654,14 @@ async function stopTransaction(activity) {
                 <div
                   v-if="activity.sellDetails.orderId"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
                   <span>Order ID</span>
                   <span :title="activity.sellDetails.orderId">{{
@@ -516,11 +687,26 @@ async function stopTransaction(activity) {
             <div class="flex justify-between">
               <div class="flex flex-col gap-1">
                 <span
-                  class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+                  class="uppercase"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   >From</span
                 >
                 <span
-                  class="text-base text-medium"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   :title="activity.address.from"
                 >
                   {{ truncateMid(activity.address.from) }}
@@ -535,12 +721,27 @@ async function stopTransaction(activity) {
               />
               <div v-if="activity.address.to" class="flex flex-col gap-1">
                 <span
-                  class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+                  class="uppercase"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                   >To</span
                 >
                 <span
-                  class="text-base text-medium"
                   :title="activity.address.to"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
                   {{ truncateMid(activity.address.to) }}
                 </span>
@@ -548,31 +749,47 @@ async function stopTransaction(activity) {
             </div>
             <div v-if="!activity.nft" class="flex flex-col gap-2">
               <span
-                class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+                :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+                :style="{
+                  fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                    .primaryFontClass,
+                  color: app.theme_settings.font_color,
+                }"
                 >Transaction Details</span
               >
               <div class="flex flex-col gap-2 text-base">
-                <div class="flex justify-between">
-                  <span
-                    v-if="app.chainType === ChainType.solana_cv25519"
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
+                <div
+                  class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
+                >
+                  <span v-if="app.chainType === ChainType.solana_cv25519"
                     >Slot</span
                   >
-                  <span
-                    v-else
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Nonce</span
-                  >
+                  <span v-else>Nonce</span>
                   <span>{{ activity.transaction.nonce }}</span>
                 </div>
-                <div class="flex justify-between">
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Amount</span
-                  >
+                <div
+                  class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
+                >
+                  <span>Amount</span>
                   <span
                     v-if="activity.customToken"
-                    class="font-medium whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
+                    class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
                     :title="`${activity.customToken.amount} ${activity.customToken.symbol}`"
                   >
                     {{
@@ -584,7 +801,7 @@ async function stopTransaction(activity) {
                   </span>
                   <span
                     v-else
-                    class="font-medium whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
+                    class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
                     :title="getDisplayAmount(activity)"
                     >{{ getAmount(activity.transaction.amount) }}
                     {{ rpcStore.currency }}</span
@@ -593,31 +810,46 @@ async function stopTransaction(activity) {
                 <div
                   v-if="activity.transaction.gasLimit"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Gas Limits (Units)</span
-                  >
+                  <span>Gas Limits (Units)</span>
                   <span>{{ activity.transaction.gasLimit }}</span>
                 </div>
                 <div
                   v-if="activity.transaction?.gasUsed"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Gas Used (Units)</span
-                  >
+                  <span>Gas Used (Units)</span>
                   <span>{{ activity.transaction?.gasUsed || 0 }}</span>
                 </div>
                 <div
                   v-if="activity.transaction.gasPrice"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Gas Price</span
-                  >
+                  <span>Gas Price</span>
                   <span
                     class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[10rem]"
                     :title="`${calculateMvxGas(activity)}`"
@@ -632,11 +864,16 @@ async function stopTransaction(activity) {
                 <div
                   v-if="activity.transaction?.computeUnitsConsumed"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Compute Units Consumed</span
-                  >
+                  <span>Compute Units Consumed</span>
                   <span>{{
                     activity.transaction?.computeUnitsConsumed || 0
                   }}</span>
@@ -644,11 +881,16 @@ async function stopTransaction(activity) {
                 <div
                   v-if="activity.transaction?.fee"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Fee</span
-                  >
+                  <span>Fee</span>
                   <span
                     >{{ getAmount(activity.transaction?.fee) }}
                     {{ rpcStore.nativeCurrency?.symbol }}</span
@@ -657,17 +899,28 @@ async function stopTransaction(activity) {
                 <div
                   v-if="activity.transaction.totalActions"
                   class="flex justify-between"
+                  :class="
+                    getFontSizeStyle(Number(app.theme_settings.font_size))
+                  "
+                  :style="{
+                    fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                      .primaryFontClass,
+                    color: app.theme_settings.font_color,
+                  }"
                 >
-                  <span
-                    class="text-sm font-normal text-gray-myst dark:text-gray-spanish-light"
-                    >Total Actions Executed</span
-                  >
+                  <span>Total Actions Executed</span>
                   <span>{{ activity.transaction.totalActions }}</span>
                 </div>
               </div>
               <div
                 v-if="app.chainType === ChainType.evm_secp256k1"
-                class="flex justify-between font-medium text-lg"
+                class="flex justify-between"
+                :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+                :style="{
+                  fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                    .primaryFontClass,
+                  color: app.theme_settings.font_color,
+                }"
               >
                 <span>Total:</span>
                 <span
@@ -681,7 +934,13 @@ async function stopTransaction(activity) {
               </div>
               <div
                 v-if="app.chainType === ChainType.solana_cv25519"
-                class="flex justify-between mt-4 font-medium text-lg"
+                class="flex justify-between mt-4"
+                :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+                :style="{
+                  fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                    .primaryFontClass,
+                  color: app.theme_settings.font_color,
+                }"
               >
                 <span>Total:</span>
                 <span
@@ -701,7 +960,13 @@ async function stopTransaction(activity) {
         <div v-if="activity.explorerUrl" class="flex justify-center mt-4">
           <a
             :href="activity.explorerUrl"
-            class="flex font-montserrat font-medium text-xs"
+            class="flex"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             target="_blank"
             @click.stop="handleExplorerClick"
           >
@@ -720,7 +985,13 @@ async function stopTransaction(activity) {
         >
           <a
             :href="generateExplorerURL(explorerUrl, activity.txHash)"
-            class="flex font-montserrat font-medium text-xs"
+            class="flex"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
             target="_blank"
             @click.stop="handleExplorerClick"
           >
@@ -736,7 +1007,16 @@ async function stopTransaction(activity) {
       </div>
     </li>
   </ul>
-  <div v-else class="flex justify-center text-center text-sm text-gray-spanish">
+  <div
+    v-else
+    class="flex justify-center text-center"
+    :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+    :style="{
+      fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+        .primaryFontClass,
+      color: app.theme_settings.font_color,
+    }"
+  >
     You have no transactions
   </div>
 </template>
diff --git a/src/components/AddNetwork.vue b/src/components/AddNetwork.vue
index e3e5e567..e9944977 100644
--- a/src/components/AddNetwork.vue
+++ b/src/components/AddNetwork.vue
@@ -2,16 +2,19 @@
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
+import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { content, errors } from '@/utils/content'
 import { produceProviderFromURLString } from '@/utils/evm/rpcURLToProvider'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['close'])
 
 const rpcStore = useRpcStore()
 const toast = useToast()
-
+const appStore = useAppStore()
 const rpcConfig = ref({
   networkName: '',
   rpcUrl: '',
@@ -78,6 +81,12 @@ async function handleSubmit() {
     toast.error(errors.RPC.INVALID)
   }
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -88,13 +97,28 @@ async function handleSubmit() {
         title="Click to go back"
         @click.stop="emit('close')"
       >
-        <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+        <div ref="backContainer">
+          <img
+            :src="getImage('back-arrow.svg')"
+            class="w-6 h-6"
+            alt="Back Arrow Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
       <span class="font-Nohemi text-[20px] font-medium">Add Network</span>
     </div>
     <form class="flex flex-col gap-6" @submit.prevent="handleSubmit">
       <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium" for="recipientWalletAddress">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="recipientWalletAddress"
+        >
           Network Name
         </label>
         <input
@@ -104,10 +128,26 @@ async function handleSubmit() {
           type="text"
           class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
           placeholder="e.g. Ethereum"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium" for="rpcUrl"> RPC URL </label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="rpcUrl"
+        >
+          RPC URL
+        </label>
         <input
           id="rpcUrl"
           v-model="rpcConfig.rpcUrl"
@@ -115,10 +155,24 @@ async function handleSubmit() {
           type="text"
           class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
           placeholder="e.g. https://rpc.ankr.com/eth"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium" for="currencySymbol">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="currencySymbol"
+        >
           Currency Symbol
         </label>
         <input
@@ -128,10 +182,26 @@ async function handleSubmit() {
           type="text"
           class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
           placeholder="e.g. ETH"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium" for="chainId"> Chain ID </label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="chainId"
+        >
+          Chain ID
+        </label>
         <input
           id="chainId"
           v-model="rpcConfig.chainId"
@@ -139,10 +209,24 @@ async function handleSubmit() {
           type="text"
           class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
           placeholder="e.g. 0x1"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium" for="explorerUrl">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="explorerUrl"
+        >
           Explorer URL (Optional)
         </label>
         <input
@@ -151,10 +235,28 @@ async function handleSubmit() {
           type="text"
           class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
           placeholder="e.g. https://etherscan.io"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex">
-        <button class="btn-primary w-full p-2">Save</button>
+        <button
+          class="btn-primary w-full p-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
+          Save
+        </button>
       </div>
     </form>
   </div>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index edfe001c..f6d08411 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useAppStore } from '@/store/app'
@@ -7,6 +7,8 @@ import { useRequestStore } from '@/store/request'
 import { useUserStore } from '@/store/user'
 import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const appStore = useAppStore()
 const userStore = useUserStore()
@@ -28,11 +30,35 @@ function getIcon(icon: string, pathName: string) {
     return getImage(`${icon}.svg`)
   }
 }
+
+const tokenContainer = ref<HTMLElement | null>(null)
+const nftContainer = ref<HTMLElement | null>(null)
+const profileContainer = ref<HTMLElement | null>(null)
+const activityContainerN = ref<HTMLElement | null>(null)
+const activityContainerNotN = ref<HTMLElement | null>(null)
+
+const svgRefs = [
+  tokenContainer,
+  nftContainer,
+  profileContainer,
+  activityContainerN,
+  activityContainerNotN,
+]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs, false, true)
 </script>
 
 <template>
   <footer
-    class="flex items-center px-12 py-2 bg-gray-900 border-gray-800 dark:bg-black-eerie select-none"
+    class="flex items-center px-12 py-2 select-none"
+    :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+    :style="{
+      backgroundColor: appStore.theme === 'dark' ? '#13171A' : '#F7F7F7',
+      color: appStore.theme_settings.font_color,
+
+      fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+        .secondaryFontClass,
+    }"
   >
     <nav v-if="userStore.isLoggedIn" class="flex flex-grow justify-between">
       <router-link
@@ -41,17 +67,24 @@ function getIcon(icon: string, pathName: string) {
         class="flex flex-col justify-center items-center gap-1"
       >
         <div class="w-xxxl h-xxl rounded-md flex items-center justify-center">
-          <img
-            :src="getIcon('tokens-icon', 'home')"
-            alt="home"
-            class="w-xl h-xl"
-          />
+          <div ref="tokenContainer">
+            <img
+              :src="getIcon('tokens-icon', 'home')"
+              alt="home"
+              class="w-xl h-xl"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </div>
         <span
-          class="text-xs font-normal"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
           :class="
             isCurrentRoute('home')
-              ? 'text-blue-dark dark:text-white-200'
+              ? getFontSizeStyle(Number(appStore.theme_settings.font_size))
               : 'text-gray-bermuda-grey dark:text-gray-spanish'
           "
           >Tokens</span
@@ -64,13 +97,23 @@ function getIcon(icon: string, pathName: string) {
         class="flex flex-col justify-center items-center gap-1"
       >
         <div class="w-xxxl h-xxl rounded-md flex items-center justify-center">
-          <img :src="getIcon('nfts-icon', 'Nfts')" alt="nfts" />
+          <div ref="nftContainer">
+            <img
+              :src="getIcon('nfts-icon', 'Nfts')"
+              alt="nfts"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
         </div>
         <span
-          class="text-xs font-normal"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
           :class="
             isCurrentRoute('Nfts')
-              ? 'text-blue-dark dark:text-white-200'
+              ? getFontSizeStyle(Number(appStore.theme_settings.font_size))
               : 'text-gray-bermuda-grey dark:text-gray-spanish'
           "
           >NFT</span
@@ -82,13 +125,23 @@ function getIcon(icon: string, pathName: string) {
         class="flex flex-col justify-center items-center gap-1"
       >
         <div class="w-xxxl h-xxl rounded-md flex items-center justify-center">
-          <img :src="getIcon('profile-icon', 'profile')" alt="profile" />
+          <div ref="profileContainer">
+            <img
+              :src="getIcon('profile-icon', 'profile')"
+              alt="profile"
+              @load="(event) => fetchAndInjectSVG(event, 2)"
+            />
+          </div>
         </div>
         <span
-          class="text-xs font-normal"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
           :class="
             isCurrentRoute('profile')
-              ? 'text-blue-dark dark:text-white-200'
+              ? getFontSizeStyle(Number(appStore.theme_settings.font_size))
               : 'text-gray-bermuda-grey dark:text-gray-spanish'
           "
           >Profile</span
@@ -100,22 +153,33 @@ function getIcon(icon: string, pathName: string) {
         class="flex flex-col justify-center items-center gap-1"
       >
         <div class="w-xxxl h-xxl rounded-md flex items-center justify-center">
-          <img
+          <div
             v-if="requestStore.skippedRequestsForApproval.length > 0"
-            :src="getIcon('notifications-icon', 'activities')"
-            alt="activities"
-          />
-          <img
-            v-else
-            :src="getIcon('no-notifications-icon', 'activities')"
-            alt="activities"
-          />
+            ref="activityContainerN"
+          >
+            <img
+              :src="getIcon('notifications-icon', 'activities')"
+              alt="activities"
+              @load="(event) => fetchAndInjectSVG(event, 3)"
+            />
+          </div>
+          <div v-else ref="activityContainerNotN">
+            <img
+              :src="getIcon('no-notifications-icon', 'activities')"
+              alt="activities"
+              @load="(event) => fetchAndInjectSVG(event, 4)"
+            />
+          </div>
         </div>
         <span
-          class="text-xs font-normal"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
           :class="
             isCurrentRoute('activities')
-              ? 'text-blue-dark dark:text-white-200'
+              ? getFontSizeStyle(Number(appStore.theme_settings.font_size))
               : 'text-gray-bermuda-grey dark:text-gray-spanish'
           "
           >Activity</span
diff --git a/src/components/AppLoader.vue b/src/components/AppLoader.vue
index 8d576b62..41c1d61b 100644
--- a/src/components/AppLoader.vue
+++ b/src/components/AppLoader.vue
@@ -1,16 +1,29 @@
 <script setup lang="ts">
 import SpinningLoader from '@/components/SpinningLoader.vue'
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type LoaderProps = {
   message: string
 }
 
+const appStore = useAppStore()
+
 const props = defineProps<LoaderProps>()
 </script>
 
 <template>
   <div class="flex flex-col gap-4 justify-center items-center">
     <SpinningLoader />
-    <p class="text-base sm:text-xs">{{ props.message }}</p>
+    <p
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
+      {{ props.message }}
+    </p>
   </div>
 </template>
diff --git a/src/components/AssetsView.vue b/src/components/AssetsView.vue
index 5f9d7876..d5996fd9 100644
--- a/src/components/AssetsView.vue
+++ b/src/components/AssetsView.vue
@@ -21,6 +21,8 @@ import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getStorage } from '@/utils/storageWrapper'
 import { getIconAsset } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const userStore = useUserStore()
 const rpcStore = useRpcStore()
@@ -223,6 +225,12 @@ watch(
 function handleFallbackLogo(event) {
   event.target.src = getImage('blockchain-icon.png')
 }
+
+const plusContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [plusContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -248,16 +256,30 @@ function handleFallbackLogo(event) {
               @error="handleFallbackLogo"
             />
             <span
-              class="font-normal text-base overflow-hidden whitespace-nowrap text-ellipsis w-[16ch]"
+              class="overflow-hidden whitespace-nowrap text-ellipsis w-[16ch]"
               :title="asset.name"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >{{ asset.name }}</span
             >
           </div>
           <div
-            class="gap-1 font-normal text-base leading-none text-right overflow-hidden whitespace-nowrap text-ellipsis transition-all duration-200"
+            class="gap-1 leading-none text-right overflow-hidden whitespace-nowrap text-ellipsis transition-all duration-200"
             :title="`${
               isNative(asset) ? nativeAssetBalance.toString() : asset.balance
             } ${asset.symbol}`"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           >
             {{ new Decimal(asset.balance).toDecimalPlaces(4) }}
             {{ asset.symbol }}
@@ -271,10 +293,29 @@ function handleFallbackLogo(event) {
     <button
       v-if="appStore.chainType === ChainType.evm_secp256k1"
       class="flex items-center justify-center flex-grow btn-quaternery space-x-2"
+      :style="{
+        borderColor: appStore.theme_settings.accent_color,
+      }"
       @click.stop="handleAddToken"
     >
-      <img :src="getImage('plus.svg')" class="h-3 w-3" />
-      <span class="text-base">New Asset</span>
+      <div ref="plusContainer">
+        <img
+          :src="getImage('plus.svg')"
+          class="h-3 w-3"
+          alt="Plus Icon"
+          @load="(event) => fetchAndInjectSVG(event, 0)"
+        />
+      </div>
+
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.accent_color,
+        }"
+        >New Asset</span
+      >
     </button>
     <Teleport v-if="modalStore.show" to="#modal-container">
       <AddTokenScreen v-if="showModal" />
diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
index bae33f1e..6dc7a392 100644
--- a/src/components/BaseModal.vue
+++ b/src/components/BaseModal.vue
@@ -1,19 +1,28 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
 
 const modalContainer = ref(null)
 
 const canModalCollapse = ref(false)
 const modalStore = useModalStore()
+const appStore = useAppStore()
 
 function handleCollapse() {
   canModalCollapse.value = true
   modalContainer.value.innerHTMl = ''
   setTimeout(() => modalStore.setShowModal(false), 300)
 }
+
+const collapseContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [collapseContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs, true)
 </script>
 
 <template>
@@ -26,7 +35,16 @@ function handleCollapse() {
     >
       <div class="flex justify-center">
         <button @click="handleCollapse">
-          <img :src="getImage('collapse-arrow.svg')" />
+          <div ref="collapseContainer">
+            <img
+              :src="getImage('collapse-arrow.svg')"
+              alt="Collapse Icon"
+              :style="{
+                fill: appStore.theme_settings.font_color + '!important',
+              }"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </button>
       </div>
       <div
diff --git a/src/components/BuyTokens.vue b/src/components/BuyTokens.vue
index 5f8e653c..8a983f9b 100644
--- a/src/components/BuyTokens.vue
+++ b/src/components/BuyTokens.vue
@@ -2,11 +2,14 @@
 import { ref, type Ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { useAppStore } from '@/store/app'
 import { openOnRampMoneyHostedUI } from '@/utils/onrampmoney.ramp'
 import { openTransak } from '@/utils/transak'
 import { useImage } from '@/utils/useImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const getImage = useImage()
+const appStore = useAppStore()
 
 type BuyTokenProps = {
   transakNetwork?: string
@@ -80,10 +83,26 @@ function handleDone() {
     >
       <img src="@/assets/images/success.svg" class="h-16 w-16 self-center" />
       <div class="flex flex-col gap-2">
-        <div class="text-base font-medium text-center">
+        <div
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ statusText.title }}
         </div>
-        <div class="text-sm text-gray-spanish-light text-center">
+        <div
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ statusText.message }}
         </div>
       </div>
@@ -93,7 +112,14 @@ function handleDone() {
         <p class="font-Nohemi font-medium text-center text-xl">
           Select Provider
         </p>
-        <p class="text-xs text-zinc-400">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           You will be taken to the provider website in a different tab once you
           choose the provider and click PROCEED.
         </p>
@@ -114,7 +140,18 @@ function handleDone() {
           >
             <label for="Transak" class="flex gap-2 items-center cursor-pointer">
               <img src="@/assets/images/transak.png" class="h-xl w-xl" />
-              <span class="text-base font-normal">Transak</span>
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >Transak</span
+              >
             </label>
             <input
               id="Transak"
@@ -124,15 +161,35 @@ function handleDone() {
               name="provider"
               :disabled="!props.transakNetwork"
               class="radio"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
         </div>
-        <div class="flex space-x-3 bg-blue-dark-sky p-3 rounded-sm">
+        <div
+          class="flex space-x-3 p-3 rounded-sm"
+          :style="{
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           <img
             class="w-4 h-4 mt-1"
             :src="getImage('info-circle', undefined, 'svg')"
           />
-          <p class="text-xs text-white-200">
+          <p
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Your wallet address will be auto-filled, please verify. The time
             taken for funds to reflect in the wallet varies based on payment
             method.
@@ -142,6 +199,14 @@ function handleDone() {
           <button
             class="flex-1 btn-primary py-[10px]"
             :disabled="!selectedProvider?.trim().length"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
           >
             Proceed
           </button>
diff --git a/src/components/ChainListModal.vue b/src/components/ChainListModal.vue
index b56bbce2..bc245d25 100644
--- a/src/components/ChainListModal.vue
+++ b/src/components/ChainListModal.vue
@@ -11,6 +11,7 @@ import {
   getRequestHandler,
   requestHandlerExists,
 } from '@/utils/requestHandlerSingleton'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['close'])
 const rpcStore = useRpcStore()
@@ -99,9 +100,37 @@ function getChainType(chainType: ChainType) {
             class="w-lg h-lg"
             @error="handleFallbackLogo"
           />
-          <span>{{ chain.chainName }}</span>
-          <span v-if="chain.isCustom" class="testnet-tag"> Custom </span>
-          <span v-else-if="chain.chainType === 'testnet'" class="testnet-tag">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >{{ chain.chainName }}</span
+          >
+          <span
+            v-if="chain.isCustom"
+            class="testnet-tag"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
+            Custom
+          </span>
+          <span
+            v-else-if="chain.chainType === 'testnet'"
+            class="testnet-tag"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Testnet
           </span>
         </label>
@@ -112,11 +141,25 @@ function getChainType(chainType: ChainType) {
           :value="chain"
           name="chain"
           class="radio"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <button
         v-if="appStore.chainType === ChainType.evm_secp256k1"
         class="btn-primary py-2 mt-4"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
         @click.stop="showAddNetworkModal = true"
       >
         Add network
diff --git a/src/components/ChangeChain.vue b/src/components/ChangeChain.vue
index e1eb3cde..6b448edb 100644
--- a/src/components/ChangeChain.vue
+++ b/src/components/ChangeChain.vue
@@ -7,13 +7,17 @@ import {
 } from '@headlessui/vue'
 import { ref, watch } from 'vue'
 
+import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emits = defineEmits(['addNetwork', 'editNetwork'])
 const rpcStore = useRpcStore()
 const getImage = useImage()
+const appStore = useAppStore()
 
 const selectedChain = ref(rpcStore.selectedRpcConfig)
 
@@ -30,6 +34,12 @@ watch(selectedChain, async () => {
   rpcStore.setSelectedChainId(selectedChain.value.chainId)
   await setChain()
 })
+
+const editContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [editContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -46,7 +56,15 @@ watch(selectedChain, async () => {
           :alt="selectedChain.chainName"
           class="w-6 h-6"
         /> -->
-        <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[16ch]">
+        <p
+          class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[16ch]"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ selectedChain.chainName }}
         </p>
       </div>
@@ -81,6 +99,15 @@ watch(selectedChain, async () => {
               /> -->
               <p
                 class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[20ch]"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
               >
                 {{ chain.chainName }}
               </p>
@@ -90,11 +117,14 @@ watch(selectedChain, async () => {
               class="h-auto"
               @click.prevent="emits('editNetwork', chain.chainId)"
             >
-              <img
-                :src="getImage('edit-icon')"
-                alt="edit network"
-                class="w-4"
-              />
+              <div ref="editContainer">
+                <img
+                  :src="getImage('edit-icon')"
+                  alt="Edit Icon"
+                  class="w-4"
+                  @load="(event) => fetchAndInjectSVG(event, 0)"
+                />
+              </div>
             </button>
           </div>
         </ListboxOption>
@@ -104,8 +134,24 @@ watch(selectedChain, async () => {
           class="flex items-center space-x-1 h-auto"
           @click="emits('addNetwork')"
         >
-          <span class="text-xl">+</span>
-          <span>New</span>
+          <span
+            class="text-xl"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >+</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >New</span
+          >
         </button>
       </div>
     </div>
diff --git a/src/components/CustomRequestScreen/Evm/ArcanaSwitchAccountType.vue b/src/components/CustomRequestScreen/Evm/ArcanaSwitchAccountType.vue
index 1d705f1d..35d76991 100644
--- a/src/components/CustomRequestScreen/Evm/ArcanaSwitchAccountType.vue
+++ b/src/components/CustomRequestScreen/Evm/ArcanaSwitchAccountType.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{ accountType: 'scw' | 'eoa' }>()
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
+const props = defineProps<{ accountType: 'scw' | 'eoa' }>()
+const appStore = useAppStore()
 const label = computed(() => {
   return props.accountType === 'scw'
     ? 'Smart Contract Wallet'
@@ -17,6 +20,12 @@ const label = computed(() => {
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="label"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ label }}
       </span>
diff --git a/src/components/CustomRequestScreen/Evm/EthSignTypedDataV4.vue b/src/components/CustomRequestScreen/Evm/EthSignTypedDataV4.vue
index 21162cd1..01ccb881 100644
--- a/src/components/CustomRequestScreen/Evm/EthSignTypedDataV4.vue
+++ b/src/components/CustomRequestScreen/Evm/EthSignTypedDataV4.vue
@@ -3,9 +3,11 @@ import { ComputedRef, computed } from 'vue'
 
 import VJsonViewer from '@/components/VJsonViewer.vue'
 import { getChainLogoUrl } from '@/services/chainlist.service'
+import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { getImage } from '@/utils/getImage'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{
   requestParams: string[]
@@ -30,6 +32,7 @@ const typedData = computed(() => {
 }>
 
 const rpcStore = useRpcStore()
+const appStore = useAppStore()
 
 function handleFallbackLogo(event) {
   event.target.src = getImage('blockchain-icon.png')
@@ -45,7 +48,15 @@ function handleFallbackLogo(event) {
         <div class="flex-1 flex flex-col gap-2">
           <div class="flex justify-between items-center gap-1">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Chain</span
             >
             <div class="flex items-center gap-1">
@@ -54,35 +65,85 @@ function handleFallbackLogo(event) {
                 class="h-4 w-4"
                 @error="handleFallbackLogo"
               />
-              <span class="text-base font-medium">
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
                 {{ rpcStore.selectedRPCConfig?.chainName }}
               </span>
             </div>
           </div>
           <div class="flex justify-between items-center gap-1">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Interact Contract</span
             >
             <span
               :title="typedData.domain.verifyingContract"
-              class="text-base font-medium"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ truncateMid(typedData.domain.verifyingContract) }}
             </span>
           </div>
           <div class="flex justify-between items-center gap-1">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Operation</span
             >
-            <span class="text-base font-medium">
+            <span
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+            >
               {{ typedData.primaryType }}
             </span>
           </div>
           <div class="flex flex-col gap-1">
             <span
-              class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+              class="uppercase"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Data</span
             >
             <div
diff --git a/src/components/CustomRequestScreen/Evm/WalletAddEthereumChain.vue b/src/components/CustomRequestScreen/Evm/WalletAddEthereumChain.vue
index c0962df9..1fd23837 100644
--- a/src/components/CustomRequestScreen/Evm/WalletAddEthereumChain.vue
+++ b/src/components/CustomRequestScreen/Evm/WalletAddEthereumChain.vue
@@ -2,38 +2,86 @@
 import Decimal from 'decimal.js'
 import { computed } from 'vue'
 
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
 const props = defineProps({
   params: {
     type: Object,
     required: true,
   },
 })
-
+const appStore = useAppStore()
 const chainId = computed(() => new Decimal(props.params.chainId).toString())
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 text-sm">
-    <div class="text-sm font-medium">Chain Details</div>
+  <div class="flex flex-col gap-2">
+    <div
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
+      Chain Details
+    </div>
     <div v-if="props.params?.chainId" class="flex justify-between gap-4">
-      <span class="w-[120px]">Chain Id</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Chain Id</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="chainId"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ chainId }}
       </span>
     </div>
     <div v-if="props.params?.chainName" class="flex justify-between gap-4">
-      <span class="w-[120px]">Name</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Name</span
+      >
       <span
         class="w-[200px] text-right flex gap-1 items-center justify-end"
         :title="props.params?.chainName"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         <img
           v-if="props.params.iconUrls?.length"
           :src="props.params.iconUrls[0]"
           class="h-4 w-4"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
         <span class="whitespace-nowrap overflow-hidden text-ellipsis">{{
           props.params.chainName
@@ -44,10 +92,25 @@ const chainId = computed(() => new Decimal(props.params.chainId).toString())
       v-if="props.params?.nativeCurrency?.symbol"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px]">Currency</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Currency</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.nativeCurrency.symbol"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ props.params.nativeCurrency.symbol }}</span
       >
     </div>
@@ -55,10 +118,25 @@ const chainId = computed(() => new Decimal(props.params.chainId).toString())
       v-if="props.params?.rpcUrls?.length"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px]">RPC</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >RPC</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.rpcUrls.join(', ')"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ props.params.rpcUrls[0] }}</span
       >
     </div>
@@ -66,10 +144,25 @@ const chainId = computed(() => new Decimal(props.params.chainId).toString())
       v-if="props.params?.blockExplorerUrls?.length"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px]">Explorer</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Explorer</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.blockExplorerUrls.join(', ')"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ props.params.blockExplorerUrls[0] }}</span
       >
     </div>
diff --git a/src/components/CustomRequestScreen/Evm/WalletSwitchEthereumChain.vue b/src/components/CustomRequestScreen/Evm/WalletSwitchEthereumChain.vue
index 29686a47..53e3abe0 100644
--- a/src/components/CustomRequestScreen/Evm/WalletSwitchEthereumChain.vue
+++ b/src/components/CustomRequestScreen/Evm/WalletSwitchEthereumChain.vue
@@ -7,6 +7,7 @@ import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps({
   params: {
@@ -35,18 +36,48 @@ function handleFallbackLogo(event) {
   <div class="flex flex-col gap-2 text-sm">
     <div class="text-sm font-medium">Chain Details</div>
     <div v-if="chainId" class="flex justify-between gap-4">
-      <span class="w-[120px]">Chain Id</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Chain Id</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="chainId"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ chainId }}
       </span>
     </div>
     <div v-if="chain?.chainName" class="flex justify-between gap-4">
-      <span class="w-[120px]">Name</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Name</span
+      >
       <span
         class="w-[200px] text-right flex gap-1 items-center justify-end"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         :title="chain.chainName"
       >
         <img
@@ -59,27 +90,64 @@ function handleFallbackLogo(event) {
           class="h-4 w-4"
           @error="handleFallbackLogo"
         />
-        <span class="whitespace-nowrap overflow-hidden text-ellipsis">{{
-          chain.chainName
-        }}</span>
+        <span
+          class="whitespace-nowrap overflow-hidden text-ellipsis"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >{{ chain.chainName }}</span
+        >
       </span>
     </div>
     <div
       v-if="chain?.nativeCurrency?.symbol"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px]">Currency</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Currency</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="chain.nativeCurrency.symbol"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ chain.nativeCurrency.symbol }}</span
       >
     </div>
     <div v-if="chain?.rpcUrls?.length" class="flex justify-between gap-4">
-      <span class="w-[120px]">RPC</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >RPC</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="chain.rpcUrls.join(', ')"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ chain.rpcUrls[0] }}</span
       >
     </div>
diff --git a/src/components/CustomRequestScreen/Evm/WalletWatchAssetErc20.vue b/src/components/CustomRequestScreen/Evm/WalletWatchAssetErc20.vue
index e2122300..02b0d7ef 100644
--- a/src/components/CustomRequestScreen/Evm/WalletWatchAssetErc20.vue
+++ b/src/components/CustomRequestScreen/Evm/WalletWatchAssetErc20.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/app'
 import { getImage } from '@/utils/getImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps({
   params: {
@@ -7,7 +9,7 @@ const props = defineProps({
     required: true,
   },
 })
-
+const appStore = useAppStore()
 function handleFallbackLogo(event) {
   event.target.src = getImage('blockchain-icon.png')
 }
@@ -17,34 +19,86 @@ function handleFallbackLogo(event) {
   <div class="flex flex-col gap-2 text-sm">
     <div class="text-sm font-medium">Token Details</div>
     <div v-if="props.params?.address" class="flex justify-between gap-4">
-      <span class="w-[120px]">Contract</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Contract</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.address"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.params.address }}
       </span>
     </div>
     <div v-if="props.params?.symbol" class="flex justify-between gap-4">
-      <span class="w-[120px]">Symbol</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Symbol</span
+      >
       <span
         class="w-[200px] text-right flex gap-1 items-center justify-end"
         :title="props.params.symbol"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         <img
           :src="props.params.image || ''"
           class="h-4 w-4"
           @error="handleFallbackLogo"
         />
-        <span class="whitespace-nowrap overflow-hidden text-ellipsis">{{
-          props.params.symbol
-        }}</span>
+        <span
+          class="whitespace-nowrap overflow-hidden text-ellipsis"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >{{ props.params.symbol }}</span
+        >
       </span>
     </div>
     <div v-if="props.params?.decimals" class="flex justify-between gap-4">
-      <span class="w-[120px]">Decimals</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Decimals</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         :title="props.params.decimals"
         >{{ props.params.decimals }}</span
       >
diff --git a/src/components/CustomRequestScreen/Evm/WalletWatchAssetNFT.vue b/src/components/CustomRequestScreen/Evm/WalletWatchAssetNFT.vue
index b43c81b1..23e3f48c 100644
--- a/src/components/CustomRequestScreen/Evm/WalletWatchAssetNFT.vue
+++ b/src/components/CustomRequestScreen/Evm/WalletWatchAssetNFT.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
+const appStore = useAppStore()
+
 const props = defineProps({
   params: {
     type: Object,
@@ -13,7 +18,16 @@ const props = defineProps({
 
 <template>
   <div class="flex flex-col gap-2 text-sm">
-    <div class="text-sm font-medium">NFT Details</div>
+    <div
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
+      NFT Details
+    </div>
     <div
       v-if="props.params?.imageUrl"
       class="flex justify-center items-center my-2"
@@ -24,15 +38,39 @@ const props = defineProps({
       />
     </div>
     <div class="flex justify-between gap-4">
-      <span class="w-[120px]">NFT Type</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >NFT Type</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis uppercase"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.type }}
       </span>
     </div>
     <div v-if="props.params?.collectionName" class="flex justify-between gap-4">
-      <span class="w-[120px]">Collection</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Collection</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.collectionName"
@@ -41,28 +79,73 @@ const props = defineProps({
       </span>
     </div>
     <div v-if="props.params?.name" class="flex justify-between gap-4">
-      <span class="w-[120px]">Name</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Name</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.name"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.params.name }}
       </span>
     </div>
     <div v-if="props.params?.address" class="flex justify-between gap-4">
-      <span class="w-[120px]">Contract</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Contract</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.address"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.params.address }}
       </span>
     </div>
     <div v-if="props.params?.tokenId" class="flex justify-between gap-4">
-      <span class="w-[120px]">Token ID</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Token ID</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.tokenId"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.params.tokenId }}
       </span>
@@ -71,10 +154,25 @@ const props = defineProps({
       v-if="props.type?.toLowerCase() === 'erc1155' && props.params?.balance"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px]">Quantity Owned</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Quantity Owned</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.params.balance"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >{{ props.params.balance }}</span
       >
     </div>
diff --git a/src/components/CustomRequestScreen/Mnemonic/PhraseSuccess.vue b/src/components/CustomRequestScreen/Mnemonic/PhraseSuccess.vue
index 03beb0fc..26e81b11 100644
--- a/src/components/CustomRequestScreen/Mnemonic/PhraseSuccess.vue
+++ b/src/components/CustomRequestScreen/Mnemonic/PhraseSuccess.vue
@@ -3,14 +3,16 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { useAppStore } from '@/store/app'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['close'])
 const router = useRouter()
 const storage = getStorage()
 const isLoading = ref(false)
-
+const appStore = useAppStore()
 function handleProceed() {
   router.push({ name: 'home' })
   emit('close')
@@ -29,8 +31,25 @@ function handleProceed() {
           class="h-12 w-12 mx-auto"
         />
         <div class="flex flex-col">
-          <p class="font-Nohemi font-medium text-center text-xl">Done</p>
-          <p class="text-sm text-center text-zinc-400">
+          <p
+            class="text-center"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
+            Done
+          </p>
+          <p
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Great! You can now use this seed phrase to import your account into
             another wallet app anytime you like.
           </p>
@@ -39,6 +58,14 @@ function handleProceed() {
       <form class="flex flex-col mt-5 space-y-4">
         <button
           class="flex-1 btn-primary py-[10px]"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="handleProceed()"
         >
           Proceed
@@ -46,7 +73,15 @@ function handleProceed() {
       </form>
     </div>
     <div class="flex space-x-1 justify-center items-center pt-6">
-      <span class="text-sm">Powered by</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Powered by</span
+      >
       <img :src="getImage('arcana-logo.svg')" alt="arcana" class="h-3" />
     </div>
   </div>
diff --git a/src/components/CustomRequestScreen/Mnemonic/SeedPhrase.vue b/src/components/CustomRequestScreen/Mnemonic/SeedPhrase.vue
index 84d4e1aa..652c3e0a 100644
--- a/src/components/CustomRequestScreen/Mnemonic/SeedPhrase.vue
+++ b/src/components/CustomRequestScreen/Mnemonic/SeedPhrase.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
+import { useAppStore } from '@/store/app'
 import { errors } from '@/utils/content'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['verify', 'close'])
 const toast = useToast()
@@ -11,7 +15,7 @@ const storage = getStorage()
 const mnemonic = storage.session.getMnemonic()
 const keyArray: string[] = mnemonic.split(' ')
 const seedPhrase = keyArray.join(' ')
-
+const appStore = useAppStore()
 async function copyToClipboard(value: string, message: string) {
   try {
     await navigator.clipboard.writeText(value)
@@ -24,6 +28,13 @@ async function copyToClipboard(value: string, message: string) {
 async function printKey() {
   window.print()
 }
+
+const copyContainer = ref<HTMLElement | null>(null)
+const printContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [copyContainer, printContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -36,7 +47,15 @@ async function printKey() {
       @submit.prevent="emit('verify')"
     >
       <div class="flex flex-col gap-6">
-        <span class="text-sm font-lighter text-center">
+        <span
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Please record the seed phrase shown below exactly in the order that it
           is shown. Take care to record this in a safe place offline for maximum
           safety.
@@ -70,30 +89,75 @@ async function printKey() {
             copyToClipboard(seedPhrase, 'Seed phrase copied to memory')
           "
         >
-          <img :src="getImage('copy.svg')" alt="Copy wallet address" />
-          Copy
+          <div ref="copyContainer">
+            <img
+              :src="getImage('copy.svg')"
+              alt="Copy Icon"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
+
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Copy</span
+          >
         </button>
         <button
           class="btn-tertiary flex items-center justify-center gap-2 py-2"
           type="button"
           @click="printKey"
         >
-          <img
-            :src="getImage('print.svg')"
-            alt="Print wallet address"
-            class="h-4"
-          />
-          Print
+          <div ref="printContainer">
+            <img
+              :src="getImage('print.svg')"
+              class="h-4"
+              alt="Print Icon"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Print</span
+          >
         </button>
       </div>
       <div class="flex mt-2">
-        <button class="btn-primary py-[10px] text-center w-full" type="submit">
+        <button
+          class="btn-primary py-[10px] text-center w-full"
+          type="submit"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           Verify
         </button>
       </div>
     </form>
     <div class="flex space-x-1 justify-center items-center pt-6">
-      <span class="text-sm">Powered by</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Powered by</span
+      >
       <img :src="getImage('arcana-logo.svg')" alt="arcana" class="h-3" />
     </div>
   </div>
diff --git a/src/components/CustomRequestScreen/Mnemonic/SeedPhraseHome.vue b/src/components/CustomRequestScreen/Mnemonic/SeedPhraseHome.vue
index f77a6707..ae98161c 100644
--- a/src/components/CustomRequestScreen/Mnemonic/SeedPhraseHome.vue
+++ b/src/components/CustomRequestScreen/Mnemonic/SeedPhraseHome.vue
@@ -2,15 +2,17 @@
 import { ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['proceed', 'close'])
 const isLoading = ref(false)
 const storage = getStorage()
 const userStore = useUserStore()
-
+const appStore = useAppStore()
 function handleDismiss() {
   storage.local.sethasMVXSeedShown(userStore.info.id, true)
   emit('close')
@@ -26,10 +28,26 @@ function handleProceed() {
     <AppLoader v-if="isLoading" message="Processing..." />
     <div v-else class="flex flex-col p-1">
       <div class="flex flex-col gap-3">
-        <p class="font-Nohemi font-medium text-center text-xl tracking-wide">
+        <p
+          class="text-center tracking-wide"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Display Seed Phrase?
         </p>
-        <p class="text-sm text-center text-zinc-400">
+        <p
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Would you like to view the seed phrase and record it now? You will
           <span class="font-bold">not be able to view</span>
           this later. The seed phrase is necessary to import this account into
@@ -39,16 +57,43 @@ function handleProceed() {
       <form class="flex flex-col mt-5 space-y-2">
         <button
           class="flex-1 btn-primary py-[10px]"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="handleProceed"
         >
           Display Seed Phrase
         </button>
-        <button class="flex-1 btn-tertiary" @click.stop="handleDismiss">
+        <button
+          class="flex-1 btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click.stop="handleDismiss"
+        >
           Skip and Proceed
         </button>
       </form>
       <div class="flex space-x-1 justify-center items-center pt-6">
-        <span class="text-sm">Powered by</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Powered by</span
+        >
         <img :src="getImage('arcana-logo.svg')" alt="arcana" class="h-3" />
       </div>
     </div>
diff --git a/src/components/CustomRequestScreen/Mnemonic/VerifyPhrase.vue b/src/components/CustomRequestScreen/Mnemonic/VerifyPhrase.vue
index 18da965f..8a8dfb5b 100644
--- a/src/components/CustomRequestScreen/Mnemonic/VerifyPhrase.vue
+++ b/src/components/CustomRequestScreen/Mnemonic/VerifyPhrase.vue
@@ -2,8 +2,10 @@
 import { ref, computed, watch } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { useAppStore } from '@/store/app'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['success', 'close'])
 
@@ -13,7 +15,7 @@ const correctAnswersCount = ref(0)
 const isError = ref(false)
 const isCorrect = ref(false)
 const selectedAnswer = ref('')
-
+const appStore = useAppStore()
 const storage = getStorage()
 const mnemonic = storage.session.getMnemonic()
 const keyArray: string[] = mnemonic.split(' ')
@@ -113,10 +115,26 @@ updatePageContent()
     <AppLoader v-if="isLoading" message="Processing..." />
     <div v-else class="flex flex-col p-1">
       <div class="flex flex-col gap-2">
-        <p class="font-Nohemi font-semibold text-center text-xl">
+        <p
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Verify Recording
         </p>
-        <p class="text-sm text-center text-zinc-400">
+        <p
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Now make sure that you have recorded the seed phrase correctly by
           selecting the correct option below.
         </p>
@@ -153,6 +171,14 @@ updatePageContent()
             v-for="option in options"
             :key="option"
             class="btn-form w-36"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click="selectOption(option)"
           >
             {{ option }}
@@ -164,7 +190,14 @@ updatePageContent()
         class="flex flex-row gap-2 bg-red-system p-2 rounded-[8px] mt-3"
       >
         <img src="@/assets/images/incorrect.svg" class="h-8 w-8" alt="Error" />
-        <p class="text-xs text-white-100">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           This choice is incorrect. Please select the correct word and proceed
           to verify 3 more words.
         </p>
@@ -188,6 +221,14 @@ updatePageContent()
           class="btn-primary py-[10px]"
           type="submit"
           :disabled="isError || isCorrect"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
         >
           Back to Seed Phrase
         </button>
diff --git a/src/components/CustomRequestScreen/Mvx/MVXSignTransaction.vue b/src/components/CustomRequestScreen/Mvx/MVXSignTransaction.vue
index 967f5df1..3c86fe02 100644
--- a/src/components/CustomRequestScreen/Mvx/MVXSignTransaction.vue
+++ b/src/components/CustomRequestScreen/Mvx/MVXSignTransaction.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import Decimal from 'decimal.js'
 
+import { useAppStore } from '@/store/app'
 import useCurrencyStore from '@/store/currencies'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const currencyStore = useCurrencyStore()
 const props = defineProps<{ transaction: any }>()
+const appStore = useAppStore()
 
 const gasFeesUSD = new Decimal(props.transaction.gasLimit)
   .mul(new Decimal(props.transaction.gasPrice))
@@ -17,7 +20,13 @@ const gasFeesUSD = new Decimal(props.transaction.gasLimit)
 <template>
   <div class="flex flex-col gap-2 text-sm">
     <div
-      class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+      class="uppercase"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
     >
       Transaction Details
     </div>
@@ -26,8 +35,25 @@ const gasFeesUSD = new Decimal(props.transaction.gasLimit)
       :key="key"
       class="flex justify-between gap-4"
     >
-      <span class="w-[120px] capitalize">{{ key }}</span>
-      <span :title="String(value)">
+      <span
+        class="w-[120px] capitalize"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ key }}</span
+      >
+      <span
+        :title="String(value)"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         {{
           key === 'sender' || key === 'receiver'
             ? truncateMid(value as string, 8)
@@ -36,8 +62,25 @@ const gasFeesUSD = new Decimal(props.transaction.gasLimit)
       </span>
     </div>
     <div class="flex justify-between gap-4 text-base">
-      <span class="w-[120px] capitalize">Gas Fees</span>
-      <span>{{ gasFeesUSD }} USD</span>
+      <span
+        class="w-[120px] capitalize"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Gas Fees</span
+      >
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ gasFeesUSD }} USD</span
+      >
     </div>
   </div>
 </template>
diff --git a/src/components/CustomRequestScreen/Mvx/MVXSignTransactions.vue b/src/components/CustomRequestScreen/Mvx/MVXSignTransactions.vue
index 923eaac9..c79926c1 100644
--- a/src/components/CustomRequestScreen/Mvx/MVXSignTransactions.vue
+++ b/src/components/CustomRequestScreen/Mvx/MVXSignTransactions.vue
@@ -2,12 +2,14 @@
 import Decimal from 'decimal.js'
 import { computed } from 'vue'
 
+import { useAppStore } from '@/store/app'
 import useCurrencyStore from '@/store/currencies'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{ transactions: any[] }>()
 const currencyStore = useCurrencyStore()
-
+const appStore = useAppStore()
 const totalGasFeesUSD = computed(() => {
   return props.transactions
     .reduce((acc: Decimal, transaction: any) => {
@@ -23,21 +25,47 @@ const totalGasFeesUSD = computed(() => {
 
 <template>
   <div class="flex flex-col gap-4">
-    <div class="text-sm font-medium">Transactions</div>
+    <div
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
+      Transactions
+    </div>
     <div class="flex flex-col gap-8">
       <div
         v-for="(transaction, index) in props.transactions"
         :key="JSON.stringify(transaction)"
         class="flex flex-col gap-2 text-sm"
       >
-        <div class="text-sm font-medium">#{{ index + 1 }}</div>
+        <div class="text-lg">#{{ index + 1 }}</div>
         <div
           v-for="[key, value] in Object.entries(transaction)"
           :key="key"
           class="flex justify-between gap-4"
         >
-          <span class="w-[120px] capitalize">{{ key }}</span>
-          <span :title="String(value)">
+          <span
+            class="w-[120px] capitalize"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >{{ key }}</span
+          >
+          <span
+            :title="String(value)"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{
               key === 'sender' || key === 'receiver'
                 ? truncateMid(value as string, 8)
@@ -46,8 +74,23 @@ const totalGasFeesUSD = computed(() => {
           </span>
         </div>
         <div class="flex justify-between gap-4">
-          <span class="w-[120px] capitalize">Gas Fees</span>
           <span
+            class="w-[120px] capitalize"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Gas Fees</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{
               new Decimal(transaction.gasLimit)
                 .mul(new Decimal(transaction.gasPrice))
@@ -61,8 +104,25 @@ const totalGasFeesUSD = computed(() => {
       </div>
       <div>
         <div class="flex justify-between gap-4">
-          <span class="w-[120px] capitalize">Total Gas Fees</span>
-          <span>{{ totalGasFeesUSD }} USD</span>
+          <span
+            class="w-[120px] capitalize"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Total Gas Fees</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >{{ totalGasFeesUSD }} USD</span
+          >
         </div>
       </div>
     </div>
diff --git a/src/components/CustomRequestScreen/Near/NearSignAndSendTransaction.vue b/src/components/CustomRequestScreen/Near/NearSignAndSendTransaction.vue
index 2015eda8..2d91177b 100644
--- a/src/components/CustomRequestScreen/Near/NearSignAndSendTransaction.vue
+++ b/src/components/CustomRequestScreen/Near/NearSignAndSendTransaction.vue
@@ -4,10 +4,12 @@ import { type SignAndSendTransactionOptions } from 'near-api-js/lib/account'
 import { computed } from 'vue'
 
 import SignMessageAdvancedInfo from '@/components/signMessageAdvancedInfo.vue'
+import { useAppStore } from '@/store/app'
 import { estimatedNearTxFees } from '@/utils/near/estimatedTxFees'
 import { getActionName } from '@/utils/near/getActionName'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{
   transaction: SignAndSendTransactionOptions
@@ -15,6 +17,7 @@ const props = defineProps<{
 
 const accountHander = getRequestHandler().getAccountHandler()
 const nearDecimals = accountHander.decimals
+const appStore = useAppStore()
 
 const estimatedTxFees = computed(() => {
   const totalTxFees = props.transaction.actions.reduce((acc, action) => {
@@ -32,29 +35,74 @@ const estimatedTxFees = computed(() => {
 <template>
   <div class="flex flex-col gap-2 text-sm">
     <div
-      class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+      class="uppercase"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
     >
       Transaction Details
     </div>
     <div class="flex justify-between gap-4">
-      <span class="w-[120px]">Receiver</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Receiver</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
         :title="props.transaction.receiverId"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ truncateMid(props.transaction.receiverId, 8) }}
       </span>
     </div>
     <div class="flex justify-between gap-4">
-      <span>Estimated Transaction Fees</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Estimated Transaction Fees</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ estimatedTxFees }} NEAR
       </span>
     </div>
     <div v-if="props.transaction.actions.length > 1">
-      <div class="text-sm font-medium mt-4">Batched Transactions</div>
+      <div
+        class="mt-4"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
+        Batched Transactions
+      </div>
     </div>
     <div
       v-for="(action, index) in props.transaction.actions"
@@ -62,22 +110,57 @@ const estimatedTxFees = computed(() => {
     >
       <div v-if="props.transaction.actions.length > 1">
         <div class="flex justify-between gap-4 mt-2">
-          <span class="w-full"
+          <span
+            class="w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ index + 1 }}) {{ getActionName(action) }}</span
           >
         </div>
       </div>
       <div v-else>
         <div class="flex justify-between gap-4 mt-2 font-medium">
-          <span class="w-full">{{ getActionName(action) }}</span>
+          <span
+            class="w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >{{ getActionName(action) }}</span
+          >
         </div>
       </div>
       <div :class="{ 'ml-3': props.transaction.actions.length > 1 }">
         <div v-if="action.transfer">
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Amount</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Amount</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{
                 new Decimal(action.transfer.deposit?.toString() || '0')
@@ -93,9 +176,28 @@ const estimatedTxFees = computed(() => {
         </div>
         <div v-else-if="action.stake" class="flex flex-col gap-1">
           <div class="flex justify-between gap-3">
-            <span class="w-[120px]">Stake Amount</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Stake Amount</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{
                 new Decimal(action.stake.stake?.toString() || '0')
@@ -106,9 +208,28 @@ const estimatedTxFees = computed(() => {
             </span>
           </div>
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Public Key</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Public Key</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ action.stake.publicKey?.toString() }}
             </span>
@@ -116,17 +237,55 @@ const estimatedTxFees = computed(() => {
         </div>
         <div v-else-if="action.functionCall" class="flex flex-col gap-1">
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Method</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Method</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ action.functionCall.methodName }}
             </span>
           </div>
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Deposit</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Deposit</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{
                 new Decimal(action.functionCall.deposit?.toString() || '0')
@@ -137,15 +296,45 @@ const estimatedTxFees = computed(() => {
             </span>
           </div>
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Gas</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Gas</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ action.functionCall.gas?.toString() }}
             </span>
           </div>
           <div class="flex flex-col gap-1">
-            <span class="w-[120px]">Arguments</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Arguments</span
+            >
             <SignMessageAdvancedInfo
               :info="action.functionCall.args.toString()"
             />
diff --git a/src/components/CustomRequestScreen/Solana/SignAllTransactions.vue b/src/components/CustomRequestScreen/Solana/SignAllTransactions.vue
index 8062becb..13cc6bd9 100644
--- a/src/components/CustomRequestScreen/Solana/SignAllTransactions.vue
+++ b/src/components/CustomRequestScreen/Solana/SignAllTransactions.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import SolanaTransactionDetails from '@/components/CustomRequestScreen/Solana/TransactionDetails.vue'
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{ message: string[] }>()
+const appStore = useAppStore()
 </script>
 
 <template>
@@ -11,7 +14,16 @@ const props = defineProps<{ message: string[] }>()
       :key="m"
       class="flex flex-col gap-2"
     >
-      <div class="text-md font-medium">Transaction #{{ index + 1 }}</div>
+      <div
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
+        Transaction #{{ index + 1 }}
+      </div>
       <SolanaTransactionDetails :message="m" />
     </div>
   </div>
diff --git a/src/components/CustomRequestScreen/Solana/SignTransaction.vue b/src/components/CustomRequestScreen/Solana/SignTransaction.vue
index 45f4ddb3..57ca5d43 100644
--- a/src/components/CustomRequestScreen/Solana/SignTransaction.vue
+++ b/src/components/CustomRequestScreen/Solana/SignTransaction.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
 import SolanaTransactionDetails from '@/components/CustomRequestScreen/Solana/TransactionDetails.vue'
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{ message: string }>()
+const appStore = useAppStore()
 </script>
 
 <template>
   <div class="flex flex-col gap-2 text-sm">
     <div
-      class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+      class="uppercase text-black-arsenic dark:text-white-400"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
     >
       Transaction Details
     </div>
diff --git a/src/components/CustomRequestScreen/Solana/TransactionDetails.vue b/src/components/CustomRequestScreen/Solana/TransactionDetails.vue
index 43eaa84d..83bc4c88 100644
--- a/src/components/CustomRequestScreen/Solana/TransactionDetails.vue
+++ b/src/components/CustomRequestScreen/Solana/TransactionDetails.vue
@@ -6,8 +6,10 @@ import {
 } from '@solana/web3.js'
 import base58 from 'bs58'
 
+import { useAppStore } from '@/store/app'
 import { getProgramDetails } from '@/utils/solana/getProgramFromId'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps<{ message: string }>()
 
@@ -18,7 +20,7 @@ const decompiled = TransactionMessage.decompile(deserialized.message)
 const payerKey = decompiled.payerKey.toString()
 const instructions = decompiled.instructions
 const recentBlockhash = decompiled.recentBlockhash
-
+const appStore = useAppStore()
 const displayableInstructions = instructions.map((instruction) => {
   return getProgramDetails(instruction)
 })
@@ -36,25 +38,65 @@ function getDisplayableValue(value: any) {
 <template>
   <div class="flex flex-col gap-2 text-sm">
     <div class="flex justify-between gap-4">
-      <span class="w-[120px]">Payer</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Payer</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         :title="payerKey"
       >
         {{ truncateMid(payerKey, 8) }}
       </span>
     </div>
     <div class="flex justify-between gap-4">
-      <span class="w-[120px]">Recent Blockhash</span>
+      <span
+        class="w-[120px]"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Recent Blockhash</span
+      >
       <span
         class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         :title="recentBlockhash"
       >
         {{ truncateMid(recentBlockhash, 8) }}
       </span>
     </div>
     <div class="flex flex-col gap-2 mt-4">
-      <div class="text-sm font-medium">Instructions</div>
+      <div
+        class="text-sm font-medium"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
+        Instructions
+      </div>
       <div class="flex flex-col gap-8">
         <div
           v-for="(instruction, index) in displayableInstructions"
@@ -63,7 +105,18 @@ function getDisplayableValue(value: any) {
         >
           <div class="text-sm font-medium">#{{ index + 1 }}</div>
           <div class="flex justify-between gap-4">
-            <span class="w-[120px]">Program</span>
+            <span
+              class="w-[120px]"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Program</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
               :title="instruction.program"
@@ -76,6 +129,14 @@ function getDisplayableValue(value: any) {
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
               :title="instruction.type"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ instruction.type }}
             </span>
@@ -85,10 +146,29 @@ function getDisplayableValue(value: any) {
             :key="key"
             class="flex justify-between gap-4"
           >
-            <span class="w-[120px] capitalize">{{ key }}</span>
+            <span
+              class="w-[120px] capitalize"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >{{ key }}</span
+            >
             <span
               class="w-[200px] text-right whitespace-nowrap overflow-hidden text-ellipsis"
               :title="getDisplayableValue(value)"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ getDisplayableValue(value) }}
             </span>
diff --git a/src/components/EditNetwork.vue b/src/components/EditNetwork.vue
index d70bc606..ee957162 100644
--- a/src/components/EditNetwork.vue
+++ b/src/components/EditNetwork.vue
@@ -2,11 +2,14 @@
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
+import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { content, errors } from '@/utils/content'
 import { produceProviderFromURLString } from '@/utils/evm/rpcURLToProvider'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{
@@ -15,7 +18,7 @@ const props = defineProps<{
 
 const rpcStore = useRpcStore()
 const toast = useToast()
-
+const appStore = useAppStore()
 const getImage = useImage()
 const rpcConfigForEdit = rpcStore.getRpcConfig(Number(props.chainId))
 
@@ -105,6 +108,12 @@ function deleteNetwork() {
     emit('close')
   }
 }
+
+const trashContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [trashContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -116,12 +125,26 @@ function deleteNetwork() {
         class="h-auto"
         @click="deleteNetwork"
       >
-        <img :src="getImage('trash-icon')" alt="close form" />
+        <div ref="trashContainer">
+          <img
+            :src="getImage('trash-icon')"
+            alt="Trash Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
     </div>
     <form class="space-y-3 sm:space-y-2" @submit.prevent="handleSubmit">
       <div class="space-y-1">
-        <label class="text-xs text-zinc-400" for="networkName">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="networkName"
+        >
           Network Name
         </label>
         <input
@@ -131,10 +154,26 @@ function deleteNetwork() {
           type="text"
           class="text-base sm:text-sm bg-gradient w-full p-2 sm:p-1 rounded-lg border-none outline-none"
           placeholder="e.g. Ethereum"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="space-y-1">
-        <label class="text-xs text-zinc-400" for="rpcUrl"> RPC URL </label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="rpcUrl"
+        >
+          RPC URL
+        </label>
         <input
           id="rpcUrl"
           v-model="rpcConfig.rpcUrl"
@@ -142,10 +181,24 @@ function deleteNetwork() {
           type="text"
           class="text-base sm:text-sm bg-gradient w-full p-2 sm:p-1 rounded-lg border-none outline-none"
           placeholder="e.g. https://blockchain.dev.arcana.network"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="space-y-1">
-        <label class="text-xs text-zinc-400" for="currencySymbol">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="currencySymbol"
+        >
           Currency Symbol
         </label>
         <input
@@ -155,10 +208,26 @@ function deleteNetwork() {
           type="text"
           class="text-base sm:text-sm bg-gradient w-full p-2 sm:p-1 rounded-lg border-none outline-none"
           placeholder="e.g. ETH"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="space-y-1">
-        <label class="text-xs text-zinc-400" for="chainId"> Chain ID </label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="chainId"
+        >
+          Chain ID
+        </label>
         <input
           id="chainId"
           v-model="rpcConfig.chainId"
@@ -166,10 +235,24 @@ function deleteNetwork() {
           type="text"
           class="text-base sm:text-sm bg-gradient w-full p-2 sm:p-1 rounded-lg border-none outline-none"
           placeholder="e.g. 40404"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="space-y-1">
-        <label class="text-xs text-zinc-400" for="explorerUrl">
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          for="explorerUrl"
+        >
           Explorer URL (Optional)
         </label>
         <input
@@ -178,17 +261,39 @@ function deleteNetwork() {
           type="text"
           class="text-base sm:text-sm bg-gradient w-full p-2 sm:p-1 rounded-lg border-none outline-none"
           placeholder="e.g. https://explorer.dev.arcana.network/"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
       <div class="flex justify-between">
         <button
-          class="text-sm sm:text-xs rounded-xl border-2 border-black dark:border-white bg-transparent text-black dark:text-white w-36 h-9 sm:w-20 sm:h-8"
+          class="text-sm sm:text-xs rounded-xl border-2 w-36 h-9 sm:w-20 sm:h-8"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.prevent="emit('close')"
         >
           Cancel
         </button>
         <button
-          class="text-sm sm:text-xs rounded-xl text-white dark:bg-white bg-black dark:text-black w-36 h-9 sm:w-20 sm:h-8"
+          class="rounded-xl w-36 h-9 sm:w-20 sm:h-8"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
         >
           Save
         </button>
diff --git a/src/components/ExportKeyModal.vue b/src/components/ExportKeyModal.vue
index b24d753c..bf50aa4d 100644
--- a/src/components/ExportKeyModal.vue
+++ b/src/components/ExportKeyModal.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
+import { useAppStore } from '@/store/app'
 import { AUTH_URL } from '@/utils/constants'
 import { errors } from '@/utils/content'
 import { downloadFile } from '@/utils/downloadFile'
 import { getImage } from '@/utils/getImage'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const getIconImage = useImage()
-
+const appStore = useAppStore()
 const toast = useToast()
 
 type ExportKeyModalProps = {
@@ -51,16 +55,37 @@ async function copyToClipboard(value: string, message: string) {
     toast.error(errors.COPY)
   }
 }
+
+const copyContainer = ref<HTMLElement | null>(null)
+const downloadContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [copyContainer, downloadContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
   <div class="flex flex-col space-y-5">
     <div class="flex flex-col gap-1">
       <div class="flex items-center justify-between">
-        <label class="text-sm font-medium text-[#8D8D8D]">Private Key</label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Private Key</label
+        >
       </div>
       <div
-        class="bg-black-400 rounded-md p-4 break-words font-normal text-lg blur"
+        class="bg-black-400 rounded-md p-4 break-words blur"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ props.privateKey }}
       </div>
@@ -70,8 +95,24 @@ async function copyToClipboard(value: string, message: string) {
         class="flex gap-1 items-center justify-center btn-tertiary text-sm font-medium p-2"
         @click.stop="copyToClipboard(props.privateKey, 'Private Key Copied')"
       >
-        <img :src="getImage('copy.svg')" class="w-lg h-lg" />
-        <span>Copy</span>
+        <div ref="copyContainer">
+          <img
+            :src="getImage('copy.svg')"
+            class="w-lg h-lg"
+            alt="Copy Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
+
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Copy</span
+        >
       </button>
       <button
         class="flex gap-1 items-center justify-center btn-tertiary text-sm font-medium p-2"
@@ -79,16 +120,44 @@ async function copyToClipboard(value: string, message: string) {
           handlePrivateKeyDownload(props.privateKey, props.walletAddress)
         "
       >
-        <img :src="getImage('download.svg')" class="w-lg h-lg" />
-        <span>Download</span>
+        <div ref="downloadContainer">
+          <img
+            :src="getImage('download.svg')"
+            class="w-lg h-lg"
+            alt="Download Icon"
+            @load="(event) => fetchAndInjectSVG(event, 1)"
+          />
+        </div>
+
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Download</span
+        >
       </button>
     </div>
-    <div class="flex space-x-3 bg-blue-dark-sky p-2 rounded-sm">
+    <div
+      class="flex space-x-3 p-2 rounded-sm"
+      :style="{
+        backgroundColor: appStore.theme_settings.accent_color,
+      }"
+    >
       <img
         class="w-5 h-5"
         :src="getIconImage('info-circle', undefined, 'svg')"
       />
-      <span class="text-xs text-white-200">
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Please close this tab immediately after you back up your private key!
       </span>
     </div>
diff --git a/src/components/GasPrice.vue b/src/components/GasPrice.vue
index 4909698d..9c9dbb66 100644
--- a/src/components/GasPrice.vue
+++ b/src/components/GasPrice.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Decimal } from 'decimal.js'
-import { type Ref, ref, watch, computed } from 'vue'
+import { computed, type Ref, ref, watch } from 'vue'
+
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const pathname = window.location.pathname
 const isSendTransaction =
@@ -13,7 +16,7 @@ type GasPriceProps = {
   maxFeePerGas?: string | number
   maxPriorityFeePerGas?: string | number
 }
-
+const appStore = useAppStore()
 const props = defineProps<GasPriceProps>()
 
 const computedProps = computed(() => {
@@ -106,8 +109,23 @@ function handleCustomGasPriceInput() {
     <div class="flex justify-between items-baseline">
       <span class="text-sm font-light">Gas Fees</span>
       <div v-if="false" class="text-xs font-normal">
-        <span class="text-gray-100">Transaction Time:</span>
-        <span class="text-black-500 dark:text-white-100">
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Transaction Time:</span
+        >
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           ~{{ transactionTime }} mins
         </span>
       </div>
@@ -119,11 +137,17 @@ function handleCustomGasPriceInput() {
       <div
         class="flex justify-center items-center p-1 w-full text-center text-base font-normal cursor-pointer hover:border-b-1 hover:border-blue-dark focus-visible:bg-black-500 select-none"
         :class="{
+          [getFontSizeStyle(Number(appStore.theme_settings.font_size))]: true,
           'border-b-2 border-blue-dark dark:border-white-200 text-blue-dark dark:text-white-200':
             selectedGasMethod === 'normal',
           'text-gray-myst dark:text-gray-spanish-light':
             selectedGasMethod !== 'normal',
         }"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @click.stop="selectedGasMethod = 'normal'"
       >
         Normal
@@ -131,11 +155,17 @@ function handleCustomGasPriceInput() {
       <div
         class="flex justify-center items-center p-1 w-full text-center text-base font-normal cursor-pointer hover:border-b-1 hover:border-blue-dark focus-visible:bg-black-500 select-none"
         :class="{
+          [getFontSizeStyle(Number(appStore.theme_settings.font_size))]: true,
           'border-b-2 border-blue-dark dark:border-white-200 text-blue-dark dark:text-white-200':
             selectedGasMethod === 'fast',
           'text-gray-myst dark:text-gray-spanish-light':
             selectedGasMethod !== 'fast',
         }"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @click.stop="selectedGasMethod = 'fast'"
       >
         Fast
@@ -143,11 +173,17 @@ function handleCustomGasPriceInput() {
       <div
         class="flex justify-center items-center p-1 w-full text-center text-base font-normal cursor-pointer hover:border-b-1 hover:border-blue-dark focus-visible:bg-black-500 select-none"
         :class="{
+          [getFontSizeStyle(Number(appStore.theme_settings.font_size))]: true,
           'border-b-2 border-blue-dark dark:border-white-200 text-blue-dark dark:text-white-200':
             selectedGasMethod === 'custom',
           'text-gray-myst dark:text-gray-spanish-light':
             selectedGasMethod !== 'custom',
         }"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @click.stop="selectedGasMethod = 'custom'"
       >
         Custom
@@ -156,7 +192,16 @@ function handleCustomGasPriceInput() {
   </div>
   <div v-if="selectedGasMethod === 'custom'" class="flex flex-col gap-6 mt-2">
     <div class="flex flex-col gap-1">
-      <label class="text-sm font-medium text-left" for="gasLimit">
+      <label
+        class="text-left"
+        for="gasLimit"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Gas Limit
       </label>
       <input
@@ -165,13 +210,30 @@ function handleCustomGasPriceInput() {
         required
         type="text"
         class="input-field bg-gray-zinc"
-        :class="{ 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction }"
+        :class="[
+          { 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction },
+          getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+        ]"
         placeholder="Enter total gas to be used"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @input="handleCustomGasPriceInput()"
       />
     </div>
     <div class="flex flex-col gap-1">
-      <label class="text-sm font-medium text-left" for="maxFee">
+      <label
+        class="text-left"
+        for="maxFee"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Max Priority Fee (Gwei)
       </label>
       <input
@@ -180,13 +242,30 @@ function handleCustomGasPriceInput() {
         required
         type="text"
         class="input-field bg-gray-zinc"
-        :class="{ 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction }"
         placeholder="Enter Max priority fee per gas"
+        :class="[
+          { 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction },
+          getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+        ]"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @input="handleCustomGasPriceInput()"
       />
     </div>
     <div class="flex flex-col gap-1">
-      <label class="text-sm font-medium text-left" for="maxPriorityFee">
+      <label
+        class="text-left"
+        for="maxPriorityFee"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Max Fee (Gwei)
       </label>
       <input
@@ -195,13 +274,37 @@ function handleCustomGasPriceInput() {
         required
         type="text"
         class="input-field bg-gray-zinc"
-        :class="{ 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction }"
         placeholder="Enter Max fee per gas"
+        :class="[
+          { 'dark:bg-black-arsenic bg-gray-zinc-85': isSendTransaction },
+          getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+        ]"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         @input="handleCustomGasPriceInput()"
       />
       <div class="flex justify-end gap-1">
-        <span class="text-xs text-gray-100">Base Fee:</span>
-        <span class="text-xs">{{ sanitizedBaseFee }} Gwei</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Base Fee:</span
+        >
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >{{ sanitizedBaseFee }} Gwei</span
+        >
       </div>
     </div>
   </div>
diff --git a/src/components/GasPriceMVX.vue b/src/components/GasPriceMVX.vue
index f9790687..f89d6e34 100644
--- a/src/components/GasPriceMVX.vue
+++ b/src/components/GasPriceMVX.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
 const emits = defineEmits(['gasLimitInput'])
 
 const props = defineProps<{
@@ -14,20 +17,54 @@ function onGasLimitChange(event: Event) {
   const value = target.value
   emits('gasLimitInput', value)
 }
-
+const appStore = useAppStore()
 const gasLimit = computed(() => props.gasLimit)
 </script>
 
 <template>
   <div class="space-y-2">
     <div class="flex flex-row gap-1">
-      <span class="text-sm font-medium">Gas Fee :</span>
-      <span class="text-sm font-medium">{{ props.gasFee }} USD</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Gas Fee :</span
+      >
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ props.gasFee }} USD</span
+      >
     </div>
     <div class="flex flex-col gap-1">
       <div class="text-sm font-medium flex justify-between">
-        <label for="gas-limit">Gas Limit</label>
-        <p>Min Gas Limit: {{ minGasLimit }}</p>
+        <label
+          for="gas-limit"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Gas Limit</label
+        >
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
+          Min Gas Limit: {{ minGasLimit }}
+        </p>
       </div>
       <div class="flex justify-between space-x-2">
         <input
@@ -35,6 +72,12 @@ const gasLimit = computed(() => props.gasLimit)
           :value="gasLimit"
           type="number"
           class="input-field flex-1"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           @input="onGasLimitChange"
         />
       </div>
diff --git a/src/components/MFAProceedModal.vue b/src/components/MFAProceedModal.vue
index 04c8ae89..8dc8fb44 100644
--- a/src/components/MFAProceedModal.vue
+++ b/src/components/MFAProceedModal.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/app'
 import { DOCS_URL } from '@/utils/constants'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['proceed', 'close'])
+const appStore = useAppStore()
 </script>
 
 <template>
@@ -12,7 +15,14 @@ const emit = defineEmits(['proceed', 'close'])
       </div>
     </div>
     <div class="text-sm text-gray-spanish-light flex flex-col gap-2">
-      <p>
+      <p
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Turn on MFA by setting up security questions and a PIN. You will need to
         enter either of them to authenticate when you login to a new device or
         browser.
@@ -27,6 +37,14 @@ const emit = defineEmits(['proceed', 'close'])
     <div>
       <button
         class="p-2 btn-primary flex justify-center items-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
         @click.stop="emit('proceed')"
       >
         Proceed
diff --git a/src/components/NFTView.vue b/src/components/NFTView.vue
index 12154ee4..66b7c427 100644
--- a/src/components/NFTView.vue
+++ b/src/components/NFTView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, type Ref, reactive, watch, computed } from 'vue'
+import { computed, onMounted, reactive, ref, watch, type Ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import type { NFT } from '@/models/NFT'
@@ -17,6 +17,8 @@ import { getImage } from '@/utils/getImage'
 import { getDetailedNFTs } from '@/utils/nftUtils'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const userStore = useUserStore()
 const rpcStore = useRpcStore()
@@ -134,12 +136,27 @@ const filteredNFTs = computed(() => {
 function handleFallbackNft(event) {
   event.target.src = getImage('blockchain-icon.png')
 }
+
+const settingContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [settingContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
   <div class="space-y-3">
     <div v-if="!loader.show && nfts.length" class="flex flex-col space-y-1">
-      <label for="search-nft" class="text-sm">Search NFT</label>
+      <label
+        for="search-nft"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Search NFT</label
+      >
       <div class="card flex px-3 space-x-2">
         <img :src="getImage('search.svg')" alt="search" />
         <input
@@ -147,6 +164,12 @@ function handleFallbackNft(event) {
           v-model="searchTerm"
           class="w-full py-3 px-0"
           placeholder="Search NFT"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         />
       </div>
     </div>
@@ -155,7 +178,14 @@ function handleFallbackNft(event) {
         v-if="loader.show"
         class="flex justify-center items-center flex-1 p-3 m-1"
       >
-        <p class="text-sm font-medium">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ loader.message }}
         </p>
       </div>
@@ -183,20 +213,45 @@ function handleFallbackNft(event) {
             </div>
             <div class="flex flex-col px-2">
               <span
-                class="text-gray-100 text-sm overflow-hidden whitespace-nowrap text-ellipsis"
+                class="overflow-hidden whitespace-nowrap text-ellipsis"
                 :title="nft.name"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >{{ nft.name }}</span
               >
               <span
-                class="text-gray-100 text-xs overflow-hidden whitespace-nowrap text-ellipsis"
+                class="overflow-hidden whitespace-nowrap text-ellipsis"
                 :title="nft.identifier || nft.collectionName"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >{{ nft.identifier || nft.collectionName }}</span
               >
             </div>
           </div>
         </div>
         <div v-else class="flex justify-between">
-          <span class="color-secondary m-auto font-medium text-sm"
+          <span
+            class="m-auto"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >No NFTs added</span
           >
         </div>
@@ -208,10 +263,28 @@ function handleFallbackNft(event) {
     >
       <button
         class="btn-quaternery flex gap-1 text-sm items-center cursor-pointer flex-grow justify-center"
+        :style="{
+          borderColor: appStore.theme_settings.accent_color,
+        }"
         @click.stop="handleManageNFT"
       >
-        <img :src="getImage('settings.svg')" />
-        <span class="text-base font-medium">Manage</span>
+        <div ref="settingContainer">
+          <img
+            :src="getImage('settings.svg')"
+            alt="Setting Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
+
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
+          >Manage</span
+        >
       </button>
     </div>
   </div>
diff --git a/src/components/PermissionRequest/SendTransaction.vue b/src/components/PermissionRequest/SendTransaction.vue
index 0d5aa35f..7e2f7b27 100644
--- a/src/components/PermissionRequest/SendTransaction.vue
+++ b/src/components/PermissionRequest/SendTransaction.vue
@@ -4,9 +4,12 @@ import { onMounted, ref } from 'vue'
 
 import GasPrice from '@/components/GasPrice.vue'
 import SignMessageAdvancedInfo from '@/components/signMessageAdvancedInfo.vue'
+import { useAppStore } from '@/store/app'
 import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { sanitizeRequest } from '@/utils/sanitizeRequest'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const props = defineProps({
   request: {
@@ -30,7 +33,7 @@ const gasLimit = ref('0')
 const customGasPrice = ref({} as unknown)
 const showGasFeeLoader = ref(false)
 const showDetails = ref(false)
-
+const appStore = useAppStore()
 function calculateValue(value) {
   return new Decimal(value).div(Decimal.pow(10, 18)).toString()
 }
@@ -122,37 +125,97 @@ onMounted(async () => {
     showGasFeeLoader.value = false
   }
 })
+
+const arrowContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [arrowContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
   <div
     class="flex-1 flex flex-col p-2 h-full rounded-md space-y-4 overflow-auto"
   >
-    <p class="text-sm text-[#8D8D8D] font-medium text-center">
+    <p
+      class="text-center"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
       The application
-      <span class="text-white-300">{{ appDetails?.name }}</span> is requesting a
-      payment. Do you approve the transaction?
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ appDetails?.name }}</span
+      >
+      is requesting a payment. Do you approve the transaction?
     </p>
     <div
       v-if="request.params[0]?.value"
       class="flex justify-center items-baseline space-x-5"
     >
-      <span class="text-sm">{{ props.chainConfig.currency || 'Units' }}</span>
-      <span class="text-4xl text-white-400">{{
-        calculateValue(request.params[0]?.value)
-      }}</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ props.chainConfig.currency || 'Units' }}</span
+      >
+      <span
+        class="text-4xl text-white-400"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ calculateValue(request.params[0]?.value) }}</span
+      >
     </div>
     <div class="text-center">
-      <span v-if="showGasFeeLoader" class="text-sm text-[#8D8D8D] animate-pulse"
+      <span
+        v-if="showGasFeeLoader"
+        class="animate-pulse"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >Calculating gas fee.....</span
       >
-      <span v-else class="text-sm text-[#8D8D8D]">
+      <span
+        v-else
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         Additional
-        <span class="text-white-400">{{
-          calculateGasPrice(
-            customGasPrice.maxFeePerGas || request.params[0].gasPrice
-          )
-        }}</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >{{
+            calculateGasPrice(
+              customGasPrice.maxFeePerGas || request.params[0].gasPrice
+            )
+          }}</span
+        >
         for Transaction Fees
       </span>
     </div>
@@ -165,13 +228,25 @@ onMounted(async () => {
         class="flex justify-center items-center text-sm font-medium"
         @click="showDetails = !showDetails"
       >
-        <span>View Details </span>
-        <img
-          :src="getImage('arrow-down.svg')"
-          class="transition-all duration-500 ease-in-out"
-          :class="{ '-rotate-180': showDetails }"
-          title="Click to expand"
-        />
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >View Details
+        </span>
+        <div ref="arrowContainer">
+          <img
+            :src="getImage('arrow-down.svg')"
+            class="transition-all duration-500 ease-in-out"
+            :class="{ '-rotate-180': showDetails }"
+            title="Click to expand"
+            alt="Arrow Down Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
       <SignMessageAdvancedInfo
         v-if="showDetails"
diff --git a/src/components/PinBasedRecoveryModal.vue b/src/components/PinBasedRecoveryModal.vue
index f498647a..453ce094 100644
--- a/src/components/PinBasedRecoveryModal.vue
+++ b/src/components/PinBasedRecoveryModal.vue
@@ -2,15 +2,17 @@
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
-import { content, errors } from '@/utils/content'
+import { useAppStore } from '@/store/app'
+import { content } from '@/utils/content'
 import { getImage } from '@/utils/getImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['proceed', 'back', 'switch-alternate'])
 
 const password = ref('')
 const passwordType = ref('password')
 const toast = useToast()
-
+const appStore = useAppStore()
 function handleProceed() {
   if (!password.value) return toast.error(content.PIN)
   emit('proceed', {
@@ -28,17 +30,41 @@ function handleProceed() {
           class="-rotate-90 invert dark:invert-0"
         />
       </button>
-      <div class="modal-title font-medium">Recovery PIN</div>
+      <div
+        class="modal-title"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
+        Recovery PIN
+      </div>
     </div>
     <form class="flex flex-col gap-4" @submit.prevent="handleProceed">
       <div class="flex flex-col gap-1">
-        <label>Type in the PIN used during setup</label>
+        <label
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Type in the PIN used during setup</label
+        >
         <div class="relative">
           <input
             v-model.trim="password"
             :type="passwordType"
             class="text-sm p-3 input-field text-ellipsis overflow-hidden whitespace-nowrap w-full focus:input-active bg-gray-zinc dark:bg-black-arsenic"
             placeholder="Enter a alphanumberic pin"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           />
           <img
             v-if="passwordType === 'password'"
@@ -59,11 +85,30 @@ function handleProceed() {
         </div>
       </div>
       <div class="flex flex-col mt-1 justify-center items-center gap-4">
-        <button class="mt-1 text-sm btn-primary p-2 w-48" type="submit">
+        <button
+          class="mt-1 text-sm btn-primary p-2 w-48"
+          type="submit"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           Proceed
         </button>
         <button
           class="font-medium capitalize text-sm btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="emit('switch-alternate')"
         >
           Answer Security Questions Instead
diff --git a/src/components/PrivateKeyCautionModal.vue b/src/components/PrivateKeyCautionModal.vue
index 150eeac9..9cab5f9d 100644
--- a/src/components/PrivateKeyCautionModal.vue
+++ b/src/components/PrivateKeyCautionModal.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/app'
 import { DOCS_URL } from '@/utils/constants'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
+const appStore = useAppStore()
 
 const emit = defineEmits(['proceed', 'close'])
 </script>
@@ -9,7 +13,15 @@ const emit = defineEmits(['proceed', 'close'])
     <div class="font-Nohemi text-center text-[20px] font-medium">
       Export Private Key
     </div>
-    <div class="text-sm text-gray-spanish-light flex flex-col gap-2">
+    <div
+      class="flex flex-col gap-2"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
       <p>
         Use this utility to export your private keys to create a backup or to
         use your address with other wallet providers.
@@ -28,6 +40,14 @@ const emit = defineEmits(['proceed', 'close'])
     <div>
       <button
         class="p-2 btn-primary flex justify-center items-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
         @click.stop="emit('proceed')"
       >
         Proceed
diff --git a/src/components/ReceiveTokens.vue b/src/components/ReceiveTokens.vue
index cd13a60b..48d305c8 100644
--- a/src/components/ReceiveTokens.vue
+++ b/src/components/ReceiveTokens.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import VueQrious from 'vue-qrious'
 import { useToast } from 'vue-toastification'
 
+import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { content, errors } from '@/utils/content'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const userStore = useUserStore()
 const toast = useToast()
+const appStore = useAppStore()
 
 async function copyToClipboard(value: string) {
   try {
@@ -17,6 +22,12 @@ async function copyToClipboard(value: string) {
     toast.error(errors.WALLET.COPY)
   }
 }
+
+const copyContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [copyContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -24,7 +35,15 @@ async function copyToClipboard(value: string) {
     <div class="flex items-center justify-center">
       <p class="font-Nohemi text-[20px] font-medium">Receive Tokens</p>
     </div>
-    <p class="text-xs text-gray-spanish-light text-center">
+    <p
+      class="text-center"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
       Scan QR code to copy your address in order to send tokens to this address.
     </p>
   </div>
@@ -44,7 +63,13 @@ async function copyToClipboard(value: string) {
       title="Click to copy wallet address"
       @click="copyToClipboard(userStore.walletAddress)"
     >
-      <img :src="getImage('copy.svg')" alt="Copy wallet address" />
+      <div ref="copyContainer">
+        <img
+          :src="getImage('copy.svg')"
+          alt="Copy Icon"
+          @load="(event) => fetchAndInjectSVG(event, 0)"
+        />
+      </div>
     </button>
   </div>
 </template>
diff --git a/src/components/RequestCountBadge.vue b/src/components/RequestCountBadge.vue
index 374b1566..dd986d8e 100644
--- a/src/components/RequestCountBadge.vue
+++ b/src/components/RequestCountBadge.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-const showComponent = ref(false)
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
+const showComponent = ref(false)
+const appStore = useAppStore()
 defineProps({
   requestCount: {
     type: Number,
@@ -24,7 +27,13 @@ onMounted(() => {
       class="animate-ping absolute h-full w-full rounded-full bg-[#b43030] opacity-75"
     ></span>
     <span
-      class="flex items-center justify-center rounded-full w-5 h-5 bg-[#b43030] text-xs font-medium"
+      class="flex items-center justify-center rounded-full w-5 h-5 bg-[#b43030]"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
       >{{ requestCount }}</span
     >
   </span>
diff --git a/src/components/SearchQuestion.vue b/src/components/SearchQuestion.vue
index 2b89ef2a..bf93497b 100644
--- a/src/components/SearchQuestion.vue
+++ b/src/components/SearchQuestion.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import {
   Combobox,
-  ComboboxInput,
   ComboboxButton,
-  ComboboxOptions,
+  ComboboxInput,
   ComboboxOption,
+  ComboboxOptions,
   TransitionRoot,
 } from '@headlessui/vue'
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type SearchQuestionProps = {
   questions: {
@@ -19,7 +22,7 @@ type SearchQuestionProps = {
 const props = defineProps<SearchQuestionProps>()
 
 const emit = defineEmits(['change'])
-
+const appStore = useAppStore()
 const selectedQuestion = ref('')
 const isFocused = ref(false)
 const query = ref('')
@@ -63,6 +66,21 @@ function displayValue() {
     return question?.[1].question as string
   }
 }
+
+const placeholderClasses = computed(() => {
+  const fontSizeClass = `placeholder:text-${getFontSizeStyle(
+    Number(appStore.theme_settings.font_size)
+  )}`
+  return fontSizeClass
+})
+
+const placeholderStyle = computed(() => {
+  return {
+    fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+      .primaryFontClass,
+    color: appStore.theme_settings.font_color,
+  }
+})
 </script>
 
 <template>
@@ -78,6 +96,16 @@ function displayValue() {
           class="flex-1 border-none text-sm text-left justify-between py-1 px-3 truncate"
           placeholder="Enter or select the question"
           :display-value="displayValue()"
+          :class="[
+            getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+            placeholderClasses,
+          ]"
+          :style="{
+            ...placeholderStyle,
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           @change="handleChange"
           @focus="isFocused = true"
           @blur="isFocused = false"
@@ -98,6 +126,11 @@ function displayValue() {
         <div v-show="open && filteredQuestions.length">
           <ComboboxOptions
             class="absolute max-h-48 w-full py-2 px-1 card text-sm overflow-auto rounded-t-none z-10"
+            :class="{
+              [appStore.theme === 'dark'
+                ? 'border border-[#13171A] rounded-md'
+                : 'border border-[#F7F7F7] rounded-md']: true,
+            }"
             static
           >
             <ComboboxOption
@@ -108,14 +141,40 @@ function displayValue() {
               :value="question"
             >
               <li
-                class="relative cursor-pointer select-none p-3 rounded-sm flex justify-between hover:bg-gray-200"
+                class="relative cursor-pointer select-none p-3 rounded-sm flex justify-between"
                 :class="{
-                  'bg-gray-200': active,
+                  [getFontSizeStyle(
+                    Number(appStore.theme_settings.font_size)
+                  )]: true,
+
+                  [appStore.theme === 'dark' ? 'bg-[#13171A]' : 'bg-[#F7F7F7]']:
+                    active,
+                  [appStore.theme === 'dark'
+                    ? 'hover:bg-[#13171A]'
+                    : 'hover:bg-[#F7F7F7]']: active,
+                }"
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
                 }"
               >
                 <span
                   class="block truncate"
-                  :class="{ 'font-medium': selected, 'font-normal': !selected }"
+                  :class="{
+                    [getFontSizeStyle(
+                      Number(appStore.theme_settings.font_size)
+                    )]: true,
+                    'font-medium': selected,
+                    'font-normal': !selected,
+                  }"
+                  :style="{
+                    fontFamily: getFontFaimly(
+                      appStore.theme_settings.font_pairing
+                    ).primaryFontClass,
+                    color: appStore.theme_settings.font_color,
+                  }"
                   :title="question[1]"
                 >
                   {{ question[1].question }}
diff --git a/src/components/SearchToken.vue b/src/components/SearchToken.vue
index 4175f346..5575f6f5 100644
--- a/src/components/SearchToken.vue
+++ b/src/components/SearchToken.vue
@@ -1,16 +1,18 @@
 <script lang="ts" setup>
 import {
   Combobox,
-  ComboboxInput,
   ComboboxButton,
-  ComboboxOptions,
+  ComboboxInput,
   ComboboxOption,
+  ComboboxOptions,
   TransitionRoot,
 } from '@headlessui/vue'
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { EthAssetContract } from '@/models/Asset'
+import { useAppStore } from '@/store/app'
 import { getImage } from '@/utils/getImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type SearchAssetProps = {
   tokens: EthAssetContract[]
@@ -31,6 +33,7 @@ const ethTokens = [...props.tokens].sort((token1, token2) => {
 const selectedToken = ref('')
 const query = ref('')
 const isFocused = ref(false)
+const appStore = useAppStore()
 
 const filteredTokens = computed(() => {
   if (query.value === '') {
@@ -72,6 +75,12 @@ function displayValue() {
           class="flex-1 border-none px-2 text-base bg-transparent text-left justify-between truncate w-3/4"
           placeholder="Enter Token Name or Symbol"
           :display-value="displayValue()"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           @change="query = $event.target.value"
           @focus="isFocused = true"
           @blur="isFocused = false"
@@ -109,12 +118,36 @@ function displayValue() {
               >
                 <span
                   class="block truncate max-w-[60%]"
-                  :class="{ 'font-medium': selected, 'font-normal': !selected }"
+                  :class="{
+                    [getFontSizeStyle(
+                      Number(appStore.theme_settings.font_size)
+                    )]: true,
+                    'font-medium': selected,
+                    'font-normal': !selected,
+                  }"
+                  :style="{
+                    fontFamily: getFontFaimly(
+                      appStore.theme_settings.font_pairing
+                    ).primaryFontClass,
+                    color: appStore.theme_settings.font_color,
+                  }"
                 >
                   {{ token.name }}
                 </span>
                 <span
-                  :class="{ 'font-medium': selected, 'font-normal': !selected }"
+                  :class="{
+                    [getFontSizeStyle(
+                      Number(appStore.theme_settings.font_size)
+                    )]: true,
+                    'font-medium': selected,
+                    'font-normal': !selected,
+                  }"
+                  :style="{
+                    fontFamily: getFontFaimly(
+                      appStore.theme_settings.font_pairing
+                    ).primaryFontClass,
+                    color: appStore.theme_settings.font_color,
+                  }"
                 >
                   {{ token.symbol }}
                 </span>
diff --git a/src/components/SecurityQuestionRecoveryModal.vue b/src/components/SecurityQuestionRecoveryModal.vue
index 29cd9cce..ad558b66 100644
--- a/src/components/SecurityQuestionRecoveryModal.vue
+++ b/src/components/SecurityQuestionRecoveryModal.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, onBeforeMount, type Ref } from 'vue'
+import { computed, onBeforeMount, ref, type Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
 import SelectQuestion from '@/components/SelectQuestion.vue'
-import { content, errors } from '@/utils/content'
+import { useAppStore } from '@/store/app'
+import { content } from '@/utils/content'
+import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emit = defineEmits(['proceed', 'back', 'switch-alternate'])
 const props = defineProps<{
@@ -17,6 +21,7 @@ const props = defineProps<{
   }[]
 }>()
 const toast = useToast()
+const appStore = useAppStore()
 
 const answers: Ref<
   {
@@ -78,16 +83,25 @@ function handleProceed() {
     answers: answersToEmit,
   })
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
   <div class="px-4 py-2">
     <div class="flex gap-2 items-center mb-5">
       <button title="Click to go back" @click.stop="emit('back')">
-        <img
-          src="@/assets/images/arrow-white.svg"
-          class="-rotate-90 invert dark:invert-0"
-        />
+        <div ref="backContainer">
+          <img
+            :src="getImage('back-arrow.svg')"
+            alt="Back Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
       <div class="modal-title font-medium">Security Questions</div>
     </div>
@@ -98,7 +112,15 @@ function handleProceed() {
         class="flex flex-col gap-2"
       >
         <div class="flex flex-col gap-1">
-          <label class="text-sm text-gray-100">Question {{ n }}</label>
+          <label
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Question {{ n }}</label
+          >
           <SelectQuestion
             :questions="selectedQuestions"
             :selected-question="getSelectedQuestion(props.questions[n - 1])"
@@ -106,20 +128,53 @@ function handleProceed() {
           />
         </div>
         <div class="flex flex-col gap-1">
-          <label class="text-sm text-gray-100">Answer {{ n }}</label>
+          <label
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Answer {{ n }}</label
+          >
           <input
             v-model.trim="answers[n - 1].answer"
             :placeholder="customPlaceholders[n - 1]"
             class="text-sm p-2 input-field text-ellipsis overflow-hidden whitespace-nowrap focus:input-active bg-gray-zinc dark:bg-black-arsenic"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           />
         </div>
       </div>
       <div class="flex flex-col mt-1 justify-center items-center gap-4">
-        <button class="mt-1 text-sm btn-primary p-2 w-48" type="submit">
+        <button
+          class="mt-1 text-sm btn-primary p-2 w-48"
+          type="submit"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           Proceed
         </button>
         <button
           class="font-medium capitalize text-sm btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="emit('switch-alternate')"
         >
           Enter security PIN Instead
diff --git a/src/components/SelectQuestion.vue b/src/components/SelectQuestion.vue
index 94f6fe3d..b68e8d5c 100644
--- a/src/components/SelectQuestion.vue
+++ b/src/components/SelectQuestion.vue
@@ -7,6 +7,9 @@ import {
 } from '@headlessui/vue'
 import { ref, computed, onMounted } from 'vue'
 
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
 type SearchQuestionProps = {
   questions: {
     [key: number | string]: string
@@ -19,6 +22,7 @@ const props = defineProps<SearchQuestionProps>()
 const emit = defineEmits(['change'])
 
 const selectedQuestionRef = ref(['', ''])
+const appStore = useAppStore()
 
 onMounted(() => {
   selectedQuestionRef.value = props.selectedQuestion
@@ -39,7 +43,13 @@ function handleChange(question: string[]) {
       class="dark:bg-black-arsenic bg-gray-zinc-85 relative w-full cursor-default flex flex-nowrap rounded-sm input-field p-2 outline-none"
     >
       <ListboxButton
-        class="flex flex-1 border-none text-sm bg-transparent text-left justify-between items-center truncate outline-none h-auto dark:text-white-100 text-black-100"
+        class="flex flex-1 border-none text-sm bg-transparent text-left justify-between items-center truncate outline-none h-auto"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         {{ selectedQuestionRef?.[1] }}
         <img
@@ -65,8 +75,19 @@ function handleChange(question: string[]) {
           >
             <span
               class="block truncate"
-              :class="{ 'font-medium': selected, 'font-normal': !selected }"
+              :class="{
+                [getFontSizeStyle(
+                  Number(appStore.theme_settings.font_size)
+                )]: true,
+                'font-medium': selected,
+                'font-normal': !selected,
+              }"
               :title="question[1]"
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               {{ question[1] }}
             </span>
diff --git a/src/components/SellTokens.vue b/src/components/SellTokens.vue
index f65a21f5..0cc84507 100644
--- a/src/components/SellTokens.vue
+++ b/src/components/SellTokens.vue
@@ -2,11 +2,13 @@
 import { ref, type Ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { useAppStore } from '@/store/app'
 import { openTransak } from '@/utils/transak'
 import { useImage } from '@/utils/useImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const getImage = useImage()
-
+const appStore = useAppStore()
 type SellTokenProps = {
   transakNetwork?: string
 }
@@ -67,10 +69,26 @@ function handleDone() {
     >
       <img src="@/assets/images/success.svg" class="h-16 w-16 self-center" />
       <div class="flex flex-col gap-2">
-        <div class="text-base font-medium text-center">
+        <div
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ statusText.title }}
         </div>
-        <div class="text-sm text-gray-100 text-center">
+        <div
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ statusText.message }}
         </div>
       </div>
@@ -80,7 +98,14 @@ function handleDone() {
         <p class="font-Nohemi font-medium text-center text-xl">
           Select Provider
         </p>
-        <p class="text-xs text-zinc-400">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           You will be taken to the provider website in a different tab once you
           choose the provider and click PROCEED.
         </p>
@@ -101,7 +126,18 @@ function handleDone() {
           >
             <label for="Transak" class="flex gap-2 items-center cursor-pointer">
               <img src="@/assets/images/transak.png" class="h-xl w-xl" />
-              <span class="text-base font-normal">Transak</span>
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >Transak</span
+              >
             </label>
             <input
               id="Transak"
@@ -111,15 +147,35 @@ function handleDone() {
               name="provider"
               :disabled="!props.transakNetwork"
               class="radio"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
         </div>
-        <div class="flex space-x-3 bg-blue-dark-sky p-3 rounded-sm">
+        <div
+          class="flex space-x-3 p-3 rounded-sm"
+          :style="{
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           <img
             class="w-4 h-4 mt-1"
             :src="getImage('info-circle', undefined, 'svg')"
           />
-          <p class="text-xs text-white-200">
+          <p
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Your wallet address will be auto-filled, please verify. The time
             taken for funds to reflect in the wallet varies based on payment
             method.
@@ -129,6 +185,14 @@ function handleDone() {
           <button
             class="flex-1 btn-primary py-[10px] text-base font-medium"
             :disabled="!selectedProvider?.trim().length"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
           >
             Proceed
           </button>
diff --git a/src/components/SendNftPreview.vue b/src/components/SendNftPreview.vue
index 4834276f..a6a6398a 100644
--- a/src/components/SendNftPreview.vue
+++ b/src/components/SendNftPreview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Decimal } from 'decimal.js'
-import { onBeforeMount, ref, onMounted } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
 
 import SwipeToAction from '@/components/SwipeToAction.vue'
 import { useAppStore } from '@/store/app'
@@ -10,6 +10,8 @@ import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const getIcon = useImage()
 
@@ -75,6 +77,12 @@ onMounted(() => {
 function truncateAddress(address: string) {
   return `${address.slice(0, 5)}....${address.slice(-5)}`
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -86,7 +94,14 @@ function truncateAddress(address: string) {
           title="Click to go back"
           @click.stop="emits('close')"
         >
-          <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+          <div ref="backContainer">
+            <img
+              :src="getImage('back-arrow.svg')"
+              class="w-6 h-6"
+              alt="Back Icon"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </button>
         <span class="font-Nohemi text-[20px] font-medium"
           >Confirm Transfer</span
@@ -103,19 +118,45 @@ function truncateAddress(address: string) {
       </div>
       <div class="flex justify-between items-center">
         <div class="flex flex-col gap-1">
-          <span class="text-sm font-medium text-gray-100"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Sender’s Address</span
           >
-          <span class="text-base">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ truncateAddress(props.previewData.senderWalletAddress) }}
           </span>
         </div>
         <img :src="getImage('forward-arrow.svg')" class="w-6 h-6" />
         <div class="flex flex-col gap-1">
-          <span class="text-sm font-medium text-gray-100"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Recipient’s Address</span
           >
-          <span class="text-base">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ truncateAddress(props.previewData.recipientWalletAddress) }}
           </span>
         </div>
@@ -129,34 +170,59 @@ function truncateAddress(address: string) {
           <span class="text-base font-normal text-gray-100">Gas Fee</span>
           <span
             v-if="!rpcStore.useGasless || transactionMode.length === 0"
-            class="text-base"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ txFees }} {{ nativeCurrency }}</span
           >
           <span
             v-else-if="
               transactionMode === 'SCW' || transactionMode === 'ARCANA'
             "
-            class="text-base"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Sponsored</span
           >
         </div>
       </div>
       <span
         v-if="transactionMode === 'SCW' || transactionMode === 'ARCANA'"
-        class="text-xs text-green-100 font-medium text-center w-full"
+        class="text-green-100 font-medium text-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+        }"
         >This is a Gasless Transaction. Click Below to Approve.
       </span>
       <div
         v-else-if="
           !loader.show && transactionMode.length === 0 && rpcStore.useGasless
         "
-        class="flex space-x-2 bg-blue-dark-sky p-2 rounded-sm mt-2"
+        class="flex space-x-2 p-2 rounded-sm mt-2"
+        :style="{
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
       >
         <img
           class="w-4 h-4 mt-1"
           :src="getIcon('info-circle', undefined, 'svg')"
         />
-        <p class="text-xs text-left text-white-200">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Limit exceeded for gasless transactions. You will be charged for this
           transaction.
         </p>
diff --git a/src/components/SendTokensPreview.vue b/src/components/SendTokensPreview.vue
index bdd56180..4be90cd9 100644
--- a/src/components/SendTokensPreview.vue
+++ b/src/components/SendTokensPreview.vue
@@ -11,6 +11,8 @@ import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const rpcStore = useRpcStore()
 const appStore = useAppStore()
@@ -82,6 +84,12 @@ onMounted(async () => {
 function truncateAddress(address: string) {
   return `${address.slice(0, 5)}....${address.slice(-5)}`
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -96,39 +104,92 @@ function truncateAddress(address: string) {
           title="Click to go back"
           @click.stop="emits('close')"
         >
-          <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+          <div ref="backContainer">
+            <img
+              :src="getImage('back-arrow.svg')"
+              class="w-6 h-6"
+              alt="Back Icon"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </button>
         <span class="text-lg font-medium">Confirm Transfer</span>
       </div>
       <div class="flex justify-between items-end">
         <div class="flex flex-col gap-1">
-          <span class="text-sm font-medium text-gray-100"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Sender’s Address</span
           >
-          <span class="text-base">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ truncateAddress(props.previewData.senderWalletAddress) }}
           </span>
         </div>
         <img :src="getImage('forward-arrow.svg')" class="w-6 h-6" />
         <div class="flex flex-col gap-1">
-          <span class="text-sm font-medium text-gray-100"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Recipient’s Address</span
           >
-          <span class="text-base">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ truncateAddress(props.previewData.recipientWalletAddress) }}
           </span>
         </div>
       </div>
       <div class="flex flex-col gap-5">
         <div class="flex justify-between">
-          <span class="text-base font-normal text-gray-100">Send Amount</span>
-          <span class="text-base"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Send Amount</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ props.previewData.amount }}
             {{ props.previewData.selectedToken }}</span
           >
         </div>
         <div v-if="txFees" class="flex justify-between">
-          <span class="text-base font-normal text-gray-100"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Estimated Gas Fees</span
           >
           <span v-if="loader.show" class="text-base"> Loading... </span>
@@ -137,7 +198,12 @@ function truncateAddress(address: string) {
               !loader.show &&
               (transactionMode === 'SCW' || transactionMode === 'ARCANA')
             "
-            class="text-base text-green-100"
+            class="text-green-100"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+            }"
           >
             Sponsored
           </span>
@@ -146,7 +212,12 @@ function truncateAddress(address: string) {
               !loader.show &&
               (transactionMode.length === 0 || !rpcStore.useGasless)
             "
-            class="text-base"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ txFees }} {{ nativeCurrency }}</span
           >
         </div>
@@ -156,20 +227,37 @@ function truncateAddress(address: string) {
           !loader.show &&
           (transactionMode === 'SCW' || transactionMode === 'ARCANA')
         "
-        class="text-xs text-green-100 font-medium text-center w-full"
+        class="text-green-100 font-medium text-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >This is a Gasless Transaction. Click Below to Approve.
       </span>
       <div
         v-else-if="
           !loader.show && transactionMode.length === 0 && rpcStore.useGasless
         "
-        class="flex space-x-2 bg-blue-dark-sky p-2 rounded-sm mt-2"
+        class="flex space-x-2 p-2 rounded-sm mt-2"
+        :style="{
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
       >
         <img
           class="w-4 h-4 mt-1"
           :src="getIcon('info-circle', undefined, 'svg')"
         />
-        <p class="text-xs text-left text-white-200">
+        <p
+          class="text-left"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Limit exceeded for gasless transactions. You will be charged for this
           transaction.
         </p>
diff --git a/src/components/SendTransaction.vue b/src/components/SendTransaction.vue
index e36f9cd0..43faa95d 100644
--- a/src/components/SendTransaction.vue
+++ b/src/components/SendTransaction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { AppMode } from '@arcana/auth'
 import { Decimal } from 'decimal.js'
-import { ref, onMounted, onBeforeMount } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import AppLoader from '@/components/AppLoader.vue'
@@ -20,6 +20,7 @@ import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { sanitizeRequest } from '@/utils/sanitizeRequest'
 import { truncateMid } from '@/utils/stringUtils'
 import { useImage } from '@/utils/useImage'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const getIcon = useImage()
 
@@ -237,15 +238,35 @@ function calculateCurrencyValue(value) {
         <span class="font-Nohemi text-lg font-medium">Send</span>
         <img :src="getImage('arrow-down.svg')" alt="" />
       </div>
-      <span class="text-[#989898] text-sm font-normal">{{
-        truncateMid(request.request.params[0].to, 6)
-      }}</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ truncateMid(request.request.params[0].to, 6) }}</span
+      >
     </div>
     <div class="flex flex-col items-end">
-      <span>{{ calculateValue(request.request.params[0].value) }}</span>
-      <span class="text-[#989898] text-sm font-normal">{{
-        calculateCurrencyValue(request.request.params[0].value)
-      }}</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ calculateValue(request.request.params[0].value) }}</span
+      >
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >{{ calculateCurrencyValue(request.request.params[0].value) }}</span
+      >
       <span class="text-red-pink-orange text-xs">Pending</span>
     </div>
   </div>
@@ -277,7 +298,15 @@ function calculateCurrencyValue(value) {
       >
         Send Transaction
       </p>
-      <p class="text-xs text-gray-spanish-light text-center">
+      <p
+        class="text-center"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         The application “{{ appStore.name }}” is requesting your permission to
         send this transaction to {{ rpcStore.selectedRpcConfig?.chainName }}.
       </p>
@@ -292,24 +321,48 @@ function calculateCurrencyValue(value) {
           class="flex flex-1 flex-col gap-1"
         >
           <span
-            class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+            class="uppercase"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >From</span
           >
           <span
             :title="request.request.params[0].from"
-            class="text-base font-medium leading-4"
+            class="leading-4"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           >
             {{ truncateMid(request.request.params[0].from, 6) }}
           </span>
         </div>
         <div v-else class="flex flex-1 flex-col gap-1">
           <span
-            class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+            class="uppercase"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >From</span
           >
           <span
             :title="userStore.walletAddress"
-            class="text-base font-medium leading-4"
+            class="leading-4"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           >
             {{ truncateMid(userStore.walletAddress, 6) }}
           </span>
@@ -326,19 +379,37 @@ function calculateCurrencyValue(value) {
           class="flex flex-1 flex-col gap-1"
         >
           <span
-            class="uppercase text-xs font-medium text-gray-myst dark:text-gray-spanish-light"
+            class="uppercase"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >To</span
           >
           <span
             :title="request.request.params[0].to"
-            class="text-base font-medium leading-4"
+            class="leading-4"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ truncateMid(request.request.params[0].to, 6) }}</span
           >
         </div>
       </div>
       <div class="space-y-1">
         <div
-          class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+          class="uppercase"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
         >
           Transaction Details
         </div>
@@ -346,27 +417,66 @@ function calculateCurrencyValue(value) {
           v-if="request.request?.params[0]?.value"
           class="flex justify-between gap-4"
         >
-          <span class="text-gray-myst dark:text-gray-spanish-light">Value</span>
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Value</span
+          >
           <span class="text-right">
-            <span :title="calculateValue(request.request.params[0].value)">{{
-              calculateValue(request.request.params[0].value)
-            }}</span>
+            <span
+              :title="calculateValue(request.request.params[0].value)"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >{{ calculateValue(request.request.params[0].value) }}</span
+            >
             <span
               v-if="calculateCurrencyValue(request.request.params[0].value)"
               class="ml-1"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               ({{ calculateCurrencyValue(request.request.params[0].value) }})
             </span>
           </span>
         </div>
         <div class="flex justify-between gap-4">
-          <span class="text-gray-myst dark:text-gray-spanish-light"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Transaction Fee</span
           >
           <span class="text-right">
             <span
               v-if="!rpcStore.useGasless || transactionMode === ''"
               :title="calculateGasPrice(request.request.params[0])"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >{{ calculateGasPrice(request.request.params[0]) }}</span
             >
             <span
@@ -375,6 +485,13 @@ function calculateCurrencyValue(value) {
                 (transactionMode === 'SCW' || transactionMode === 'ARCANA')
               "
               class="text-right text-green-100"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+              }"
             >
               Sponsored
             </span>
@@ -383,6 +500,14 @@ function calculateCurrencyValue(value) {
                 calculateCurrencyValue(getGasValue(request.request.params[0]))
               "
               class="ml-1"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               ({{
                 calculateCurrencyValue(getGasValue(request.request.params[0]))
@@ -395,7 +520,15 @@ function calculateCurrencyValue(value) {
         v-if="request.request.params[0].data"
         class="flex flex-col gap-1 h-40"
       >
-        <span class="text-gray-myst dark:text-gray-spanish-light">Message</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Message</span
+        >
         <SignMessageAdvancedInfo :info="request.request.params[0].data" />
       </div>
     </div>
@@ -404,7 +537,13 @@ function calculateCurrencyValue(value) {
       class="flex flex-col gap-2 text-sm"
     >
       <div
-        class="text-sm font-semibold uppercase text-black-arsenic dark:text-white-400"
+        class="uppercase"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         Transaction Details
       </div>
@@ -433,20 +572,36 @@ function calculateCurrencyValue(value) {
           !loader.show &&
           (transactionMode === 'SCW' || transactionMode === 'ARCANA')
         "
-        class="text-xs text-green-100 font-medium text-center w-full"
+        class="text-green-100 text-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+        }"
         >This is a Gasless Transaction. Click Below to Approve.
       </span>
       <div
         v-else-if="
           !loader.show && transactionMode.length === 0 && rpcStore.useGasless
         "
-        class="flex space-x-2 bg-blue-dark-sky p-2 rounded-sm mt-2"
+        class="flex space-x-2 p-2 rounded-sm mt-2"
+        :style="{
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
       >
         <img
           class="w-4 h-4 mt-1"
           :src="getIcon('info-circle', undefined, 'svg')"
         />
-        <p class="text-xs text-left text-white-200">
+        <p
+          class="text-left"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Limit exceeded for gasless transactions. You will be charged for this
           transaction.
         </p>
@@ -459,6 +614,14 @@ function calculateCurrencyValue(value) {
       <div v-if="request.requestOrigin === 'auth-verify'">
         <button
           class="btn-secondary p-2 w-full text-sm font-medium"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('proceed')"
         >
           Proceed
@@ -466,13 +629,29 @@ function calculateCurrencyValue(value) {
       </div>
       <div v-else class="flex gap-2">
         <button
-          class="btn-secondary p-2 w-full text-sm font-medium"
+          class="btn-secondary p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('reject')"
         >
           Reject
         </button>
         <button
-          class="btn-primary p-2 w-full text-sm font-medium"
+          class="btn-primary p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('approve')"
         >
           Approve
@@ -485,7 +664,15 @@ function calculateCurrencyValue(value) {
         class="flex items-center justify-center"
       >
         <button
-          class="btn-tertiary text-sm font-medium"
+          class="btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="requestStore.skipRequest(request.request.id)"
         >
           Do this later
diff --git a/src/components/SendTransactionCompact.vue b/src/components/SendTransactionCompact.vue
index f5a7ba97..9ba21925 100644
--- a/src/components/SendTransactionCompact.vue
+++ b/src/components/SendTransactionCompact.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { AppMode } from '@arcana/auth'
 import { Decimal } from 'decimal.js'
-import { computed, onMounted, onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useAppStore } from '@/store/app'
@@ -13,6 +13,8 @@ import { EVMAccountHandler } from '@/utils/accountHandler'
 import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const emits = defineEmits(['reject', 'approve'])
 
@@ -123,6 +125,12 @@ async function onViewDetails() {
       : (appStore.expandWallet = false)
   }
 }
+
+const arrowContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [arrowContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -133,7 +141,15 @@ async function onViewDetails() {
           Send Transaction
         </h1>
       </div>
-      <p class="text-xs text-gray-spanish-light text-center">
+      <p
+        class="text-center"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         The application “{{ appStore.name }}” is requesting your permission to
         send this transaction to {{ rpcStore.selectedRpcConfig?.chainName }}.
       </p>
@@ -143,7 +159,16 @@ async function onViewDetails() {
         <div class="flex flex-col justify-center items-center">
           <span class="text-sm text-gray-100">Transaction Fees</span>
           <div class="flex gap-2 items-baseline justify-center">
-            <span v-if="loader.show" class="text-sm font-medium"
+            <span
+              v-if="loader.show"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Loading...</span
             >
             <span
@@ -151,7 +176,14 @@ async function onViewDetails() {
                 !loader.show &&
                 (transactionMode === 'SCW' || transactionMode === 'ARCANA')
               "
-              class="text-sm font-medium text-green-100"
+              class="text-green-100"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+              }"
             >
               Sponsored
             </span>
@@ -159,15 +191,43 @@ async function onViewDetails() {
               v-else-if="!loader.show && transactionMode.length === 0"
               class="flex-col text-center items-baseline"
             >
-              <span class="text-lg font-medium"
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >{{ gasFee.slice(0, 9) }}&nbsp;</span
-              ><span v-if="gasFee !== 'Unknown'" class="text-sm">{{
-                rpcStore.selectedRPCConfig?.nativeCurrency?.symbol || 'Units'
-              }}</span>
+              ><span
+                v-if="gasFee !== 'Unknown'"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >{{
+                  rpcStore.selectedRPCConfig?.nativeCurrency?.symbol || 'Units'
+                }}</span
+              >
             </div>
             <div
               v-if="gasFee !== 'Unknown' && gasFeeInCurrency"
-              class="text-sm font-medium"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               ({{ currencyStore.getCurrencySymbol }}{{ gasFeeInCurrency }})
             </div>
@@ -178,16 +238,52 @@ async function onViewDetails() {
         class="text-xs mt-2 text-center flex gap-1 items-center justify-center mx-auto font-medium dark:text-white-200"
         @click.stop="onViewDetails"
       >
-        View Details
-        <img :src="getImage('arrow-down.svg')" />
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >View Details</span
+        >
+        <div ref="arrowContainer">
+          <img
+            :src="getImage('arrow-down.svg')"
+            alt="Arrow Down Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
     </div>
     <div class="flex flex-col gap-4">
       <div class="flex gap-2 text-sm font-medium">
-        <button class="w-full btn-secondary p-2" @click="emits('reject')">
+        <button
+          class="w-full btn-secondary p-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click="emits('reject')"
+        >
           Reject
         </button>
-        <button class="w-full btn-primary p-2" @click="emits('approve')">
+        <button
+          class="w-full btn-primary p-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click="emits('approve')"
+        >
           Approve
         </button>
       </div>
@@ -198,7 +294,14 @@ async function onViewDetails() {
         class="flex items-center justify-center"
       >
         <button
-          class="btn-tertiary text-sm font-medium"
+          class="btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="requestStore.skipRequest(request.request.id)"
         >
           Do this later
diff --git a/src/components/SignMessage.vue b/src/components/SignMessage.vue
index a77057fd..53060da1 100644
--- a/src/components/SignMessage.vue
+++ b/src/components/SignMessage.vue
@@ -12,6 +12,7 @@ import { advancedInfo } from '@/utils/advancedInfo'
 import { ChainType } from '@/utils/chainType'
 import { getImage } from '@/utils/getImage'
 import { methodAndAction } from '@/utils/method'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const WalletAddEthereumChain = defineAsyncComponent(
   () =>
@@ -200,7 +201,14 @@ function isDeprecatedMethod() {
       </div>
     </div>
     <div>
-      <p class="text-xs text-gray-spanish-light">
+      <p
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         {{ appStore.name }} requests your permission for
         {{ getPermissionText() }}
       </p>
@@ -226,13 +234,26 @@ function isDeprecatedMethod() {
       >
         {{ methodAndAction[method] }}
       </h1>
-      <p class="text-xs text-gray-spanish-light text-center">
+      <p
+        class="text-gray-spanish-light text-center"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         {{ appStore.name }} requests your permission for
         {{ getPermissionText() }}
       </p>
       <span
         v-if="isDeprecatedMethod()"
-        class="text-xs text-yellow-100 font-medium text-center w-full"
+        class="text-yellow-100 text-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+        }"
         >WARNING: This is a deprecated method. Sign with caution.</span
       >
     </div>
@@ -303,7 +324,15 @@ function isDeprecatedMethod() {
     <div class="mt-auto flex flex-col gap-4">
       <div v-if="request.requestOrigin === 'auth-verify'">
         <button
-          class="btn-secondary p-2 w-full text-sm font-medium"
+          class="btn-secondary p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('proceed')"
         >
           Proceed
@@ -311,13 +340,29 @@ function isDeprecatedMethod() {
       </div>
       <div v-else class="flex gap-2">
         <button
-          class="btn-secondary p-2 w-full text-sm font-medium"
+          class="btn-secondary p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('reject')"
         >
           Reject
         </button>
         <button
-          class="btn-primary p-2 w-full text-sm font-medium"
+          class="btn-primary p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click="emits('approve')"
         >
           Approve
@@ -330,7 +375,15 @@ function isDeprecatedMethod() {
         class="flex items-center justify-center"
       >
         <button
-          class="btn-tertiary text-sm font-medium"
+          class="btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="requestStore.skipRequest(request.request.id)"
         >
           Do this later
diff --git a/src/components/SignMessageCompact.vue b/src/components/SignMessageCompact.vue
index 67e6818c..124fc180 100644
--- a/src/components/SignMessageCompact.vue
+++ b/src/components/SignMessageCompact.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router'
 import { useAppStore } from '@/store/app'
 import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type SignMessageCompactProps = {
   title: string
@@ -42,24 +43,70 @@ async function onViewDetails() {
           {{ props.title }}
         </h1>
       </div>
-      <p class="text-sm text-center">
+      <p
+        class="text-center"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+      >
         {{ appStore.name }} requests your permission for {{ props.permission }}.
-        <button class="font-medium" @click.stop="onViewDetails">
+        <button
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click.stop="onViewDetails"
+        >
           Learn More
         </button>
       </p>
       <span
         v-if="props.deprecated"
-        class="text-xs text-yellow-100 font-medium text-center w-full"
+        class="text-yellow-100 text-center w-full"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >WARNING: This is a deprecated method. Sign with caution.</span
       >
     </div>
     <div class="flex flex-col gap-4">
       <div class="flex justify-end gap-4 text-sm font-medium">
-        <button class="btn-secondary w-full p-2" @click="emits('reject')">
+        <button
+          class="btn-secondary w-full p-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click="emits('reject')"
+        >
           Reject
         </button>
-        <button class="btn-primary w-full p-2" @click="emits('approve')">
+        <button
+          class="btn-primary w-full p-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click="emits('approve')"
+        >
           Approve
         </button>
       </div>
@@ -70,7 +117,15 @@ async function onViewDetails() {
         class="flex items-center justify-center"
       >
         <button
-          class="btn-tertiary text-sm font-medium"
+          class="btn-tertiary"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="requestStore.skipRequest(props.request.request.id)"
         >
           Do this later
diff --git a/src/components/SwipeToAction.vue b/src/components/SwipeToAction.vue
index 0236df6c..d8d873f0 100644
--- a/src/components/SwipeToAction.vue
+++ b/src/components/SwipeToAction.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, type Ref } from 'vue'
 
+import { useAppStore } from '@/store/app'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
+
 // import { getImage } from '@/utils/getImage'
 
 type SwipeToActionProps = {
@@ -10,6 +13,7 @@ const props = defineProps<SwipeToActionProps>()
 const emit = defineEmits(['success', 'approve', 'reject'])
 const translateUntil = ref('calc(-80%)')
 const isDragging = ref(false)
+const appStore = useAppStore()
 const swiperEl: Ref<HTMLDivElement | null> = ref(null)
 
 function handleDrag(e) {
@@ -98,13 +102,29 @@ function handleDragStart(e) {
   </div> -->
   <div class="flex gap-2 items-center">
     <button
-      class="btn-secondary w-full p-2 text-sm font-medium rounded-full"
+      class="btn-secondary w-full p-2 rounded-full"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+        borderColor: appStore.theme_settings.accent_color,
+        backgroundColor: appStore.theme_settings.accent_color,
+      }"
       @click="emit('reject')"
     >
       Reject
     </button>
     <button
-      class="btn-primary w-full p-2 text-sm font-medium rounded-full"
+      class="btn-primary w-full p-2 rounded-full"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+        borderColor: appStore.theme_settings.accent_color,
+        backgroundColor: appStore.theme_settings.accent_color,
+      }"
       @click="emit('approve')"
     >
       Approve
diff --git a/src/components/UseWalletBalanceGasless.vue b/src/components/UseWalletBalanceGasless.vue
index c3c3ea40..6144dca6 100644
--- a/src/components/UseWalletBalanceGasless.vue
+++ b/src/components/UseWalletBalanceGasless.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/app'
 import { useGaslessStore } from '@/store/gasless'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const gaslessStore = useGaslessStore()
+const appStore = useAppStore()
 
 function approve() {
   gaslessStore.canUseWalletBalance = true
@@ -14,13 +17,47 @@ function reject() {
 
 <template>
   <div class="space-y-2">
-    <p class="text-center">
+    <p
+      class="text-center"
+      :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: appStore.theme_settings.font_color,
+      }"
+    >
       Seems like the gas tank is empty, would you like to use your wallet to pay
       gas fee?
     </p>
     <div class="flex gap-2 text-sm font-medium">
-      <button class="w-full btn-secondary p-2" @click="reject">Reject</button>
-      <button class="w-full btn-primary p-2" @click="approve">Approve</button>
+      <button
+        class="w-full btn-secondary p-2"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
+        @click="reject"
+      >
+        Reject
+      </button>
+      <button
+        class="w-full btn-primary p-2"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
+        @click="approve"
+      >
+        Approve
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/UserWallet.vue b/src/components/UserWallet.vue
index a2bab291..6ebd265d 100644
--- a/src/components/UserWallet.vue
+++ b/src/components/UserWallet.vue
@@ -32,6 +32,8 @@ import {
   fetchTransakNetworks,
   getTransakSellableNetworks,
 } from '@/utils/transak'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type UserWalletProps = {
   page: 'home' | 'nft'
@@ -268,6 +270,22 @@ async function copyToClipboard(value: string) {
     toast.error(errors.WALLET.COPY)
   }
 }
+
+const copyContainer = ref<HTMLElement | null>(null)
+const refreshContainer = ref<HTMLElement | null>(null)
+const sendContainer = ref<HTMLElement | null>(null)
+const buyContainer = ref<HTMLElement | null>(null)
+const sellContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [
+  copyContainer,
+  refreshContainer,
+  sendContainer,
+  buyContainer,
+  sellContainer,
+]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -296,7 +314,17 @@ async function copyToClipboard(value: string) {
                     <div class="flex flex-col items-start">
                       <div class="flex items-center">
                         <span
-                          class="text-sm font-medium dark:text-white-100 text-black-100"
+                          :class="
+                            getFontSizeStyle(
+                              Number(appStore.theme_settings.font_size)
+                            )
+                          "
+                          :style="{
+                            fontFamily: getFontFaimly(
+                              appStore.theme_settings.font_pairing
+                            ).primaryFontClass,
+                            color: appStore.theme_settings.font_color,
+                          }"
                           >{{
                             truncateMid(selectedAddressType.address, 6)
                           }}</span
@@ -308,12 +336,30 @@ async function copyToClipboard(value: string) {
                             copyToClipboard(selectedAddressType.address)
                           "
                         >
-                          <img :src="getImage('copy.svg')" class="w-lg h-lg" />
+                          <div ref="copyContainer">
+                            <img
+                              :src="getImage('copy.svg')"
+                              class="w-lg h-lg"
+                              alt="Copy Icon"
+                              @load="(event) => fetchAndInjectSVG(event, 0)"
+                            />
+                          </div>
                         </button>
                       </div>
-                      <span class="text-left text-xs text-gray-100">{{
-                        selectedAddressType.label
-                      }}</span>
+                      <span
+                        :class="
+                          getFontSizeStyle(
+                            Number(appStore.theme_settings.font_size)
+                          )
+                        "
+                        :style="{
+                          fontFamily: getFontFaimly(
+                            appStore.theme_settings.font_pairing
+                          ).primaryFontClass,
+                          color: appStore.theme_settings.font_color,
+                        }"
+                        >{{ selectedAddressType.label }}</span
+                      >
                     </div>
                   </div>
                 </div>
@@ -351,12 +397,33 @@ async function copyToClipboard(value: string) {
                     />
                     <div class="flex flex-col items-start">
                       <span
-                        class="text-base dark:text-[#FFFFFF] text-[#000000]"
+                        :class="
+                          getFontSizeStyle(
+                            Number(appStore.theme_settings.font_size)
+                          )
+                        "
+                        :style="{
+                          fontFamily: getFontFaimly(
+                            appStore.theme_settings.font_pairing
+                          ).primaryFontClass,
+                          color: appStore.theme_settings.font_color,
+                        }"
                         >{{ truncateMid(address.address, 6) }}</span
                       >
-                      <span class="text-left text-xs text-[#8d8d8d]">{{
-                        address.label
-                      }}</span>
+                      <span
+                        :class="
+                          getFontSizeStyle(
+                            Number(appStore.theme_settings.font_size)
+                          )
+                        "
+                        :style="{
+                          fontFamily: getFontFaimly(
+                            appStore.theme_settings.font_pairing
+                          ).primaryFontClass,
+                          color: appStore.theme_settings.font_color,
+                        }"
+                        >{{ address.label }}</span
+                      >
                     </div>
                   </button>
                 </ListboxOption>
@@ -376,38 +443,89 @@ async function copyToClipboard(value: string) {
           class="text-[10px] font-medium text-gray-bermuda-grey dark:text-gray-spanish uppercase"
           >Total Balance:</span
         >
-        <div class="flex items-center gap-3 text-base font-medium">
+        <div class="flex items-center gap-3 text-base font-medium mt-[6px]">
           <div
             class="transition-all duration-200"
             :class="{ 'blur-sm': props.refreshIconAnimating }"
           >
-            <span class="font-normal text-3xl">{{
-              walletBalance?.split('.')[0]
-            }}</span>
+            <span
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >{{ walletBalance?.split('.')[0] }}</span
+            >
             <span
               v-if="hasWalletBalanceAfterDecimals()"
-              class="font-normal text-3xl"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >.</span
             >
             <span
               v-if="hasWalletBalanceAfterDecimals()"
-              class="font-medium text-base"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >{{ walletBalance?.split('.')[1] }}</span
             >
-            <span v-if="currency" class="font-medium text-base ml-1">
+            <span
+              v-if="currency"
+              class="ml-1"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+            >
               {{ currency }}</span
             >
-            <span v-if="walletBalanceInCurrency" class="ml-2 text-sm"
+            <span
+              v-if="walletBalanceInCurrency"
+              class="ml-2"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >({{ walletBalanceInCurrency }})</span
             >
           </div>
+
           <button
-            class="w-lg h-lg mt-[6px] rounded-full"
+            class="w-lg h-lg rounded-full text-center"
             :class="{ 'animate-spin': refreshIconAnimating }"
             title="Click to refresh the balance"
             @click.stop="handleRefresh()"
           >
-            <img :src="getImage('refresh.svg')" />
+            <div ref="refreshContainer">
+              <img
+                :src="getImage('refresh.svg')"
+                class="w-md h-md"
+                alt="Refresh Icon"
+                @load="(event) => fetchAndInjectSVG(event, 1)"
+              />
+            </div>
           </button>
         </div>
       </div>
@@ -415,32 +533,86 @@ async function copyToClipboard(value: string) {
     <div class="flex gap-3">
       <button
         class="btn-quaternery flex gap-1 justify-center p-2 items-center w-full"
+        :style="{
+          borderColor: appStore.theme_settings.accent_color,
+        }"
         @click.stop="goToSendTokens()"
       >
-        <img :src="getImage('send-icon.svg')" class="w-md h-md" />
-        <span>Send</span>
+        <div ref="sendContainer">
+          <img
+            :src="getImage('send-icon.svg')"
+            class="w-md h-md"
+            alt="Send-Icon Icon"
+            @load="(event) => fetchAndInjectSVG(event, 2)"
+          />
+        </div>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
+          >Send</span
+        >
       </button>
       <button
         class="btn-quaternery flex gap-1 justify-center p-2 items-center w-full"
+        :style="{
+          borderColor: appStore.theme_settings.accent_color,
+        }"
         :disabled="!transakNetwork && onRampMoney === false"
         :class="{
           'z-[999] startertips_highlighted': starterTipsStore.showBuyButton,
         }"
         @click.stop="handleBuy(true)"
       >
-        <img :src="getImage('buy-icon.svg')" class="w-md h-md" />
-        <span>Buy</span>
+        <div ref="buyContainer">
+          <img
+            :src="getImage('buy-icon.svg')"
+            class="w-md h-md"
+            alt="Buy Icon"
+            @load="(event) => fetchAndInjectSVG(event, 3)"
+          />
+        </div>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
+          >Buy</span
+        >
       </button>
       <button
         class="btn-quaternery flex gap-1 justify-center p-2 items-center w-full"
+        :style="{
+          borderColor: appStore.theme_settings.accent_color,
+        }"
         :class="{
           'z-[999] startertips_highlighted': starterTipsStore.showBuyButton,
         }"
         :disabled="!transakSellNetwork"
         @click.stop="handleSell(true)"
       >
-        <img :src="getImage('sell.svg')" class="w-md h-md" />
-        <span>Sell</span>
+        <div ref="sellContainer">
+          <img
+            :src="getImage('sell.svg')"
+            class="w-md h-md"
+            alt="Sell Icon"
+            @load="(event) => fetchAndInjectSVG(event, 4)"
+          />
+        </div>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.accent_color,
+          }"
+          >Sell</span
+        >
       </button>
     </div>
     <Teleport v-if="modalStore.show" to="#modal-container">
diff --git a/src/components/WalletButton.vue b/src/components/WalletButton.vue
index 59c26428..e97f511b 100644
--- a/src/components/WalletButton.vue
+++ b/src/components/WalletButton.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useAppStore } from '@/store/app'
 import { useRequestStore } from '@/store/request'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
 
 const appStore = useAppStore()
 const requestStore = useRequestStore()
@@ -29,6 +30,12 @@ const requestCount = computed(() => {
 const showRequestCountBadge = computed(() => {
   return requestStore.areRequestsPendingForApproval
 })
+
+const expandContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [expandContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs, true)
 </script>
 
 <template>
@@ -37,7 +44,16 @@ const showRequestCountBadge = computed(() => {
       class="flex items-start justify-center flex-grow h-full w-full pt-[6px]"
       @click="onClickOfButton"
     >
-      <img :src="getImage('expand-arrow.svg')" />
+      <div ref="expandContainer">
+        <img
+          :src="getImage('expand-arrow.svg')"
+          alt="Expand Icon"
+          :style="{
+            fill: appStore.theme_settings.font_color + '!important',
+          }"
+          @load="(event) => fetchAndInjectSVG(event, 0)"
+        />
+      </div>
     </button>
   </div>
 </template>
diff --git a/src/components/WalletHeader.vue b/src/components/WalletHeader.vue
index 286cc38b..6d761700 100644
--- a/src/components/WalletHeader.vue
+++ b/src/components/WalletHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, type Ref, watch } from 'vue'
+import { ref, onBeforeMount, onMounted, type Ref, watch } from 'vue'
 
 import ChainListModal from '@/components/ChainListModal.vue'
 import ReceiveTokens from '@/components/ReceiveTokens.vue'
@@ -9,7 +9,10 @@ import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useStarterTipsStore } from '@/store/starterTips'
 import { ChainType } from '@/utils/chainType'
+import { devLogger } from '@/utils/devLogger'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type ModalState = 'receive' | 'chain-list' | false
 
@@ -75,12 +78,20 @@ function getChainType(chainType: ChainType) {
   }
 }
 
-function getLogo() {
+const getLogo = () => {
   return (
-    appStore.appLogo?.vertical ||
+    appStore.appLogo?.horizontal ||
     getImage('fallback-logo-dark-mode.png', 'light')
   )
 }
+
+// Create refs for SVG containers
+const arrowContainer = ref<HTMLElement | null>(null)
+const svgContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [arrowContainer, svgContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -95,8 +106,14 @@ function getLogo() {
         />
         <div class="flex flex-col items-start">
           <span
-            class="font-Nohemi text-lg font-medium max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
+            class="text-lg max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
             :title="appStore.name"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ appStore.name }}</span
           >
         </div>
@@ -121,19 +138,29 @@ function getLogo() {
               @error="handleFallbackLogo"
             />
           </div>
-          <img
-            :src="getImage('arrow-down.svg')"
-            class="transition-all duration-200 ease-in-out"
-            :class="{ '-rotate-180': isChainListExpanded }"
-            title="Click to expand"
-          />
+          <div ref="arrowContainer">
+            <img
+              :src="getImage('arrow-down.svg')"
+              class="transition-all duration-200 ease-in-out"
+              :class="{ '-rotate-180': isChainListExpanded }"
+              title="Click to expand"
+              alt="Arrow Icon"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </button>
         <button
           class="w-xl h-xl"
           title="Click to show the QR Code"
           @click.stop="openReceiveTokens(true)"
         >
-          <img :src="getImage('qr-code.svg')" alt="Wallet Icon" />
+          <div ref="svgContainer">
+            <img
+              :src="getImage('qr-code.svg')"
+              alt="Wallet Icon"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
         </button>
       </div>
     </header>
@@ -146,3 +173,42 @@ function getLogo() {
     </Teleport>
   </div>
 </template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Onest:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@400..800&display=swap');
+
+.pt-sans {
+  font-family: 'PT Sans', sans-serif;
+  font-style: normal;
+}
+
+.nunito {
+  font-family: 'Nunito Sans', sans-serif;
+  font-style: normal;
+}
+
+.onest {
+  font-family: Onest, sans-serif;
+  font-style: normal;
+}
+
+.syne {
+  font-family: Syne, sans-serif;
+  font-style: normal;
+}
+
+.inter {
+  font-family: Inter, sans-serif;
+  font-style: normal;
+}
+
+.nohemi {
+  font-family: Nohemi, sans-serif;
+  font-style: normal;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+</style>
diff --git a/src/index.css b/src/index.css
index b5cebd56..ad443072 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,110 @@
 /* stylelint-disable-next-line scss/at-rule-no-unknown */
 @tailwind utilities;
 
+@font-face {
+  font-family: Nunito;
+  font-style: normal;
+  font-weight: 700;
+  src: url('@/assets/fonts/nunito/Nunito-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Nunito;
+  font-style: normal;
+  font-weight: 600;
+  src: url('@/assets/fonts/nunito/Nunito-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Nunito;
+  font-style: normal;
+  font-weight: 500;
+  src: url('@/assets/fonts/nunito/Nunito-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Nunito;
+  font-style: normal;
+  font-weight: 400;
+  src: url('@/assets/fonts/nunito/Nunito-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 700;
+  src: url('@/assets/fonts/onest/Onest-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 600;
+  src: url('@/assets/fonts/onest/Onest-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 500;
+  src: url('@/assets/fonts/onest/Onest-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 400;
+  src: url('@/assets/fonts/onest/Onest-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: PTSans;
+  font-style: normal;
+  font-weight: 700;
+  src: url('@/assets/fonts/pt_sans/PTSans-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: PTSans;
+  font-style: normal;
+  font-weight: 400;
+  src: url('@/assets/fonts/pt_sans/PTSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Syne;
+  font-style: normal;
+  font-weight: 800;
+  src: url('@/assets/fonts/syne/Syne-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Syne;
+  font-style: normal;
+  font-weight: 700;
+  src: url('@/assets/fonts/syne/Syne-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Syne;
+  font-style: normal;
+  font-weight: 600;
+  src: url('@/assets/fonts/syne/Syne-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: Syne;
+  font-style: normal;
+  font-weight: 500;
+  src: url('@/assets/fonts/syne/Syne-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Syne;
+  font-style: normal;
+  font-weight: 400;
+  src: url('@/assets/fonts/syne/Syne-Regular.ttf') format('truetype');
+}
+
 @font-face {
   font-family: Nohemi;
   font-style: normal;
@@ -186,10 +290,10 @@
     width: 10px;
     height: 10px;
     content: '';
+    border: 1px solid red;
     border-radius: 50%;
     transition: 120ms transform ease-in-out;
     transform: scale(0);
-    border: 1px solid red;
   }
 }
 
diff --git a/src/models/StyleConfig.ts b/src/models/StyleConfig.ts
new file mode 100644
index 00000000..e5156385
--- /dev/null
+++ b/src/models/StyleConfig.ts
@@ -0,0 +1,9 @@
+type StyleConfig = {
+  accent_color: string
+  font_color: string
+  font_pairing: string
+  font_size: string
+  radius: string
+}
+
+export type { StyleConfig }
diff --git a/src/pages/ActivitiesScreen.vue b/src/pages/ActivitiesScreen.vue
index c9cb237e..cc73b594 100644
--- a/src/pages/ActivitiesScreen.vue
+++ b/src/pages/ActivitiesScreen.vue
@@ -5,8 +5,10 @@ import { type Ref, ref, onMounted, computed, type ComputedRef } from 'vue'
 import ActivityView from '@/components/ActivityView.vue'
 import SkippedRequestView from '@/components/SkippedRequestView.vue'
 import { useActivitiesStore, type Activity } from '@/store/activities'
+import { useAppStore } from '@/store/app'
 import { useRequestStore } from '@/store/request'
 import { useRpcStore } from '@/store/rpc'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const filters = [
   {
@@ -35,7 +37,7 @@ onMounted(() => {
 
 const rpcStore = useRpcStore()
 const requestStore = useRequestStore()
-
+const appStore = useAppStore()
 const showFilter = ref(false)
 const selectedFilter = ref(filters[0].value)
 const activitiesStore = useActivitiesStore()
@@ -77,7 +79,13 @@ async function getCurrencyExchangeRate() {
       class="flex flex-col gap-2"
     >
       <span
-        class="text-xs text-gray-bermuda-grey dark:text-gray-spanish font-medium uppercase"
+        class="font-medium uppercase"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
         >Pending
         <span class="text-red-pink-orange"
           >({{ requestStore.skippedRequestsPendingForApprovalLength }})</span
@@ -87,10 +95,24 @@ async function getCurrencyExchangeRate() {
     </div>
     <div class="flex-1 flex flex-col gap-2">
       <span
-        class="text-xs text-gray-bermuda-grey dark:text-gray-spanish font-medium uppercase"
+        class="uppercase"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         Confirmed
-        <span>({{ activities.length }})</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >({{ activities.length }})</span
+        >
       </span>
       <ActivityView
         :currency-exchange-rate="exchangeRate"
diff --git a/src/pages/AddOrEditNFTScreen.vue b/src/pages/AddOrEditNFTScreen.vue
index 3be25263..98f2f0bf 100644
--- a/src/pages/AddOrEditNFTScreen.vue
+++ b/src/pages/AddOrEditNFTScreen.vue
@@ -9,17 +9,19 @@ import type { EthAssetContract } from '@/models/Asset'
 import { NFT } from '@/models/NFT'
 import { getNFTDetails, modifyIpfsUrl } from '@/services/getNFTDetails.service'
 import { NFTDB } from '@/services/nft.service'
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
-import { errors, content } from '@/utils/content'
+import { content, errors } from '@/utils/content'
 import {
+  checkOwnership,
   getCollectionName,
   getERCStandard,
   getTokenUri,
-  checkOwnership,
 } from '@/utils/nftUtils'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const router = useRouter()
 const toast = useToast()
@@ -27,6 +29,7 @@ const storage = getStorage()
 const rpcStore = useRpcStore()
 const userStore = useUserStore()
 const modalStore = useModalStore()
+const appStore = useAppStore()
 
 type EditNFTProps = {
   collectionName?: string
@@ -241,7 +244,16 @@ watch(
       <form class="flex flex-col flex-grow" @submit.prevent="handleSubmit">
         <div class="flex flex-col gap-6 flex-grow">
           <div class="flex flex-col gap-1">
-            <label for="token-contract-address" class="text-sm font-medium"
+            <label
+              for="token-contract-address"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Collection Contract Address</label
             >
             <input
@@ -254,6 +266,14 @@ watch(
               required
               disabled
               autocomplete="off"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
             <input
               v-else
@@ -264,12 +284,29 @@ watch(
               class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
               required
               autocomplete="off"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               @focus="showAddressOutline = true"
               @blur="showAddressOutline = false"
             />
           </div>
           <div class="flex flex-col gap-1">
-            <label for="collection-name" class="text-sm font-medium"
+            <label
+              for="collection-name"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Collection Name</label
             >
             <input
@@ -281,10 +318,29 @@ watch(
               required
               autocomplete="off"
               disabled
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
           <div class="flex flex-col gap-1">
-            <label for="token-id" class="text-sm font-medium">Token ID</label>
+            <label
+              for="token-id"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Token ID</label
+            >
             <input
               id="token-id"
               v-model="nftContract.tokenId"
@@ -295,9 +351,30 @@ watch(
               step="1"
               required
               autocomplete="off"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
-          <button type="submit" class="btn-primary mt-4 py-2">Save</button>
+          <button
+            type="submit"
+            class="btn-primary mt-4 py-2"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
+          >
+            Save
+          </button>
         </div>
       </form>
     </div>
diff --git a/src/pages/AddTokenScreen.vue b/src/pages/AddTokenScreen.vue
index d2092479..4f07348a 100644
--- a/src/pages/AddTokenScreen.vue
+++ b/src/pages/AddTokenScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, watch, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 
@@ -7,13 +7,16 @@ import AppLoader from '@/components/AppLoader.vue'
 import SearchToken from '@/components/SearchToken.vue'
 import contractMap from '@/contract-map.json'
 import type { AssetContract, EthAssetContract } from '@/models/Asset'
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
-import { content, errors } from '@/utils/content'
+import { content } from '@/utils/content'
 import { getTokenSymbolAndDecimals } from '@/utils/contractUtil'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const storage = getStorage()
 const isDisabled = reactive({
@@ -22,6 +25,7 @@ const isDisabled = reactive({
 })
 const router = useRouter()
 const modalStore = useModalStore()
+const appStore = useAppStore()
 const ethMainnetTokens: EthAssetContract[] = Object.keys(contractMap)
   .map((address) => ({
     ...contractMap[address],
@@ -163,6 +167,12 @@ watch(
     router.replace({ name: 'home' })
   }
 )
+
+const arrowContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [arrowContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -180,7 +190,16 @@ watch(
       <form class="flex flex-col" @submit.prevent="addTokenContract">
         <div v-if="rpcStore.isEthereumMainnet">
           <div class="flex flex-col gap-1">
-            <label for="search-token" class="text-sm font-medium"
+            <label
+              for="search-token"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Search Token</label
             >
             <SearchToken
@@ -194,14 +213,27 @@ watch(
               type="button"
               @click.stop="expandSection = !expandSection"
             >
-              <span class="text-sm font-normal dark:text-white-100"
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >Add Custom Token</span
               >
-              <img
-                :src="getImage('arrow-down.svg')"
-                class="w-xl h-xl transition-all will-change-transform duration-200"
-                :class="{ '-rotate-180': expandSection }"
-              />
+              <div ref="arrowContainer">
+                <img
+                  :src="getImage('arrow-down.svg')"
+                  class="w-xl h-xl transition-all will-change-transform duration-200"
+                  :class="{ '-rotate-180': expandSection }"
+                  alt="Arrow Down Icon"
+                  @load="(event) => fetchAndInjectSVG(event, 0)"
+                />
+              </div>
             </button>
           </div>
         </div>
@@ -210,7 +242,16 @@ watch(
           class="flex flex-col gap-6"
         >
           <div class="flex flex-col gap-1">
-            <label for="token-contract-address" class="text-sm font-medium"
+            <label
+              for="token-contract-address"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Token Contract Address</label
             >
             <input
@@ -221,10 +262,27 @@ watch(
               class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
               required
               autocomplete="off"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
           <div class="flex flex-col gap-1">
-            <label for="token-symbol" class="text-sm font-medium"
+            <label
+              for="token-symbol"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Token Symbol</label
             >
             <input
@@ -233,14 +291,31 @@ watch(
               type="text"
               placeholder="Eg. XAR"
               class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
-              :class="{ 'cursor-not-allowed': isDisabled.symbol }"
               required
               autocomplete="off"
               :disabled="isDisabled.symbol"
+              :class="[
+                getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+                { 'cursor-not-allowed': isDisabled.symbol },
+              ]"
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
           <div class="flex flex-col gap-1">
-            <label for="token-decimal" class="text-sm font-medium"
+            <label
+              for="token-decimal"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Token Decimal</label
             >
             <input
@@ -249,15 +324,36 @@ watch(
               type="number"
               placeholder="0"
               class="input-field focus:input-active bg-gray-zinc dark:bg-black-arsenic"
-              :class="{ 'cursor-not-allowed': isDisabled.symbol }"
               min="0"
               step="1"
               required
               autocomplete="off"
               :disabled="isDisabled.decimals"
+              :class="[
+                getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+                { 'cursor-not-allowed': isDisabled.symbol },
+              ]"
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             />
           </div>
-          <button type="submit" class="btn-primary p-2 w-full">Save</button>
+          <button
+            type="submit"
+            class="btn-primary p-2 w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
+          >
+            Save
+          </button>
         </div>
       </form>
     </div>
diff --git a/src/pages/MFARequiredScreen.vue b/src/pages/MFARequiredScreen.vue
index 61885404..e8718145 100644
--- a/src/pages/MFARequiredScreen.vue
+++ b/src/pages/MFARequiredScreen.vue
@@ -11,6 +11,7 @@ import { AUTH_URL, DOCS_URL } from '@/utils/constants'
 import { content, errors } from '@/utils/content'
 import { getWindowFeatures } from '@/utils/popupProps'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const appStore = useAppStore()
 const user = useUserStore()
@@ -127,7 +128,13 @@ function goToHome() {
         </div>
       </div>
       <div
-        class="mt-2 mb-6 flex flex-col gap-4 text-sm text-gray-spanish-light"
+        class="mt-2 mb-6 flex flex-col gap-4"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
       >
         <span>
           “{{ appStore.name }}” suggests enabling Multi-factor Authentication
@@ -143,23 +150,47 @@ function goToHome() {
       </div>
       <div class="flex flex-col mt-4 gap-2">
         <button
-          class="text-sm btn-primary font-medium p-2 cursor-pointer"
+          class="text-sm btn-primary p-2 cursor-pointer"
           type="submit"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="handleProceed"
         >
           Setup MFA
         </button>
         <div class="flex justify-center gap-6">
           <button
-            class="text-xs btn-tertiary font-medium p-2 cursor-pointer"
+            class="text-xs btn-tertiary p-2 cursor-pointer"
             type="submit"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click.stop="handleSkip"
           >
             Skip for now
           </button>
           <button
-            class="btn-tertiary font-medium text-sm p-2 cursor-pointer"
+            class="btn-tertiary p-2 cursor-pointer"
             type="submit"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click.stop="handleAskNever"
           >
             Don’t show again
diff --git a/src/pages/MFARestoreScreen.vue b/src/pages/MFARestoreScreen.vue
index 23327575..d116ebf5 100644
--- a/src/pages/MFARestoreScreen.vue
+++ b/src/pages/MFARestoreScreen.vue
@@ -27,6 +27,7 @@ import { devLogger } from '@/utils/devLogger'
 import { getLoginToken } from '@/utils/loginToken'
 import { handleGlobalLogin, handleLogin } from '@/utils/redirectUtils'
 import { getStorage, initStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const user = useUserStore()
 const toast = useToast()
@@ -331,21 +332,45 @@ onUnmounted(() => {
           New Device/Browser Detected: Verify Login
         </div>
       </div>
-      <div class="flex text-sm text-gray-spanish-light">
+      <div
+        class="flex"
+        :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: app.theme_settings.font_color,
+        }"
+      >
         Enter your previously setup MFA PIN or answer the security questions to
         verify your login to this new device/browser.
       </div>
       <div class="flex mt-4 items-end justify-end gap-8">
         <button
-          class="text-sm font-medium text-sm btn-tertiary p-2 uppercase"
+          class="btn-tertiary p-2 uppercase"
           type="submit"
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+            borderColor: app.theme_settings.accent_color,
+            backgroundColor: app.theme_settings.accent_color,
+          }"
           @click.stop="handleProceed('pin-based')"
         >
           Enter Pin
         </button>
         <button
-          class="text-sm font-medium text-sm btn-tertiary p-2 uppercase"
+          class="btn-tertiary p-2 uppercase"
           type="submit"
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+            borderColor: app.theme_settings.accent_color,
+            backgroundColor: app.theme_settings.accent_color,
+          }"
           @click.stop="handleProceed('question-based')"
         >
           Answer Questions
diff --git a/src/pages/MFASetup.vue b/src/pages/MFASetup.vue
index 6137184d..8dfbd35d 100644
--- a/src/pages/MFASetup.vue
+++ b/src/pages/MFASetup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import {
   Core,
-  SecurityQuestionModule,
   utils as KeyHelperUtils,
+  SecurityQuestionModule,
 } from '@arcana/key-helper'
 import { connectToParent, type AsyncMethodReturns } from 'penpal'
-import { ref, onBeforeMount, type Ref } from 'vue'
+import { onBeforeMount, ref, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 
@@ -13,8 +13,8 @@ import AppLoader from '@/components/AppLoader.vue'
 import SearchQuestion from '@/components/SearchQuestion.vue'
 import { RedirectParentConnectionApi } from '@/models/Connection'
 import { useAppStore } from '@/store/app'
-import { GATEWAY_URL, AUTH_NETWORK } from '@/utils/constants'
-import { content, errors } from '@/utils/content'
+import { AUTH_NETWORK, GATEWAY_URL } from '@/utils/constants'
+import { content } from '@/utils/content'
 import { devLogger } from '@/utils/devLogger'
 import { getImage } from '@/utils/getImage'
 import {
@@ -22,6 +22,7 @@ import {
   getStorage,
   initStorage,
 } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type CustomObject = {
   [key: string]: string
@@ -59,7 +60,7 @@ const storage = getStorage()
 
 app.curve = storage.local.getCurve()
 
-document.documentElement.classList.add('dark')
+// document.documentElement.classList.add('dark')
 
 let connectionToParent: AsyncMethodReturns<RedirectParentConnectionApi>
 let dkgShare
@@ -327,7 +328,15 @@ function handlePinBack() {
       </div>
       <div class="flex flex-col items-center mt-8 gap-4">
         <button
-          class="btn-primary p-2 text-sm font-medium w-40"
+          class="btn-primary p-2 w-40"
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+            borderColor: app.theme_settings.accent_color,
+            backgroundColor: app.theme_settings.accent_color,
+          }"
           @click.stop="handleDone"
         >
           Done
@@ -349,7 +358,15 @@ function handlePinBack() {
       RECOVERY METHOD 2: PIN
     </h2>
     <hr />
-    <div class="m-4 text-sm text-gray-spanish-light">
+    <div
+      class="m-4"
+      :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+      :style="{
+        fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+          .primaryFontClass,
+        color: app.theme_settings.font_color,
+      }"
+    >
       Enter a 6 digit, alphanumeric pin that you can use to retrieve your wallet
       if you move to a new device or browser.
     </div>
@@ -358,13 +375,27 @@ function handlePinBack() {
       @submit.prevent="handlePinProceed"
     >
       <div class="flex flex-col gap-1">
-        <label class="font-medium text-sm">Pin to use for encryption</label>
+        <label
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+          }"
+          >Pin to use for encryption</label
+        >
         <div class="relative">
           <input
             v-model.trim="pinToEncryptMFAShare"
             :type="passwordType"
             class="text-sm py-2 px-4 input-field focus:input-active focus-visible:input-active text-ellipsis overflow-hidden whitespace-nowrap w-full bg-gray-zinc dark:bg-black-arsenic"
             placeholder="Enter a alphanumberic pin, minimum 6 characters"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+            }"
           />
           <img
             v-if="passwordType === 'password'"
@@ -384,22 +415,46 @@ function handlePinBack() {
           />
         </div>
         <span
-          class="text-sm sm:text-xs pl-1 text-red-600"
-          :class="{ invisible: !showPinError }"
+          class="pl-1 text-red-600"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+          }"
+          :class="{
+            [getFontSizeStyle(Number(app.theme_settings.font_size))]: true,
+            invisible: !showPinError,
+          }"
           >{{ showPinError }}</span
         >
       </div>
       <div class="flex justify-end gap-4">
         <button
           type="reset"
-          class="btn-secondary text-sm font-medium p-2 w-[8rem]"
+          class="btn-secondary p-2 w-[8rem]"
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+            borderColor: app.theme_settings.accent_color,
+            backgroundColor: app.theme_settings.accent_color,
+          }"
           @click.stop="handlePinBack"
         >
           Back
         </button>
         <button
           type="submit"
-          class="btn-primary text-sm font-medium p-2 w-[8rem]"
+          class="btn-primary p-2 w-[8rem]"
+          :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: app.theme_settings.font_color,
+            borderColor: app.theme_settings.accent_color,
+            backgroundColor: app.theme_settings.accent_color,
+          }"
         >
           Proceed
         </button>
@@ -419,7 +474,15 @@ function handlePinBack() {
           class="flex flex-col gap-2"
         >
           <div class="flex flex-col gap-1">
-            <label class="text-sm">Question {{ i }}</label>
+            <label
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
+              >Question {{ i }}</label
+            >
             <SearchQuestion
               :questions="globalQuestions"
               :value="getSelectedQuestion(i)"
@@ -427,17 +490,37 @@ function handlePinBack() {
             />
             <div
               v-if="error[i - 1]"
-              class="mt-1 ml-2 text-red-500 text-xs font-medium"
+              class="mt-1 ml-2 text-red-500"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
             >
               Questions cannot be repeated
             </div>
           </div>
           <div class="flex flex-col gap-1">
-            <label class="text-sm">Answer {{ i }}</label>
+            <label
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
+              >Answer {{ i }}</label
+            >
             <input
               class="dark:bg-black-arsenic bg-gray-zinc-85 text-sm py-2 px-4 input-field text-ellipsis overflow-hidden whitespace-nowrap focus:input-active"
               :placeholder="customPlaceholders[i - 1]"
               :value="getAnswer(i)"
+              :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+              :style="{
+                fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: app.theme_settings.font_color,
+              }"
               @input="addAnswer(i, $event.target?.value)"
             />
           </div>
@@ -445,12 +528,31 @@ function handlePinBack() {
         <div class="flex justify-end gap-4">
           <button
             type="reset"
-            class="btn-secondary text-sm p-2 w-32"
+            class="btn-secondary p-2 w-32"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+              borderColor: app.theme_settings.accent_color,
+              backgroundColor: app.theme_settings.accent_color,
+            }"
             @click.stop="handleCancel"
           >
             Cancel
           </button>
-          <button type="submit" class="btn-primary text-sm p-2 w-32">
+          <button
+            type="submit"
+            class="btn-primary p-2 w-32"
+            :class="getFontSizeStyle(Number(app.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(app.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: app.theme_settings.font_color,
+              borderColor: app.theme_settings.accent_color,
+              backgroundColor: app.theme_settings.accent_color,
+            }"
+          >
             Proceed
           </button>
         </div>
diff --git a/src/pages/ManageNFTScreen.vue b/src/pages/ManageNFTScreen.vue
index 0e399619..f50c776a 100644
--- a/src/pages/ManageNFTScreen.vue
+++ b/src/pages/ManageNFTScreen.vue
@@ -6,16 +6,20 @@ import AppLoader from '@/components/AppLoader.vue'
 import { NFT } from '@/models/NFT'
 import AddOrEditNFTScreen from '@/pages/AddOrEditNFTScreen.vue'
 import { NFTDB } from '@/services/nft.service'
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const router = useRouter()
 const userStore = useUserStore()
 const rpcStore = useRpcStore()
 const modalStore = useModalStore()
+const appStore = useAppStore()
 const showModal = ref(false)
 const modalToShow: Ref<'add' | 'edit'> = ref('add')
 const editModalParams = ref({
@@ -88,6 +92,13 @@ function truncateNFTTokenId(tokenId: string) {
     ? `${tokenId.slice(0, 6)}...${tokenId.slice(-6)}`
     : tokenId
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+const plusContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer, plusContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -103,7 +114,14 @@ function truncateNFTTokenId(tokenId: string) {
             title="Click to go back"
             @click.stop="router.go(-1)"
           >
-            <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+            <div ref="backContainer">
+              <img
+                :src="getImage('back-arrow.svg')"
+                class="w-6 h-6"
+                alt="Back Icon"
+                @load="(event) => fetchAndInjectSVG(event, 0)"
+              />
+            </div>
           </button>
           <span class="font-Nohemi text-[20px] font-medium">Manage NFTs</span>
         </div>
@@ -124,24 +142,62 @@ function truncateNFTTokenId(tokenId: string) {
               }"
               @click.stop="handleEditToken(nft)"
             >
-              <span class="overflow-hidden whitespace-nowrap">
+              <span
+                class="overflow-hidden whitespace-nowrap"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
                 {{ nft.collectionName }} ({{ truncateNFTTokenId(nft.tokenId) }})
               </span>
               <img :src="getImage('edit.svg')" class="opacity-0" />
             </div>
           </div>
           <div v-else class="flex flex-col flex-grow">
-            <span class="color-secondary m-auto font-medium text-sm sm:text-xs"
+            <span
+              class="m-auto"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >No NFTs added</span
             >
           </div>
         </div>
         <button
           class="btn-quaternery flex w-full space-x-1 items-center cursor-pointer justify-center"
+          :style="{
+            borderColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="handleAddToken"
         >
-          <img :src="getImage('plus.svg')" />
-          <span class="text-base font-medium">New</span>
+          <div ref="plusContainer">
+            <img
+              :src="getImage('plus.svg')"
+              alt="Plus Icon"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
+
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.accent_color,
+            }"
+            >New</span
+          >
         </button>
       </div>
     </div>
diff --git a/src/pages/NftDetailsScreen.vue b/src/pages/NftDetailsScreen.vue
index 7062647d..b3fc5b47 100644
--- a/src/pages/NftDetailsScreen.vue
+++ b/src/pages/NftDetailsScreen.vue
@@ -3,9 +3,12 @@ import { computed, ref, type ComputedRef, type Ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 import type { NFTContractType } from '@/models/NFT'
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { getImage } from '@/utils/getImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type NftDetails = {
   type: NFTContractType
@@ -30,6 +33,7 @@ type ModalState = 'send-nft' | false
 
 const router = useRouter()
 const route = useRoute()
+const appStore = useAppStore()
 const showModal: Ref<ModalState> = ref(false)
 const modalStore = useModalStore()
 
@@ -58,6 +62,12 @@ watch(
     router.replace({ name: 'Nfts' })
   }
 )
+
+const sendContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [sendContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -71,7 +81,13 @@ watch(
             @click.stop="router.back()"
           />
           <div
-            class="font-medium flex-grow text-center text-ellipsis overflow-hidden whitespace-nowrap"
+            class="flex-grow text-center text-ellipsis overflow-hidden whitespace-nowrap"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
           >
             {{ props.collectionName }}
           </div>
@@ -104,6 +120,15 @@ watch(
               <div
                 class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[16ch] font-medium text-xl"
                 :title="props.name"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
               >
                 {{ props.name }}
               </div>
@@ -112,24 +137,73 @@ watch(
                   title="Click to transfer this NFT"
                   @click.stop="openNftModal"
                 >
-                  <img :src="getImage('send.svg')" />
+                  <div ref="sendContainer">
+                    <img
+                      :src="getImage('send.svg')"
+                      alt="Send Icon"
+                      @load="(event) => fetchAndInjectSVG(event, 0)"
+                    />
+                  </div>
                 </button>
               </div>
             </div>
             <div class="mt-5 flex flex-col gap-1">
-              <div class="font-medium text-sm">Description</div>
+              <div
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
+                Description
+              </div>
               <div
                 v-if="props.description"
-                class="text-xs text-gray-100 font-normal"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
               >
                 {{ props.description }}
               </div>
-              <span v-else class="text-xs text-gray-100 font-normal">
+              <span
+                v-else
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
                 No description provided
               </span>
             </div>
             <div class="mt-5 flex flex-col gap-1">
-              <div class="font-medium text-sm">Attributes</div>
+              <div
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
+                Attributes
+              </div>
               <div v-if="props.attributes?.length" class="flex gap-2 flex-wrap">
                 <div
                   v-for="attribute in nftAttributes"
@@ -137,15 +211,50 @@ watch(
                   class="rounded-lg py-2 px-3 flex flex-col border border-solid border-gray-200 dark:bg-gray-200"
                   :title="JSON.stringify(attribute)"
                 >
-                  <div class="text-xs text-gray-100 font-normal">
+                  <div
+                    :class="
+                      getFontSizeStyle(
+                        Number(appStore.theme_settings.font_size)
+                      )
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(
+                        appStore.theme_settings.font_pairing
+                      ).primaryFontClass,
+                      color: appStore.theme_settings.font_color,
+                    }"
+                  >
                     {{ attribute.trait_type }}
                   </div>
-                  <div class="font-medium text-sm">
+                  <div
+                    :class="
+                      getFontSizeStyle(
+                        Number(appStore.theme_settings.font_size)
+                      )
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(
+                        appStore.theme_settings.font_pairing
+                      ).primaryFontClass,
+                      color: appStore.theme_settings.font_color,
+                    }"
+                  >
                     {{ attribute.value }}
                   </div>
                 </div>
               </div>
-              <div v-else class="text-xs text-gray-100 font-normal">
+              <div
+                v-else
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+              >
                 No attributes provided
               </div>
             </div>
diff --git a/src/pages/PermissionRequest.vue b/src/pages/PermissionRequest.vue
index 5690c95d..ddd3c27f 100644
--- a/src/pages/PermissionRequest.vue
+++ b/src/pages/PermissionRequest.vue
@@ -25,6 +25,7 @@ import {
   getAppConfig,
   getGaslessEnabledStatus,
 } from '@/services/gateway.service'
+import { useAppStore } from '@/store/app'
 import { useGaslessStore } from '@/store/gasless'
 import { useModalStore } from '@/store/modal'
 import { EIP1559GasFee, LegacyGasFee } from '@/store/request'
@@ -48,6 +49,7 @@ import { sanitizeRequest } from '@/utils/sanitizeRequest'
 import { initSCW, scwInstance } from '@/utils/scw'
 import { initStorage, getStorage } from '@/utils/storageWrapper'
 import { truncateMid } from '@/utils/stringUtils'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const rpcStore = useRpcStore()
 const ARCANA_PRIVATE_KEY_METHOD = '_arcana_privateKey'
@@ -64,6 +66,7 @@ const route = useRoute()
 const appId = route.params.appId as string
 const gaslessStore = useGaslessStore()
 const modalStore = useModalStore()
+const appStore = useAppStore()
 
 function postMessage(response) {
   const allowedDomain = walletDomain.value
@@ -491,7 +494,14 @@ function handleGasPriceInput(value, request) {
         <h1 class="font-Nohemi text-[20px] font-medium">
           {{ methodAndAction[request.method] }}
         </h1>
-        <p class="text-xs text-[#8D8D8D]">
+        <p
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ truncateMid(request.params[0]?.from, 6) }}
         </p>
       </div>
@@ -548,7 +558,15 @@ function handleGasPriceInput(value, request) {
       <div class="h-1/6">
         <div v-if="isArcanaPrivateKeyRequest(request?.method)">
           <button
-            class="btn-primary h-10 p-2 w-full text-sm font-medium"
+            class="btn-primary h-10 p-2 w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click="closeWindow()"
           >
             Close tab
@@ -556,7 +574,15 @@ function handleGasPriceInput(value, request) {
         </div>
         <div v-else-if="isSendTokenRequest(request?.method)">
           <button
-            class="btn-primary h-10 p-2 w-full text-sm font-medium"
+            class="btn-primary h-10 p-2 w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click="handleSendToken(request.params)"
           >
             Send
@@ -564,13 +590,29 @@ function handleGasPriceInput(value, request) {
         </div>
         <div v-else class="flex gap-2">
           <button
-            class="btn-secondary h-10 p-2 w-full text-sm font-medium"
+            class="btn-secondary h-10 p-2 w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click="onReject(request)"
           >
             Reject
           </button>
           <button
-            class="btn-primary h-10 p-2 w-full text-sm font-medium"
+            class="btn-primary h-10 p-2 w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
             @click="onApprove(request)"
           >
             Approve
diff --git a/src/pages/RequestsScreen.vue b/src/pages/RequestsScreen.vue
index a9429925..c11585b6 100644
--- a/src/pages/RequestsScreen.vue
+++ b/src/pages/RequestsScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, watch } from 'vue'
+import { toRefs, watch, ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import Popper from 'vue3-popper'
 
@@ -13,6 +13,7 @@ import { useRequestStore } from '@/store/request'
 import { useRpcStore } from '@/store/rpc'
 import { content, errors } from '@/utils/content'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
 
 const getImage = useImage()
 const requestStore = useRequestStore()
@@ -61,6 +62,12 @@ watch(areRequestsPendingForApproval, () => {
     router.push({ name: 'home' })
   }
 })
+
+const infoContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [infoContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -92,10 +99,14 @@ watch(areRequestsPendingForApproval, () => {
             You are not going to be charged!
             <Popper arrow hover>
               <button>
-                <img
-                  class="sign__message-info-icon"
-                  :src="getImage('info-circle', undefined, 'svg')"
-                />
+                <div ref="infoContainer">
+                  <img
+                    class="sign__message-info-icon"
+                    :src="getImage('info-circle', undefined, 'svg')"
+                    alt="Info Icon"
+                    @load="(event) => fetchAndInjectSVG(event, 0)"
+                  />
+                </div>
               </button>
               <template #content>
                 <ChargeInfo />
diff --git a/src/pages/SeedPhraseMVX.vue b/src/pages/SeedPhraseMVX.vue
index e82df762..b6785a0f 100644
--- a/src/pages/SeedPhraseMVX.vue
+++ b/src/pages/SeedPhraseMVX.vue
@@ -10,6 +10,8 @@ import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import { getImage } from '@/utils/getImage'
 import { getMnemonicInShard } from '@/utils/multiversx/shard'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const showPreview = ref(false)
 const router = useRouter()
@@ -30,6 +32,13 @@ function hideLoader() {
   loader.value.show = false
   loader.value.message = ''
 }
+
+const backContainer = ref<HTMLElement | null>(null)
+const copyContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer, copyContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -40,14 +49,29 @@ function hideLoader() {
         title="Click to go back"
         @click.stop="router.push({ name: 'home' })"
       >
-        <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+        <div ref="backContainer">
+          <img
+            :src="getImage('back-arrow.svg')"
+            class="w-6 h-6"
+            alt="Back Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
       <span class="font-Nohemi text-[20px] font-medium">Seed Phrase</span>
     </div>
 
     <form class="flex flex-col flex-grow justify-between mt-5">
       <div class="flex flex-col gap-6">
-        <span class="text-sm font-lighter text-center">
+        <span
+          class="text-center"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           Please record the seed phrase shown below exactly in the order that it
           is shown. Take care to record this in a safe place offline for maximum
           safety.
@@ -70,12 +94,34 @@ function hideLoader() {
         <button
           class="btn-tertiary flex items-center justify-center gap-2 py-2"
         >
-          <img :src="getImage('copy.svg')" alt="Copy wallet address" />
-          Copy
+          <div ref="copyContainer">
+            <img
+              :src="getImage('copy.svg')"
+              alt="copy Icon"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Copy
+          </span>
         </button>
 
         <button
           class="btn-tertiary flex items-center justify-center gap-2 py-2"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
         >
           <!-- <img :src="getImage('print.svg')" alt="Print wallet address" /> -->
           Print
@@ -83,7 +129,19 @@ function hideLoader() {
       </div>
 
       <div class="flex mt-2">
-        <button class="btn-primary py-[10px] text-center w-full">Verify</button>
+        <button
+          class="btn-primary py-[10px] text-center w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
+          Verify
+        </button>
       </div>
     </form>
   </div>
diff --git a/src/pages/SelectNftScreen.vue b/src/pages/SelectNftScreen.vue
index 8c8f20a4..3f5b961c 100644
--- a/src/pages/SelectNftScreen.vue
+++ b/src/pages/SelectNftScreen.vue
@@ -4,17 +4,20 @@ import { useRouter } from 'vue-router'
 
 import type { NFT } from '@/models/NFT'
 import { NFTDB } from '@/services/nft.service'
+import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import { getDetailedNFTs } from '@/utils/nftUtils'
 import { getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type ModalState = 'send-nft' | false
 
 const userStore = useUserStore()
 const rpcStore = useRpcStore()
 const router = useRouter()
+const appStore = useAppStore()
 const nfts: Ref<NFT[]> = ref([])
 const selectedNft: Ref<NFT | null> = ref(null)
 const showModal: Ref<ModalState> = ref(false)
@@ -80,7 +83,14 @@ rpcStore.$subscribe(getNFTAssets)
           </div>
           <div v-if="nfts.length" class="space-y-1 px-4">
             <label
-              class="text-xs text-zinc-400 font-medium"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               for="recipientWalletAddress"
             >
               Search Artwork
@@ -110,13 +120,35 @@ rpcStore.$subscribe(getNFTAssets)
                 ></div>
                 <div class="flex flex-col gap-1 p-[10px]">
                   <span
-                    class="nft-card-title font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+                    class="nft-card-title overflow-hidden whitespace-nowrap text-ellipsis"
                     :title="nft.name"
+                    :class="
+                      getFontSizeStyle(
+                        Number(appStore.theme_settings.font_size)
+                      )
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(
+                        appStore.theme_settings.font_pairing
+                      ).primaryFontClass,
+                      color: appStore.theme_settings.font_color,
+                    }"
                     >{{ nft.name }}</span
                   >
                   <span
-                    class="nft-card-collection font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+                    class="nft-card-collection overflow-hidden whitespace-nowrap text-ellipsis"
                     :title="nft.collectionName"
+                    :class="
+                      getFontSizeStyle(
+                        Number(appStore.theme_settings.font_size)
+                      )
+                    "
+                    :style="{
+                      fontFamily: getFontFaimly(
+                        appStore.theme_settings.font_pairing
+                      ).primaryFontClass,
+                      color: appStore.theme_settings.font_color,
+                    }"
                     >{{ nft.collectionName }}</span
                   >
                 </div>
@@ -125,12 +157,30 @@ rpcStore.$subscribe(getNFTAssets)
             <div v-else class="flex justify-between p-5">
               <span
                 v-if="nfts.length"
-                class="color-secondary m-auto font-medium text-sm sm:text-xs px-4"
+                class="m-auto px-4"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >No NFTs found</span
               >
               <span
                 v-else
-                class="color-secondary m-auto font-medium text-sm sm:text-xs px-4"
+                class="m-auto px-4"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 >No NFTs added</span
               >
             </div>
diff --git a/src/pages/SendNft.vue b/src/pages/SendNft.vue
index d6b7fc93..9c7d89c1 100644
--- a/src/pages/SendNft.vue
+++ b/src/pages/SendNft.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Decimal } from 'decimal.js'
-import { onMounted, onBeforeMount, onUnmounted, ref, Ref, watch } from 'vue'
+import { onBeforeMount, onMounted, onUnmounted, ref, Ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 
@@ -8,7 +8,7 @@ import AppLoader from '@/components/AppLoader.vue'
 import GasPrice from '@/components/GasPrice.vue'
 import GasPriceMVX from '@/components/GasPriceMVX.vue'
 import SendNftPreview from '@/components/SendNftPreview.vue'
-import { type NFTContractType, type NFT } from '@/models/NFT'
+import { type NFT, type NFTContractType } from '@/models/NFT'
 import { NFTDB } from '@/services/nft.service'
 import { useActivitiesStore } from '@/store/activities'
 import { useAppStore } from '@/store/app'
@@ -28,6 +28,8 @@ import { getImage } from '@/utils/getImage'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getStorage } from '@/utils/storageWrapper'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 type SendNftProps = {
   type: NFTContractType
@@ -440,6 +442,12 @@ watch(
     }
   }
 )
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -469,7 +477,14 @@ watch(
           title="Click to go back"
           @click.stop="router.go(-1)"
         >
-          <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+          <div ref="backContainer">
+            <img
+              :src="getImage('back-arrow.svg')"
+              class="w-6 h-6"
+              alt="Back Icon"
+              @load="(event) => fetchAndInjectSVG(event, 0)"
+            />
+          </div>
         </button>
         <span class="font-Nohemi text-[20px] font-medium">Send Token</span>
       </div>
@@ -482,7 +497,17 @@ watch(
       >
         <div class="flex flex-col gap-3">
           <div class="flex flex-col gap-1">
-            <label class="text-sm font-medium" for="recipientWalletAddress">
+            <label
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              for="recipientWalletAddress"
+            >
               Recipient’s Wallet Address
             </label>
             <input
@@ -491,28 +516,78 @@ watch(
               required
               type="text"
               class="input-field"
-              :class="{ 'input-active': isWalletAddressFocused }"
               placeholder="Enter Recipient’s Wallet Address"
+              :class="[
+                { 'input-active': isWalletAddressFocused },
+                getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+              ]"
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               @focus="isWalletAddressFocused = true"
               @blur="isWalletAddressFocused = false"
             />
           </div>
           <div v-if="props.type === 'erc1155'" class="flex flex-col gap-1">
-            <label class="text-sm font-medium" for="quantity"> Quantity </label>
+            <label
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              for="quantity"
+            >
+              Quantity
+            </label>
             <input
               id="quantity"
               v-model="quantity"
               required
               type="text"
               class="input-field"
-              :class="{ 'input-active': isQuantityFocused }"
               placeholder="Enter Recipient’s Wallet Address"
+              :class="[
+                { 'input-active': isQuantityFocused },
+                getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+              ]"
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               @focus="isQuantityFocused = true"
               @blur="isQuantityFocused = false"
             />
             <div class="flex justify-end gap-1">
-              <span class="text-xs text-gray-100">Total:</span>
-              <span class="text-xs">{{ props.balance }} copies</span>
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >Total:</span
+              >
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >{{ props.balance }} copies</span
+              >
             </div>
           </div>
           <GasPrice
@@ -536,7 +611,12 @@ watch(
             v-else-if="
               transactionMode === 'SCW' || transactionMode === 'ARCANA'
             "
-            class="text-xs text-green-100 font-medium text-center w-full"
+            class="text-green-100 font-medium text-center w-full"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+            }"
             >This is a Gasless Transaction. Click Below to Approve.
           </span>
           <div
@@ -545,20 +625,43 @@ watch(
               transactionMode.length === 0 &&
               rpcStore.useGasless
             "
-            class="flex space-x-2 bg-blue-dark-sky p-2 rounded-sm mt-2"
+            class="flex space-x-2 p-2 rounded-sm mt-2"
+            :style="{
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
           >
             <img
               class="w-4 h-4 mt-1"
               :src="getIcon('info-circle', undefined, 'svg')"
             />
-            <p class="text-xs text-left text-white-200">
+            <p
+              class="text-left"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+            >
               Limit exceeded for gasless transactions. You will be charged for
               this transaction.
             </p>
           </div>
         </div>
         <div class="flex">
-          <button class="btn-primary p-[10px] flex-grow text-center">
+          <button
+            class="btn-primary p-[10px] flex-grow text-center"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
+          >
             Preview
           </button>
         </div>
diff --git a/src/pages/SendTokens.vue b/src/pages/SendTokens.vue
index 88a2d16b..836da242 100644
--- a/src/pages/SendTokens.vue
+++ b/src/pages/SendTokens.vue
@@ -7,13 +7,13 @@ import {
 } from '@solana/web3.js'
 import { Decimal } from 'decimal.js'
 import {
+  computed,
+  onBeforeMount,
   onMounted,
   onUnmounted,
-  onBeforeMount,
   ref,
   Ref,
   watch,
-  computed,
 } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
@@ -43,6 +43,8 @@ import { NEARAccountHandler } from '@/utils/near/accountHandler'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getStorage } from '@/utils/storageWrapper'
 import { useImage } from '@/utils/useImage'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const showPreview = ref(false)
 const rpcStore = useRpcStore()
@@ -717,6 +719,12 @@ watch(
     router.replace({ name: 'home' })
   }
 )
+
+const backContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -743,7 +751,14 @@ watch(
         title="Click to go back"
         @click.stop="router.push({ name: 'home' })"
       >
-        <img :src="getImage('back-arrow.svg')" class="w-6 h-6" />
+        <div ref="backContainer">
+          <img
+            :src="getImage('back-arrow.svg')"
+            class="w-6 h-6"
+            alt="Back Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
       </button>
       <span class="font-Nohemi text-[20px] font-medium">Send Token</span>
     </div>
@@ -753,7 +768,15 @@ watch(
     >
       <div class="flex flex-col gap-6">
         <div class="flex flex-col gap-1">
-          <label class="text-sm font-light" for="recipientWalletAddress">
+          <label
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            for="recipientWalletAddress"
+          >
             Recipient’s Wallet Address
           </label>
           <input
@@ -762,15 +785,34 @@ watch(
             required
             type="text"
             class="input-field"
-            :class="{ 'input-active': isWalletAddressFocused }"
             placeholder="Enter Recipient’s Wallet Address"
+            :class="[
+              { 'input-active': isWalletAddressFocused },
+              getFontSizeStyle(Number(appStore.theme_settings.font_size)),
+            ]"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             @focus="isWalletAddressFocused = true"
             @blur="isWalletAddressFocused = false"
           />
         </div>
         <div class="flex gap-2">
           <div class="flex flex-col gap-1 w-4/6">
-            <label for="amount" class="text-sm font-light">Amount</label>
+            <label
+              for="amount"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Amount</label
+            >
             <div
               class="input-field flex divide-x-1 divide-gray-zinc dark:divide-black-arsenic"
               :class="{ 'input-active': isAmountFocused }"
@@ -783,26 +825,76 @@ watch(
                 required
                 type="text"
                 placeholder="0.1"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
                 @focus="isAmountFocused = true"
                 @blur="isAmountFocused = false"
               />
               <button
-                class="text-rose-briliant uppercase w-1/4 h-6 font-light text-base"
+                class="uppercase w-1/4 h-6"
                 type="button"
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                  borderColor: appStore.theme_settings.accent_color,
+                  backgroundColor: appStore.theme_settings.accent_color,
+                }"
                 @click.stop="amount = getMaxTransferValue().toString()"
               >
                 Max
               </button>
             </div>
             <div
-              class="text-gray-bermuda-grey dark:text-gray-spanish text-xs font-normal uppercase"
+              class="uppercase"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
             >
               Total Balance:
-              <span>{{ selectedTokenBalance }} {{ selectedToken.symbol }}</span>
+              <span
+                :class="
+                  getFontSizeStyle(Number(appStore.theme_settings.font_size))
+                "
+                :style="{
+                  fontFamily: getFontFaimly(
+                    appStore.theme_settings.font_pairing
+                  ).primaryFontClass,
+                  color: appStore.theme_settings.font_color,
+                }"
+                >{{ selectedTokenBalance }} {{ selectedToken.symbol }}</span
+              >
             </div>
           </div>
           <div class="flex flex-col gap-1 flex-grow">
-            <label for="tokens" class="text-sm font-light">Token</label>
+            <label
+              for="tokens"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Token</label
+            >
             <div v-if="tokenList.length" class="input-field">
               <select
                 :model-value="selectedToken.symbol"
@@ -843,27 +935,53 @@ watch(
             !loader.show &&
             (transactionMode === 'SCW' || transactionMode === 'ARCANA')
           "
-          class="text-xs text-green-100 font-medium text-center w-full"
+          class="text-green-100 font-medium text-center w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+          }"
           >This is a Gasless Transaction. Click Below to Approve.
         </span>
         <div
           v-else-if="
             !loader.show && transactionMode.length === 0 && rpcStore.useGasless
           "
-          class="flex space-x-2 bg-blue-dark-sky p-2 rounded-sm mt-2"
+          class="flex space-x-2 p-2 rounded-sm mt-2"
+          :style="{
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
         >
           <img
             class="w-4 h-4 mt-1"
             :src="getIcon('info-circle', undefined, 'svg')"
           />
-          <p class="text-xs text-left text-white-200">
+          <p
+            class="text-left"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Limit exceeded for gasless transactions. You will be charged for
             this transaction.
           </p>
         </div>
       </div>
       <div class="flex mt-2">
-        <button class="btn-primary py-[10px] text-center w-full">
+        <button
+          class="btn-primary py-[10px] text-center w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+        >
           Preview
         </button>
       </div>
diff --git a/src/pages/StarterTips/index-page.vue b/src/pages/StarterTips/index-page.vue
index a69bb1c8..24fac605 100644
--- a/src/pages/StarterTips/index-page.vue
+++ b/src/pages/StarterTips/index-page.vue
@@ -11,14 +11,19 @@ import Page3 from '@/pages/StarterTips/page-3.vue'
 import Page4 from '@/pages/StarterTips/page-4.vue'
 import Page5 from '@/pages/StarterTips/page-5.vue'
 import Page6 from '@/pages/StarterTips/page-6.vue'
+import { useAppStore } from '@/store/app'
 import { useStarterTipsStore } from '@/store/starterTips'
 import { useUserStore } from '@/store/user'
+import { getImage } from '@/utils/getImage'
 import { getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const storage = getStorage()
 const currentPage = ref(1)
 const userStore = useUserStore()
 const router = useRouter()
+const appStore = useAppStore()
 const starterTipsStore = useStarterTipsStore()
 const emits = defineEmits(['close'])
 
@@ -61,6 +66,13 @@ watch(
     }
   }
 )
+
+const backContainer = ref<HTMLElement | null>(null)
+const forwardContainer = ref<HTMLElement | null>(null)
+
+const svgRefs = [backContainer, forwardContainer]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -76,27 +88,58 @@ watch(
         class="flex items-center space-x-2 text-xs"
         @click="skip"
       >
-        <span>Skip</span>
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Skip</span
+        >
       </button>
       <button
         v-else-if="currentPage !== 1"
         class="flex items-center space-x-2 text-xs"
         @click="previous"
       >
-        <img
-          src="@/assets/images/arrow-right.svg"
-          alt="previous"
-          class="h-3 w-3 dark:invert-0 invert rotate-180"
-        />
-        <span>Previous</span>
+        <div ref="backContainer">
+          <img
+            :src="getImage('back-arrow.svg')"
+            class="h-3 w-3"
+            alt="Back Icon"
+            @load="(event) => fetchAndInjectSVG(event, 0)"
+          />
+        </div>
+
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Previous</span
+        >
       </button>
       <button class="flex items-center space-x-2 text-xs" @click="next">
-        <span>Next</span>
-        <img
-          src="@/assets/images/arrow-right.svg"
-          alt="next"
-          class="h-3 w-3 dark:invert-0 invert"
-        />
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+          >Next</span
+        >
+        <div ref="forwardContainer">
+          <img
+            :src="getImage('forward-arrow.svg')"
+            class="h-3 w-3"
+            alt="forward Icon"
+            @load="(event) => fetchAndInjectSVG(event, 1)"
+          />
+        </div>
       </button>
     </div>
     <div
diff --git a/src/pages/TransakSell.vue b/src/pages/TransakSell.vue
index 866947d1..1cc19bb7 100644
--- a/src/pages/TransakSell.vue
+++ b/src/pages/TransakSell.vue
@@ -35,6 +35,7 @@ import {
   getTransakSellableCryptos,
   type TransakNetwork,
 } from '@/utils/transak'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const rpcStore = useRpcStore()
 const DEFAULT_THEME = 'dark'
@@ -501,8 +502,23 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
       >
         <img src="@/assets/images/success.svg" class="h-[60px] w-[60px]" />
         <div class="flex flex-col gap-3 items-center text-center">
-          <span class="font-medium">Transaction Approved</span>
-          <span class="text-[#8d8d8d] text-[12px] mx-5"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Transaction Approved</span
+          >
+          <span
+            class="mx-5"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >The transaction was completed. Please click below to view the
             transaction on the explorer.</span
           >
@@ -520,7 +536,18 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
             <img :src="getImage('external-link.svg')" class="h-4 w-4"
           /></a>
         </div>
-        <button class="text-[12px]" @click.stop="closeWindow">
+        <button
+          class="text-[12px]"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click.stop="closeWindow"
+        >
           Close Window
         </button>
       </div>
@@ -534,8 +561,23 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
       >
         <img src="@/assets/images/failed.svg" class="h-[60px] w-[60px]" />
         <div class="flex flex-col gap-3 items-center text-center">
-          <span class="font-medium">Transaction Failed</span>
-          <span class="text-[#8d8d8d] text-[12px] mx-5"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Transaction Failed</span
+          >
+          <span
+            class="mx-5"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >The transaction was failed. Retry again.</span
           >
           <!-- <span class="text-[12px]"
@@ -546,8 +588,32 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
           > -->
         </div>
         <div class="flex gap-5 justify-between flex-wrap items-center">
-          <button class="text-[12px]" @click.stop="tryAgain">Try Again</button>
-          <button class="text-[12px]" @click.stop="closeWindow">
+          <button
+            class="text-[12px]"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
+            @click.stop="tryAgain"
+          >
+            Try Again
+          </button>
+          <button
+            class="text-[12px]"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+              borderColor: appStore.theme_settings.accent_color,
+              backgroundColor: appStore.theme_settings.accent_color,
+            }"
+            @click.stop="closeWindow"
+          >
             Close Window
           </button>
         </div>
@@ -577,30 +643,81 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
         <div class="flex items-center justify-between">
           <span class="text-[12px]">Wallet:</span>
           <span
-            class="text-[15px] font[500]"
             :title="(route.query.partnerCustomerId as string)"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ truncateMid(route.query.partnerCustomerId as string, 5) }}
-            <span class="text-[10px]">{{
-              rpcStore.preferredAddressType === 'scw'
-                ? '(Smart Wallet)'
-                : '(User Wallet)'
-            }}</span></span
+            <span
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >{{
+                rpcStore.preferredAddressType === 'scw'
+                  ? '(Smart Wallet)'
+                  : '(User Wallet)'
+              }}</span
+            ></span
           >
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[12px]">Fiat Amount:</span>
-          <span class="text-[15px] font[500]"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Fiat Amount:</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ query.fiatAmount }} {{ query.fiatCurrency }}</span
           >
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[12px]">Transak Fees:</span>
-          <span class="text-[15px] font[500]"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Transak Fees:</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ query.totalFeeInFiat }} {{ query.fiatCurrency }}</span
           >
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[12px]">Network:</span>
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Network:</span
+          >
           <div class="flex items-center gap-2">
             <img
               v-if="selectedNetworkLogo"
@@ -609,14 +726,36 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
               :alt="selectedNetworkName"
               @error="handleFallbackLogo"
             />
-            <span class="text-[15px] font[500]">{{
-              selectedNetworkName || query.network
-            }}</span>
+            <span
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >{{ selectedNetworkName || query.network }}</span
+            >
           </div>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[12px]">Token Balance:</span>
-          <span class="text-[15px] font[500]"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Token Balance:</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ balance }} {{ route.query.cryptoCurrency }}</span
           >
         </div>
@@ -624,14 +763,42 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
           v-if="contractAddress !== ethers.constants.AddressZero"
           class="flex items-center justify-between"
         >
-          <span class="text-[12px]">Gas Balance:</span>
-          <span class="text-[15px] font[500]"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Gas Balance:</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ nativeBalance }} {{ selectedNetworkSymbol }}</span
           >
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-[12px]">Transaction Fees:</span>
-          <span class="text-[15px] font[500]"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >Transaction Fees:</span
+          >
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >{{ displayGasFees }} {{ selectedNetworkSymbol }}</span
           >
         </div>
@@ -648,11 +815,30 @@ function generateExplorerURL(explorerUrl: string, txHash: string) {
       <div class="flex gap-4 mt-4">
         <button
           class="btn-secondary h-10 p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
           @click.stop="handleReject"
         >
           Reject
         </button>
-        <button class="btn-primary h-10 p-2 w-full" @click.stop="handleApprove">
+        <button
+          class="btn-primary h-10 p-2 w-full"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+            borderColor: appStore.theme_settings.accent_color,
+            backgroundColor: appStore.theme_settings.accent_color,
+          }"
+          @click.stop="handleApprove"
+        >
           Approve
         </button>
       </div>
diff --git a/src/pages/homeScreen.vue b/src/pages/homeScreen.vue
index 269bbe30..e7c491eb 100644
--- a/src/pages/homeScreen.vue
+++ b/src/pages/homeScreen.vue
@@ -10,6 +10,7 @@ import { ChainType } from '@/utils/chainType'
 import { errors } from '@/utils/content'
 import { getImage } from '@/utils/getImage'
 import { sleep } from '@/utils/sleep'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const rpcStore = useRpcStore()
 const appStore = useAppStore()
@@ -93,7 +94,15 @@ rpcStore.$subscribe(() => {
       <AssetsView :refresh="refreshIconAnimating" />
     </div>
     <div class="flex space-x-1 justify-center items-center">
-      <span class="text-sm">Powered by</span>
+      <span
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+        }"
+        >Powered by</span
+      >
       <img :src="getImage('arcana-logo.svg')" alt="arcana" class="h-3" />
     </div>
   </div>
diff --git a/src/pages/loggedInView.vue b/src/pages/loggedInView.vue
index c13ceff6..34370f16 100644
--- a/src/pages/loggedInView.vue
+++ b/src/pages/loggedInView.vue
@@ -59,6 +59,7 @@ import {
 import { initSCW, scwInstance } from '@/utils/scw'
 import { getPrivateKey } from '@/utils/solana/getPrivateKey'
 import { getSensitiveStorage, getStorage } from '@/utils/storageWrapper'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const userStore = useUserStore()
 const appStore = useAppStore()
@@ -181,6 +182,7 @@ const sendLogoutMessage = () => {
 onMounted(async () => {
   try {
     config = await useConfigStore(appStore.id)
+    appStore.setThemeSetting(config.theme_settings)
     startLoginChannel()
     loader.value.show = true
     devLogger.log('[loggedInView]', { curve: appStore.curve })
@@ -637,7 +639,13 @@ watch(
         @click.stop="handleMFACreation"
       >
         <div class="flex items-center gap-2">
-          <span class="font-medium text-white-100 text-sm"
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Enhance your wallet security</span
           >
           <img src="@/assets/images/export.svg" class="w-5" />
diff --git a/src/pages/profileScreen.vue b/src/pages/profileScreen.vue
index d2ecc2cc..1e81acb7 100644
--- a/src/pages/profileScreen.vue
+++ b/src/pages/profileScreen.vue
@@ -29,6 +29,8 @@ import {
   getRequestHandler,
 } from '@/utils/requestHandlerSingleton'
 import { getSensitiveStorage, getStorage } from '@/utils/storageWrapper'
+import { useSVGInjector } from '@/utils/useSvgInjector.ts'
+import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction'
 
 const user = useUserStore()
 const router = useRouter()
@@ -253,6 +255,14 @@ watch(
     }
   }
 )
+
+const copyContainer = ref<HTMLElement | null>(null)
+const externalContainer = ref<HTMLElement | null>(null)
+const externalContainer2 = ref<HTMLElement | null>(null)
+
+const svgRefs = [copyContainer, externalContainer, externalContainer2]
+
+const { fetchAndInjectSVG } = useSVGInjector(svgRefs)
 </script>
 
 <template>
@@ -266,29 +276,65 @@ watch(
     <div class="card p-4 flex flex-col gap-5">
       <div v-if="name" class="flex flex-col">
         <span
-          class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           >Name</span
         >
-        <span class="text-lg font-normal">
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ name }}
         </span>
       </div>
       <div class="flex flex-col">
         <span
-          class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           >Email ID</span
         >
-        <span class="text-lg font-normal">
+        <span
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
+        >
           {{ email || 'Not available' }}
         </span>
       </div>
       <div class="flex flex-col">
         <span
-          class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           >Wallet Address</span
         >
         <div class="flex gap-2">
-          <span class="text-lg font-normal">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ walletAddressShrinked }}
           </span>
           <button
@@ -297,11 +343,14 @@ watch(
               copyToClipboard(walletAddress, 'Wallet address copied')
             "
           >
-            <img
-              :src="getImage('copy-big.svg')"
-              alt="Click to copy"
-              class="w-4 h-4"
-            />
+            <div ref="copyContainer">
+              <img
+                :src="getImage('copy-big.svg')"
+                class="w-4 h-4"
+                alt="Copy Icon"
+                @load="(event) => fetchAndInjectSVG(event, 0)"
+              />
+            </div>
           </button>
         </div>
       </div>
@@ -313,7 +362,12 @@ watch(
         }"
       >
         <span
-          class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           >Private Key</span
         >
         <button
@@ -322,10 +376,24 @@ watch(
           :disabled="starterTipsStore.showExportkey"
           @click.stop="handleShowPrivateKeyCautionModal"
         >
-          <span class="text-lg font-normal dark:text-white-100">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             Export Key
           </span>
-          <img :src="getImage('external-link.svg')" class="w-4 h-4" />
+          <div ref="externalContainer">
+            <img
+              :src="getImage('external-link.svg')"
+              class="w-4 h-4"
+              alt="External Icon"
+              @load="(event) => fetchAndInjectSVG(event, 1)"
+            />
+          </div>
         </button>
       </div>
       <div
@@ -334,19 +402,43 @@ watch(
       >
         <div class="flex flex-col">
           <span
-            class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Total Balance</span
           >
-          <span class="text-lg font-normal">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ balanceBreakdown.total }} NEAR
           </span>
         </div>
         <div class="flex flex-col">
           <span
-            class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Available Balance</span
           >
-          <span class="text-lg font-normal">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ balanceBreakdown.available }} NEAR
           </span>
         </div>
@@ -355,23 +447,47 @@ watch(
             class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
             >Balance Reserved for Storage</span
           >
-          <span class="text-lg font-normal">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ balanceBreakdown.locked }} NEAR
           </span>
         </div>
         <div class="flex flex-col">
           <span
-            class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
             >Balance Staked</span
           >
-          <span class="text-lg font-normal">
+          <span
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+          >
             {{ balanceBreakdown.staked }} NEAR
           </span>
         </div>
       </div>
       <div v-if="appStore.isMfaEnabled" class="flex flex-col">
         <span
-          class="text-sm font-medium text-gray-bermuda-grey dark:text-gray-spanish"
+          :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+          :style="{
+            fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+              .primaryFontClass,
+            color: appStore.theme_settings.font_color,
+          }"
           >Enhance Wallet Security</span
         >
         <div>
@@ -381,19 +497,63 @@ watch(
             title="Click to setup MFA"
             @click.stop="handleShowMFAProceedModal(true)"
           >
-            <span v-if="true" class="dark:text-white-100">Setup Now</span>
-            <span v-else class="dark:text-white-100"
+            <span
+              v-if="true"
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
+              >Setup Now</span
+            >
+            <span
+              v-else
+              :class="
+                getFontSizeStyle(Number(appStore.theme_settings.font_size))
+              "
+              :style="{
+                fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                  .primaryFontClass,
+                color: appStore.theme_settings.font_color,
+              }"
               >Update Security Questions</span
             >
-            <img :src="getImage('external-link.svg')" class="w-4 h-4" />
+            <div ref="externalContainer2">
+              <img
+                :src="getImage('external-link.svg')"
+                class="w-4 h-4"
+                alt="External Icon"
+                @load="(event) => fetchAndInjectSVG(event, 2)"
+              />
+            </div>
           </button>
-          <span v-else class="text-lg font-normal">In use</span>
+          <span
+            v-else
+            :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+            :style="{
+              fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+                .primaryFontClass,
+              color: appStore.theme_settings.font_color,
+            }"
+            >In use</span
+          >
         </div>
       </div>
     </div>
     <div class="flex">
       <button
         class="flex justify-center btn-secondary items-center w-full p-2"
+        :class="getFontSizeStyle(Number(appStore.theme_settings.font_size))"
+        :style="{
+          fontFamily: getFontFaimly(appStore.theme_settings.font_pairing)
+            .primaryFontClass,
+          color: appStore.theme_settings.font_color,
+          borderColor: appStore.theme_settings.accent_color,
+          backgroundColor: appStore.theme_settings.accent_color,
+        }"
         @click="handleLogout"
       >
         Logout
diff --git a/src/services/gateway.service.ts b/src/services/gateway.service.ts
index 20fb8832..3ad0d9d0 100644
--- a/src/services/gateway.service.ts
+++ b/src/services/gateway.service.ts
@@ -1,5 +1,6 @@
 import axios from 'axios'
 
+import { StyleConfig } from '@/models/StyleConfig'
 import { API } from '@/utils/constants'
 
 const gatewayInstance = axios.create({ baseURL: API.gateway })
@@ -17,6 +18,7 @@ type AppConfig = {
   theme: 'dark' | 'light'
   session_persisted: boolean
   session_max_age: number
+  theme_settings: StyleConfig
 }
 
 function getAppConfig(appId: string) {
diff --git a/src/store/app.ts b/src/store/app.ts
index 33cca673..33c549b9 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -3,6 +3,7 @@ import { CURVE } from '@arcana/key-helper'
 import { defineStore } from 'pinia'
 
 import type { SDKVersion } from '@/models/Connection'
+import { StyleConfig } from '@/models/StyleConfig'
 import type { Theme } from '@/models/Theme'
 import { useRequestStore } from '@/store/request'
 import { ChainType } from '@/utils/chainType'
@@ -20,6 +21,7 @@ type AppState = {
   id: string
   name: string
   theme: Theme
+  theme_settings: StyleConfig
   standaloneMode: 0 | 1 | 2
   parentAppUrl: string | null
   validAppMode: AppMode
@@ -42,6 +44,7 @@ export const useAppStore = defineStore('app', {
     ({
       id: '',
       theme: 'dark',
+      theme_settings: {},
       parentAppUrl: null,
       showWallet: false,
       standaloneMode: 0,
@@ -131,6 +134,9 @@ export const useAppStore = defineStore('app', {
     setTheme(theme: Theme): void {
       this.theme = theme
     },
+    setThemeSetting(theme_settings: StyleConfig): void {
+      this.theme_settings = theme_settings
+    },
     setName(name: string): void {
       this.name = name
     },
diff --git a/src/store/config.ts b/src/store/config.ts
index 45e35bfb..1ea93691 100644
--- a/src/store/config.ts
+++ b/src/store/config.ts
@@ -12,6 +12,7 @@ export const useConfigStore = async (appID: string) => {
         session_persisted: false,
         session_max_age: 0,
         theme: 'dark',
+        theme_settings: {},
       } as AppConfig & { appID: string }),
     actions: {
       async getConfig(appID: string) {
@@ -21,6 +22,9 @@ export const useConfigStore = async (appID: string) => {
         this.name = data.name
         this.chain_type = data.chain_type
         this.global = data.global
+        if (data.theme_settings) {
+          this.theme_settings = data.theme_settings
+        }
         if (data.session_persisted) {
           this.session_persisted = data.session_persisted
         }
diff --git a/src/utils/useSvgInjector.ts.ts b/src/utils/useSvgInjector.ts.ts
new file mode 100644
index 00000000..db2d6f71
--- /dev/null
+++ b/src/utils/useSvgInjector.ts.ts
@@ -0,0 +1,140 @@
+import { ref, watch, Ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useAppStore } from '@/store/app'
+
+export const useSVGInjector = (
+  svgRefs: Ref<HTMLElement | null>[],
+  fillColor?: boolean,
+  homeFooter?: boolean
+) => {
+  const appStore = useAppStore()
+  const route = useRoute()
+
+  const currentRoute = computed(() => route.name)
+
+  // Injection status for each SVG
+  const svgInjectionStatus = ref<boolean[]>(Array(svgRefs.length).fill(false))
+
+  // Helper function to determine the active route based on the index
+  const isActiveForRoute = (index: number) => {
+    const routeMap = {
+      home: 0,
+      Nfts: 1,
+      profile: 2,
+      activities: 3,
+    }
+    const currentRouteIndex = routeMap[currentRoute.value || 0] ?? 4
+    return currentRouteIndex === index
+  }
+
+  // Function to apply the accent color to the SVG paths
+  const applyAccentColorToSVG = (
+    container: HTMLElement | null,
+    acentColor: string,
+    fontColor: string,
+    options: {
+      active?: boolean
+      nftActive?: boolean
+      profileActive?: boolean
+      activitiesActive?: boolean
+    } = {}
+  ) => {
+    if (!container) return
+
+    const paths = container.querySelectorAll('path')
+    if (!paths.length) {
+      console.error('No paths found in the SVG to apply the stroke color.')
+      return
+    }
+
+    paths.forEach((path: SVGPathElement, i: number) => {
+      path.style.stroke = acentColor
+      if (i === 0 && options.active && homeFooter) path.style.fill = acentColor
+      if (i === 1 && options.active && homeFooter) path.style.stroke = fontColor
+      if (i === 1 && options.profileActive && homeFooter) {
+        path.style.stroke = fontColor
+        path.style.fill = acentColor
+      }
+      if (i !== 0 && options.nftActive && homeFooter) {
+        path.style.stroke = fontColor
+        path.style.fill = acentColor
+      }
+      if (i === 0 && options.activitiesActive && homeFooter)
+        path.style.fill = acentColor
+      if (fillColor) path.setAttribute('fill', acentColor)
+    })
+  }
+
+  // Function to fetch and inject SVG
+  const fetchAndInjectSVG = async (event: Event, index: number) => {
+    const target = event.target as HTMLImageElement
+    if (!target || !target.src) {
+      console.error(`Invalid event target for SVG injection: ${target}`)
+      return
+    }
+
+    try {
+      const response = await fetch(target.src)
+      if (!response.ok)
+        throw new Error(`HTTP error! status: ${response.status}`)
+
+      const svgContent = await response.text()
+      const container = svgRefs[index]?.value
+      if (container) {
+        container.innerHTML = svgContent
+        svgInjectionStatus.value[index] = true
+
+        // Apply accent color after injecting SVG
+        if (appStore.theme_settings.accent_color) {
+          applyAccentColorToSVG(
+            container,
+            appStore.theme_settings.accent_color,
+            appStore.theme_settings.font_color,
+            {
+              active: isActiveForRoute(index),
+              nftActive: currentRoute.value === 'Nfts' && index === 1,
+              profileActive: currentRoute.value === 'profile' && index === 2,
+              activitiesActive:
+                currentRoute.value === 'activities' && index === 4,
+            }
+          )
+        }
+      } else {
+        console.error(`SVG container at index ${index} is not defined.`)
+      }
+    } catch (error) {
+      console.error(`Error loading SVG at index ${index}:`, error)
+    }
+  }
+
+  // Watch for changes in accent color and apply changes to existing SVGs
+  watch(
+    () => appStore.theme_settings.accent_color,
+    (newColor) => {
+      svgRefs.forEach((ref, index) => {
+        const container = ref.value
+        if (svgInjectionStatus.value[index] && container) {
+          applyAccentColorToSVG(
+            container,
+            newColor,
+            appStore.theme_settings.font_color,
+            {
+              active: isActiveForRoute(index),
+              nftActive: currentRoute.value === 'Nfts' && index === 1,
+              profileActive: currentRoute.value === 'profile' && index === 2,
+              activitiesActive:
+                currentRoute.value === 'activities' && index === 4,
+            }
+          )
+        }
+      })
+    },
+    { immediate: true }
+  )
+
+  return {
+    svgInjectionStatus,
+    fetchAndInjectSVG,
+  }
+}
diff --git a/src/utils/utilsFunction.ts b/src/utils/utilsFunction.ts
new file mode 100644
index 00000000..6acfcc5e
--- /dev/null
+++ b/src/utils/utilsFunction.ts
@@ -0,0 +1,40 @@
+const getFontSizeStyle = (font: number) => {
+  switch (font) {
+    case 1:
+      return 'text-xs'
+    case 2:
+      return 'text-sm'
+    case 3:
+      return 'text-base'
+    default:
+      return 'text-sm'
+  }
+}
+
+const getFontFaimly = (font_pairing: string) => {
+  if (!font_pairing) {
+    return { primaryFontClass: 'Nohemi', secondaryFontClass: 'Inter' }
+  }
+
+  const [primaryFont, secondaryFont] = font_pairing.split(' + ')
+  const primaryFontClass = primaryFont
+  const secondaryFontClass = secondaryFont
+  return { primaryFontClass, secondaryFontClass }
+}
+
+const getRadius = (radius: string) => {
+  switch (radius) {
+    case 'S':
+      return '4px'
+    case 'M':
+      return '8px'
+    case 'L':
+      return '12px'
+    case 'XL':
+      return '16px'
+    default:
+      return '0px'
+  }
+}
+
+export { getFontSizeStyle, getFontFaimly, getRadius }