diff --git a/src/popup/components/Locations/Reload.tsx b/src/popup/components/Locations/Reload.tsx
index e9ea64ac6..c90b1f401 100644
--- a/src/popup/components/Locations/Reload.tsx
+++ b/src/popup/components/Locations/Reload.tsx
@@ -29,6 +29,7 @@ export const Reload = observer(() => {
     const iconClass = cn(
         'icon',
         'icon--button',
+        'endpoints__reload-icon',
         { 'endpoints__reload-icon--active': arePingsRecalculating },
     );
 
diff --git a/src/popup/components/Locations/Search.tsx b/src/popup/components/Locations/Search.tsx
index de591d682..389d04034 100644
--- a/src/popup/components/Locations/Search.tsx
+++ b/src/popup/components/Locations/Search.tsx
@@ -21,7 +21,7 @@ export const Search = ({ value, handleChange, handleClear }: SearchProps) => {
         <div className="endpoints__search">
             <input
                 autoFocus
-                className="endpoints__search-in"
+                className="form__input endpoints__search-in"
                 type="text"
                 placeholder={translator.getMessage('endpoints_search')}
                 value={value}
diff --git a/src/popup/components/Locations/endpoints.pcss b/src/popup/components/Locations/endpoints.pcss
index 80753a354..d6129d4d4 100644
--- a/src/popup/components/Locations/endpoints.pcss
+++ b/src/popup/components/Locations/endpoints.pcss
@@ -7,7 +7,7 @@
     height: 100%;
     padding-top: 16px;
     transition: opacity var(--t3);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
     overflow: hidden;
 
     /* TODO: Remove it when popup design will be available in wider screens. */
@@ -54,6 +54,7 @@
         }
 
         &-icon {
+            color: var(--stroke-icons-product-icons-default);
 
             &--active {
                 pointer-events: none;
@@ -68,17 +69,7 @@
     }
 
     &__search-in {
-        width: 100%;
-        padding: 16px 45px 16px 15px;
-        font-size: 16px;
-        border: 0;
-        border-radius: 8px;
-        background-color: var(--endpoint-gray-background);
-        color: var(--gray-base);
-
-        &:focus {
-            outline: 1px solid var(--grayd8);
-        }
+        padding: 16px 45px 16px 16px;
     }
 
     &__cross {
diff --git a/src/popup/components/Ping/ping.pcss b/src/popup/components/Ping/ping.pcss
index f5daba00a..2031a47e9 100644
--- a/src/popup/components/Ping/ping.pcss
+++ b/src/popup/components/Ping/ping.pcss
@@ -6,10 +6,10 @@
     text-align: right;
 
     &--success {
-        color: var(--green700);
+        color: var(--text-links-link-default);
     }
 
     &--warning {
-        color: var(--orange);
+        color: var(--text-links-attention-link-default);
     }
 }
diff --git a/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss b/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss
index f4995562e..d15e9e9b6 100644
--- a/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss
+++ b/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss
@@ -13,7 +13,7 @@
     cursor: pointer;
     border: 0;
     border-bottom: var(--endpoint-border-width) solid var(--grayd8);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
     transition: var(--t3) background-color;
 
     &:last-child {
@@ -48,6 +48,7 @@
 
         .icon--arrow {
             margin-left: 16px;
+            color: var(--stroke-icons-gray-icons-default);
         }
     }
 
@@ -87,6 +88,7 @@
         position: relative;
         font-size: 16px;
         line-height: 21px;
+        color: var(--text-main-text-main-default);
 
         &--selected {
             font-weight: 700;
@@ -98,7 +100,7 @@
     }
 
     &__desc {
-        color: var(--gray88);
+        color: var(--text-description-description-default);
     }
 
     &__limited-speed {
diff --git a/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx b/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx
index 909d35095..a44a88667 100644
--- a/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx
+++ b/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx
@@ -37,7 +37,7 @@ export const ExclusionsScreen = observer(() => {
                 <button
                     onClick={onBtnClick}
                     type="button"
-                    className="button button--medium button--green"
+                    className="button button--medium button--main button--green"
                 >
                     {reactTranslator.getMessage('popup_settings_enable_vpn_short')}
                 </button>
diff --git a/src/popup/components/Settings/GlobalControl/GlobalControl.tsx b/src/popup/components/Settings/GlobalControl/GlobalControl.tsx
index 8d53f1cc4..1e22b01ec 100644
--- a/src/popup/components/Settings/GlobalControl/GlobalControl.tsx
+++ b/src/popup/components/Settings/GlobalControl/GlobalControl.tsx
@@ -84,7 +84,7 @@ export const GlobalControl = observer(() => {
         <>
             <button
                 type="button"
-                className={`button button--medium ${buttonState.className}`}
+                className={`button button--medium button--main ${buttonState.className}`}
                 onClick={buttonState.handler}
             >
                 {buttonState.message}
diff --git a/src/popup/components/SkeletonLoading/SkeletonLoading.tsx b/src/popup/components/SkeletonLoading/SkeletonLoading.tsx
index 35cd7cdc3..b6c31d7d4 100644
--- a/src/popup/components/SkeletonLoading/SkeletonLoading.tsx
+++ b/src/popup/components/SkeletonLoading/SkeletonLoading.tsx
@@ -28,7 +28,7 @@ export const SkeletonLoading = () => {
                     <button
                         type="button"
                         tabIndex={-1}
-                        className="button button--medium button--green button--green--inactive"
+                        className="button button--medium button--green button--green--inactive button--main"
                     >
                         {reactTranslator.getMessage('settings_connect')}
                     </button>
diff --git a/src/popup/components/ui/Icons.tsx b/src/popup/components/ui/Icons.tsx
index ce74a0dee..bf850b109 100644
--- a/src/popup/components/ui/Icons.tsx
+++ b/src/popup/components/ui/Icons.tsx
@@ -10,7 +10,7 @@ export const Icons = () => (
         </symbol>
 
         <svg id="right-arrow" width="8" height="14" viewBox="0 0 8 14" fill="none">
-            <path d="M1 13L7 7L1 1" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M1 13L7 7L1 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
         <symbol id="options" viewBox="0 0 24 24">
@@ -98,8 +98,8 @@ export const Icons = () => (
         </symbol>
 
         <symbol id="reload" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 25">
-            <path d="M6 7.5c3.6-5.2 13.5-3.5 14 5V14M18 17.5c-3.6 5.2-13.5 3.5-14-5v-1" stroke="var(--green700)" strokeWidth="1.5" strokeLinecap="round" />
-            <path d="m22 12.5-2 2-2-2M2 12.5l2-2 2 2" stroke="var(--green700)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 7.5c3.6-5.2 13.5-3.5 14 5V14M18 17.5c-3.6 5.2-13.5 3.5-14-5v-1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="m22 12.5-2 2-2-2M2 12.5l2-2 2 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </symbol>
 
         <symbol id="closed_eye" viewBox="0 0 24 24">
diff --git a/src/popup/styles/button.pcss b/src/popup/styles/button.pcss
index 1deac4289..3a021e0c7 100644
--- a/src/popup/styles/button.pcss
+++ b/src/popup/styles/button.pcss
@@ -39,13 +39,6 @@ button,
         color: var(--white);
     }
 
-    &--inline {
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
     &--inline-green {
         color: var(--green74);
     }
@@ -81,11 +74,15 @@ button,
 
     &--green {
         color: #fff;
-        background-color: var(--green700);
+        background-color: var(--fills-buttons-main-button-default);
         transition: var(--t3) background-color;
 
         &:hover {
-            background-color: var(--green900);
+            background-color: var(--fills-buttons-main-button-hovered);
+        }
+
+        &:active {
+            background-color: var(--fills-buttons-main-button-pressed);
         }
 
         &--inactive {
@@ -121,10 +118,19 @@ button,
         display: inline;
         padding: 0;
         text-decoration: underline;
-        color: var(--green700);
+        color: var(--text-links-link-default);
         border: 0;
         appearance: none;
         border-radius: 0;
+        transition: var(--t3) color;
+
+        &:hover {
+            color: var(--text-links-link-hovered);
+        }
+
+        &:active {
+            color: var(--text-links-link-pressed);
+        }
     }
 
     &--green-gradient {
@@ -149,8 +155,8 @@ button,
     }
 
     &--outline-secondary {
-        border-color: var(--gray88);
-        color: var(--gray88);
+        border-color: var(--stroke-buttons-secondary-button-default);
+        color: var(--text-main-text-main-default);
         transition: var(--t3) background-color;
 
         &:hover {
@@ -204,4 +210,8 @@ button,
         font-size: 16px;
         line-height: 21px;
     }
+
+    &--main {
+        height: 56px;
+    }
 }
diff --git a/src/popup/styles/common.pcss b/src/popup/styles/common.pcss
index d2ae17da6..8add6f27a 100644
--- a/src/popup/styles/common.pcss
+++ b/src/popup/styles/common.pcss
@@ -26,7 +26,7 @@ body {
     font-size: 1.6rem;
     line-height: 1.4;
     color: var(--gray-base);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
 
     /* TODO: Remove it when popup design will be available in wider screens. */
     .android & {
diff --git a/src/popup/styles/form.pcss b/src/popup/styles/form.pcss
index 4b160e144..2f6d33d77 100644
--- a/src/popup/styles/form.pcss
+++ b/src/popup/styles/form.pcss
@@ -32,8 +32,8 @@
         display: block;
         font-size: 14px;
         text-align: left;
-        line-height: 18px;
-        color: var(--gray88);
+        line-height: 1.3;
+        color: var(--text-labels-labels-default);
         margin-bottom: 8px;
     }
 
@@ -59,26 +59,23 @@
         font-family: var(--font-stack);
         font-size: 16px;
         text-align: left;
-        border: 1px solid var(--grayf3);
+        border: 1px solid var(--stroke-inputs-inactive-input-stroke-default);
         border-radius: 8px;
-        color: var(--gray-base);
-        height: 50px;
+        color: var(--text-main-text-main-default);
+        height: 56px;
         padding: 16px;
         box-shadow: none;
-        background-color: var(--grayf3);
-        caret-color: var(--gray-base);
+        background-color: var(--fills-inputs-input-background-default);
+        caret-color: var(--text-main-text-main-default);
         overflow: hidden;
         text-overflow: ellipsis;
+        line-height: 1.3;
+        outline: none;
 
         &--password {
             padding: 16px 42px 16px 16px;
         }
 
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--grayf7);
-            border: 1px solid var(--grayf7);
-        }
-
         &:-webkit-autofill:focus,
         &:focus:-webkit-autofill {
             background-color: var(--white);
@@ -91,13 +88,13 @@
 
         &::placeholder {
             font-size: 16px;
-            color: var(--gray-base);
-            opacity: 0.5;
+            line-height: 1.3;
+            color: var(--text-placeholder-placeholder-default);
         }
 
         &:focus,
         &:active {
-            border-color: var(--grayd8);
+            border-color: var(--stroke-inputs-active-input-stroke-default);
         }
 
         &--error,
diff --git a/src/popup/styles/vars.pcss b/src/popup/styles/vars.pcss
index b68528349..fd1fa3086 100644
--- a/src/popup/styles/vars.pcss
+++ b/src/popup/styles/vars.pcss
@@ -60,14 +60,49 @@
     --endpoint-gray-background: #f3f3f3;
 
     /* Base Colors */
+    --gray-0: #FFFFFF;
     --gray-10: #F6F6F6;
     --gray-20: #E4E4E4;
+    --gray-30: #D2D2D2;
+    --gray-40: #C0C0C0;
+    --gray-50: #A4A4A4;
+    --gray-60: #7F7F7F;
     --gray-70: #5B5B5B;
     --gray-80: #3D3D3D;
+    --gray-90: #1F1F1F;
+    --product-primary-30: #B2CC9E;
+    --product-primary-50: #74A352;
+    --product-primary-60: #68924A;
+    --product-primary-70: #5C8141;
+    --orange-50: #D58500;
 
-    /* Dynamic Colors */
+    /* Text */
+    --text-main-text-main-default: var(--gray-80);
+    --text-description-description-default: var(--gray-60);
+    --text-labels-labels-default: var(--gray-70);
+    --text-placeholder-placeholder-default: var(--gray-50);
+    --text-links-link-default: var(--product-primary-50);
+    --text-links-link-hovered: var(--product-primary-60);
+    --text-links-link-pressed: var(--product-primary-70);
+    --text-links-link-disabled: var(--product-primary-30);
+    --text-links-attention-link-default: var(--orange-50);
+
+    /* Fills */
+    --fills-backgrounds-page-background-default: var(--gray-0);
     --fills-backgrounds-page-background-hovered: var(--gray-10);
     --fills-backgrounds-page-background-pressed: var(--gray-20);
+    --fills-buttons-main-button-default: var(--product-primary-50);
+    --fills-buttons-main-button-hovered: var(--product-primary-60);
+    --fills-buttons-main-button-pressed: var(--product-primary-70);
+    --fills-buttons-main-button-disabled: var(--product-primary-30);
+    --fills-inputs-input-background-default: var(--gray-10);
+
+    /* Stroke */
+    --stroke-icons-gray-icons-default: var(--gray-60);
+    --stroke-icons-product-icons-default: var(--product-primary-50);
+    --stroke-buttons-secondary-button-default: var(--gray-80);
+    --stroke-inputs-inactive-input-stroke-default: var(--gray-20);
+    --stroke-inputs-active-input-stroke-default: var(--gray-50);
 
     @media (prefers-color-scheme: dark) {
         --white: #131313;
@@ -93,9 +128,21 @@
         --dark13: #eeeeee;
         --endpoint-gray-background: #4d4d4d;
 
-        /* Dynamic Colors */
+        /* Text */
+        --text-main-text-main-default: var(--gray-20);
+        --text-description-description-default: var(--gray-40);
+        --text-labels-labels-default: var(--gray-30);
+
+        /* Fills */
+        --fills-backgrounds-page-background-default: var(--gray-90);
         --fills-backgrounds-page-background-hovered: var(--gray-80);
         --fills-backgrounds-page-background-pressed: var(--gray-70);
+        --fills-inputs-input-background-default: var(--gray-80);
+
+        /* Stroke */
+        --stroke-icons-gray-icons-default: var(--gray-40);
+        --stroke-buttons-secondary-button-default: var(--gray-20);
+        --stroke-inputs-inactive-input-stroke-default: var(--gray-80);
     }
 }
 
@@ -123,9 +170,21 @@
     --dark13: #131313;
     --endpoint-gray-background: #f3f3f3;
 
-    /* Dynamic Colors */
+    /* Text */
+    --text-main-text-main-default: var(--gray-80);
+    --text-description-description-default: var(--gray-60);
+    --text-labels-labels-default: var(--gray-70);
+
+    /* Fills */
+    --fills-backgrounds-page-background-default: var(--gray-0);
     --fills-backgrounds-page-background-hovered: var(--gray-10);
     --fills-backgrounds-page-background-pressed: var(--gray-20);
+    --fills-inputs-input-background-default: var(--gray-10);
+
+    /* Stroke */
+    --stroke-icons-gray-icons-default: var(--gray-60);
+    --stroke-buttons-secondary-button-default: var(--gray-80);
+    --stroke-inputs-inactive-input-stroke-default: var(--gray-20);
 }
 
 .dark-mode {
@@ -152,9 +211,21 @@
     --dark13: #eeeeee;
     --endpoint-gray-background: #4d4d4d;
 
-    /* Dynamic Colors */
+    /* Text */
+    --text-main-text-main-default: var(--gray-20);
+    --text-description-description-default: var(--gray-40);
+    --text-labels-labels-default: var(--gray-30);
+
+    /* Fills */
+    --fills-backgrounds-page-background-default: var(--gray-90);
     --fills-backgrounds-page-background-hovered: var(--gray-80);
     --fills-backgrounds-page-background-pressed: var(--gray-70);
+    --fills-inputs-input-background-default: var(--gray-80);
+
+    /* Stroke */
+    --stroke-icons-gray-icons-default: var(--gray-40);
+    --stroke-buttons-secondary-button-default: var(--gray-20);
+    --stroke-inputs-inactive-input-stroke-default: var(--gray-80);
 }
 
 .android {