diff --git a/server/zanata-frontend/src/app/components/LogoLoader/index.less b/server/zanata-frontend/src/app/components/LogoLoader/index.less
index 34b34fe361..9e162106cf 100644
--- a/server/zanata-frontend/src/app/components/LogoLoader/index.less
+++ b/server/zanata-frontend/src/app/components/LogoLoader/index.less
@@ -1,5 +1,3 @@
-@import "../../styles/ant-theme-vars.less";
-
 :root {
   --LogoLoader-transition-ease: cubic-bezier(.175, .885, .320, 1.275);
   --LogoLoader-size: 39px;
diff --git a/server/zanata-frontend/src/app/styles/antd.less b/server/zanata-frontend/src/app/styles/antd.less
index 1e70d38a2e..c7f68878e0 100644
--- a/server/zanata-frontend/src/app/styles/antd.less
+++ b/server/zanata-frontend/src/app/styles/antd.less
@@ -1,9 +1,5 @@
-/*
-antd component overrides
-tachyons not used because these apply globally to the antd components
-*/
-
-/* LAYOUT */
+@import "~antd/dist/antd.less";
+@import "./testvars.less";
 
 .container {
   margin-right: auto;
@@ -116,8 +112,6 @@ tachyons not used because these apply globally to the antd components
   padding-right: @spacing-base;
 }
 
-/* Flex */
-
 .u-flexColumn {
   flex-direction: column;
   -webkit-flex-direction: column;
@@ -198,8 +192,6 @@ tachyons not used because these apply globally to the antd components
   -webkit-flex-grow: 1;
 }
 
-/* HEADINGS */
-
 h1 {
   color: @processing-color;
   letter-spacing: -0.05rem;
@@ -223,29 +215,21 @@ h4 {
   margin-top: 0;
 }
 
-/* TEXT */
-
 .teaser-inner div a.text-muted-bold {
   vertical-align: sub;
 }
 
-/* PAGINATION */
-
 .ant-pagination *,
 .ant-pagination-disabled * {
   border: none !important;
 }
 
-/* LINKS */
-
 // cookie consent link styling
 .cc-link {
   color: @info-color !important;
   font-weight: 600;
 }
 
-/* BUTTONS */
-
 .ant-btn {
   color: @primary-color;
   background-color: #fff;
@@ -340,8 +324,6 @@ button.ant-btn.btn-link:focus {
   background-color: #fff;
 }
 
-/* INPUTS AND DROPDOWNS */
-
 .ant-select-selection:hover {
   border: solid 2px @info-color;
 }
@@ -388,8 +370,6 @@ textarea:focus {
   border: 2px solid @info-color !important;
 }
 
-/* Text inputs */
-
 input.textInput {
   border-radius: 4px;
 }
@@ -425,8 +405,6 @@ textarea.textInput::placeholder {
   vertical-align: middle;
 }
 
-/* Editable text fields */
-
 .editable {
   border-radius: 4px;
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
@@ -639,8 +617,6 @@ textarea.textInput::placeholder {
   line-height: 2rem;
 }
 
-/* ICONS AND IMAGES */
-
 img.avatar-round {
   margin-right: @spacing-md;
   border-radius: 500px;
@@ -754,8 +730,6 @@ span.svg {
   height: 6.192rem;
 }
 
-/* TAGS */
-
 .ant-tag:hover {
   opacity: 1;
 }
@@ -769,8 +743,6 @@ span.svg {
   background-color: @info-color;
 }
 
-/* TABLES */
-
 table {
   width: 100% !important;
   font-size: 1rem;
@@ -797,8 +769,6 @@ table {
   border-bottom: 2px solid @neutral-color;
 }
 
-/* TOGGLES AND CHECKBOXES */
-
 .sortable-helper {
   z-index: 10000 !important;
 }
@@ -826,8 +796,6 @@ table {
   vertical-align: sub;
 }
 
-/* ACCORDION AND CARDS*/
-
 .ant-card {
   color: @primary-color;
 }
@@ -845,8 +813,6 @@ table {
   padding-right: 12px;
 }
 
-/* LISTS AND LIST GROUPS */
-
 .list-group-item {
   position: relative;
   display: block;
@@ -856,8 +822,6 @@ table {
   background-color: @layout-body-background;
 }
 
-/* MODALS */
-
 .ant-modal {
   color: @primary-color;
 }
@@ -874,8 +838,6 @@ table {
   color: @info-color !important;
 }
 
-/* FORMS */
-
 .ant-form-inline .ant-form-item>.ant-form-item-control-wrapper {
   vertical-align: inherit;
   width: inherit;
@@ -914,8 +876,6 @@ table {
   }
 }
 
-/* NAV */
-
 .nav-bar {
   background-color: @highlight-color;
   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.185);
@@ -975,8 +935,6 @@ table {
   display: none;
 }
 
-/* MEDIA QUERIES */
-
 @media (max-width: 575.98px) {
   .view {
     flex-direction: column;
diff --git a/server/zanata-frontend/src/app/styles/ant-theme-vars.less b/server/zanata-frontend/src/app/styles/antdvars.less
similarity index 70%
rename from server/zanata-frontend/src/app/styles/ant-theme-vars.less
rename to server/zanata-frontend/src/app/styles/antdvars.less
index 78ac8d6f1e..8e4b0ab7b1 100644
--- a/server/zanata-frontend/src/app/styles/ant-theme-vars.less
+++ b/server/zanata-frontend/src/app/styles/antdvars.less
@@ -1,6 +1,3 @@
-// ant-default-vars.less
-// Available theme variables can be found in
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 @font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 @primary-color: #546677;
@@ -16,7 +13,7 @@
 @unsure-color: #E9DF1B;
 
 @link-color: @info-color;
-@breadcrumb-link-color:@info-color;
+@breadcrumb-link-color: @info-color;
 
 @spacing-sm: 0.375rem;
 @spacing-md: 0.75rem;
@@ -26,15 +23,8 @@
 
 @border-radius-large: 6px;
 
-// Utility classes not included in Tachiyons
-//  https://github.com/tachyons-css/tachyons/blob/master/css/tachyons.css
-
-// Most utility classes required for basic layouts and styling are found here:
-// http://tachyons.io/#style
-// Detailed documentation:  http://tachyons.io/docs
-
-@checkbox-color: @info-color !important;
-@switch-color: @info-color !important;
+@checkbox-color: @info-color;
+@switch-color: @info-color;
 @layout-body-background: #fff;
 @label-color: @primary-color;
 @btn-primary-bg: @primary-color;
@@ -89,6 +79,7 @@
 .bg-unsure {
   background-color: @unsure-color;
 }
+
 .bg-error {
   background-color: @error-color;
 }
@@ -102,11 +93,11 @@
 }
 
 .bg-muted {
-  background-color: #A2B3BE;
+  background-color: @muted-color;
 }
 
 .bg-neutral {
-  background-color: #BDD4DC;
+  background-color: @neutral-color;
 }
 
 .d-inh {
diff --git a/server/zanata-frontend/src/app/styles/style.less b/server/zanata-frontend/src/app/styles/style.less
index 97aea43799..870460499b 100644
--- a/server/zanata-frontend/src/app/styles/style.less
+++ b/server/zanata-frontend/src/app/styles/style.less
@@ -14,4 +14,3 @@
 @import "./styleguide.less";
 @import "./legacy.less";
 @import "./antd.less";
-@import "./ant-theme-vars.less";