diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa66efa5a1..a7b5568ec6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -111,6 +111,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1640](https://github.com/cosmos/voyager/issues/1640) Fixed an error that prevented the search bar to be displayed using `Ctrl+F` @fedekunze
 - Fixed testnet config build script @faboweb
 - [\#1677](https://github.com/cosmos/voyager/issues/1677) Fixed inconstistent status colors on proposals @fedekunze
+- [\#1696](https://github.com/cosmos/voyager/issues/1696) Fixed broken css variables @jbibla
 - [\#1687](https://github.com/cosmos/voyager/issues/1687) Removing cached state if decrypting fails. @faboweb
 - [\#1662](https://github.com/cosmos/voyager/issues/1662) Fixed wrong node version in readme @faboweb
 
diff --git a/app/src/renderer/components/common/FundraiserWarning.vue b/app/src/renderer/components/common/FundraiserWarning.vue
index a3d329d127..c9105e42cd 100644
--- a/app/src/renderer/components/common/FundraiserWarning.vue
+++ b/app/src/renderer/components/common/FundraiserWarning.vue
@@ -33,6 +33,6 @@ export default { name: `fundraiser-warning` }
 
 .fundraiser-warning__subtitle {
   color: var(--dim);
-  font-size: sm;
+  font-size: var(--sm);
 }
 </style>
diff --git a/app/src/renderer/components/common/ShortBech32.vue b/app/src/renderer/components/common/ShortBech32.vue
index 37af113512..59ff9c3a88 100644
--- a/app/src/renderer/components/common/ShortBech32.vue
+++ b/app/src/renderer/components/common/ShortBech32.vue
@@ -70,7 +70,7 @@ export default {
 .short-bech32 .copied {
   align-items: flex-end;
   display: flex;
-  font-size: sm;
+  font-size: var(--sm);
   opacity: 0;
   padding-left: 10px;
   transition: opacity 500ms ease;
@@ -84,7 +84,7 @@ export default {
 
 .short-bech32 .copied i {
   color: var(--success);
-  font-size: m;
+  font-size: var(--m);
   padding-bottom: 2px;
   padding-right: 0;
 }
diff --git a/app/src/renderer/components/common/TmBalance.vue b/app/src/renderer/components/common/TmBalance.vue
index 54133efa59..f37f0de7ed 100644
--- a/app/src/renderer/components/common/TmBalance.vue
+++ b/app/src/renderer/components/common/TmBalance.vue
@@ -88,7 +88,7 @@ export default {
 }
 .header-balance .top h2 {
   color: var(--bright);
-  font-size: h1;
+  font-size: var(--h1);
   font-weight: 500;
 }
 .header-balance .top .icon-container {
diff --git a/app/src/renderer/components/common/TmLiSession.vue b/app/src/renderer/components/common/TmLiSession.vue
index 97be112cce..a95c05218a 100644
--- a/app/src/renderer/components/common/TmLiSession.vue
+++ b/app/src/renderer/components/common/TmLiSession.vue
@@ -74,13 +74,13 @@ export default {
 
 .tm-li-session-title {
   color: var(--txt);
-  font-size: lg;
+  font-size: var(--lg);
   line-height: 1.25;
   margin-bottom: 0.375rem;
 }
 
 .tm-li-session-subtitle {
   color: var(--dim);
-  font-size: sm;
+  font-size: var(--sm);
 }
 </style>
diff --git a/app/src/renderer/components/common/TmModal.vue b/app/src/renderer/components/common/TmModal.vue
index 403e181ffd..ffddc10b20 100644
--- a/app/src/renderer/components/common/TmModal.vue
+++ b/app/src/renderer/components/common/TmModal.vue
@@ -94,7 +94,7 @@ export default {
 }
 
 .tm-modal-icon i {
-  font-size: lg;
+  font-size: var(--lg);
 }
 
 .tm-modal-icon.tm-modal-close {
diff --git a/app/src/renderer/components/common/TmModalError.vue b/app/src/renderer/components/common/TmModalError.vue
index c86462705f..b2beef08ea 100644
--- a/app/src/renderer/components/common/TmModalError.vue
+++ b/app/src/renderer/components/common/TmModalError.vue
@@ -101,14 +101,14 @@ export default {
 }
 
 .tm-modal-error__title {
-  font-size: h1;
+  font-size: var(--h1);
   font-weight: 500;
   line-height: 1;
   margin-bottom: 1.5rem;
 }
 
 .tm-modal-error__body {
-  font-size: lg;
+  font-size: var(--lg);
   color: var(--dim);
   margin-bottom: 3rem;
 }
diff --git a/app/src/renderer/components/common/TmModalNodeHalted.vue b/app/src/renderer/components/common/TmModalNodeHalted.vue
index 9ccf45d185..715e1cbd3f 100644
--- a/app/src/renderer/components/common/TmModalNodeHalted.vue
+++ b/app/src/renderer/components/common/TmModalNodeHalted.vue
@@ -84,14 +84,14 @@ export default {
 }
 
 .tm-modal-error__title {
-  font-size: h1;
+  font-size: var(--h1);
   font-weight: 500;
   line-height: 1;
   margin-bottom: 1.5rem;
 }
 
 .tm-modal-error__body {
-  font-size: lg;
+  font-size: var(--lg);
   color: var(--dim);
   margin-bottom: 3rem;
 }
diff --git a/app/src/renderer/components/governance/TabParameters.vue b/app/src/renderer/components/governance/TabParameters.vue
index e1c2b3e455..8697daec76 100644
--- a/app/src/renderer/components/governance/TabParameters.vue
+++ b/app/src/renderer/components/governance/TabParameters.vue
@@ -260,7 +260,7 @@ h3 {
 
 .info_dl dt {
   color: var(--dim);
-  font-size: small;
+  font-size: var(--sm);
   margin-bottom: 4px;
 }
 
diff --git a/app/src/renderer/components/governance/TableProposals.vue b/app/src/renderer/components/governance/TableProposals.vue
index c8a0830622..868067cd3b 100644
--- a/app/src/renderer/components/governance/TableProposals.vue
+++ b/app/src/renderer/components/governance/TableProposals.vue
@@ -151,7 +151,7 @@ table tr {
 table tr td:first-child::before {
   content: counter(rowNumber);
   position: absolute;
-  font-size: sm;
+  font-size: var(--sm);
   width: 2rem;
   text-align: right;
   color: var(--dim);
diff --git a/app/src/renderer/components/staking/PageValidator.vue b/app/src/renderer/components/staking/PageValidator.vue
index 6d2f2e00af..21485cb351 100644
--- a/app/src/renderer/components/staking/PageValidator.vue
+++ b/app/src/renderer/components/staking/PageValidator.vue
@@ -513,14 +513,14 @@ export default {
 .validator-profile__header__name__title {
   color: #fff;
   display: inline-block;
-  font-size: h1;
-  line-height: h1;
+  font-size: var(--h1);
+  line-height: var(--h1);
   font-weight: 400;
   padding: 0 0.5rem 0.5rem 0;
 }
 
 .validator-profile__header__name__address {
-  font-size: small;
+  font-size: var(--sm);
 }
 
 .validator-profile__header__actions {
@@ -580,7 +580,7 @@ export default {
 
 .info_dl dt {
   color: var(--dim);
-  font-size: small;
+  font-size: var(--sm);
   margin-bottom: 4px;
 }
 
@@ -609,7 +609,7 @@ export default {
 
 .colored_dl dt {
   color: var(--dim);
-  font-size: small;
+  font-size: var(--sm);
   margin-bottom: 0.5rem;
   text-align: center;
 }
diff --git a/app/src/renderer/components/staking/PanelSort.vue b/app/src/renderer/components/staking/PanelSort.vue
index 3c4f0555cd..973d281849 100644
--- a/app/src/renderer/components/staking/PanelSort.vue
+++ b/app/src/renderer/components/staking/PanelSort.vue
@@ -62,7 +62,7 @@ export default {
 }
 
 .sort-by {
-  font-size: sm;
+  font-size: var(--sm);
 }
 
 .sort-by a {
diff --git a/app/src/renderer/components/staking/TabMyDelegations.vue b/app/src/renderer/components/staking/TabMyDelegations.vue
index e6d53f9dc4..40f8f0f9c9 100644
--- a/app/src/renderer/components/staking/TabMyDelegations.vue
+++ b/app/src/renderer/components/staking/TabMyDelegations.vue
@@ -86,7 +86,7 @@ export default {
   background: var(--app-fg);
   border: 1px solid var(--bc-dim);
   border-radius: 0.25rem;
-  font-size: sm;
+  font-size: var(--sm);
   margin-bottom: 4rem;
   margin-left: 2rem;
   padding: 0.5rem;
diff --git a/app/src/renderer/components/staking/TabParameters.vue b/app/src/renderer/components/staking/TabParameters.vue
index b08a47dbe3..b4ca0e0d2d 100644
--- a/app/src/renderer/components/staking/TabParameters.vue
+++ b/app/src/renderer/components/staking/TabParameters.vue
@@ -212,7 +212,7 @@ h3 {
 
 .info_dl dt {
   color: var(--dim);
-  font-size: small;
+  font-size: var(--sm);
   margin-bottom: 4px;
 }
 
diff --git a/app/src/renderer/components/staking/TableValidators.vue b/app/src/renderer/components/staking/TableValidators.vue
index 421b9c3ef2..5d3f61117e 100644
--- a/app/src/renderer/components/staking/TableValidators.vue
+++ b/app/src/renderer/components/staking/TableValidators.vue
@@ -208,7 +208,7 @@ table tr {
 table tr td:first-child::before {
   content: counter(rowNumber);
   position: absolute;
-  font-size: sm;
+  font-size: var(--sm);
   width: 2rem;
   text-align: right;
   color: var(--dim);
diff --git a/app/src/renderer/styles/variables.css b/app/src/renderer/styles/variables.css
index ff1c1fad82..30cb48cd14 100644
--- a/app/src/renderer/styles/variables.css
+++ b/app/src/renderer/styles/variables.css
@@ -3,7 +3,7 @@
   /* colors */
   --tertiary: hsl(325, 96%, 59%);
   --secondary: hsl(277, 92%, 58%);
-  --primar: y hsl(233, 88%, 57%);
+  --primary: hsl(233, 88%, 57%);
   --link: hsl(217, 100%, 70%);
   --hover: rgba(0, 0, 0, 8%);
   --hover-bg: rgba(27, 113, 255, 0.1);