diff --git a/angular/src/app/components/accordion/accordion.component.scss b/angular/src/app/components/accordion/accordion.component.scss
index 68f274d..cf1861b 100644
--- a/angular/src/app/components/accordion/accordion.component.scss
+++ b/angular/src/app/components/accordion/accordion.component.scss
@@ -6,7 +6,7 @@
   position: relative;
   margin-bottom: 1px;
   width: 100%;
-  color: #fff;
+  color: var(--text-color);
   overflow: hidden;
   border-bottom: solid 1px #bdbdbd;
 }
diff --git a/angular/src/app/components/exit/exit.component.scss b/angular/src/app/components/exit/exit.component.scss
index c288335..32e05c6 100644
--- a/angular/src/app/components/exit/exit.component.scss
+++ b/angular/src/app/components/exit/exit.component.scss
@@ -14,9 +14,9 @@
 button {
     padding: 10px 62px;
     margin-top: 8px;
-    background-color: var(--main-color);
-    color: #fff;
+    background-color: var(--button-color);
+    color: var(--button-text-color);
     border-radius: 3px;
     border: none;
     width: calc(50% - 12px);
-}
\ No newline at end of file
+}
diff --git a/angular/src/app/components/footer-buttons/footer-buttons.component.scss b/angular/src/app/components/footer-buttons/footer-buttons.component.scss
index 67d0f72..0c417bc 100644
--- a/angular/src/app/components/footer-buttons/footer-buttons.component.scss
+++ b/angular/src/app/components/footer-buttons/footer-buttons.component.scss
@@ -15,9 +15,9 @@
       align-items: center;
       width: 60px;
       height: 60px;
-      background: var(--main-color);
-      border: solid #fff 1px !important;
-      color: #fff;
+      background: var(--text-color);
+      border: solid var(--text-color) 1px !important;
+      color: var(--text-color);
       border-radius: 100%;
       font-weight: 600;
       letter-spacing: 2px;
diff --git a/angular/src/app/components/invite-friends/invite-friends.component.scss b/angular/src/app/components/invite-friends/invite-friends.component.scss
index 1b1ffc4..71d771d 100644
--- a/angular/src/app/components/invite-friends/invite-friends.component.scss
+++ b/angular/src/app/components/invite-friends/invite-friends.component.scss
@@ -20,13 +20,13 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: #ffffff;
+      color: var(--text-color);
     }
 
     .share {
       width: 72px;
       height: 48px;
-      background: #28af49;
+      background: var(--button-color);
       padding: 8px 26px;
       border: none;
     }
diff --git a/angular/src/app/components/navbar/navbar.component.scss b/angular/src/app/components/navbar/navbar.component.scss
index 5ab2ef2..76ad2a4 100644
--- a/angular/src/app/components/navbar/navbar.component.scss
+++ b/angular/src/app/components/navbar/navbar.component.scss
@@ -8,7 +8,7 @@
   width: 100%;
   background: #231f20;
   box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
-  color: #fff;
+  color: var(--text-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/angular/src/app/components/order-info/order-info.component.scss b/angular/src/app/components/order-info/order-info.component.scss
index 81a87c0..25fcdf9 100644
--- a/angular/src/app/components/order-info/order-info.component.scss
+++ b/angular/src/app/components/order-info/order-info.component.scss
@@ -15,8 +15,7 @@
 }
 .step {
   width: 20px;
-  height: 20px;
-  background: #fff;
+  height: 20px;  
   border: 2px solid #acaca6;
   border-radius: 50%;
   transition: background 1s;
diff --git a/angular/src/app/components/social-media-buttons/social-media-buttons.component.scss b/angular/src/app/components/social-media-buttons/social-media-buttons.component.scss
index 6cd7512..af0f2ba 100644
--- a/angular/src/app/components/social-media-buttons/social-media-buttons.component.scss
+++ b/angular/src/app/components/social-media-buttons/social-media-buttons.component.scss
@@ -12,4 +12,4 @@
         align-items: center;
         justify-content: center;
     }
-}
\ No newline at end of file
+}
diff --git a/angular/src/app/pages/account/user-data/user-data.component.scss b/angular/src/app/pages/account/user-data/user-data.component.scss
index e9f78bf..d3c9f8e 100644
--- a/angular/src/app/pages/account/user-data/user-data.component.scss
+++ b/angular/src/app/pages/account/user-data/user-data.component.scss
@@ -186,4 +186,4 @@
      */
     // input[type="date"]:focus::before,
     // input[type="date"]:valid::before { display: none }
-}
\ No newline at end of file
+}
diff --git a/angular/src/app/pages/guest-card/guest-card.component.scss b/angular/src/app/pages/guest-card/guest-card.component.scss
index f0e8288..7d3683e 100644
--- a/angular/src/app/pages/guest-card/guest-card.component.scss
+++ b/angular/src/app/pages/guest-card/guest-card.component.scss
@@ -29,7 +29,7 @@
 	}
 
 	& p {
-	    color: #28AF49;
+	    color: var(--button-color);
 	}
 
 	p.top-info__bonus{
@@ -200,7 +200,7 @@
 
     &__loyalty-program {
       text-align: center;
-      color: #28AF49;
+      color: #7F2061;
       font-style: normal;
       font-weight: bold;
       font-size: 12px;
diff --git a/angular/src/app/pages/not-found/not-found.component.scss b/angular/src/app/pages/not-found/not-found.component.scss
index f4a3750..4f4e20e 100644
--- a/angular/src/app/pages/not-found/not-found.component.scss
+++ b/angular/src/app/pages/not-found/not-found.component.scss
@@ -13,8 +13,8 @@
         font-size: 14px;
       }
       button {
-        background-color: var(--main-color);
-        color: #fff;
+        background-color: var(--button-color);
+        color: var(--text-color);
         border-radius: 8px;
         display: flex;
         justify-content: center;
diff --git a/angular/src/app/presentation-options/default-option/components/accordion/accordion.component.scss b/angular/src/app/presentation-options/default-option/components/accordion/accordion.component.scss
index 68f274d..4997d40 100644
--- a/angular/src/app/presentation-options/default-option/components/accordion/accordion.component.scss
+++ b/angular/src/app/presentation-options/default-option/components/accordion/accordion.component.scss
@@ -6,7 +6,7 @@
   position: relative;
   margin-bottom: 1px;
   width: 100%;
-  color: #fff;
+  color: var(--text-color);
   overflow: hidden;
   border-bottom: solid 1px #bdbdbd;
 }
@@ -18,8 +18,7 @@
 .tab label {
   display: block;
   padding: 20px 26px;
-  position: relative;
-  background: #ffffff00;
+  position: relative;  
   font-weight: 400;
   font-size: 12px;
   line-height: 14px;
@@ -33,8 +32,7 @@
 //   }
 .tab-content {
   max-height: 0;
-  overflow: hidden;
-  background: #292929;
+  overflow: hidden;  
   -webkit-transition: all 0.35s;
   -o-transition: all 0.35s;
   transition: all 0.35s;
diff --git a/angular/src/app/presentation-options/default-option/components/invite-friends/invite-friends.component.scss b/angular/src/app/presentation-options/default-option/components/invite-friends/invite-friends.component.scss
index 1b1ffc4..71d771d 100644
--- a/angular/src/app/presentation-options/default-option/components/invite-friends/invite-friends.component.scss
+++ b/angular/src/app/presentation-options/default-option/components/invite-friends/invite-friends.component.scss
@@ -20,13 +20,13 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: #ffffff;
+      color: var(--text-color);
     }
 
     .share {
       width: 72px;
       height: 48px;
-      background: #28af49;
+      background: var(--button-color);
       padding: 8px 26px;
       border: none;
     }
diff --git a/angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss b/angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss
index de73367..6b2ec43 100644
--- a/angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss
+++ b/angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss
@@ -16,7 +16,7 @@
     font-size: 12px;
     line-height: 16px;
     span {
-      color: #828282;
+      color: var(--text-color_1);
     }
     .flex {
       display: flex;
@@ -31,7 +31,7 @@
     width: 100%;
     padding: 12px;
     text-align: center;
-    border: 2px solid #28af49;
+    border: 2px solid var(--button-color);
     border-radius: 6px;
     font-style: normal;
     font-weight: 700;
@@ -39,7 +39,7 @@
     line-height: 22px;
     letter-spacing: -0.408px;
     background-color: transparent;
-    color: #28af49;
+    color: var(--button-color);
   }
 
   .info {
@@ -47,6 +47,6 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-color_1);
   }
 }
diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss
index 4645b6a..0d6cf27 100644
--- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss
+++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss
@@ -6,9 +6,8 @@
   box-sizing: border-box;
   padding: 12px 16px;
   width: 100%;
-  background: #231f20;
-  box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
-  color: #fff;
+  background: var(--button-color);
+  color: var(--button-text-color);
   display: grid;
   justify-content: space-between;
   grid-template-columns: auto auto auto;
diff --git a/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss b/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss
index 6cd7512..109b400 100644
--- a/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss
+++ b/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss
@@ -7,9 +7,9 @@
         width: 48px;
         height: 48px;
         border-radius: 100%;
-        background: #333333;
+        background: var(--button-color);
         display: flex;
         align-items: center;
         justify-content: center;
     }
-}
\ No newline at end of file
+}
diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
index 3a2fa23..2a24b0a 100644
--- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
+++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
@@ -24,7 +24,7 @@
       }
 
       & p {
-        color: #28af49;
+        color: var(--button-color);
       }
 
       p.top-info__bonus {
@@ -35,8 +35,7 @@
     &__qr {
       margin: 10px;
       padding: 5px;
-      width: fit-content;
-      background-color: #ffffff;
+      width: fit-content;      
       // background-image: linear-gradient(
       //     #008251 33%,
       //     transparent 0px,
@@ -193,7 +192,7 @@
 
     &__loyalty-program {
       text-align: center;
-      color: #28af49;
+      color: var(--button-color);
       font-style: normal;
       font-weight: bold;
       font-size: 12px;
diff --git a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss
index 765c9a7..004d3a6 100644
--- a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss
+++ b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss
@@ -54,7 +54,7 @@
       line-height: 17px;
       text-align: center;
       span {
-        color: #13a538;
+        color: var(--button-color);
       }
     }
 
@@ -67,7 +67,7 @@
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: #6a737c;
+        color: var(--text-color_1);
         text-align: left;
         position: absolute;
         top: 10px;
@@ -77,12 +77,12 @@
       input {
         width: 100%;
         padding: 24px 16px 8px;
-        background-color: #252323;
+        
         margin-bottom: 16px;
         border: none;
-        border-top: solid #6a737c 1px;
-        border-bottom: solid #6a737c 1px;
-        color: #6a737c;
+        border-top: solid var(--text-color_1) 1px;
+        border-bottom: solid var(--text-color_1) 1px;
+        color: var(--text-color_1);
         font-style: normal;
         font-weight: 400;
         font-size: 22px;
@@ -94,7 +94,7 @@
       height: 46px;
       width: calc(100% - 32px);
       padding: 10px 24px;
-      background: #28af49;
+      background: var(--button-color);
       border-radius: 6px;
       display: flex;
       flex-direction: row;
@@ -102,13 +102,14 @@
       align-items: center;
       border: none;
       letter-spacing: -0.408px;
-      color: #ffffff;
+      color: var(--button-text-color);
       font-style: normal;
       font-weight: 700;
       font-size: 17px;
       line-height: 22px;
       &:disabled {
-        background-color: #344a3a;
+	  color: var(--button-text-color_disabled);
+          background-color: var(--button-color_disabled);
       }
     }
   }
@@ -143,15 +144,15 @@
         align-items: center;
         justify-content: center;
         height: 42px;
-        width: 42px;
+        width: 42px;	
         border-radius: 6px;
         // box-shadow: 0 0 6px 1px hsla(240, 54%, 61%, 0.2);
         overflow: hidden;
         will-change: transform;
       }
       .box:focus-within {
-        box-shadow: 0 0 6px 1px rgba($color: #28af49, $alpha: 0.2),
-          0 0 0 2px rgba($color: #28af49, $alpha: 0.6);
+        box-shadow: 0 0 6px 1px rgba(rgb(127, 32, 97), 0.2),
+          0 0 0 2px rgba(rgb(127, 32, 97), 0.6);
       }
       .box::before,
       .box::after {
@@ -185,13 +186,13 @@
         outline: 0;
         font-size: 25.21px;
         line-height: 42px;
-        color: #fff;
+        color: var(--text-color);
         background-color: transparent;
         text-align: center;
         z-index: 100;
       }
       .field::placeholder {
-        color: #fff;
+        color: var(--text-color);
       }
     }
   }
diff --git a/angular/src/app/presentation-options/first-option/components/accordion/accordion.component.scss b/angular/src/app/presentation-options/first-option/components/accordion/accordion.component.scss
index 68f274d..cf1861b 100644
--- a/angular/src/app/presentation-options/first-option/components/accordion/accordion.component.scss
+++ b/angular/src/app/presentation-options/first-option/components/accordion/accordion.component.scss
@@ -6,7 +6,7 @@
   position: relative;
   margin-bottom: 1px;
   width: 100%;
-  color: #fff;
+  color: var(--text-color);
   overflow: hidden;
   border-bottom: solid 1px #bdbdbd;
 }
diff --git a/angular/src/app/presentation-options/first-option/components/invite-friends/invite-friends.component.scss b/angular/src/app/presentation-options/first-option/components/invite-friends/invite-friends.component.scss
index 0ff76c3..8a8ca65 100644
--- a/angular/src/app/presentation-options/first-option/components/invite-friends/invite-friends.component.scss
+++ b/angular/src/app/presentation-options/first-option/components/invite-friends/invite-friends.component.scss
@@ -19,13 +19,13 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: #ffffff;
+      color: var(--text-color);
     }
 
     .share {
       width: 72px;
       height: 48px;
-      background: #28af49;
+      background: var(--button-color);
       padding: 8px 26px;
       border: none;
     }
diff --git a/angular/src/app/presentation-options/first-option/components/last-order/last-order.component.scss b/angular/src/app/presentation-options/first-option/components/last-order/last-order.component.scss
index 4c5a2c0..5a265b9 100644
--- a/angular/src/app/presentation-options/first-option/components/last-order/last-order.component.scss
+++ b/angular/src/app/presentation-options/first-option/components/last-order/last-order.component.scss
@@ -30,7 +30,7 @@
     width: 100%;
     padding: 12px;
     text-align: center;
-    border: 2px solid #28af49;
+    border: 2px solid var(--button-color);
     border-radius: 6px;
     font-style: normal;
     font-weight: 700;
@@ -38,7 +38,7 @@
     line-height: 22px;
     letter-spacing: -0.408px;
     background-color: transparent;
-    color: #28af49;
+    color: var(--button-color);
   }
 
   .info {
diff --git a/angular/src/app/presentation-options/first-option/components/navbar/navbar.component.scss b/angular/src/app/presentation-options/first-option/components/navbar/navbar.component.scss
index dcd7a52..54ac6d4 100644
--- a/angular/src/app/presentation-options/first-option/components/navbar/navbar.component.scss
+++ b/angular/src/app/presentation-options/first-option/components/navbar/navbar.component.scss
@@ -6,9 +6,9 @@
   box-sizing: border-box;
   padding: 12px 16px;
   width: 100%;
-  background: #231f20;
+  background: var(--background-color);
   box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
-  color: #fff;
+  color: var(--text-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/angular/src/app/presentation-options/first-option/pages/login/login.component.scss b/angular/src/app/presentation-options/first-option/pages/login/login.component.scss
index c0c7d67..a8528f3 100644
--- a/angular/src/app/presentation-options/first-option/pages/login/login.component.scss
+++ b/angular/src/app/presentation-options/first-option/pages/login/login.component.scss
@@ -95,7 +95,7 @@
       height: 46px;
       width: calc(100% - 32px);
       padding: 10px 24px;
-      background: #28af49;
+      background: var(--button-color);
       border-radius: 6px;
       display: flex;
       flex-direction: row;
@@ -103,13 +103,13 @@
       align-items: center;
       border: none;
       letter-spacing: -0.408px;
-      color: #ffffff;
+      color: var(--text-color);
       font-style: normal;
       font-weight: 700;
       font-size: 17px;
       line-height: 22px;
       &:disabled {
-        background-color: #344a3a;
+        background-color: var(--button-color_disabled);
       }
     }
   }
@@ -186,13 +186,13 @@
         outline: 0;
         font-size: 25.21px;
         line-height: 42px;
-        color: #fff;
+        color: var(--text-color);
         background-color: transparent;
         text-align: center;
         z-index: 100;
       }
       .field::placeholder {
-        color: #fff;
+        color: var(--text-color);
       }
     }
   }
diff --git a/angular/src/app/services/wp-json.service.ts b/angular/src/app/services/wp-json.service.ts
index 20f973c..c45d237 100644
--- a/angular/src/app/services/wp-json.service.ts
+++ b/angular/src/app/services/wp-json.service.ts
@@ -45,7 +45,8 @@ export class WpJsonService {
   getCustomerInfo(systemId: string, token: string, url: string): Observable<any> {
     return this._request(`customer_info/${systemId}/${token}/`, 'GET', null, false, url).pipe(
       switchMap((response) => {
-        if (response?.customer_info?.errorCode !== 'Customer_CustomerNotFound') {
+				// TODO: typescript compile optional chaining ('response?.customer_info?.errorCode') without check ('response.customer_info.errorCode')
+        if (response && response.customer_info && response.customer_info.errorCode !== 'Customer_CustomerNotFound') {
           return of(response)
         } else {
           return this.newCustomer(systemId, token, url).pipe(
diff --git a/angular/src/styles.scss b/angular/src/styles.scss
index 2a03824..e34ead8 100644
--- a/angular/src/styles.scss
+++ b/angular/src/styles.scss
@@ -1,7 +1,7 @@
 // Сброс стилей
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
-html{height:100%;color:#fff;}
+html{height:100%;}
 body{line-height:1}
 ol,ul{list-style:none}
 blockquote,q{quotes:none}
@@ -12,8 +12,7 @@ table{border-collapse:collapse;border-spacing:0}
 // @import url('https://fonts.cdnfonts.com/css/gotham-pro');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 
-* {
-    // font-family: 'Gotham Pro';
+* {    
     font-family: 'Montserrat', sans-serif;
 }
 
@@ -24,23 +23,52 @@ table{border-collapse:collapse;border-spacing:0}
 
 
 body {
-    background-color: #231F20;
+    background-color: var(--background-color);
 }
 
 :root {
     --main-color: #00b26b;
     --main-border-radius: 35px;
+    --background-color: #ffffff;
+    
+    --text-color: #222222;
+    --text-color_1: #666666;
+    
+    --button-color: #7F2061;
+    --button-color_disabled: #4a0d37;
+    
+    --button-text-color: #ffffff;
+    --button-text-color_disabled: #cccccc;
 }
 
 hr {
     width: 100%;
-    border-top: 1px solid#BDBDBD;
+    border-top: 1px solid #BDBDBD;
+}
+
+.mat-bottom-sheet-container {
+    box-shadow: 0px 8px 10px -5px rgba(255, 255, 255, 0.2), 0px 16px 24px 2px rgba(255, 255, 255, 0.14), 0px 6px 30px 5px rgba(255, 255, 255, 0.12);
+    background: var(--background-color);
+    color: var(--text-color);
+}
+
+
+.mat-form-field-appearance-outline .mat-form-field-outline {
+    color: var(--button-color_disabled) !important;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-outline {
+    color: var(--button-color) !important;
 }
 
 .mat-form-field-wrapper {
     padding: 0;
 }
 
+.mat-progress-spinner circle, .mat-spinner circle {
+    stroke: var(--button-color);
+}
+
 .mat-form-field-outline-start, .mat-form-field-outline-end {
     border-radius: 0 !important;
 }
@@ -52,11 +80,15 @@ hr {
 }
 
 .mat-focused .mat-form-field-outline > div {
-    border-color: #28af49;
+    border-color: var(--button-color);
+}
+
+.mat-form-field-label {
+    color: var(--text-color_1) !important;
 }
 
 .mat-focused .mat-form-field-label {
-    color: #fff !important;
+    color: var(--text-color) !important;
 }
 
 .mat-form-field-invalid .mat-form-field-outline > div {
@@ -64,7 +96,7 @@ hr {
 }
 
 .country-list-button {
-    color: #fff !important;
+    color: var(--text-color) !important;
 }
 
 .mat-menu-panel {
@@ -82,7 +114,7 @@ hr {
 }
 
 .country-selector-code {
-    color: #fff;
+    color: var(--text-color);
 }
 
 
@@ -102,8 +134,8 @@ qr-code canvas {
 
 mark {
     padding: 4px;
-    background: #009688;
-    color: #fff;
+    background: var(--background-color);
+    color: bar(--text-color);
 }
 
 ::-webkit-scrollbar {
@@ -115,10 +147,10 @@ button {
 }
 
 .p-toast-message-custom {
-    background-color: #fff;
+    background-color: var(--background-color);
     border: solid var(--main-color);
     border-width: 0 0 0 6px;
-    color: #000;
+    color: var(--text-color);
     .p-toast-icon-close {
         color: var(--main-color);
     }