diff --git a/package.json b/package.json
index 1fb01703..2b08c852 100644
--- a/package.json
+++ b/package.json
@@ -48,27 +48,27 @@
     "@ngrx/effects": "^10.0.1",
     "@ngrx/entity": "^10.0.1",
     "@ngrx/store": "^10.0.1",
+    "@ngu/carousel": "^3.0.1",
     "@nguniversal/builders": "^14.0.3",
     "@nguniversal/common": "^14.0.3",
     "@nguniversal/express-engine": "^14.0.3",
     "@ngx-lite/input-star-rating": "^0.3.7",
     "@ngx-lite/json-ld": "^0.6.4",
-    "ngx-progressbar": "^6.0.3",
-    "@ngu/carousel": "^3.0.1",
     "@types/crypto-js": "^3.1.40",
     "@types/express": "^4.17.9",
     "angular-svg-round-progressbar": "^5.0.2",
     "bootstrap": "4.1.3",
     "crypto-js": "^3.1.9-1",
-    "jsonapi-deserializer": "^0.1.1",
     "express": "^4.17.1",
     "fibers": "^4.0.2",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "immutable": "^4.0.0-rc.12",
+    "jsonapi-deserializer": "^0.1.1",
     "ng-lazyload-image": "^7.0.1",
     "ng2-ui-auth": "^9.2.0",
     "ngx-bootstrap": "^6.2.0",
+    "ngx-progressbar": "^6.0.3",
     "ngx-toastr": "^16.0.2",
     "picturefill": "^3.0.3",
     "reselect": "^4.0.0",
@@ -94,6 +94,7 @@
     "@types/morris.js": "~0.5.7",
     "@types/node": "^12.11.7",
     "@types/scriptjs": "^0.0.2",
+    "autoprefixer": "^10.4.16",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -104,9 +105,11 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "nswag": "^11.20.1",
+    "postcss": "^8.4.31",
     "protractor": "~7.0.0",
     "source-map-explorer": "^1.6.0",
     "sw-precache": "^5.2.1",
+    "tailwindcss": "^3.3.5",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
     "typescript": "4.9.5",
@@ -116,4 +119,4 @@
   "main": "index.js",
   "repository": "git@github.com:aviabird/angularspree.git",
   "author": "Pankaj Rawat <pankajrawat19sept@gmail.com>"
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
deleted file mode 100644
index 1baaefe0..00000000
--- a/src/app/app.component.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-@import '../app/shared/scss/_selected_theme_variables';
-:host {
-  min-height: 100vh;
-  display: block;
-  .main-body {
-    margin-top: 50px;
-  }
-}
-
-.issearchopen :host ::ng-deep .main-body {
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    margin-top: 48px;
-  }
-}
-
-:host ::ng-deep.ngx-input-star-rating__btn {
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  width: 26px;
-  height: 8px;
-}
-
-:host ::ng-deep.ngx-input-star-rating__btn svg {
-  position: absolute;
-  top: -12px;
-  left: 5px;
-}
-
-:host ::ng-deep.ngx-input-star-rating__btn {
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  width: 26px;
-  height: 8px;
-}
-
-:host ::ng-deep.ngx-input-star-rating__btn svg {
-  position: absolute;
-  top: -12px;
-  left: 5px;
-}
-
-:host ::ng-deepngx-input-star-rating {
-  display: inline-block;
-  --color-star-default: #ddd;
-  --color-star-highlight: #fe9700;
-}
-
-:host ::ng-deepngx-input-star-rating {
-  display: inline-block;
-  --color-star-default: #ddd;
-  --color-star-highlight: #fe9700;
-}
-
-:host ::ng-deep.themebtnprimary {
-  background: darken($theme-action-color, 30);
-  &:focus {
-    @include gradient-y(
-      $start-color: $theme-action-color,
-      $end-color: darken($theme-action-color, 40),
-      $start-percent: 0%,
-      $end-percent: 45%
-    );
-  }
-  @include gradient-y(
-    $start-color: $theme-action-color,
-    $end-color: darken($theme-action-color, 40),
-    $start-percent: 0%,
-    $end-percent: 45%
-  );
-  color: $white;
-  border: 1px solid darken($theme-action-color, 55);
-  border-radius: 0.4rem;
-  padding: 0.5rem;
-  font-weight: 300 !important;
-  box-shadow: 0px 2px 4.6px darken($theme-action-color, 25);
-  width: 100%;
-  color: $white;
-  // font-family: "Roboto Regular";
-  font-size: 1.4em;
-  margin: 10px auto;
-  text-transform: capitalize;
-}
-
-:host ::ng-deep.themebtnprimarybasic {
-  &:focus {
-    @include gradient-y(
-      $start-color: $theme-action-color,
-      $end-color: darken($theme-action-color, 40),
-      $start-percent: 0%,
-      $end-percent: 45%
-    );
-  }
-  text-transform: capitalize;
-  color: $white;
-  border: 1px solid darken($theme-action-color, 55);
-  box-shadow: 0px 2px 4.6px darken($theme-action-color, 25);
-  &:focus {
-    @include gradient-y(
-      $start-color: $theme-action-color,
-      $end-color: darken($theme-action-color, 40),
-      $start-percent: 0%,
-      $end-percent: 45%
-    );
-  }
-  @include gradient-y(
-    $start-color: $theme-action-color,
-    $end-color: darken($theme-action-color, 40),
-    $start-percent: 0%,
-    $end-percent: 45%
-  );
-}
-
-:host ::ng-deep.themebtnprimarysade {
-  @include gradient-y(
-    $start-color: $theme-action-color,
-    $end-color: darken($theme-action-color, 30),
-    $start-percent: 0%,
-    $end-percent: 95%
-  );
-}
-
-:host ::ng-deep.themebtndisable {
-  @include gradient-y(
-    $start-color: $gray-200,
-    $end-color: $gray-600,
-    $start-percent: 0%,
-    $end-percent: 95%
-  );
-  box-shadow: 0px 2px 4.6px darken($gray-600, 25);
-  border: 1px solid darken($gray-600, 55);
-}
-
-.btn:not(:disabled):not(.disabled):active,
-.btn:not(:disabled):not(.disabled).active {
-  @include gradient-y(
-    $start-color: $theme-action-color,
-    $end-color: darken($theme-action-color, 25),
-    $start-percent: 0%,
-    $end-percent: 80%
-  );
-}
-
-.btn:not(:disabled):not(.disabled):active,
-.btn:not(:disabled):not(.disabled).active {
-  background-image: auto !important;
-}
-
-:host ::ng-deep .page-item.active .page-link {
-  z-index: 1;
-  color: $white;
-  background-color: darken($theme-action-color, 55);
-  border-color: darken($theme-action-color, 55);
-}
-
-:host ::ng-deep .page-link {
-  color: $gray-900;
-  &:hover {
-    background-color: darken($theme-action-color, 25);
-    border-color: darken($theme-action-color, 25);
-  }
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cbe12661..41dba97f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -23,7 +23,7 @@ import { AuthActions } from './auth/actions/auth.actions';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  
 })
 export class AppComponent implements OnInit, OnDestroy {
   currentUrl: string;
diff --git a/src/app/auth/components/forget-password/forget-password.component.html b/src/app/auth/components/forget-password/forget-password.component.html
index dd6b6543..e5cf664b 100644
--- a/src/app/auth/components/forget-password/forget-password.component.html
+++ b/src/app/auth/components/forget-password/forget-password.component.html
@@ -1,10 +1,10 @@
-<div class="container">
-  <div class="col-12 col-md-7 col-sm-7 col-lg-5 loginwindow">
-    <div class="row">
-      <div class="col-12 col-md-12 col-sm-12 col-lg-12">
-        <div class="row login-container" data-hook="">
-          <div id="content" class="col-sm-12" data-hook="">
-            <div class="col-md-12 col-12 col-centered">
+<div class="container mx-auto sm:px-4">
+  <div class="w-full md:w-3/5 pr-4 pl-4 sm:w-3/5 pr-4 pl-4 lg:w-2/5 pr-4 pl-4 loginwindow">
+    <div class="flex flex-wrap ">
+      <div class="w-full md:w-full pr-4 pl-4 sm:w-full pr-4 pl-4 lg:w-full pr-4 pl-4">
+        <div class="flex flex-wrap  login-container" data-hook="">
+          <div id="content" class="sm:w-full pr-4 pl-4" data-hook="">
+            <div class="md:w-full pr-4 pl-4 w-full col-centered">
               <div class="panel panel-default" *ngIf="emailSent == false">
                 <div class="panel-heading">
                   <h3 class="panel-title">Forget Password?</h3>
@@ -36,8 +36,8 @@ <h3 class="panel-title">Forget Password?</h3>
                             forgetPasswordForm.get('email').touched
                           "
                         >
-                          <span class="login-error-icon text-danger">!</span>
-                          <p class="login-error-message text-danger">
+                          <span class="login-error-icon text-red-600">!</span>
+                          <p class="login-error-message text-red-600">
                             {{
                               forgetPasswordForm.get('email').errors.msg ||
                                 'Please enter a valid email id'
@@ -49,7 +49,7 @@ <h3 class="panel-title">Forget Password?</h3>
                     <fieldset class="login-login-button-container">
                       <button
                         type="submit"
-                        class="btn btn-danger login-login-button"
+                        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-red-600 text-white hover:bg-red-700 login-login-button"
                       >
                         Reset Password
                       </button>
@@ -61,7 +61,7 @@ <h3 class="panel-title">Forget Password?</h3>
                 <div class="panel-heading">
                   <img
                     src="../../../../assets/custom/rocket.png"
-                    class="img-fluid my-4 h-50"
+                    class="max-w-full h-auto my-4 h-50"
                   />
                   <h3 class="panel-title">Email Sent!</h3>
                   <p>
diff --git a/src/app/auth/components/forget-password/forget-password.component.scss b/src/app/auth/components/forget-password/forget-password.component.scss
deleted file mode 100644
index 49701ac8..00000000
--- a/src/app/auth/components/forget-password/forget-password.component.scss
+++ /dev/null
@@ -1,333 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.loginwindow {
-  margin: 6em auto 0;
-  overflow: hidden;
-  padding: 10px 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: $gray-200;
-  border: none;
-  border-radius: 4px;
-  border: 1px solid $gray-10;
-  box-shadow: none;
-  .panel-heading {
-    padding: 30px 0 0;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    text-align: center;
-    background-color: transparent;
-    .panel-title {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-size: 28px;
-      color: $gray-900;
-      font-weight: 400;
-    }
-  }
-}
-
-.panel-heading {
-  img {
-    height: 172px !important;
-  }
-}
-
-.login-input-container {
-  margin: 20px;
-  border: 1px solid $gray-10;
-  border-radius: 5px;
-  padding: 0;
-  background-color: $white;
-}
-
-fieldset {
-  display: block;
-  -webkit-margin-start: 2px;
-  -webkit-margin-end: 2px;
-  -webkit-padding-before: 0.35em;
-  -webkit-padding-start: 0.75em;
-  -webkit-padding-end: 0.75em;
-  -webkit-padding-after: 0.625em;
-  min-width: -webkit-min-content;
-  border-width: 2px;
-  border-style: groove;
-  border-color: threedface;
-  border-image: initial;
-}
-
-.login-input-item {
-  position: relative;
-}
-
-.login-container {
-  box-sizing: border-box;
-  text-align: center;
-  position: relative;
-}
-
-.login-user-input-email {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.login-user-input-password {
-  border-top: 1px solid $gray-10 !important;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.login-user-input {
-  display: block;
-  color: $gray-900;
-  padding-right: 40px;
-  font-size: 15px;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-}
-
-input {
-  -webkit-appearance: textfield;
-  background-color: $white;
-  -webkit-rtl-ordering: logical;
-  user-select: text;
-  cursor: auto;
-  padding: 1px;
-  border-width: 2px;
-  border-style: inset;
-  border-color: initial;
-  border-image: initial;
-  text-rendering: auto;
-  color: initial;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  display: inline-block;
-  text-align: start;
-  margin: 0em 0em 0em 0em;
-  font: 11px system-ui;
-}
-
-fieldset {
-  border: 1px solid $gray-10;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-.login-login-button-container {
-  padding: 10px 20px;
-  margin: 0;
-  border: 0;
-}
-
-.login-login-button {
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 2px;
-  padding: 15px;
-  display: block;
-  width: 100%;
-  border: 0;
-  text-transform: uppercase;
-  border-radius: 3px;
-  background-color: darken($theme-action-color, 25);
-  color: $white;
-}
-
-.login-link-container {
-  text-align: right;
-  padding: 0px 20px 12px;
-  font-size: 14px;
-}
-
-.login-link {
-  text-decoration: none;
-  font-size: 15px;
-  color: $theme-action-color !important;
-}
-
-.login-right-links {
-  float: right;
-}
-
-.login-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.login-create-account-link {
-  margin-left: 5px;
-}
-
-a {
-  background-color: transparent;
-}
-
-.login-third-party-login {
-  margin-top: 30px;
-}
-
-.login-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.login-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.login-button-container {
-  margin-top: 10px;
-  margin-bottom: 40px;
-}
-
-@media (min-width: 360px) {
-  .login-facebook {
-    margin-right: 15px;
-    margin-bottom: 0;
-  }
-}
-
-@media (min-width: 360px) {
-  .login-button {
-    width: 49%;
-    display: inline-block;
-  }
-}
-
-.login-facebook {
-  margin-bottom: 0px;
-}
-
-.login-button {
-  width: 100%;
-  padding-left: 18%;
-  position: relative;
-  font-size: 13px;
-  font-weight: 500;
-  height: 50px;
-  border: 1px solid $gray-10;
-  background-color: $white;
-  border-radius: 5px;
-  text-align: left;
-}
-
-[type='reset'],
-[type='submit'],
-button,
-html [type='button'] {
-  -webkit-appearance: button;
-}
-
-[type='button'],
-[type='reset'],
-[type='submit'],
-button {
-  cursor: pointer;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-input,
-select,
-textarea {
-  margin: 0;
-}
-
-button,
-input,
-select {
-  overflow: visible;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-.header-sprite {
-  background: url(http://res.cloudinary.com/mally/image/upload/v1489480940/148948096411965_w5wbjb.png)
-    no-repeat 0 0;
-  background-size: 159px 48px;
-  display: inline-block;
-}
-
-.login-fb-logo,
-.login-gplus-logo {
-  height: 29px;
-  position: absolute;
-  left: 15px;
-}
-
-.login-fb-logo {
-  background-position: -93px 0;
-  width: 28px;
-  top: 10px;
-}
-
-.login-gplus-logo {
-  background-position: -122px 0;
-  width: 23px;
-  top: 13px;
-}
-
-.login-error-icon {
-  border: 2px solid $danger;
-  padding: 0 7px;
-  display: inline-block;
-  position: absolute;
-  top: 12px;
-  right: 10px;
-  font-weight: 500;
-  border-radius: 21px;
-}
-
-.login-error-message {
-  font-size: 11px;
-  margin-left: 15px;
-  text-align: left;
-  margin-top: -9px;
-  max-height: 500px;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-p {
-  display: block;
-  -webkit-margin-before: 1em;
-  -webkit-margin-after: 1em;
-  -webkit-margin-start: 0px;
-  -webkit-margin-end: 0px;
-}
-
-.login-input-container {
-  &:hover {
-    border: 1px solid $theme-main-color;
-    box-shadow: 0.1px 0.2px 0.4px darken($theme-main-color, 25);
-  }
-}
-
-.createacc {
-  display: flex;
-  align-items: center;
-  padding-left: 3rem;
-  @media screen and (min-width: 310px) and (max-width: 768px) {
-    padding-left: 0rem;
-  }
-}
diff --git a/src/app/auth/components/forget-password/forget-password.component.ts b/src/app/auth/components/forget-password/forget-password.component.ts
index be73fb9b..c054fc88 100644
--- a/src/app/auth/components/forget-password/forget-password.component.ts
+++ b/src/app/auth/components/forget-password/forget-password.component.ts
@@ -11,7 +11,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 @Component({
   selector: 'app-forget-password',
   templateUrl: './forget-password.component.html',
-  styleUrls: ['./forget-password.component.scss']
+  
 })
 export class ForgetPasswordComponent implements OnInit, OnDestroy {
   forgetPasswordForm: UntypedFormGroup;
diff --git a/src/app/auth/components/login/login.component.html b/src/app/auth/components/login/login.component.html
index 37137aa9..49748380 100644
--- a/src/app/auth/components/login/login.component.html
+++ b/src/app/auth/components/login/login.component.html
@@ -1,10 +1,10 @@
-<div class="container">
-  <div class="col-12 col-md-10 col-sm-10 col-lg-8 loginwindow">
+<div class="container mx-auto sm:px-4">
+  <div class="w-full md:w-4/5 pr-4 pl-4 sm:w-4/5 pr-4 pl-4 lg:w-2/3 pr-4 pl-4 loginwindow">
     <h2>Sign In or Register</h2>
-    <div class="row">
-      <div class="col-12 0col-md-6 col-sm-6 col-lg-6">
-        <div class="row login-container" data-hook="">
-          <div id="content" class="col-sm-12" data-hook="">
+    <div class="flex flex-wrap ">
+      <div class="w-full 0col-md-6 sm:w-1/2 pr-4 pl-4 lg:w-1/2 pr-4 pl-4">
+        <div class="flex flex-wrap  login-container" data-hook="">
+          <div id="content" class="sm:w-full pr-4 pl-4" data-hook="">
             <div class="col-centered">
               <div class="panel panel-default">
                 <div
@@ -12,10 +12,10 @@ <h2>Sign In or Register</h2>
                   class="panel-body"
                   data-hook="login"
                 >
-                  <!-- <div class="login-third-party-login col-12">
+                  <!-- <div class="login-third-party-login w-full">
                     <p class="login-button-info-text login-info-text">EASILY USING</p>
-                    <div class="login-button-container col-12">
-                      <div class="row">
+                    <div class="login-button-container w-full">
+                      <div class="flex flex-wrap ">
                         <button class="login-google login-button" id="gPlusLogin" (click)="socialLogin('google')">
                           <span class="header-sprite login-gplus-logo"></span>
                           GOOGLE
@@ -45,8 +45,8 @@ <h2>Sign In or Register</h2>
                             signInForm.get('email').touched
                           "
                         >
-                          <span class="login-error-icon text-danger">!</span>
-                          <p class="login-error-message text-danger">
+                          <span class="login-error-icon text-red-600">!</span>
+                          <p class="login-error-message text-red-600">
                             {{
                               signInForm.get('email').errors.msg ||
                                 'Please enter a valid email id'
@@ -69,8 +69,8 @@ <h2>Sign In or Register</h2>
                             signInForm.get('password').touched
                           "
                         >
-                          <span class="login-error-icon text-danger">!</span>
-                          <p class="login-error-message text-danger">
+                          <span class="login-error-icon text-red-600">!</span>
+                          <p class="login-error-message text-red-600">
                             {{
                               signInForm.get('password').errors.msg ||
                                 'Password must be at least 8 characters'
@@ -80,14 +80,14 @@ <h2>Sign In or Register</h2>
                       </div>
                     </fieldset>
                     <fieldset class="login-login-button-container">
-                      <button type="submit" class="btn login-login-button">
+                      <button type="submit" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline login-login-button">
                         Log in
                       </button>
                     </fieldset>
                   </form>
                   <!-- <div class="login-link-container">
                     <small>
-                      <a class="login-link text-danger" [routerLink]="['/auth/recover']">Forget Password</a>
+                      <a class="login-link text-red-600" [routerLink]="['/auth/recover']">Forget Password</a>
                     </small>
                   </div> -->
                 </div>
@@ -96,7 +96,7 @@ <h2>Sign In or Register</h2>
           </div>
         </div>
       </div>
-      <div class="col-12 0col-md-6 col-sm-6 col-lg-6 createacc">
+      <div class="w-full 0col-md-6 sm:w-1/2 pr-4 pl-4 lg:w-1/2 pr-4 pl-4 createacc">
         <div class="login-right-links">
           <h2 class="text-default">For New User</h2>
           <p>
@@ -105,7 +105,7 @@ <h2 class="text-default">For New User</h2>
           </p>
 
           <p>
-            <a class="btn login-login-button" [routerLink]="['/auth']"
+            <a class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline login-login-button" [routerLink]="['/auth']"
               >Create Account</a
             >
           </p>
diff --git a/src/app/auth/components/login/login.component.scss b/src/app/auth/components/login/login.component.scss
deleted file mode 100644
index 2465a1ac..00000000
--- a/src/app/auth/components/login/login.component.scss
+++ /dev/null
@@ -1,327 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.loginwindow {
-  margin: 0 auto;
-  overflow: hidden;
-  padding: 10px 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: $gray-200;
-  border: none;
-  border-radius: 4px;
-  border: 1px solid $gray-10;
-  box-shadow: none;
-  .panel-heading {
-    padding: 30px 0 0;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    text-align: center;
-    background-color: transparent;
-    .panel-title {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-size: 28px;
-      color: $gray-900;
-      font-weight: 400;
-    }
-  }
-}
-
-.login-input-container {
-  margin: 20px;
-  border: 1px solid $gray-10;
-  border-radius: 5px;
-  padding: 0;
-}
-
-fieldset {
-  display: block;
-  -webkit-margin-start: 2px;
-  -webkit-margin-end: 2px;
-  -webkit-padding-before: 0.35em;
-  -webkit-padding-start: 0.75em;
-  -webkit-padding-end: 0.75em;
-  -webkit-padding-after: 0.625em;
-  min-width: -webkit-min-content;
-  border-width: 2px;
-  border-style: groove;
-  border-color: threedface;
-  border-image: initial;
-}
-
-.login-input-item {
-  position: relative;
-}
-
-.login-container {
-  box-sizing: border-box;
-  text-align: center;
-  position: relative;
-}
-
-.login-user-input-email {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.login-user-input-password {
-  border-top: 1px solid $gray-10 !important;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.login-user-input {
-  display: block;
-  color: $gray-900;
-  padding-right: 40px;
-  font-size: 15px;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-}
-
-input {
-  -webkit-appearance: textfield;
-  background-color: $white;
-  -webkit-rtl-ordering: logical;
-  user-select: text;
-  cursor: auto;
-  padding: 1px;
-  border-width: 2px;
-  border-style: inset;
-  border-color: initial;
-  border-image: initial;
-  text-rendering: auto;
-  color: initial;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  display: inline-block;
-  text-align: start;
-  margin: 0em 0em 0em 0em;
-  font: 11px system-ui;
-}
-
-fieldset {
-  border: 1px solid $gray-10;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-.login-login-button-container {
-  padding: 10px 20px;
-  margin: 0;
-  border: 0;
-}
-
-.login-login-button {
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 2px;
-  padding: 15px;
-  display: block;
-  width: 100%;
-  border: 0;
-  text-transform: uppercase;
-  border-radius: 3px;
-  background-color: darken($theme-action-color, 25);
-  color: $white;
-}
-
-.login-link-container {
-  text-align: right;
-  padding: 0px 20px 12px;
-  font-size: 14px;
-}
-
-.login-link {
-  text-decoration: none;
-  font-size: 15px;
-  color: $theme-action-color !important;
-}
-
-.login-right-links {
-  float: right;
-}
-
-.login-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.login-create-account-link {
-  margin-left: 5px;
-}
-
-a {
-  background-color: transparent;
-}
-
-.login-third-party-login {
-  margin-top: 30px;
-}
-
-.login-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.login-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.login-button-container {
-  margin-top: 10px;
-  margin-bottom: 40px;
-}
-
-@media (min-width: 360px) {
-  .login-facebook {
-    margin-right: 15px;
-    margin-bottom: 0;
-  }
-}
-
-@media (min-width: 360px) {
-  .login-button {
-    width: 49%;
-    display: inline-block;
-  }
-}
-
-.login-facebook {
-  margin-bottom: 0px;
-}
-
-.login-button {
-  width: 100%;
-  padding-left: 18%;
-  position: relative;
-  font-size: 13px;
-  font-weight: 500;
-  height: 50px;
-  border: 1px solid $gray-10;
-  background-color: $white;
-  border-radius: 5px;
-  text-align: left;
-}
-
-[type='reset'],
-[type='submit'],
-button,
-html [type='button'] {
-  -webkit-appearance: button;
-}
-
-[type='button'],
-[type='reset'],
-[type='submit'],
-button {
-  cursor: pointer;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-input,
-select,
-textarea {
-  margin: 0;
-}
-
-button,
-input,
-select {
-  overflow: visible;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-.header-sprite {
-  background: url(http://res.cloudinary.com/mally/image/upload/v1489480940/148948096411965_w5wbjb.png)
-    no-repeat 0 0;
-  background-size: 159px 48px;
-  display: inline-block;
-}
-
-.login-fb-logo,
-.login-gplus-logo {
-  height: 29px;
-  position: absolute;
-  left: 15px;
-}
-
-.login-fb-logo {
-  background-position: -93px 0;
-  width: 28px;
-  top: 10px;
-}
-
-.login-gplus-logo {
-  background-position: -122px 0;
-  width: 23px;
-  top: 13px;
-}
-
-.login-error-icon {
-  border: 2px solid $danger;
-  padding: 0 7px;
-  display: inline-block;
-  position: absolute;
-  top: 12px;
-  right: 10px;
-  font-weight: 500;
-  border-radius: 21px;
-}
-
-.login-error-message {
-  font-size: 11px;
-  margin-left: 15px;
-  text-align: left;
-  margin-top: -9px;
-  max-height: 500px;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-p {
-  display: block;
-  -webkit-margin-before: 1em;
-  -webkit-margin-after: 1em;
-  -webkit-margin-start: 0px;
-  -webkit-margin-end: 0px;
-}
-
-.login-input-container {
-  background-color: $white;
-  &:hover {
-    border: 1px solid $theme-main-color;
-    box-shadow: 0.1px 0.2px 0.4px darken($theme-main-color, 25);
-  }
-}
-
-.createacc {
-  display: flex;
-  align-items: center;
-  padding-left: 3rem;
-  @media screen and (min-width: 310px) and (max-width: 768px) {
-    padding-left: 15px;
-  }
-}
diff --git a/src/app/auth/components/login/login.component.ts b/src/app/auth/components/login/login.component.ts
index 5d47420b..48e30fb7 100644
--- a/src/app/auth/components/login/login.component.ts
+++ b/src/app/auth/components/login/login.component.ts
@@ -20,7 +20,7 @@ import { ProductService } from '../../../core/services/product.service';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  
 })
 export class LoginComponent implements OnInit, OnDestroy {
   signInForm: UntypedFormGroup;
diff --git a/src/app/auth/components/sign-up/sign-up.component.html b/src/app/auth/components/sign-up/sign-up.component.html
index e15ccf61..46f31aac 100644
--- a/src/app/auth/components/sign-up/sign-up.component.html
+++ b/src/app/auth/components/sign-up/sign-up.component.html
@@ -1,8 +1,8 @@
-<div class="container">
-  <div class="col-12 col-md-7 col-sm-7 col-lg-5 loginwindow">
+<div class="container mx-auto sm:px-4">
+  <div class="w-full md:w-3/5 pr-4 pl-4 sm:w-3/5 pr-4 pl-4 lg:w-2/5 pr-4 pl-4 loginwindow">
     <h3 class="panel-title">Signup to {{ title }}</h3>
-    <div class="row register-container" data-hook="">
-      <div id="content" class="col-sm-12" data-hook="">
+    <div class="flex flex-wrap  register-container" data-hook="">
+      <div id="content" class="sm:w-full pr-4 pl-4" data-hook="">
         <div>
           <div class="panel panel-default">
             <div class="panel-heading"></div>
@@ -149,7 +149,7 @@ <h3 class="panel-title">Signup to {{ title }}</h3>
                   </div>
                 </fieldset>
                 <fieldset class="register-register-button-container">
-                  <button class="btn register-register-button">REGISTER</button>
+                  <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline register-register-button">REGISTER</button>
                 </fieldset>
               </form>
               <div class="register-link-container">
@@ -159,7 +159,7 @@ <h3 class="panel-title">Signup to {{ title }}</h3>
                       >Already have an account?</span
                     >
                     <a
-                      class="register-create-account-link register-link text-danger"
+                      class="register-create-account-link register-link text-red-600"
                       [routerLink]="['/auth', 'login']"
                       >Login!</a
                     >
diff --git a/src/app/auth/components/sign-up/sign-up.component.scss b/src/app/auth/components/sign-up/sign-up.component.scss
deleted file mode 100644
index 84b79813..00000000
--- a/src/app/auth/components/sign-up/sign-up.component.scss
+++ /dev/null
@@ -1,361 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.loginwindow {
-  margin: 0 auto;
-  overflow: hidden;
-  padding: 10px 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: $gray-100;
-  border: none;
-  border-radius: 4px;
-  border: 1px solid $gray-10;
-  box-shadow: none;
-  .panel-heading {
-    padding: 30px 0 0;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    text-align: center;
-    background-color: transparent;
-    .panel-title {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-size: 28px;
-      color: $gray-10;
-      font-weight: 400;
-    }
-  }
-}
-
-.register-input-container {
-  margin: 20px;
-  border: 1px solid $gray-10;
-  border-radius: 5px;
-  padding: 0;
-}
-
-.register-register-button-container {
-  padding: 10px 20px;
-  margin: 0;
-  border: 0;
-}
-
-.register-register-button {
-  font-size: 14px;
-  font-weight: BOLD;
-  color: $white;
-  letter-spacing: 2px;
-  padding: 15px;
-  display: block;
-  width: 100%;
-  border: 0;
-  text-transform: uppercase;
-  border-radius: 3px;
-  background-color: darken($theme-action-color, 25);
-}
-
-.register-input-item {
-  position: relative;
-}
-
-.register-user-input-email {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.register-user-input {
-  display: block;
-  color: $gray-900;
-  font-size: 15px;
-  padding-right: 40px;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-}
-
-.register-user-input-password {
-  border-top: 1px solid $gray-10;
-}
-
-.register-user-input-mobile {
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender {
-  position: relative;
-  border: 0;
-  font-size: 13px;
-  color: $gray-800;
-  text-align: left;
-  padding: 15px;
-  margin: 0;
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender {
-  position: relative;
-  border: 0;
-  font-size: 13px;
-  color: $gray-800;
-  text-align: left;
-  padding: 15px;
-  margin: 0;
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender-title {
-  display: inline;
-  font-weight: 500;
-}
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-  margin-bottom: 0;
-  font-size: inherit;
-  width: auto;
-  border: none;
-}
-
-.register-gender-radio {
-  margin-left: 15px;
-  margin-right: 5px;
-}
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.register-gender-label {
-  cursor: pointer;
-  font-weight: 500;
-}
-
-fieldset {
-  display: block;
-  -webkit-margin-start: 2px;
-  -webkit-margin-end: 2px;
-  -webkit-padding-before: 0.35em;
-  -webkit-padding-start: 0.75em;
-  -webkit-padding-end: 0.75em;
-  -webkit-padding-after: 0.625em;
-  min-width: -webkit-min-content;
-  border-width: 2px;
-  border-style: groove;
-  border-color: threedface;
-  border-image: initial;
-}
-
-.register-link-container {
-  text-align: left;
-  padding: 20px;
-}
-
-.register-login-link {
-  text-align: center;
-}
-
-.register-info-text {
-  color: $gray-800;
-  font-size: 12px;
-}
-
-.register-create-account-link {
-  margin-left: 5px;
-}
-
-.register-link {
-  text-decoration: none;
-  color: $theme-action-color !important;
-  font-size: 15px;
-}
-
-a {
-  background-color: transparent;
-}
-
-.register-third-party-register {
-  margin-top: 30px;
-}
-
-.register-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.register-info-text {
-  color: $gray-800;
-  font-size: 12px;
-}
-
-.register-button-container {
-  margin-top: 10px;
-  margin-bottom: 40px;
-}
-
-.register-button {
-  margin: 0 auto;
-  max-width: 162px;
-  padding-left: 18%;
-  position: relative;
-  font-size: 13px;
-  font-weight: 500;
-  color: $gray-800;
-  height: 50px;
-  border: 1px solid $gray-10;
-  background-color: $white;
-  border-radius: 5px;
-  text-align: left;
-}
-
-[type='reset'],
-[type='submit'],
-button,
-html [type='button'] {
-  -webkit-appearance: button;
-}
-
-[type='button'],
-[type='reset'],
-[type='submit'],
-button {
-  cursor: pointer;
-}
-
-/* For Firefox */
-
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-/* Webkit browsers like Safari and Chrome */
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-@media (min-width: 360px) {
-  .register-facebook {
-    margin-right: 15px;
-    margin-bottom: 0;
-  }
-  .register-button {
-    width: 49%;
-    display: inline-block;
-  }
-}
-
-.register-container {
-  box-sizing: border-box;
-  text-align: center;
-  position: relative;
-  padding-bottom: 40px;
-}
-
-.register-sprite {
-  background: url(http://res.cloudinary.com/mally/image/upload/v1489480940/148948096411965_w5wbjb.png)
-    no-repeat 0 0;
-  background-size: 159px 48px;
-  display: inline-block;
-}
-
-.register-fb-logo {
-  background-position: -93px 0;
-  width: 28px;
-  top: 10px;
-}
-
-.register-fb-logo,
-.register-gplus-logo {
-  height: 29px;
-  position: absolute;
-  left: 15px;
-}
-
-.register-gplus-logo {
-  background-position: -122px 0;
-  width: 23px;
-  top: 13px;
-}
-
-.register-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.register-info-text {
-  color: $gray-800;
-  font-size: 12px;
-}
-
-.register-error-icon {
-  border: 2px solid $theme-action-sub-color2;
-  padding: 0 7px;
-  color: $theme-action-sub-color2;
-  display: inline-block;
-  position: absolute;
-  top: 12px;
-  right: 10px;
-  font-weight: 500;
-  border-radius: 21px;
-}
-
-.register-error-message {
-  font-size: 11px;
-  margin-left: 15px;
-  color: $theme-action-sub-color2;
-  text-align: left;
-  margin-top: -9px;
-  max-height: 500px;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-.register-gender-error-icon {
-  font-size: 16px;
-}
-
-.register-gender-error-message {
-  margin-left: 0;
-  margin-top: 10px;
-  margin-bottom: 0;
-}
-
-.register-input-container {
-  &:hover {
-    border: 1px solid $theme-main-color;
-    box-shadow: 0.1px 0.2px 0.4px darken($theme-main-color, 25);
-  }
-}
diff --git a/src/app/auth/components/sign-up/sign-up.component.ts b/src/app/auth/components/sign-up/sign-up.component.ts
index e6e6eee8..e815de09 100644
--- a/src/app/auth/components/sign-up/sign-up.component.ts
+++ b/src/app/auth/components/sign-up/sign-up.component.ts
@@ -13,7 +13,7 @@ import { AuthActions } from '../../actions/auth.actions';
 @Component({
   selector: 'app-sign-up',
   templateUrl: './sign-up.component.html',
-  styleUrls: ['./sign-up.component.scss']
+  
 })
 export class SignUpComponent implements OnInit, OnDestroy {
   signUpForm: UntypedFormGroup;
diff --git a/src/app/auth/components/update-password/update-password.component.html b/src/app/auth/components/update-password/update-password.component.html
index f8360aa8..3f3daf1b 100644
--- a/src/app/auth/components/update-password/update-password.component.html
+++ b/src/app/auth/components/update-password/update-password.component.html
@@ -1,6 +1,6 @@
 <div class="register-container " data-hook="">
-  <div id="content" class="col-sm-12 loginwindow" data-hook="">
-    <div class="col-md-5 col-centered">
+  <div id="content" class="sm:w-full pr-4 pl-4 loginwindow" data-hook="">
+    <div class="md:w-2/5 pr-4 pl-4 col-centered">
       <div class="panel panel-default" *ngIf="passwordReset === false">
         <div class="panel-heading">
           <h3 class="panel-title" *ngIf="passwordReset === false">
@@ -64,7 +64,7 @@ <h3 class="panel-title" *ngIf="passwordReset === false">
               </div>
             </fieldset>
             <fieldset class="register-register-button-container">
-              <button class="btn  register-register-button">
+              <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  register-register-button">
                 Update Password!
               </button>
             </fieldset>
@@ -87,7 +87,7 @@ <h3 class="panel-title" *ngIf="passwordReset === false">
         <div class="panel-heading">
           <img
             src="../../../../assets/custom/check.png"
-            class="img-fluid my-4 h-50"
+            class="max-w-full h-auto my-4 h-50"
           />
           <h3 class="panel-title" *ngIf="passwordReset === true">
             Password Changed!
diff --git a/src/app/auth/components/update-password/update-password.component.scss b/src/app/auth/components/update-password/update-password.component.scss
deleted file mode 100644
index 1592c1ee..00000000
--- a/src/app/auth/components/update-password/update-password.component.scss
+++ /dev/null
@@ -1,361 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.panel {
-  margin-bottom: 20px;
-  background-color: $gray-200;
-  border: none;
-  border-radius: 4px;
-  border: 1px solid $gray-10;
-  box-shadow: none;
-  .panel-heading {
-    padding: 30px 0 0;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    text-align: center;
-    background-color: transparent;
-    .panel-title {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-size: 28px;
-      color: $gray-800;
-      font-weight: 400;
-    }
-  }
-}
-.loginwindow {
-  margin: 6em auto 0;
-  overflow: hidden;
-  padding: 10px 0;
-}
-.panel-heading {
-  img {
-    height: 172px !important;
-  }
-}
-
-.register-input-container {
-  margin: 20px;
-  border: 1px solid $gray-10;
-  border-radius: 5px;
-  padding: 0;
-  background-color: $white;
-  &:hover {
-    border: 1px solid $theme-main-color;
-    box-shadow: 0.1px 0.2px 0.4px darken($theme-main-color, 25);
-  }
-}
-
-.register-register-button-container {
-  padding: 10px 20px;
-  margin: 0;
-  border: 0;
-}
-
-.register-register-button {
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: 2px;
-  padding: 15px;
-  display: block;
-  width: 100%;
-  border: 0;
-  text-transform: uppercase;
-  border-radius: 3px;
-  color: $white;
-  background-color: darken($theme-action-color, 25);
-}
-
-.register-input-item {
-  position: relative;
-}
-
-.register-user-input-email {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.register-user-input {
-  display: block;
-  color: $gray-900;
-  font-size: 15px;
-  padding-right: 40px;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-}
-
-.register-user-input-password {
-  border-top: 1px solid $gray-10;
-}
-
-.register-user-input-mobile {
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender {
-  position: relative;
-  border: 0;
-  font-size: 13px;
-  color: $gray-800;
-  text-align: left;
-  padding: 15px;
-  margin: 0;
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender {
-  position: relative;
-  border: 0;
-  font-size: 13px;
-  color: $gray-800;
-  text-align: left;
-  padding: 15px;
-  margin: 0;
-  border-top: 1px solid $gray-10;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.register-gender-title {
-  display: inline;
-  font-weight: 500;
-}
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-  margin-bottom: 0;
-  font-size: inherit;
-  width: auto;
-  border: none;
-}
-
-.register-gender-radio {
-  margin-left: 15px;
-  margin-right: 5px;
-}
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.register-gender-label {
-  cursor: pointer;
-  font-weight: 500;
-}
-
-fieldset {
-  display: block;
-  -webkit-margin-start: 2px;
-  -webkit-margin-end: 2px;
-  -webkit-padding-before: 0.35em;
-  -webkit-padding-start: 0.75em;
-  -webkit-padding-end: 0.75em;
-  -webkit-padding-after: 0.625em;
-  min-width: -webkit-min-content;
-  border-width: 2px;
-  border-style: groove;
-  border-color: threedface;
-  border-image: initial;
-}
-
-.register-link-container {
-  text-align: left;
-  padding: 20px;
-}
-
-.register-login-link {
-  text-align: center;
-}
-
-.register-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.register-create-account-link {
-  margin-left: 5px;
-}
-
-.register-link {
-  text-decoration: none;
-}
-
-a {
-  background-color: transparent;
-}
-
-.register-third-party-register {
-  margin-top: 30px;
-}
-
-.register-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.register-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.register-button-container {
-  margin-top: 10px;
-  margin-bottom: 40px;
-}
-
-.register-button {
-  margin: 0 auto;
-  max-width: 162px;
-  padding-left: 18%;
-  position: relative;
-  font-size: 13px;
-  font-weight: 500;
-  color: $gray-800;
-  height: 50px;
-  border: 1px solid $gray-10;
-  background-color: $white;
-  border-radius: 5px;
-  text-align: left;
-}
-
-[type='reset'],
-[type='submit'],
-button,
-html [type='button'] {
-  -webkit-appearance: button;
-}
-
-[type='button'],
-[type='reset'],
-[type='submit'],
-button {
-  cursor: pointer;
-}
-
-/* For Firefox */
-
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-/* Webkit browsers like Safari and Chrome */
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-@media (min-width: 360px) {
-  .register-facebook {
-    margin-right: 15px;
-    margin-bottom: 0;
-  }
-  .register-button {
-    width: 49%;
-    display: inline-block;
-  }
-}
-
-.register-container {
-  box-sizing: border-box;
-  text-align: center;
-  position: relative;
-  padding-bottom: 40px;
-}
-
-.register-sprite {
-  background: url(http://res.cloudinary.com/mally/image/upload/v1489480940/148948096411965_w5wbjb.png)
-    no-repeat 0 0;
-  background-size: 159px 48px;
-  display: inline-block;
-}
-
-.register-fb-logo {
-  background-position: -93px 0;
-  width: 28px;
-  top: 10px;
-}
-
-.register-fb-logo,
-.register-gplus-logo {
-  height: 29px;
-  position: absolute;
-  left: 15px;
-}
-
-.register-gplus-logo {
-  background-position: -122px 0;
-  width: 23px;
-  top: 13px;
-}
-
-.register-button-info-text {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.register-info-text {
-  color: $gray-700;
-  font-size: 12px;
-}
-
-.register-error-icon {
-  border: 2px solid $theme-action-sub-color2;
-  padding: 0 7px;
-  color: $theme-action-sub-color2;
-  display: inline-block;
-  position: absolute;
-  top: 12px;
-  right: 10px;
-  font-weight: 500;
-  border-radius: 21px;
-}
-
-.register-error-message {
-  font-size: 11px;
-  margin-left: 15px;
-  color: $theme-action-sub-color2;
-  text-align: left;
-  margin-top: -9px;
-  max-height: 500px;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-.register-gender-error-icon {
-  font-size: 16px;
-}
-
-.register-gender-error-message {
-  margin-left: 0;
-  margin-top: 10px;
-  margin-bottom: 0;
-}
diff --git a/src/app/auth/components/update-password/update-password.component.ts b/src/app/auth/components/update-password/update-password.component.ts
index c6413015..a0d11776 100644
--- a/src/app/auth/components/update-password/update-password.component.ts
+++ b/src/app/auth/components/update-password/update-password.component.ts
@@ -11,7 +11,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-update-password',
   templateUrl: './update-password.component.html',
-  styleUrls: ['./update-password.component.scss']
+  
 })
 export class UpdatePasswordComponent implements OnInit {
   updatePasswordForm: UntypedFormGroup;
diff --git a/src/app/checkout/address/add-address/add-address.component.html b/src/app/checkout/address/add-address/add-address.component.html
index 809bbfeb..ad63a504 100644
--- a/src/app/checkout/address/add-address/add-address.component.html
+++ b/src/app/checkout/address/add-address/add-address.component.html
@@ -1,14 +1,14 @@
 <form class="form" [formGroup]="addressForm" (ngSubmit)="onSubmit()">
   <hr />
-  <div class="row mt-3">
-    <div class="form-group col-sm-6">
+  <div class="flex flex-wrap  mt-3">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >Pin Code
         <span class="required">*</span>
       </label>
       <input
         type="tel"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="zip_code"
         autocomplete="none"
       />
@@ -18,17 +18,17 @@
           addressForm.get('zip_code').touched
         "
       >
-        <p class="value-err text-danger show">Please enter Pincode!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please enter Pincode!</p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >Mobile No
         <span class="required">*</span>
       </label>
       <input
         type="tel"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="phone"
         autocomplete="none"
       />
@@ -37,19 +37,19 @@
           addressForm.get('phone').errors && addressForm.get('phone').touched
         "
       >
-        <p class="value-err text-danger show">
+        <p class="value-err text-red-600 opacity-100 block">
           Please enter valid phone number!
         </p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >First Name
         <span class="required">*</span>
       </label>
       <input
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="first_name"
         autocomplete="none"
       />
@@ -59,17 +59,17 @@
           addressForm.get('first_name').touched
         "
       >
-        <p class="value-err text-danger show">Please enter first name!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please enter first name!</p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label>
         Last Name
         <span class="required">*</span>
       </label>
       <input
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="last_name"
         autocomplete="none"
       />
@@ -79,17 +79,17 @@
           addressForm.get('last_name').touched
         "
       >
-        <p class="value-err text-danger show">Please enter last name!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please enter last name!</p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label>
         Locality / Town
         <span class="required">*</span>
       </label>
       <input
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="address_line_2"
         autocomplete="none"
       />
@@ -99,17 +99,17 @@
           addressForm.get('address_line_2').touched
         "
       >
-        <p class="value-err text-danger show">Please enter locality / town!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please enter locality / town!</p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >City / District
         <span class="required">*</span>
       </label>
       <input
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="city"
         autocomplete="none"
       />
@@ -118,17 +118,17 @@
           addressForm.get('city').errors && addressForm.get('city').touched
         "
       >
-        <p class="value-err text-danger show">Please enter city / district!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please enter city / district!</p>
       </div>
     </div>
-    <div class="form-group col-sm-12">
+    <div class="mb-4 sm:w-full pr-4 pl-4">
       <label
         >Address
         <span class="required">*</span>
       </label>
       <textarea
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="address_line_1"
         autocomplete="none"
       ></textarea>
@@ -138,16 +138,16 @@
           addressForm.get('address_line_1').touched
         "
       >
-        <p class="value-err text-danger show">
+        <p class="value-err text-red-600 opacity-100 block">
           Please enter address(minimum 10 characters long)!
         </p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label> Country </label>
       <span class="required">*</span>
       <select
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="country_id"
         [(ngModel)]="countryId"
         (change)="selectedCountry(countryId)"
@@ -173,14 +173,14 @@
           addressForm.get('country_id').touched
         "
       >
-        <p class="value-err text-danger show">Please select country!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please select country!</p>
       </div>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label> State </label>
       <span class="required">*</span>
       <select
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="state_id"
         [(ngModel)]="stateId"
         (change)="selectedState(stateId)"
@@ -203,15 +203,15 @@
           addressForm.get('state_id').touched
         "
       >
-        <p class="value-err text-danger show">Please select state!</p>
+        <p class="value-err text-red-600 opacity-100 block">Please select state!</p>
       </div>
     </div>
-    <div *ngIf="isAuthenticated" class="save-button col-12 col-sm-6">
-      <button class="btn themebtnprimary">Save</button>
+    <div *ngIf="isAuthenticated" class="save-button w-full sm:w-1/2 pr-4 pl-4">
+      <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary">Save</button>
     </div>
-    <div class="col-12 col-sm-2 " style="padding-top: 15px;">
+    <div class="w-full sm:w-1/5 pr-4 pl-4 " style="padding-top: 15px;">
       <button
-        class="btn themebtnprimarybasic mb-3"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic mb-3"
         (click)="closeAddressForm()"
       >
         Cancel
diff --git a/src/app/checkout/address/add-address/add-address.component.scss b/src/app/checkout/address/add-address/add-address.component.scss
deleted file mode 100644
index 2bc10222..00000000
--- a/src/app/checkout/address/add-address/add-address.component.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.form {
-  .half-width {
-    width: 190px;
-  }
-  .full-width {
-    width: 400px;
-  }
-  .value-err {
-    height: 18px;
-    padding-top: 2px;
-  }
-  .readonly {
-    border: 1px solid $gray-10 !important;
-  }
-}
-
-.email {
-  padding-bottom: 10px;
-  padding-top: 15px;
-  label {
-    top: 4px;
-  }
-}
-
-.pincode {
-  padding-top: 15px;
-  label {
-    top: 4px;
-  }
-}
-
-.city,
-.state,
-.first-name,
-.last-name {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.state,
-.last-name {
-  padding-left: 7px;
-}
-
-.address {
-  textarea {
-    height: 70px;
-    padding: 10px;
-  }
-}
-
-.reviewlink {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-}
diff --git a/src/app/checkout/address/add-address/add-address.component.ts b/src/app/checkout/address/add-address/add-address.component.ts
index 5a1b16bd..aaeba2ef 100644
--- a/src/app/checkout/address/add-address/add-address.component.ts
+++ b/src/app/checkout/address/add-address/add-address.component.ts
@@ -23,7 +23,7 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-add-address',
   templateUrl: './add-address.component.html',
-  styleUrls: ['./add-address.component.scss']
+  
 })
 export class AddAddressComponent implements OnInit, OnDestroy {
   @Input() modifiedAddress: Address;
diff --git a/src/app/checkout/address/address.component.html b/src/app/checkout/address/address.component.html
index 1717ab43..897b8155 100644
--- a/src/app/checkout/address/address.component.html
+++ b/src/app/checkout/address/address.component.html
@@ -1,7 +1,7 @@
-<div class="address-section col-12 col-md-8 col-lg-8">
+<div class="address-section w-full md:w-2/3 pr-4 pl-4 lg:w-2/3 pr-4 pl-4">
   <div *ngIf="isUserSelectedAddress">
-    <div *ngIf="shipAddress" class="row m-0">
-      <div class="left col-12 col-md-8 col-lg-8 m-0 ">
+    <div *ngIf="shipAddress" class="flex flex-wrap  m-0">
+      <div class="left w-full md:w-2/3 pr-4 pl-4 lg:w-2/3 pr-4 pl-4 m-0 ">
         <div class="edit-address">
           <span class="edit-label">
             Delivery Address
@@ -15,16 +15,16 @@
         </div>
         <app-delivery-address [address]="shipAddress"></app-delivery-address>
       </div>
-      <div class="right col-12 col-md-4 col-lg-4 m-0">
+      <div class="right w-full md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4 m-0">
         <app-delivery-options
           (onCheckoutToPayment)="checkoutToPayment()"
         ></app-delivery-options>
       </div>
     </div>
   </div>
-  <div class="row" *ngIf="!isUserSelectedAddress">
+  <div class="flex flex-wrap " *ngIf="!isUserSelectedAddress">
     <div
-      class="left col-12 col-md-10 col-lg-10 m-auto border-right-0"
+      class="left w-full md:w-4/5 pr-4 pl-4 lg:w-4/5 pr-4 pl-4 m-auto border-r-0"
       *ngIf="!isUserSelectedAddress"
     >
       <div class="add-address reviewlink pl-1" *ngIf="!isEditButtonPressed">
@@ -49,9 +49,9 @@
         </app-add-address>
       </div>
     </div>
-    <div class="row" *ngIf="!isEditButtonPressed">
+    <div class="flex flex-wrap " *ngIf="!isEditButtonPressed">
       <div
-        class="left col-12 col-md-10 col-lg-10 m-auto border-right-0"
+        class="left w-full md:w-4/5 pr-4 pl-4 lg:w-4/5 pr-4 pl-4 m-auto border-r-0"
         *ngIf="(userAddresses$ | async); let userAddresses"
       >
         <app-saved-address
diff --git a/src/app/checkout/address/address.component.scss b/src/app/checkout/address/address.component.scss
deleted file mode 100644
index 0759ed75..00000000
--- a/src/app/checkout/address/address.component.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-.address-section {
-  margin: 0 auto;
-  .left {
-    padding-bottom: 20px;
-    position: relative;
-    display: inline-block;
-    border-right: 1px solid $gray-10;
-    vertical-align: top;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      min-height: auto;
-      border-right: 0 solid $gray-10;
-      padding: 0;
-    }
-    .add-address {
-      padding: 20px 10px 20px 0;
-      border-bottom: 1px solid $gray-10;
-      margin-bottom: 14px;
-      .add-label {
-        color: $gray-700;
-        font-size: 15px;
-        font-weight: 600;
-        font-family: $primary-font;
-      }
-    }
-    .edit-address {
-      padding-top: 30px;
-      padding-bottom: 30px;
-      // background: $white;
-      .edit-label {
-        font-size: 17px;
-        color: $gray-700;
-        font-weight: 600;
-        font-family: $primary-font;
-      }
-    }
-  }
-  .right {
-    display: inline-block;
-    vertical-align: top;
-    padding-left: 35px;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 0;
-    }
-  }
-
-  .reviewlink {
-    cursor: pointer;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .row {
-    padding: inherit;
-  }
-}
diff --git a/src/app/checkout/address/address.component.ts b/src/app/checkout/address/address.component.ts
index 8c1db0d0..9c9fe22a 100644
--- a/src/app/checkout/address/address.component.ts
+++ b/src/app/checkout/address/address.component.ts
@@ -13,7 +13,7 @@ import { fadeInAnimation } from '../../shared/animations/fade-in.animation';
 @Component({
   selector: 'app-address',
   templateUrl: './address.component.html',
-  styleUrls: ['./address.component.scss'],
+  
   animations: [fadeInAnimation]
 })
 export class AddressComponent implements OnInit, OnDestroy {
diff --git a/src/app/checkout/address/delivery-address/delivery-address.component.scss b/src/app/checkout/address/delivery-address/delivery-address.component.scss
deleted file mode 100644
index 36245c72..00000000
--- a/src/app/checkout/address/delivery-address/delivery-address.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.items {
-  .address-row {
-    background: $gray-200;
-    border: 1px solid $gray-10;
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-    padding-top: 25px;
-    padding-left: 45px;
-    display: inline-block;
-    height: auto;
-    width: 302px;
-    margin-right: 25px;
-    border-radius: 4px;
-    position: relative;
-
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      height: auto;
-      width: 100%;
-      margin-right: 0px;
-      border-radius: 4px;
-      position: relative;
-      min-height: auto;
-      border-radius: 0;
-      padding: 1.4em 1em 1.4em 1em;
-    }
-    cursor: pointer;
-    .name {
-      font-family: $primary-font;
-      font-weight: 600;
-      font-size: 15px;
-      color: $gray-800;
-    }
-    .address {
-      padding-top: 10px;
-      width: 90%;
-      .address-content {
-        color: $gray-800;
-        line-height: 1.4;
-        word-break: break-word;
-        font-size: 13px;
-        .mob {
-          padding: 8px 0;
-          .mob-no {
-            font-weight: 600;
-            font-family: $primary-font;
-          }
-        }
-      }
-    }
-    .serviceability {
-      font-size: 13px;
-      margin-bottom: 20px;
-    }
-    .select {
-      cursor: pointer;
-      position: absolute;
-      left: 14px;
-      top: 23px;
-      width: 20px;
-      height: 20px;
-      border: none;
-      background-position: -551px 0;
-      display: inline-block;
-      overflow: hidden;
-      background-repeat: no-repeat;
-      background-size: 4250px 153px;
-      vertical-align: middle;
-      // background-image: url(/assets/checkout_sprite.png);
-    }
-  }
-}
diff --git a/src/app/checkout/address/delivery-address/delivery-address.component.ts b/src/app/checkout/address/delivery-address/delivery-address.component.ts
index 01374726..0f964339 100644
--- a/src/app/checkout/address/delivery-address/delivery-address.component.ts
+++ b/src/app/checkout/address/delivery-address/delivery-address.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
   selector: 'app-delivery-address',
   templateUrl: './delivery-address.component.html',
-  styleUrls: ['./delivery-address.component.scss']
+  
 })
 export class DeliveryAddressComponent implements OnInit {
   @Input() address: Address;
diff --git a/src/app/checkout/address/delivery-options/delivery-options.component.html b/src/app/checkout/address/delivery-options/delivery-options.component.html
index 39e7d0c6..90bb77e4 100644
--- a/src/app/checkout/address/delivery-options/delivery-options.component.html
+++ b/src/app/checkout/address/delivery-options/delivery-options.component.html
@@ -45,7 +45,7 @@
   <button
     [disabled]="(orderState$ | async) !== 'address'"
     (click)="checkoutToPayment()"
-    class="btn themebtnprimary"
+    class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary"
   >
     continue to payment
   </button>
diff --git a/src/app/checkout/address/delivery-options/delivery-options.component.scss b/src/app/checkout/address/delivery-options/delivery-options.component.scss
deleted file mode 100644
index 9aee34c5..00000000
--- a/src/app/checkout/address/delivery-options/delivery-options.component.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.del-lbl {
-  color: $gray-800;
-  font-size: 12px;
-  padding: 30px 0 15px;
-  font-weight: 600;
-  font-family: $primary-font;
-}
-
-.del-options {
-  border: 1px solid $gray-10;
-  background-color: $gray-200;
-  border-radius: 4px;
-  padding: 15px;
-  .option {
-    .option-name {
-      font-weight: 700;
-      padding-bottom: 5px;
-      font-family: $primary-font;
-    }
-    .option-rate {
-      font-size: 12px;
-      color: $gray-800;
-    }
-  }
-}
-
-.mini-bag-summary {
-  position: relative;
-  padding: none;
-  margin-top: 25px;
-  border-bottom: 1px solid $gray-10;
-  .items {
-    font-size: 12px;
-    font-weight: 600;
-    font-family: $primary-font;
-    padding-top: 5px;
-    border-bottom: 1px dotted $gray-10;
-    padding-bottom: 5px;
-  }
-  .order-total,
-  .shipping {
-    font-size: 14px;
-    padding-top: 6px;
-    padding-bottom: 20px;
-    height: 22px;
-    position: relative;
-    span {
-      color: $gray-800;
-    }
-  }
-  .shipping {
-    height: 60px;
-  }
-  .order-total > .value,
-  .shipping > .shipping-fee {
-    position: absolute;
-    right: 0;
-    text-align: right;
-    color: $gray-800;
-  }
-  .shipping > .c-green {
-    color: darken($theme-action-color, 55);
-    width: 15em;
-    font-size: 14px;
-    padding-top: 5px;
-  }
-}
-
-.pay-lbl-total {
-  padding: 10px 0;
-  .pay-lbl,
-  .pay-total {
-    font-weight: 600;
-    font-size: 14px;
-    font-family: $primary-font;
-  }
-  .pay-total {
-    float: right;
-  }
-}
diff --git a/src/app/checkout/address/delivery-options/delivery-options.component.ts b/src/app/checkout/address/delivery-options/delivery-options.component.ts
index 41ab9dbd..c6b5b5d1 100644
--- a/src/app/checkout/address/delivery-options/delivery-options.component.ts
+++ b/src/app/checkout/address/delivery-options/delivery-options.component.ts
@@ -22,7 +22,7 @@ import { environment } from '../../../../environments/environment';
 @Component({
   selector: 'app-delivery-options',
   templateUrl: './delivery-options.component.html',
-  styleUrls: ['./delivery-options.component.scss']
+  
 })
 export class DeliveryOptionsComponent implements OnInit, OnDestroy {
   @Output() onCheckoutToPayment = new EventEmitter<boolean>();
diff --git a/src/app/checkout/cart/cart.component.html b/src/app/checkout/cart/cart.component.html
index 6d99e999..981ec2de 100644
--- a/src/app/checkout/cart/cart.component.html
+++ b/src/app/checkout/cart/cart.component.html
@@ -1,6 +1,6 @@
-<div class="cart-section container" *ngIf="!isMobile">
-  <div *ngIf="(totalCartItems$ | async) > 0; else emptyCart" class="row">
-    <div class="left col-md-9">
+<div class="cart-section container mx-auto sm:px-4" *ngIf="!isMobile">
+  <div *ngIf="(totalCartItems$ | async) > 0; else emptyCart" class="flex flex-wrap ">
+    <div class="left md:w-3/4 pr-4 pl-4">
       <div class="checkout-header-container">
         <div class="checkout-header">
           <span class="text">Your Shopping Cart</span>
@@ -10,7 +10,7 @@
         <app-line-item-list></app-line-item-list>
       </div>
     </div>
-    <div class="right col-md-3">
+    <div class="right md:w-1/4 pr-4 pl-4">
       <app-order-total-summary
         [itemTotal]="itemTotal$ | async"
       ></app-order-total-summary>
@@ -21,8 +21,8 @@
     <app-empty-cart></app-empty-cart>
   </ng-template>
 </div>
-<div class="cart-section container p-0" *ngIf="isMobile">
-  <div class="right col-12">
+<div class="cart-section container mx-auto sm:px-4 p-0" *ngIf="isMobile">
+  <div class="right w-full">
     <app-order-total-summary
       *ngIf="(totalCartItems$ | async) > 0"
       [itemTotal]="totalCartValue$ | async"
@@ -30,7 +30,7 @@
     ></app-order-total-summary>
   </div>
   <div *ngIf="(totalCartItems$ | async) > 0; else emptyCart">
-    <div class="left col-12">
+    <div class="left w-full">
       <div class="prod-set">
         <app-line-item-list [isMobile]="isMobile"></app-line-item-list>
       </div>
diff --git a/src/app/checkout/cart/cart.component.scss b/src/app/checkout/cart/cart.component.scss
deleted file mode 100644
index 5a4a8e88..00000000
--- a/src/app/checkout/cart/cart.component.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-.cart-section {
-  position: relative;
-  .left {
-    padding-right: 40px;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 0;
-      border-radius: 0px;
-    }
-    .checkout-header-container {
-      .checkout-header {
-        display: inline-block;
-        padding: 3rem 0 0.8rem;
-        .text {
-          font-size: 1.8em;
-          font-weight: normal;
-          color: $gray-900;
-          font-family: $primary-font;
-        }
-      }
-      .total-price {
-        float: right;
-        padding: 30px 0;
-        display: inline-block;
-        font-size: 18px;
-        color: $gray-900;
-      }
-    }
-    .prod-set {
-      width: 100%;
-      display: inline-block;
-      overflow: auto;
-      padding: 1rem;
-      background-color: $white;
-      border-radius: 4px;
-      box-shadow: 0px 0px 3px $gray-10;
-      @media screen and (min-width: 320px) and (max-width: 768px) {
-        border-radius: 0px;
-        padding: 0;
-        box-shadow: none;
-      }
-      .wishlist-link {
-        cursor: pointer;
-        .icon {
-          width: 12px;
-          height: 16px;
-          background-position: -689px 0;
-          display: inline-block;
-          overflow: hidden;
-          background-repeat: no-repeat;
-          background-size: 4250px 153px;
-          vertical-align: middle;
-          // background-image: url(/assets/checkout_sprite.png);
-          margin-right: 5px;
-        }
-        text-align: center;
-        display: block;
-        height: 40px;
-        padding-top: 10px;
-        background: $white;
-        color: $gray-900;
-        border: 1px solid $gray-10;
-        font-size: 1.7em;
-      }
-    }
-  }
-  .right {
-    vertical-align: top;
-    position: absolute;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      position: relative;
-      box-shadow: none;
-      padding: 0 15px;
-      margin-top: 0px;
-    }
-    right: 0;
-    margin-top: 15.3vh;
-    background-color: $white;
-    border-radius: 4px;
-    box-shadow: 0px 0px 4px $gray-10;
-    padding: 0.9rem 1.4rem;
-  }
-}
diff --git a/src/app/checkout/cart/cart.component.ts b/src/app/checkout/cart/cart.component.ts
index ab6baa13..b86e24e6 100644
--- a/src/app/checkout/cart/cart.component.ts
+++ b/src/app/checkout/cart/cart.component.ts
@@ -19,7 +19,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-cart',
   templateUrl: './cart.component.html',
-  styleUrls: ['./cart.component.scss']
+  
 })
 export class CartComponent implements OnInit, OnDestroy {
   screenwidth: number;
diff --git a/src/app/checkout/cart/components/empty-cart/empty-cart.component.html b/src/app/checkout/cart/components/empty-cart/empty-cart.component.html
index 65c0e819..4ffd3c88 100644
--- a/src/app/checkout/cart/components/empty-cart/empty-cart.component.html
+++ b/src/app/checkout/cart/components/empty-cart/empty-cart.component.html
@@ -5,7 +5,7 @@
   <div class="empty-cart-message">Your Shopping Bag is empty</div>
   <button
     type="button"
-    class="btn themebtnprimary themebtnprimarysade col-8 col-sm-3 m-auto m-b-4"
+    class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary themebtnprimarysade w-2/3 sm:w-1/4 pr-4 pl-4 m-auto m-b-4"
     [routerLink]="['/']"
   >
     Continue Shopping
diff --git a/src/app/checkout/cart/components/empty-cart/empty-cart.component.scss b/src/app/checkout/cart/components/empty-cart/empty-cart.component.scss
deleted file mode 100644
index 99b1d171..00000000
--- a/src/app/checkout/cart/components/empty-cart/empty-cart.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.cart-empty {
-  min-height: 500px;
-  padding-top: 85px;
-  text-align: center;
-  .empty-cart-icon {
-    height: 85px;
-    width: 85px;
-    margin: 0 auto;
-    // background-image: url(/assets/shoppingbag.png);
-  }
-  .empty-cart-message {
-    font-size: 20px;
-    color: $gray-800;
-    font-weight: 600;
-    font-family: $primary-font;
-    line-height: 120px;
-    margin: 15px 0;
-  }
-  .empty-wishlist-link {
-    color: $blue;
-    font-size: 16px;
-    font-weight: 500;
-  }
-  .empty-card-btn {
-    background-color: darken($theme-action-color, 25);
-    border: 1px solid darken($theme-action-color, 25);
-  }
-}
diff --git a/src/app/checkout/cart/components/empty-cart/empty-cart.component.ts b/src/app/checkout/cart/components/empty-cart/empty-cart.component.ts
index 60d66407..b28cf29a 100644
--- a/src/app/checkout/cart/components/empty-cart/empty-cart.component.ts
+++ b/src/app/checkout/cart/components/empty-cart/empty-cart.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-empty-cart',
   templateUrl: './empty-cart.component.html',
-  styleUrls: ['./empty-cart.component.scss']
+  
 })
 export class EmptyCartComponent implements OnInit {
   constructor() {}
diff --git a/src/app/checkout/cart/components/line-item-list/line-item-list.component.scss b/src/app/checkout/cart/components/line-item-list/line-item-list.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/checkout/cart/components/line-item-list/line-item-list.component.ts b/src/app/checkout/cart/components/line-item-list/line-item-list.component.ts
index ff792faa..9462ee4c 100644
--- a/src/app/checkout/cart/components/line-item-list/line-item-list.component.ts
+++ b/src/app/checkout/cart/components/line-item-list/line-item-list.component.ts
@@ -8,7 +8,7 @@ import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 @Component({
   selector: 'app-line-item-list',
   templateUrl: './line-item-list.component.html',
-  styleUrls: ['./line-item-list.component.scss']
+  
 })
 export class LineItemListComponent implements OnInit, OnDestroy {
   @Input() isMobile;
diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html
index fe2b1e84..1a0700af 100644
--- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html
+++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html
@@ -1,16 +1,16 @@
 <div class="prod-item pb-3" *ngIf="!isMobile">
   <div *ngIf="name">
-    <div class="col1 col-4 col-sm-2 col-md-2 col-lg-2">
+    <div class="col1 w-1/3 sm:w-1/5 pr-4 pl-4 md:w-1/5 pr-4 pl-4 lg:w-1/5 pr-4 pl-4">
       <img [src]="image" alt="" />
     </div>
-    <div class="col2 col-6 col-sm-10 col-md-10 col-lg-10">
-      <div class="row m-0">
-        <div class="prod-name col-9">
+    <div class="col2 w-1/2 sm:w-4/5 pr-4 pl-4 md:w-4/5 pr-4 pl-4 lg:w-4/5 pr-4 pl-4">
+      <div class="flex flex-wrap  m-0">
+        <div class="prod-name w-3/4">
           <div class="c-gray">
             {{ name }}
           </div>
         </div>
-        <div class="size-qty-wrap col-3 p-0">
+        <div class="size-qty-wrap w-1/4 p-0">
           <div class="size-qty buy-quantity">
             <a class="cw-btn  quantity-minus" (click)="removeQuantity()">-</a>
             <input
@@ -43,18 +43,18 @@
   </div>
 </div>
 <div class="prod-item py-2" *ngIf="isMobile">
-  <div class="row m-0">
-    <div class="col1 col-4 ">
+  <div class="flex flex-wrap  m-0">
+    <div class="col1 w-1/3 ">
       <img [src]="image" alt="" />
     </div>
-    <div class="col2 col-8">
-      <div class="row m-0">
-        <div class="prod-name col-12">
+    <div class="col2 w-2/3">
+      <div class="flex flex-wrap  m-0">
+        <div class="prod-name w-full">
           <div class="c-gray">
             {{ name }}
           </div>
         </div>
-        <div class="size-qty-wrap col-12 p-0">
+        <div class="size-qty-wrap w-full p-0">
           <div class="size-qty buy-quantity">
             <a class="cw-btn  quantity-minus" (click)="removeQuantity()">-</a>
             <input
diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss
deleted file mode 100644
index 410f63c5..00000000
--- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import '../../../../../shared/scss/selected_theme_variables';
-.prod-item {
-  margin-bottom: 30px;
-  text-transform: none;
-  border-bottom: 1px solid $gray-10;
-  position: relative;
-  .col1 {
-    display: inline-block;
-    vertical-align: bottom;
-    img {
-      width: 120px;
-      height: 160px;
-      object-fit: contain;
-    }
-  }
-  .col2 {
-    vertical-align: top;
-    display: inline-block;
-    padding: 10px 10px 10px 25px;
-    min-height: 145px;
-    position: relative;
-    .prod-name {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding: 5px 5px 5px 0;
-      .c-gray {
-        font-size: 1.3em;
-        font-family: $primary-font;
-        font-weight: normal;
-        color: $gray-900;
-        margin-right: 6px;
-        @media screen and (min-width: 320px) and (max-width: 768px) {
-          white-space: normal;
-        }
-      }
-    }
-    .prod-amount {
-      padding: 5px 5px 5px 0;
-      display: inline-block;
-      vertical-align: top;
-      font-weight: 600;
-      font-size: 1.3em;
-      font-family: $primary-font;
-      color: darken($theme-action-color, 25);
-    }
-    .size-qty-wrap {
-      display: inline-block;
-      margin: 5px 0;
-      color: $gray-400;
-      text-align: right;
-      .size-qty {
-        display: inline-block;
-        .size,
-        .qty {
-          color: $gray-400;
-          cursor: pointer;
-          margin-right: 20px;
-          font-size: 1.7em;
-          .gray,
-          .value {
-            color: $gray-900;
-          }
-          .icon {
-            width: 20px;
-            height: 20px;
-            background-position: -2570px -13px;
-            display: inline-block;
-            overflow: hidden;
-            background-repeat: no-repeat;
-            background-size: 4250px 153px;
-            vertical-align: middle;
-            // background-image: url(/assets/checkout_sprite.png);
-          }
-        }
-      }
-    }
-    .edit-move-delete {
-      position: absolute;
-      right: 20px;
-      top: 0;
-      color: $gray-11;
-      right: -14px;
-      @media screen and (min-width: 320px) and (max-width: 768px) {
-        right: 0;
-      }
-      top: -8px;
-      .delete-item,
-      .move-item {
-        margin: 0 15px 0 0;
-        cursor: pointer;
-        font-size: 1em;
-      }
-      .move-item {
-        color: $gray-200;
-      }
-    }
-  }
-}
-
-.buy-quantity {
-  display: block;
-  .quantity-input {
-    width: 5em;
-    -webkit-box-shadow: 0 1px 0 $gray-10;
-    box-shadow: 0 1px 0 $gray-10;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    float: left;
-    height: 45px;
-    border: 1px solid $gray-10;
-    text-align: center;
-    position: relative;
-    .quantity-number {
-      top: 0;
-      bottom: auto;
-      font-size: 1.2em;
-    }
-    span {
-      display: block;
-      text-align: center;
-      font-size: 0.8em;
-      color: $gray-800;
-    }
-  }
-  a.quantity-minus {
-    font-size: 2.4em;
-    line-height: 1.3em;
-    text-align: center;
-    width: 1em;
-  }
-  a.disabled {
-    cursor: default;
-    background: $gray-200;
-    color: $gray-10;
-  }
-  a {
-    cursor: pointer;
-    width: 1.4em;
-    color: $gray-600;
-    float: left;
-    height: 50px;
-    padding: 0;
-    margin: 0;
-    line-height: 50px;
-    font-weight: 400;
-    font-size: 1.7em;
-    border: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-}
diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts
index 58e851cc..e0f8feea 100644
--- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts
+++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts
@@ -12,7 +12,7 @@ import { switchMap } from 'rxjs/operators';
 @Component({
   selector: 'app-line-item',
   templateUrl: './line-item.component.html',
-  styleUrls: ['./line-item.component.scss']
+  
 })
 export class LineItemComponent implements OnInit, OnDestroy {
   @Input() isMobile;
diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html
index 9b682267..203be4fb 100644
--- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html
+++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html
@@ -1,7 +1,7 @@
 <div class="order-total-summary" *ngIf="!isMobile">
   <div class="order-total footer">
     <div class="place-order">
-      <button (click)="placeOrder()" class="btn themebtnprimary">
+      <button (click)="placeOrder()" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary">
         Proceed to Checkout
       </button>
     </div>
@@ -37,22 +37,22 @@
   </div>
   <div class="order-total footer">
     <div class="place-order">
-      <button (click)="placeOrder()" class="btn themebtnprimary">
+      <button (click)="placeOrder()" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary">
         Proceed to Checkout
       </button>
     </div>
   </div>
-  <button type="button" class="btn shippingbtn" *ngIf="!enableshipping">
+  <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline shippingbtn" *ngIf="!enableshipping">
     You qualify for free delivery!
     <i class="fa ml-2 fa-truck" aria-hidden="true"></i>
   </button>
-  <button type="button" class="btn shippingbtn" *ngIf="enableshipping">
+  <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline shippingbtn" *ngIf="enableshipping">
     Only {{ currency }}{{ enableshippingvalue | number: '1.2-2' }}
     to go for free delivery!
     <i class="fa ml-2 fa-truck" aria-hidden="true"></i>
   </button>
 
-  <div class="d-flex shippingprogess">
+  <div class="flex shippingprogess">
     <span class="mr-2"> {{ currency }}0 </span>
     <span class="shipcount__bg__line"></span>
     <span class="shipcount__bg__line"></span>
diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss
deleted file mode 100644
index 48b7610a..00000000
--- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.order-total-summary {
-  .order-summary-span {
-    position: relative;
-    padding: none;
-    .bag-total {
-      padding: 1rem 0;
-      border-bottom: 1px solid $gray-10;
-      @media screen and (min-width: 320px) and (max-width: 768px) {
-        border-bottom: 0 solid $gray-10;
-        padding-bottom: 0;
-      }
-      position: relative;
-      span {
-        color: $gray-900;
-        font-size: 1.2em;
-      }
-    }
-    .shipping {
-      padding: 1rem 0;
-      div {
-        color: $gray-900;
-        font-size: 1.2em;
-      }
-    }
-    .bag-total > .value,
-    .coupon > .apply-coupon,
-    .shipping > .shipping-fee {
-      @media screen and (min-width: 320px) and (max-width: 768px) {
-        position: static;
-      }
-      position: absolute;
-      right: 0;
-      text-align: right;
-      color: darken($theme-action-color, 25);
-      font-size: 1.2em;
-      font-weight: 600;
-    }
-    .coupon > .c-blue {
-      color: darken($theme-action-color, 25);
-      cursor: pointer;
-    }
-    .shipping > .c-green {
-      color:darken($theme-action-color, 55);
-      width: 11.8em;
-      font-size: 14px;
-      padding-top: 5px;
-    }
-  }
-  .order-total.footer {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    clear: right;
-    .place-order {
-      text-align: right;
-    }
-  }
-}
-
-.shippingbtn {
-  font-size: 0.8em !important;
-  width: 100%;
-  background-color: transparent;
-  i {
-    font-size: 20px;
-    color: $black;
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-    filter: FlipH;
-    -ms-filter: 'FlipH';
-  }
-  &:hover {
-    background-color:darken($theme-main-color, 25) !important;
-  }
-}
-
-.shippingprogess {
-  position: relative;
-  text-transform: uppercase;
-  span {
-    width: 54px;
-    text-align: center;
-  }
-  .shipcount__bg__line {
-    width: 1px;
-    height: 11px;
-    display: block;
-    background-color: #fff;
-    position: absolute;
-    top: 4px;
-    z-index: 1;
-    &:first-child {
-      left: 10vw;
-    }
-    &:nth-child(2) {
-      left: 25vw;
-    }
-    &:nth-child(3) {
-      left: 38vw;
-    }
-    &:nth-child(4) {
-      left: 52vw;
-    }
-    &:nth-child(5) {
-      left: 66vw;
-    }
-  }
-  .shipcount__bg__line:first-child {
-    left: 10vw;
-  }
-  .progress {
-    background-color: rgba(0, 0, 0, 0.1);
-    height: 0.9em;
-    top: 4px;
-    position: relative;
-    z-index: 0;
-    .progress-bar {
-      background-color: $red;
-    }
-  }
-}
diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.ts b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.ts
index 0f4141ad..b8198305 100644
--- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.ts
+++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.ts
@@ -9,7 +9,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-order-total-summary',
   templateUrl: './order-total-summary.component.html',
-  styleUrls: ['./order-total-summary.component.scss']
+  
 })
 export class OrderTotalSummaryComponent
   implements OnInit, OnChanges, OnDestroy {
diff --git a/src/app/checkout/order-failed/order-failed.component.html b/src/app/checkout/order-failed/order-failed.component.html
index 54737bc6..1aea8bcd 100644
--- a/src/app/checkout/order-failed/order-failed.component.html
+++ b/src/app/checkout/order-failed/order-failed.component.html
@@ -1,28 +1,28 @@
-<div class="container" *ngIf="orderDetails">
-  <div class="col-12 thankyou thankyou1 shadow-sm mt-5 mb-3">
-    <div class="row">
-      <div class="col-12 col-sm-9">
+<div class="container mx-auto sm:px-4" *ngIf="orderDetails">
+  <div class="w-full thankyou thankyou1 shadow-sm mt-5 mb-3">
+    <div class="flex flex-wrap ">
+      <div class="w-full sm:w-3/4 pr-4 pl-4">
         <h1>Payment Failed</h1>
         <h5 *ngIf="errorReason">Reason: {{ errorReason }}</h5>
         <div class="float-left close-btn">
           <i class="fa fa-close"></i>
         </div>
         <div>
-          <p class="w-75 text-danger thankyoumsg">
+          <p class="w-3/4 text-red-600 thankyoumsg">
             Your payment for order could not be completed.Please retry payment.
           </p>
         </div>
       </div>
-      <div class="col-12 col-sm-3 text-right">
-        <button class="btn themebtnprimary">
+      <div class="w-full sm:w-1/4 pr-4 pl-4 text-right">
+        <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary">
           Retry Payment
         </button>
       </div>
     </div>
   </div>
   <div class="order shadow-sm">
-    <div class="row">
-      <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+    <div class="flex flex-wrap ">
+      <div class="w-full sm:w-1/3 pr-4 pl-4 md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4">
         <h3>Order Details</h3>
         <table>
           <tr>
@@ -42,7 +42,7 @@ <h3>Order Details</h3>
           <!-- <tr *ngIf=orderDetails.payment_state>
             <td>Payment Status:</td>
             <td>
-              <b class="text-uppercase">
+              <b class="uppercase">
                 {{orderDetails.payment_state | humanize | uppercase}}
               </b>
 
@@ -51,7 +51,7 @@ <h3>Order Details</h3>
         </table>
       </div>
 
-      <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+      <div class="w-full sm:w-1/3 pr-4 pl-4 md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4">
         <h3>Delivery Address</h3>
         <table>
           <tr>
@@ -83,9 +83,9 @@ <h3>Delivery Address</h3>
           </tr> -->
         </table>
       </div>
-      <!-- <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+      <!-- <div class="w-full sm:w-1/3 pr-4 pl-4 md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4">
         <h3>Shipping</h3>
-        <div class="col-sm text-uppercase p-0">
+        <div class="relative sm:flex-grow sm:flex-1 uppercase p-0">
           <p>Shipping Status: </p>
           <b>{{orderDetails.shipment_state | humanize | uppercase}}</b>
         </div>
@@ -99,25 +99,25 @@ <h3>Shipping</h3>
       *ngIf="!layoutState.isMobileView"
     >
       <h3>Item(s)</h3>
-      <div class="row">
+      <div class="flex flex-wrap ">
         <div
           *ngFor="let item of orderDetails.line_items"
-          class="lineitems col-12 col-sm-6"
+          class="lineitems w-full sm:w-1/2 pr-4 pl-4"
         >
-          <div class="row">
-            <div class="col-12 pr-0 col-sm-2">
-              <a [routerLink]="['/', item.product.slug]" class="col-sm col-3">
+          <div class="flex flex-wrap ">
+            <div class="w-full pr-0 sm:w-1/5 pr-4 pl-4">
+              <a [routerLink]="['/', item.product.slug]" class="relative sm:flex-grow sm:flex-1 w-1/4">
                 <img [src]="getProductImageUrl(item)" />
               </a>
             </div>
             <div
-              class="col-12 col-sm-8"
+              class="w-full sm:w-2/3 pr-4 pl-4"
               [routerLink]="['/', item.variant.slug]"
             >
               <div class="lineitems-name">{{ item.product.name }}</div>
               <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
             </div>
-            <div class="col-12 col-sm-2">
+            <div class="w-full sm:w-1/5 pr-4 pl-4">
               <div class="price">{{ item.total_price }}</div>
               <div class="qty">QTY: {{ item.quantity }}</div>
             </div>
@@ -130,22 +130,22 @@ <h3>Item(s)</h3>
       *ngIf="layoutState.isMobileView"
     >
       <h3>Item(s)</h3>
-      <div class="row">
+      <div class="flex flex-wrap ">
         <div
           *ngFor="let item of orderDetails.line_items"
-          class="lineitems col-12 col-sm-6"
+          class="lineitems w-full sm:w-1/2 pr-4 pl-4"
         >
-          <div class="row">
-            <div class="col-12 pr-0 col-sm-2">
-              <a [routerLink]="['/', item.product.slug]" class="col-sm col-3">
+          <div class="flex flex-wrap ">
+            <div class="w-full pr-0 sm:w-1/5 pr-4 pl-4">
+              <a [routerLink]="['/', item.product.slug]" class="relative sm:flex-grow sm:flex-1 w-1/4">
                 <img [src]="getProductImageUrl(item)" />
               </a>
             </div>
-            <div class="col-6 col-sm-8" [routerLink]="['/', item.product.slug]">
+            <div class="w-1/2 sm:w-2/3 pr-4 pl-4" [routerLink]="['/', item.product.slug]">
               <div class="lineitems-name">{{ item.product.name }}</div>
               <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
             </div>
-            <div class="col-6 col-sm-2 text-right">
+            <div class="w-1/2 sm:w-1/5 pr-4 pl-4 text-right">
               <div class="qty">QTY: {{ item.quantity }}</div>
               <div class="price">{{ item.total_price }}</div>
             </div>
diff --git a/src/app/checkout/order-failed/order-failed.component.scss b/src/app/checkout/order-failed/order-failed.component.scss
deleted file mode 100644
index 03bf83dd..00000000
--- a/src/app/checkout/order-failed/order-failed.component.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .thankyou1 {
-    margin-top: 4em !important;
-  }
-}
-
-.close-btn {
-  background-color: $red;
-  padding: 5px 10px;
-  border-radius: 50%;
-  font-size: 1.5em;
-  width: 40px;
-  height: 40px;
-  color: $white !important;
-}
-
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .mobileth {
-    margin-top: 4em !important;
-  }
-}
-
-.thankyou {
-  padding: 2em;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    padding: 15px;
-    margin: 10px 0px;
-  }
-  background-color: transparent;
-  border: 1px solid $gray-10;
-  h1 {
-    font-size: 1.7em;
-    text-transform: capitalize;
-  }
-  .fa-check-circle {
-    font-size: 40px;
-  }
-  .thankyoumsg {
-    padding: 0px 36px;
-    margin-left: 17px;
-    display: block;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 0px 10px 0px 35px;
-    }
-  }
-}
-
-.order {
-  @extend .thankyou;
-  h3 {
-    font-size: 1.7em;
-    color: $gray-600;
-  }
-  td {
-    font-size: 14px;
-  }
-}
-
-.order-items {
-  .order {
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-    }
-    padding: 0px;
-  }
-  @extend .thankyou;
-  h3 {
-    font-size: 1.7em;
-    color: $gray-600;
-  }
-}
-
-.lineitems {
-  .row {
-    border-bottom: 1px solid $gray-10;
-    margin: 0;
-    padding: 5px 0;
-  }
-  padding: 0.5rem;
-  img {
-    height: 75px;
-    width: 100%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      height: 121px;
-      width: 100%;
-      margin: auto;
-      object-fit: scale-down;
-    }
-  }
-  .lineitems-name {
-    font-size: 1em;
-    color: $gray-900;
-    font-weight: 200;
-    cursor: pointer;
-  }
-  .lineitems-info {
-    font-size: 0.8em;
-    color: $gray-900;
-    cursor: pointer;
-  }
-  .price {
-    color: $red;
-    font-size: 1.2em;
-    font-weight: bold;
-    text-align: right;
-  }
-  .qty {
-    font-size: 0.8em;
-    text-align: right;
-  }
-}
diff --git a/src/app/checkout/order-failed/order-failed.component.ts b/src/app/checkout/order-failed/order-failed.component.ts
index 39f50e3d..8a470c8a 100644
--- a/src/app/checkout/order-failed/order-failed.component.ts
+++ b/src/app/checkout/order-failed/order-failed.component.ts
@@ -13,7 +13,7 @@ import { environment } from '../../../environments/environment';
 @Component({
   selector: 'app-order-failed',
   templateUrl: './order-failed.component.html',
-  styleUrls: ['./order-failed.component.scss']
+  
 })
 export class OrderFailedComponent implements OnInit {
   queryParams: Params;
diff --git a/src/app/checkout/order-success/order-success.component.html b/src/app/checkout/order-success/order-success.component.html
index bdf9d820..63752ed7 100644
--- a/src/app/checkout/order-success/order-success.component.html
+++ b/src/app/checkout/order-success/order-success.component.html
@@ -1,19 +1,19 @@
-<div class="container" *ngIf="orderDetails">
-  <div class="col-12 thankyou mobileth shadow-sm mt-5 mb-3">
+<div class="container mx-auto sm:px-4" *ngIf="orderDetails">
+  <div class="w-full thankyou mobileth shadow-sm mt-5 mb-3">
     <h1>Thank you for your order!</h1>
     <div class="float-left">
-      <i class="fa fa-check-circle text-success"></i>
+      <i class="fa fa-check-circle text-green-500"></i>
     </div>
     <div>
-      <p class="w-75 text-success thankyoumsg">
+      <p class="w-3/4 text-green-500 thankyoumsg">
         Your order has been placed and is being processed. When the item(s) are
         shipped, you will receive an email with the details.
       </p>
     </div>
   </div>
   <div class="order shadow-sm">
-    <div class="row">
-      <div class="col-12 col-sm-6 col-md-6 col-lg-6">
+    <div class="flex flex-wrap ">
+      <div class="w-full sm:w-1/2 pr-4 pl-4 md:w-1/2 pr-4 pl-4 lg:w-1/2 pr-4 pl-4">
         <h3>Order Details</h3>
         <table>
           <tr>
@@ -33,12 +33,12 @@ <h3>Order Details</h3>
           <!-- <tr>
             <td>Payment Status:</td>
             <td>
-              <b class="text-uppercase">{{orderDetails.payment_state |humanize | uppercase}}</b>
+              <b class="uppercase">{{orderDetails.payment_state |humanize | uppercase}}</b>
             </td>
           </tr> -->
         </table>
       </div>
-      <div class="col-12 col-sm-6 col-md-6 col-lg-6">
+      <div class="w-full sm:w-1/2 pr-4 pl-4 md:w-1/2 pr-4 pl-4 lg:w-1/2 pr-4 pl-4">
         <h3>Delivery Address</h3>
         <table>
           <tr>
@@ -70,9 +70,9 @@ <h3>Delivery Address</h3>
           </tr> -->
         </table>
       </div>
-      <!-- <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+      <!-- <div class="w-full sm:w-1/3 pr-4 pl-4 md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4">
         <h3>Shipping</h3>
-        <div class="col-sm  p-0">
+        <div class="relative sm:flex-grow sm:flex-1  p-0">
           <p>Status: </p>
           <b *ngIf="orderDetails.state === 'rts'">Ready To Ship</b>
         </div>
@@ -85,25 +85,25 @@ <h3>Shipping</h3>
       *ngIf="!layoutState.isMobileView"
     >
       <h3>Item(s)</h3>
-      <div class="row">
+      <div class="flex flex-wrap ">
         <div
           *ngFor="let item of orderDetails.line_items"
-          class="lineitems col-12 col-sm-6"
+          class="lineitems w-full sm:w-1/2 pr-4 pl-4"
         >
-          <div class="row">
-            <div class="col-12 pr-0 col-sm-2">
-              <a [routerLink]="['/', item.product.slug]" class="col-sm col-3">
+          <div class="flex flex-wrap ">
+            <div class="w-full pr-0 sm:w-1/5 pr-4 pl-4">
+              <a [routerLink]="['/', item.product.slug]" class="relative sm:flex-grow sm:flex-1 w-1/4">
                 <img [src]="getProductImageUrl(item)" />
               </a>
             </div>
             <div
-              class="col-12 col-sm-7"
+              class="w-full sm:w-3/5 pr-4 pl-4"
               [routerLink]="['/', item.product.slug]"
             >
               <div class="lineitems-name">{{ item.product.name }}</div>
               <!-- <div class="lineitems-info"> {{item.variant.options_text}}</div> -->
             </div>
-            <div class="col-12 col-sm-3">
+            <div class="w-full sm:w-1/4 pr-4 pl-4">
               <div class="price">{{ currency }} {{ item.total_price }}</div>
               <div class="qty">QTY: {{ item.quantity }}</div>
             </div>
@@ -116,22 +116,22 @@ <h3>Item(s)</h3>
       *ngIf="layoutState.isMobileView"
     >
       <h3>Item(s)</h3>
-      <div class="row">
+      <div class="flex flex-wrap ">
         <div
           *ngFor="let item of orderDetails.line_items"
-          class="lineitems col-12 col-sm-6"
+          class="lineitems w-full sm:w-1/2 pr-4 pl-4"
         >
-          <div class="row">
-            <div class="col-12 pr-0 col-sm-2">
-              <a [routerLink]="['/', item.product.slug]" class="col-sm col-3">
+          <div class="flex flex-wrap ">
+            <div class="w-full pr-0 sm:w-1/5 pr-4 pl-4">
+              <a [routerLink]="['/', item.product.slug]" class="relative sm:flex-grow sm:flex-1 w-1/4">
                 <img [src]="getProductImageUrl(item)" />
               </a>
             </div>
-            <div class="col-6 col-sm-8" [routerLink]="['/', item.product.slug]">
+            <div class="w-1/2 sm:w-2/3 pr-4 pl-4" [routerLink]="['/', item.product.slug]">
               <div class="lineitems-name">{{ item.product.name }}</div>
               <!-- <div class="lineitems-info"> {{item.variant.options_text}}</div> -->
             </div>
-            <div class="col-6 col-sm-2">
+            <div class="w-1/2 sm:w-1/5 pr-4 pl-4">
               <div class="qty">QTY: {{ item.quantity }}</div>
               <div class="price">{{ currency }} {{ item.total_price }}</div>
             </div>
diff --git a/src/app/checkout/order-success/order-success.component.scss b/src/app/checkout/order-success/order-success.component.scss
deleted file mode 100644
index faf908b6..00000000
--- a/src/app/checkout/order-success/order-success.component.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .mobileth {
-    margin-top: 4em !important;
-  }
-}
-
-.thankyou {
-  padding: 2em;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    padding: 15px;
-    margin: 10px 0px;
-  }
-  background-color: transparent;
-  border: 1px solid $gray-10;
-  h1 {
-    font-size: 1.7em;
-    text-transform: capitalize;
-  }
-  .fa-check-circle {
-    font-size: 40px;
-  }
-  .thankyoumsg {
-    padding: 0px 36px;
-    margin-left: 17px;
-    display: block;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 0px 10px 0px 35px;
-    }
-  }
-}
-
-.order {
-  @extend .thankyou;
-  h3 {
-    font-size: 1.7em;
-    color: $gray-600;
-  }
-  td {
-    font-size: 14px;
-  }
-}
-
-.order-items {
-  .order {
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-    }
-    padding: 0px;
-  }
-  @extend .thankyou;
-  h3 {
-    font-size: 1.7em;
-    color: $gray-600;
-  }
-}
-
-.lineitems {
-  .row {
-    border-bottom: 1px solid $gray-10;
-    margin: 0;
-    padding: 5px 0;
-  }
-  padding: 0.5rem;
-  img {
-    height: 75px;
-    width: 100%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      height: 121px;
-      width: 100%;
-      margin: auto;
-      object-fit: scale-down;
-    }
-  }
-  .lineitems-name {
-    font-size: 1em;
-    color: $gray-900;
-    font-weight: 200;
-    cursor: pointer;
-  }
-  .lineitems-info {
-    font-size: 0.8em;
-    color: $gray-900;
-    cursor: pointer;
-  }
-  .price {
-    color: $red;
-    font-size: 1.2em;
-    font-weight: bold;
-    text-align: right;
-  }
-  .qty {
-    font-size: 0.8em;
-    text-align: right;
-  }
-}
diff --git a/src/app/checkout/order-success/order-success.component.ts b/src/app/checkout/order-success/order-success.component.ts
index a07b702c..6ce7e8c1 100644
--- a/src/app/checkout/order-success/order-success.component.ts
+++ b/src/app/checkout/order-success/order-success.component.ts
@@ -13,7 +13,7 @@ import { environment } from '../../../environments/environment';
 @Component({
   selector: 'app-order-success',
   templateUrl: './order-success.component.html',
-  styleUrls: ['./order-success.component.scss']
+  
 })
 export class OrderSuccessComponent implements OnInit {
   queryParams: Params;
diff --git a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.html b/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.html
index 8e3c0252..b856be86 100644
--- a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.html
+++ b/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.html
@@ -12,8 +12,8 @@
     accepted.
   </div>
 </div>
-<div class="row">
-  <div class="col-md-6">
+<div class="flex flex-wrap ">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="addPayment()"
@@ -28,7 +28,7 @@
       </button>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="processCod()"
diff --git a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.scss b/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.scss
deleted file mode 100644
index 5a6337ee..00000000
--- a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.cod-block {
-  .section-help {
-    padding: 23px 0px 36px !important;
-    text-transform: uppercase;
-    width: 100% !important;
-    border-bottom: 1px solid $gray-10 !important;
-    height: 66px;
-    .lbl {
-      color: $gray-800;
-      font-size: 16px;
-      display: block;
-      font-weight: 600;
-      font-family: $primary-font;
-    }
-    .sub-lbl {
-      display: block;
-      font-size: 12px;
-      color: $gray-800;
-      text-transform: none;
-    }
-  }
-  .cod-info {
-    padding: 10px 10px 10px 0;
-    font-weight: 600;
-    color: $gray-900;
-    font-size: 14px;
-    margin-bottom: 20px;
-    margin-top: 20px;
-    font-family: $primary-font;
-  }
-}
-
-.pay-btn-wrap {
-}
diff --git a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.ts b/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.ts
index 2a36a3c3..70edafb7 100644
--- a/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.ts
+++ b/src/app/checkout/payment/payment-modes-list/cash-on-delivery/cash-on-delivery.component.ts
@@ -24,7 +24,7 @@ import { CheckoutService } from '../../../../core/services/checkout.service';
 @Component({
   selector: 'app-cash-on-delivery',
   templateUrl: './cash-on-delivery.component.html',
-  styleUrls: ['./cash-on-delivery.component.scss']
+  
 })
 export class CashOnDeliveryComponent implements OnInit, OnDestroy {
   @Output() payOnDelivery: EventEmitter<boolean> = new EventEmitter<boolean>();
diff --git a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.html b/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.html
index f54271a0..13ee8e64 100644
--- a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.html
+++ b/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.html
@@ -12,8 +12,8 @@
   </div>
 </div>
 
-<div class="row">
-  <div class="col-md-6">
+<div class="flex flex-wrap ">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="addPayment()"
@@ -28,7 +28,7 @@
       </button>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="makePaymentPayubiz()"
diff --git a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.scss b/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.scss
deleted file mode 100644
index 9ac0f79c..00000000
--- a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.cod-block {
-  .section-help {
-    padding: 23px 0px 36px !important;
-    text-transform: uppercase;
-    width: 100% !important;
-    border-bottom: 1px solid $gray-10 !important;
-    height: 66px;
-    .lbl {
-      color: $gray-900;
-      font-size: 16px;
-      display: block;
-      font-weight: 600;
-      font-family: $primary-font;
-    }
-    .sub-lbl {
-      display: block;
-      font-size: 12px;
-      color: $gray-900;
-      text-transform: none;
-    }
-  }
-  .cod-info {
-    padding: 10px 10px 10px 0;
-    font-weight: 600;
-    color: $gray-900;
-    font-size: 14px;
-    margin-bottom: 20px;
-    margin-top: 20px;
-    font-family: $primary-font;
-  }
-}
-
-.pay-btn-wrap {
-}
diff --git a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.ts b/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.ts
index f789a5bc..bbd21017 100644
--- a/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.ts
+++ b/src/app/checkout/payment/payment-modes-list/hosted-payment/hosted-payment.component.ts
@@ -24,7 +24,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-hosted-payment',
   templateUrl: './hosted-payment.component.html',
-  styleUrls: ['./hosted-payment.component.scss']
+  
 })
 export class HostedPaymentComponent implements OnInit, OnDestroy {
   @Input() paymentMethodId: number;
diff --git a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.html b/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.html
index 3dc8ef50..fa73f079 100644
--- a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.html
+++ b/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.html
@@ -35,14 +35,14 @@
   <br />
   <br />
   <div *ngIf="showDummyCardInfo && selectedMode?.code === 'hpm'">
-    <div class="alert alert-success">
+    <div class="relative px-3 py-3 mb-4 border rounded bg-green-200 border-green-300 text-green-800">
       <h6>
         <strong>Note:</strong> Use following <strong>Test Card</strong> for
         making payment with {{ selectedMode?.name }}
       </h6>
     </div>
-    <div class="alert alert-warning">
-      <table class="table table-sm table-bordered">
+    <div class="relative px-3 py-3 mb-4 border rounded bg-orange-200 border-orange-300 text-orange-800">
+      <table class="w-full max-w-full mb-4 bg-transparent p-1 table-bordered">
         <tr>
           <th>Card Type</th>
           <td>VISA</td>
diff --git a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.scss b/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.scss
deleted file mode 100644
index f5cb052d..00000000
--- a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.pay-modes {
-  display: inline-block;
-  width: 32%;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    padding: 0;
-    width: 100%;
-  }
-  background: $gray-200;
-  .mode {
-    cursor: pointer;
-    height: 60px;
-    font-size: 14px;
-    font-weight: 600;
-    font-family: $primary-font;
-    text-transform: uppercase;
-    color: $gray-800;
-    padding-top: 22px;
-    padding-left: 20px;
-    border-left: 1px solid $gray-10;
-    border-bottom: 1px solid $gray-10;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      width: 50%;
-      float: left;
-      border-right: 1px solid $gray-10;
-    }
-  }
-  .selected {
-    background-color: $white;
-    border-left: 5px solid $theme-action-color;
-    color: $theme-action-color;
-  }
-}
-
-.selected-mode {
-  display: inline-block;
-  width: 67%;
-  vertical-align: top;
-  padding-left: 40px;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    padding: 0;
-    width: 100%;
-  }
-}
diff --git a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts b/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts
index 7f0d69b7..d49bba8a 100644
--- a/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts
+++ b/src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts
@@ -13,7 +13,7 @@ import { ToastrService } from 'ngx-toastr';
 @Component({
   selector: 'app-payment-modes-list',
   templateUrl: './payment-modes-list.component.html',
-  styleUrls: ['./payment-modes-list.component.scss']
+  
 })
 export class PaymentModesListComponent implements OnInit, OnDestroy {
   paymentMethodId: number;
diff --git a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.html b/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.html
index 50ba4117..7ac5df5f 100644
--- a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.html
+++ b/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.html
@@ -11,8 +11,8 @@
     NOTE: After clicking pay button RazorPay popup will ask for details.
   </div>
 </div>
-<div class="row">
-  <div class="col-md-6">
+<div class="flex flex-wrap ">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="addPayment()"
@@ -27,7 +27,7 @@
       </button>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="razorPayment()"
diff --git a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.scss b/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.scss
deleted file mode 100644
index 80d04f60..00000000
--- a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.cod-block {
-  .section-help {
-    padding: 23px 0px 36px !important;
-    text-transform: uppercase;
-    width: 100% !important;
-    border-bottom: 1px solid $gray-10 !important;
-    height: 66px;
-    .lbl {
-      color: $gray-800;
-      font-size: 16px;
-      display: block;
-      font-weight: 600;
-      font-family: $primary-font;
-    }
-    .sub-lbl {
-      display: block;
-      font-size: 12px;
-      color: $gray-800;
-      text-transform: none;
-    }
-  }
-  .cod-info {
-    padding: 10px 10px 10px 0;
-    font-weight: 600;
-    color: $gray-900;
-    font-size: 14px;
-    margin-bottom: 20px;
-    margin-top: 20px;
-    font-family: $primary-font;
-  }
-}
diff --git a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.ts b/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.ts
index ef66ebb9..8238d1d8 100644
--- a/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.ts
+++ b/src/app/checkout/payment/payment-modes-list/razor-payment/razor-payment.component.ts
@@ -24,7 +24,7 @@ declare var Razorpay: any;
 @Component({
   selector: 'app-razor-payment',
   templateUrl: './razor-payment.component.html',
-  styleUrls: ['./razor-payment.component.scss']
+  
 })
 export class RazorPaymentComponent implements OnInit, OnDestroy {
   @Input() paymentMethodId: number;
diff --git a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.html b/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.html
index a007a938..628ba6b3 100644
--- a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.html
+++ b/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.html
@@ -11,8 +11,8 @@
     NOTE: After clicking pay button stripe popup will ask for details.
   </div>
 </div>
-<div class="row">
-  <div class="col-md-6">
+<div class="flex flex-wrap ">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="addPayment()"
@@ -27,7 +27,7 @@
       </button>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="md:w-1/2 pr-4 pl-4">
     <div class="pay-btn-wrap">
       <button
         (click)="stripePayment()"
diff --git a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.scss b/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.scss
deleted file mode 100644
index 80d04f60..00000000
--- a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.cod-block {
-  .section-help {
-    padding: 23px 0px 36px !important;
-    text-transform: uppercase;
-    width: 100% !important;
-    border-bottom: 1px solid $gray-10 !important;
-    height: 66px;
-    .lbl {
-      color: $gray-800;
-      font-size: 16px;
-      display: block;
-      font-weight: 600;
-      font-family: $primary-font;
-    }
-    .sub-lbl {
-      display: block;
-      font-size: 12px;
-      color: $gray-800;
-      text-transform: none;
-    }
-  }
-  .cod-info {
-    padding: 10px 10px 10px 0;
-    font-weight: 600;
-    color: $gray-900;
-    font-size: 14px;
-    margin-bottom: 20px;
-    margin-top: 20px;
-    font-family: $primary-font;
-  }
-}
diff --git a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.ts b/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.ts
index 3428ca9d..9e9c57b9 100644
--- a/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.ts
+++ b/src/app/checkout/payment/payment-modes-list/stripe-payment/stripe-payment.component.ts
@@ -28,7 +28,7 @@ import { switchMap, tap } from 'rxjs/operators';
 @Component({
   selector: 'app-stripe-payment',
   templateUrl: './stripe-payment.component.html',
-  styleUrls: ['./stripe-payment.component.scss']
+  
 })
 export class StripePaymentComponent implements OnInit, OnDestroy {
   @Input() paymentMethodId: number;
diff --git a/src/app/checkout/payment/payment.component.html b/src/app/checkout/payment/payment.component.html
index 364cf7e4..cd7a8a7b 100644
--- a/src/app/checkout/payment/payment.component.html
+++ b/src/app/checkout/payment/payment.component.html
@@ -1,10 +1,10 @@
 <div
-  class="payment-section container"
+  class="payment-section container mx-auto sm:px-4"
   *ngIf="(totalCartValue$ | async); let totalCartValue"
 >
-  <div class="col-12 col-sm-9 col-md-9 col-lg-9 m-auto p-0">
-    <div class="row m-0">
-      <div class="left col-12 col-md-8 col-lg-8 m-0">
+  <div class="w-full sm:w-3/4 pr-4 pl-4 md:w-3/4 pr-4 pl-4 lg:w-3/4 pr-4 pl-4 m-auto p-0">
+    <div class="flex flex-wrap  m-0">
+      <div class="left w-full md:w-2/3 pr-4 pl-4 lg:w-2/3 pr-4 pl-4 m-0">
         <div class="payment-header">
           <span class="lbl">Choose Payment Mode</span>
           <span class="amt you-pay">
@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <div class="right col-12 col-md-4 col-lg-4 m-0">
+      <div class="right w-full md:w-1/3 pr-4 pl-4 lg:w-1/3 pr-4 pl-4 m-0">
         <div class="mini-bag-summary">
           <div class="lbl">ORDER SUMMARY</div>
           <div class="items">{{ totalCartItems$ | async }} ITEMS</div>
diff --git a/src/app/checkout/payment/payment.component.scss b/src/app/checkout/payment/payment.component.scss
deleted file mode 100644
index 57ffec68..00000000
--- a/src/app/checkout/payment/payment.component.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-.payment-section {
-  margin: 9px auto;
-  .left {
-    vertical-align: top;
-    border-right: 1px solid $gray-10;
-    padding-right: 30px;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 0;
-      border-radius: 0px;
-      border-right: 0px;
-    }
-    .payment-header {
-      background: $white;
-      padding: 10px 0;
-      color: $gray-700;
-      line-height: 50px;
-      .lbl {
-        font-weight: 600;
-        font-size: 16px;
-        color: $gray-800;
-        font-family: $primary-font;
-        @media screen and (min-width: 320px) and (max-width: 768px) {
-          font-weight: 200;
-          font-size: 13px;
-        }
-      }
-      .amt.you-pay {
-        float: right;
-        .amt,
-        .you-pay {
-          font-weight: 600;
-          font-size: 14px;
-          font-family: $primary-font;
-          @media screen and (min-width: 320px) and (max-width: 768px) {
-            font-weight: 200;
-            font-size: 13px;
-          }
-        }
-        .amt {
-          padding-right: 10px;
-          color: $gray-800;
-        }
-        .you-pay {
-          color: $gray-900;
-        }
-      }
-    }
-    .pay-body {
-      border-top: 2px solid $gray-700;
-      position: relative;
-    }
-  }
-  .right {
-    padding-left: 30px;
-    padding-top: 15px;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      width: 100%;
-      padding: 0;
-    }
-    .mini-bag-summary {
-      position: relative;
-      padding: none;
-      border-bottom: 1px solid $gray-10;
-      .lbl {
-        font-size: 12px;
-        font-weight: 600;
-        font-family: $primary-font;
-        color: $gray-700;
-        height: 35px;
-        line-height: 48px;
-      }
-      .items {
-        font-size: 12px;
-        font-weight: 600;
-        font-family: $primary-font;
-        padding-top: 5px;
-      }
-      .order-total,
-      .shipping {
-        font-size: 14px;
-        padding-top: 6px;
-        padding-bottom: 20px;
-        height: 22px;
-        position: relative;
-        span {
-          color: $gray-800;
-        }
-      }
-      .shipping {
-        height: 60px;
-      }
-      .order-total > .value,
-      .shipping > .shipping-fee {
-        position: absolute;
-        right: 0;
-        text-align: right;
-        color: $gray-800;
-      }
-      .shipping > .c-green {
-        color:darken($theme-action-color, 55);
-        width: 15em;
-        font-size: 14px;
-        padding-top: 5px;
-      }
-    }
-    .pay-lbl-total {
-      padding: 10px 0;
-      .pay-lbl,
-      .pay-total {
-        font-weight: 600;
-        font-size: 14px;
-        font-family: $primary-font;
-      }
-      .pay-total {
-        float: right;
-      }
-    }
-    .address-summary {
-      .address-lbl {
-        font-weight: 600;
-        font-size: 12px;
-        color: $gray-700;
-        padding-top: 30px;
-        padding-bottom: 5px;
-        font-family: $primary-font;
-      }
-      .name {
-        color: $gray-900;
-        margin-top: 5px;
-        font-weight: 600;
-        font-family: $primary-font;
-      }
-      .add-info {
-        color: $gray-700;
-        font-size: 13px;
-        line-height: 17px;
-      }
-    }
-  }
-}
diff --git a/src/app/checkout/payment/payment.component.ts b/src/app/checkout/payment/payment.component.ts
index b8567373..0e7e792b 100644
--- a/src/app/checkout/payment/payment.component.ts
+++ b/src/app/checkout/payment/payment.component.ts
@@ -26,7 +26,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-payment',
   templateUrl: './payment.component.html',
-  styleUrls: ['./payment.component.scss']
+  
 })
 export class PaymentComponent implements OnInit, OnDestroy {
   totalCartValue$: Observable<number>;
diff --git a/src/app/landing/components/about-us/about-us.component.html b/src/app/landing/components/about-us/about-us.component.html
index 4640b88b..e707f3b0 100644
--- a/src/app/landing/components/about-us/about-us.component.html
+++ b/src/app/landing/components/about-us/about-us.component.html
@@ -1,11 +1,11 @@
-<div class="main-content container my-4 my-4">
+<div class="main-content container mx-auto sm:px-4 my-4 my-4">
   <div
     id="content"
-    class="col-md-12 center-column content-with-background  px-0"
+    class="md:w-full pr-4 pl-4 center-column content-with-background  px-0"
   >
     <h2 class="my-3">About Us</h2>
-    <div class="row">
-      <div class="col-sm-12"></div>
+    <div class="flex flex-wrap ">
+      <div class="sm:w-full pr-4 pl-4"></div>
     </div>
   </div>
 </div>
diff --git a/src/app/landing/components/about-us/about-us.component.scss b/src/app/landing/components/about-us/about-us.component.scss
deleted file mode 100644
index 8cf42572..00000000
--- a/src/app/landing/components/about-us/about-us.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.main-content {
-  ul {
-    padding-left: 2em;
-    list-style: disc;
-    text-indent: 20px;
-  }
-}
diff --git a/src/app/landing/components/about-us/about-us.component.ts b/src/app/landing/components/about-us/about-us.component.ts
index 0fec0c65..87c04b9d 100644
--- a/src/app/landing/components/about-us/about-us.component.ts
+++ b/src/app/landing/components/about-us/about-us.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-about-us',
   templateUrl: './about-us.component.html',
-  styleUrls: ['./about-us.component.scss']
+  
 })
 export class AboutUsComponent implements OnInit {
   constructor() {}
diff --git a/src/app/landing/components/brands-page/brands-page.component.html b/src/app/landing/components/brands-page/brands-page.component.html
index 1f1f382e..5e2086bc 100644
--- a/src/app/landing/components/brands-page/brands-page.component.html
+++ b/src/app/landing/components/brands-page/brands-page.component.html
@@ -1,3 +1,3 @@
-<div class="container my-3" *ngIf="(brands$ | async); let brandsList">
+<div class="container mx-auto sm:px-4 my-3" *ngIf="(brands$ | async); let brandsList">
   <app-lp-brands [brands]="brandsList"></app-lp-brands>
 </div>
diff --git a/src/app/landing/components/brands-page/brands-page.component.scss b/src/app/landing/components/brands-page/brands-page.component.scss
deleted file mode 100644
index b0aaa4c9..00000000
--- a/src/app/landing/components/brands-page/brands-page.component.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import '../../../shared/scss/_selected_theme_variables';
-:host {
-  ::ng-deep .section-title {
-    color: $black;
-    text-transform: capitalize;
-    font-weight: 600;
-  }
-  ::ng-deep .scrollbar-hidden {
-    overflow: hidden !important;
-  }
-  ::ng-deep .product-tile {
-    text-align: center;
-    a {
-      color: $gray-900;
-      img {
-        object-fit: scale-down;
-        height: 200px;
-        width: 100%;
-      }
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-}
diff --git a/src/app/landing/components/brands-page/brands-page.component.ts b/src/app/landing/components/brands-page/brands-page.component.ts
index c8bfa38f..0881cdbb 100644
--- a/src/app/landing/components/brands-page/brands-page.component.ts
+++ b/src/app/landing/components/brands-page/brands-page.component.ts
@@ -8,7 +8,7 @@ import { getBrands } from '../../../product/reducers/selectors';
 @Component({
   selector: 'app-brands-page',
   templateUrl: './brands-page.component.html',
-  styleUrls: ['./brands-page.component.scss']
+  
 })
 export class BrandsPageComponent implements OnInit {
   brands$: Observable<Array<Brand>>;
diff --git a/src/app/landing/components/faq-page/faq-page.component.html b/src/app/landing/components/faq-page/faq-page.component.html
index 6af2beea..7cdcd24d 100644
--- a/src/app/landing/components/faq-page/faq-page.component.html
+++ b/src/app/landing/components/faq-page/faq-page.component.html
@@ -1,5 +1,5 @@
-<div class="container py-5 my-5 h-100">
-  <div class="row py-5">
-    <div class="col-sm-12 py-1 "></div>
+<div class="container mx-auto sm:px-4 py-5 my-5 h-full">
+  <div class="flex flex-wrap  py-5">
+    <div class="sm:w-full pr-4 pl-4 py-1 "></div>
   </div>
 </div>
diff --git a/src/app/landing/components/faq-page/faq-page.component.scss b/src/app/landing/components/faq-page/faq-page.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/landing/components/faq-page/faq-page.component.ts b/src/app/landing/components/faq-page/faq-page.component.ts
index 02448567..31edd869 100644
--- a/src/app/landing/components/faq-page/faq-page.component.ts
+++ b/src/app/landing/components/faq-page/faq-page.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-faq-page',
   templateUrl: './faq-page.component.html',
-  styleUrls: ['./faq-page.component.scss']
+  
 })
 export class FaqPageComponent implements OnInit {
   constructor() {}
diff --git a/src/app/landing/components/lp-banner/lp-banner.component.html b/src/app/landing/components/lp-banner/lp-banner.component.html
index baba5a15..95837f28 100644
--- a/src/app/landing/components/lp-banner/lp-banner.component.html
+++ b/src/app/landing/components/lp-banner/lp-banner.component.html
@@ -12,8 +12,8 @@
       />
     </a>
   </ngu-item>
-  <button NguCarouselPrev class="leftRs d-none d-sm-block"></button>
-  <button NguCarouselNext class="rightRs d-none d-sm-block"></button>
+  <button NguCarouselPrev class="leftRs hidden sm:block"></button>
+  <button NguCarouselNext class="rightRs hidden sm:block"></button>
   <ul class="ngucarouselPoint" NguCarouselPoint>
     <li
       *ngFor="let idx of landingBanners.pointNumbers; let i = index"
diff --git a/src/app/landing/components/lp-banner/lp-banner.component.scss b/src/app/landing/components/lp-banner/lp-banner.component.scss
deleted file mode 100644
index 7ab11b94..00000000
--- a/src/app/landing/components/lp-banner/lp-banner.component.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@import '../../../shared/scss/_selected_theme_variables.scss';
-:host {
-  ::ng-deep .banner {
-    .bannerStyle {
-      img {
-        height: 350px;
-        object-fit: cover;
-        background-color:darken($theme-main-color, 25);
-      }
-      @media (max-width: 768px) {
-        img {
-          height: 150px;
-          object-fit: cover;
-        }
-      }
-    }
-    .ngucarouselPoint {
-      list-style-type: none;
-      padding: 3px;
-      white-space: nowrap;
-      overflow: auto;
-      position: relative;
-      left: 0;
-      box-sizing: border-box;
-      background-color: $white;
-      margin: 0 auto -28px;
-      align-self: center;
-      width: fit-content;
-      border-radius: 5px 5px 0 0;
-      bottom: 27px;
-      cursor: pointer;
-      @media (min-width: '768px') {
-        bottom: 0;
-      }
-    }
-    @media (min-width: '768px') {
-      .ngucarouselPoint {
-        bottom: 0;
-      }
-    }
-    .ngucarouselPoint li {
-      display: inline-block;
-      border-radius: 999px;
-      background-color: $theme-main-color;
-      border: 1px solid $theme-main-color;
-      padding: 5px;
-      margin: 0 3px;
-      transition: 0.4s ease all;
-    }
-    .ngucarouselPoint li.active {
-      background-color: $white;
-    }
-  }
-  .leftRs,
-  .rightRs {
-    position: absolute;
-    cursor: pointer;
-    margin: auto;
-    top: -10%;
-    bottom: 0;
-    border: none;
-    background-color: transparent;
-    opacity: 0.5;
-    background-repeat: no-repeat;
-    background-position: center;
-    padding: 0 4rem;
-    filter: drop-shadow(0 2px 2px #444);
-    background-size: 3rem;
-  }
-  .leftRs {
-    left: 0;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
-  }
-  .rightRs {
-    right: 0;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
-  }
-  .myBannerPoint {
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    padding: 0;
-    color: beige;
-    justify-content: center;
-    list-style-type: none;
-    background: rgba(0, 0, 0, 0.34);
-    margin: 0;
-    padding: 10px;
-    li {
-      background: #6b6b6b;
-      width: 50px;
-      height: 50px;
-      margin-right: 10px;
-      &.active {
-        transform: translateY(-10px);
-        transition: 0.3s ease all;
-      }
-    }
-  }
-}
diff --git a/src/app/landing/components/lp-banner/lp-banner.component.ts b/src/app/landing/components/lp-banner/lp-banner.component.ts
index 943406bc..23ac3c25 100644
--- a/src/app/landing/components/lp-banner/lp-banner.component.ts
+++ b/src/app/landing/components/lp-banner/lp-banner.component.ts
@@ -12,7 +12,7 @@ import { NguCarouselConfig } from '@ngu/carousel';
 @Component({
   selector: 'app-lp-banner',
   templateUrl: './lp-banner.component.html',
-  styleUrls: ['./lp-banner.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LpBannerComponent implements OnInit, AfterViewInit {
diff --git a/src/app/landing/components/lp-brands/lp-brands.component.html b/src/app/landing/components/lp-brands/lp-brands.component.html
index 1c064dbc..a5bb1186 100644
--- a/src/app/landing/components/lp-brands/lp-brands.component.html
+++ b/src/app/landing/components/lp-brands/lp-brands.component.html
@@ -4,23 +4,23 @@
       <a
         *ngIf="brands.length != 0"
         href="#"
-        class="section-title h3 position-relative"
+        class="section-title h3 relative"
         >100+ Brands in Stock!</a
       >
     </div>
   </div>
-  <div class="row m-0">
+  <div class="flex flex-wrap  m-0">
     <div
-      class="col-4 col-sm-2  col-md-3 col-lg-2 p-0"
+      class="w-1/3 sm:w-1/5 pr-4 pl-4  md:w-1/4 pr-4 pl-4 lg:w-1/5 pr-4 pl-4 p-0"
       *ngFor="let brand of brands"
     >
-      <div class="card">
+      <div class="relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300">
         <a
           [routerLink]="['/s']"
           [queryParams]="{ f: 'Brand:' + brand.name }"
           (click)="setBrandName(brand.name)"
         >
-          <img class="card-img-top" [src]="getBrandImageUrl(brand.image_url)" />
+          <img class="w-full rounded rounded-t" [src]="getBrandImageUrl(brand.image_url)" />
         </a>
       </div>
     </div>
diff --git a/src/app/landing/components/lp-brands/lp-brands.component.scss b/src/app/landing/components/lp-brands/lp-brands.component.scss
deleted file mode 100644
index d9d4cf83..00000000
--- a/src/app/landing/components/lp-brands/lp-brands.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.card {
-  border-radius: 0;
-  margin-left: -1px;
-  margin-top: -1px;
-}
-
-.card-img-top {
-  height: 125px;
-  -o-object-fit: scale-down;
-  object-fit: scale-down;
-  padding: 20px;
-}
diff --git a/src/app/landing/components/lp-brands/lp-brands.component.ts b/src/app/landing/components/lp-brands/lp-brands.component.ts
index 7382b8b1..ad0fac4f 100644
--- a/src/app/landing/components/lp-brands/lp-brands.component.ts
+++ b/src/app/landing/components/lp-brands/lp-brands.component.ts
@@ -12,7 +12,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-lp-brands',
   templateUrl: './lp-brands.component.html',
-  styleUrls: ['./lp-brands.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LpBrandsComponent implements OnInit {
diff --git a/src/app/landing/components/lp-product-list/lp-product-list.component.scss b/src/app/landing/components/lp-product-list/lp-product-list.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/landing/components/lp-product-list/lp-product-list.component.ts b/src/app/landing/components/lp-product-list/lp-product-list.component.ts
index b1fb3edc..7e6094fb 100644
--- a/src/app/landing/components/lp-product-list/lp-product-list.component.ts
+++ b/src/app/landing/components/lp-product-list/lp-product-list.component.ts
@@ -11,7 +11,7 @@ import {
 @Component({
   selector: 'app-lp-product-list',
   templateUrl: './lp-product-list.component.html',
-  styleUrls: ['./lp-product-list.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LpProductListComponent implements OnInit {
diff --git a/src/app/landing/components/lp-product-list/pl-item/pl-item.component.scss b/src/app/landing/components/lp-product-list/pl-item/pl-item.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/landing/components/lp-product-list/pl-item/pl-item.component.ts b/src/app/landing/components/lp-product-list/pl-item/pl-item.component.ts
index 35b0d345..77dbb3a5 100644
--- a/src/app/landing/components/lp-product-list/pl-item/pl-item.component.ts
+++ b/src/app/landing/components/lp-product-list/pl-item/pl-item.component.ts
@@ -9,7 +9,7 @@ import {
 @Component({
   selector: 'app-pl-item',
   templateUrl: './pl-item.component.html',
-  styleUrls: ['./pl-item.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PlItemComponent implements OnInit {
diff --git a/src/app/landing/components/lp-promo/lp-promo.component.html b/src/app/landing/components/lp-promo/lp-promo.component.html
index 9ee92acf..06a138ca 100644
--- a/src/app/landing/components/lp-promo/lp-promo.component.html
+++ b/src/app/landing/components/lp-promo/lp-promo.component.html
@@ -1,7 +1,7 @@
 <section *ngIf="promo_banners">
-  <div class="row">
-    <a href="{{ promo_banners.link_url }}" class="col">
-      <img src="{{ promo_banners.image_link }}" class="img-fluid w-100" />
+  <div class="flex flex-wrap ">
+    <a href="{{ promo_banners.link_url }}" class="relative flex-grow max-w-full flex-1 px-4">
+      <img src="{{ promo_banners.image_link }}" class="max-w-full h-auto w-full" />
     </a>
   </div>
   <hr />
diff --git a/src/app/landing/components/lp-promo/lp-promo.component.scss b/src/app/landing/components/lp-promo/lp-promo.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/landing/components/lp-promo/lp-promo.component.ts b/src/app/landing/components/lp-promo/lp-promo.component.ts
index 57813b5b..0d7e5dad 100644
--- a/src/app/landing/components/lp-promo/lp-promo.component.ts
+++ b/src/app/landing/components/lp-promo/lp-promo.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'app-lp-promo',
   templateUrl: './lp-promo.component.html',
-  styleUrls: ['./lp-promo.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LpPromoComponent implements OnInit {
diff --git a/src/app/landing/components/return-policy/return-policy.component.html b/src/app/landing/components/return-policy/return-policy.component.html
index 8a32a003..b91ad5b8 100644
--- a/src/app/landing/components/return-policy/return-policy.component.html
+++ b/src/app/landing/components/return-policy/return-policy.component.html
@@ -1,11 +1,11 @@
-<div class="container">
+<div class="container mx-auto sm:px-4">
   <div
     id="content"
-    class="col-md-12 center-column content-with-background px-0"
+    class="md:w-full pr-4 pl-4 center-column content-with-background px-0"
   >
     <h2 class="my-3">Return Policy</h2>
-    <div class="row">
-      <div class="col-sm-12"></div>
+    <div class="flex flex-wrap ">
+      <div class="sm:w-full pr-4 pl-4"></div>
     </div>
   </div>
 </div>
diff --git a/src/app/landing/components/return-policy/return-policy.component.scss b/src/app/landing/components/return-policy/return-policy.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/landing/components/return-policy/return-policy.component.ts b/src/app/landing/components/return-policy/return-policy.component.ts
index dce9b9fb..5c2106b3 100644
--- a/src/app/landing/components/return-policy/return-policy.component.ts
+++ b/src/app/landing/components/return-policy/return-policy.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-return-policy',
   templateUrl: './return-policy.component.html',
-  styleUrls: ['./return-policy.component.scss']
+  
 })
 export class ReturnPolicyComponent implements OnInit {
   constructor() {}
diff --git a/src/app/landing/landing.component.html b/src/app/landing/landing.component.html
index ee7787d9..836aa91e 100644
--- a/src/app/landing/landing.component.html
+++ b/src/app/landing/landing.component.html
@@ -1,9 +1,9 @@
 <app-lp-banner></app-lp-banner>
-<button type="button" class="btn shippingbtn d-block d-sm-none">
+<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline shippingbtn block sm:hidden">
   FREE 1-2 DAY SHIPPING OVER {{ currency }}{{ freeShippingAmount }}
   <i class="fa ml-2 fa-truck" aria-hidden="true"></i>
 </button>
-<div class="container my-5" *ngIf="(products$ | async); let productList">
+<div class="container mx-auto sm:px-4 my-5" *ngIf="(products$ | async); let productList">
   <app-lp-product-list
     [products]="productList"
     dealsType="Today's Deal"
diff --git a/src/app/landing/landing.component.scss b/src/app/landing/landing.component.scss
deleted file mode 100644
index 2f441fda..00000000
--- a/src/app/landing/landing.component.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import '../shared/scss/_selected_theme_variables.scss';
-.shippingbtn {
-  font-size: 1em !important;
-  width: 100%;
-  border-radius: 0;
-  i {
-    font-size: 20px;
-    color: $white;
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-    filter: FlipH;
-    -ms-filter: 'FlipH';
-  }
-  &:hover {
-    background-color:darken($theme-main-color, 25) !important;
-  }
-}
-
-.landing {
-  margin-top: 2rem;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    margin-top: 1rem;
-  }
-}
-
-:host {
-  ::ng-deep .section-title {
-    color: $black;
-    text-transform: capitalize;
-    font-weight: 600;
-    position: absolute;
-  }
-  ::ng-deep .scrollbar-hidden {
-    overflow: hidden !important;
-  }
-  ::ng-deep .product-tile {
-    text-align: center;
-    a {
-      color: $gray-900;
-      img {
-        object-fit: scale-down;
-        height: 200px;
-        width: 100%;
-      }
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-  ::ng-deep .product-box {
-    border-radius: 5px;
-    margin-top: 1rem;
-    border: 1px solid transparent;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      margin-right: 1rem;
-      border: 1px solid $gray-10;
-    }
-    &:hover {
-      -webkit-box-shadow: 0 1px 0 $gray-10;
-      box-shadow: 0 1px 0 $gray-10;
-      border-color: $gray-10;
-    }
-  }
-  ::ng-deep.product-tile p {
-    margin-bottom: 0px;
-    white-space: normal;
-    margin-top: 10px;
-  }
-  ::ng-deep.dropdown-toggle::after {
-    vertical-align: 0.055em !important;
-  }
-  $break-small: 320px;
-  @media screen and (min-width: $break-small) and (max-width: 767px) {
-    ::ng-deep .section-title {
-      font-size: 1.4em;
-    }
-  }
-}
diff --git a/src/app/landing/landing.component.ts b/src/app/landing/landing.component.ts
index 52641188..969f65ea 100644
--- a/src/app/landing/landing.component.ts
+++ b/src/app/landing/landing.component.ts
@@ -13,7 +13,7 @@ import { Brand } from '../core/models/brand';
 @Component({
   selector: 'app-landing',
   templateUrl: './landing.component.html',
-  styleUrls: ['./landing.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LandingComponent implements OnInit {
diff --git a/src/app/layout/checkout-footer/checkout-footer.component.scss b/src/app/layout/checkout-footer/checkout-footer.component.scss
deleted file mode 100644
index 48137667..00000000
--- a/src/app/layout/checkout-footer/checkout-footer.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-.checkout-footer {
-  background: $white;
-  border-top: 1px solid $gray-10;
-}
diff --git a/src/app/layout/checkout-footer/checkout-footer.component.ts b/src/app/layout/checkout-footer/checkout-footer.component.ts
index bcf95fb3..9683883a 100644
--- a/src/app/layout/checkout-footer/checkout-footer.component.ts
+++ b/src/app/layout/checkout-footer/checkout-footer.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-checkout-footer',
   templateUrl: './checkout-footer.component.html',
-  styleUrls: ['./checkout-footer.component.scss']
+  
 })
 export class CheckoutFooterComponent implements OnInit {
   constructor() {}
diff --git a/src/app/layout/checkout-header/checkout-header.component.html b/src/app/layout/checkout-header/checkout-header.component.html
index 7eb054e3..1cf18045 100644
--- a/src/app/layout/checkout-header/checkout-header.component.html
+++ b/src/app/layout/checkout-header/checkout-header.component.html
@@ -1,12 +1,12 @@
 <div class="checkout-header">
   <div class="full-container">
-    <a class="navbar-brand" routerLink="/">
+    <a class="inline-block pt-1 pb-1 mr-4 text-lg whitespace-no-wrap" routerLink="/">
       <img
         [src]="this.headerConfig.brand.logo"
         [alt]="this.headerConfig.brand.name"
         [width]="this.headerConfig.brand.width"
         height="this.headerConfig.brand.height"
-        class="d-inline-block align-top"
+        class="inline-block align-top"
         alt=""
       />
     </a>
diff --git a/src/app/layout/checkout-header/checkout-header.component.scss b/src/app/layout/checkout-header/checkout-header.component.scss
deleted file mode 100644
index 58dbf617..00000000
--- a/src/app/layout/checkout-header/checkout-header.component.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import '../../shared/scss/selected_theme_variables';
-.checkout-header {
-  padding: 20px 0;
-  height: 78px;
-  border-bottom: 1px solid $gray-10; // position: fixed;
-  width: 100%;
-  z-index: 1;
-  background: $white;
-  .full-container {
-    max-width: 980px;
-    margin: 0 auto;
-    .navbar-brand {
-      padding: 0px;
-      display: inline-block;
-      img {
-        height: 46px;
-        margin-top: -4px;
-      }
-    }
-    .checkout-steps {
-      margin-left: 25%;
-      margin-top: 8px;
-      margin-bottom: 8px;
-      width: 40%;
-      display: inline-block;
-      padding: 0px;
-      .step {
-        display: inline-block;
-        background: $white;
-        padding: 0px;
-        a {
-          color: $gray-800;
-          text-transform: uppercase;
-          font-size: 12px;
-          font-weight: 600;
-          font-family: $primary-font;
-          letter-spacing: 3px;
-          text-decoration: none;
-          cursor: text;
-        }
-        .can-click {
-          cursor: pointer;
-        }
-        .active {
-          color: $theme-action-color;
-          border-bottom: 2px solid $theme-action-color;
-          padding-bottom: 5px;
-        }
-      }
-      .step1 {
-        margin-right: 5px;
-      }
-      .step2 {
-        margin: 0 5px;
-      }
-      .step3 {
-        margin-left: 5px;
-      }
-      .divider {
-        width: 10%;
-        border-top: 1px dashed $gray-700;
-        height: 5px;
-        display: inline-block !important;
-        background: $white;
-        color: $gray-800 !important;
-        padding: 0 !important;
-      }
-    }
-  }
-}
diff --git a/src/app/layout/checkout-header/checkout-header.component.ts b/src/app/layout/checkout-header/checkout-header.component.ts
index f57d9180..f9170f55 100644
--- a/src/app/layout/checkout-header/checkout-header.component.ts
+++ b/src/app/layout/checkout-header/checkout-header.component.ts
@@ -5,7 +5,7 @@ import { environment } from '../../../environments/environment';
 @Component({
   selector: 'app-checkout-header',
   templateUrl: './checkout-header.component.html',
-  styleUrls: ['./checkout-header.component.scss']
+  
 })
 export class CheckoutHeaderComponent implements OnInit {
   @Input() currentStep: string;
diff --git a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html b/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html
index 91e73517..8344ad95 100644
--- a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html
+++ b/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html
@@ -1,22 +1,22 @@
 <section class="contact-info text-left">
-  <div class="container">
-    <div class="row">
-      <div class="col-12 col-md-5 col-sm-3 col-lg-3">
+  <div class="container mx-auto sm:px-4">
+    <div class="flex flex-wrap ">
+      <div class="w-full md:w-2/5 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 lg:w-1/4 pr-4 pl-4">
         Our experts are available 24/7:
       </div>
-      <div class=" col-12  col-md-6 col-sm-3 col-lg-2">
+      <div class=" w-full  md:w-1/2 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 lg:w-1/5 pr-4 pl-4">
         <i class="fa fa-phone" aria-hidden="true"></i>
         {{ contact_info.contact_no }}
       </div>
-      <div class=" col-12  col-md-4 col-sm-3 col-lg-2">
+      <div class=" w-full  md:w-1/3 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 lg:w-1/5 pr-4 pl-4">
         <a href="#"> <i class="fa fa-envelope"></i> Email Us </a>
       </div>
-      <div class="col-12  col-md-4 col-sm-3 col-lg-2">
+      <div class="w-full  md:w-1/3 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 lg:w-1/5 pr-4 pl-4">
         <a href="#">
           <i class="fa fa-comments" aria-hidden="true"></i> Live Chat
         </a>
       </div>
-      <div class="col-12  col-md-4 col-sm-3 col-lg-3 text-right">
+      <div class="w-full  md:w-1/3 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 lg:w-1/4 pr-4 pl-4 text-right">
         <strong>
           <a class="backtopbtn" (click)="scollTop()">
             <span
diff --git a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.scss b/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.scss
deleted file mode 100644
index 3be59193..00000000
--- a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.line {
-  display: inline;
-  padding: 10px;
-}
-
-.col-md-3,
-.col-md-2 {
-  padding: 10px;
-}
-
-.contact-info {
-  background-color: $theme-main-color;
-  padding: 1rem;
-  color: $footer-font-color;
-  font-size: 1em;
-  font-weight: normal;
-  a {
-    padding: 0.7rem;
-    color: $footer-font-color;
-  }
-  a:hover {
-    background-color: darken($theme-main-color, 40);
-    border-radius: 4px;
-  }
-  .backtopbtn {
-    background-color: $theme-main-sub-color2;
-    border-radius: 4px;
-    text-decoration: none;
-    padding: 0.7rem 1.8rem;
-    color: $footer-font-color;
-    cursor: pointer;
-  }
-}
-
-@media screen and (min-width: 320px) and (max-width: 768px) {
-  .contact-info {
-    a {
-      padding: 0rem;
-      color: $footer-font-color;
-    }
-    .backtopbtn {
-      background-color: darken($theme-main-color, 40);
-      border-radius: 4px;
-      text-align: center;
-      text-decoration: none;
-      padding: 0.7rem 1.8rem;
-      color: $footer-font-color;
-    }
-  }
-}
-
-@media screen and (min-width: 320px) and (max-width: 480px) {
-  .contact-info {
-    .backtopbtn {
-      margin-top: 5px;
-      padding: 0.7rem 1.8rem;
-      display: block;
-    }
-  }
-}
diff --git a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.ts b/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.ts
index 3c6f75dd..5744aabf 100644
--- a/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.ts
+++ b/src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.ts
@@ -5,7 +5,7 @@ import { isPlatformBrowser } from '../../../../../../node_modules/@angular/commo
 @Component({
   selector: 'app-footer-contact-info',
   templateUrl: './footer-contact-info.component.html',
-  styleUrls: ['./footer-contact-info.component.scss']
+  
 })
 export class FooterContactInfoComponent implements OnInit {
   contact_info = environment.config.contact_info;
diff --git a/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.scss b/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.scss
deleted file mode 100644
index 527f64aa..00000000
--- a/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-
-a {
-  color: $footer-font-color;
-}
-
-.line {
-  display: inline;
-  padding: 10px;
-}
-
-ul {
-  list-style: none;
-}
-
-$break-small: 320px;
-@media screen and (min-width: $break-small) and (max-width: 767px) {
-  .qlinks li {
-    widows: 100%;
-    padding: 10px;
-    display: inline-block;
-    text-align: left;
-  }
-}
diff --git a/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.ts b/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.ts
index bf105bc6..51941369 100644
--- a/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.ts
+++ b/src/app/layout/footer/component/footer-quick-links/footer-quick-links.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-footer-quick-links',
   templateUrl: './footer-quick-links.component.html',
-  styleUrls: ['./footer-quick-links.component.scss']
+  
 })
 export class FooterQuickLinksComponent implements OnInit {
   footer_pages = environment.config.footer_page_links;
diff --git a/src/app/layout/footer/component/footer-social-links/footer-social-links.component.scss b/src/app/layout/footer/component/footer-social-links/footer-social-links.component.scss
deleted file mode 100644
index ab072cd2..00000000
--- a/src/app/layout/footer/component/footer-social-links/footer-social-links.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-
-a {
-  color: $footer-font-color;
-}
-
-.line {
-  display: inline;
-  padding: 10px;
-}
-
-.social-link {
-  text-align: right;
-}
-
-$break-small: 320px;
-@media screen and (min-width: $break-small) and (max-width: 767px) {
-  .social-link {
-    text-align: center;
-  }
-}
diff --git a/src/app/layout/footer/component/footer-social-links/footer-social-links.component.ts b/src/app/layout/footer/component/footer-social-links/footer-social-links.component.ts
index fbb1d732..2b1c68e4 100644
--- a/src/app/layout/footer/component/footer-social-links/footer-social-links.component.ts
+++ b/src/app/layout/footer/component/footer-social-links/footer-social-links.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-footer-social-links',
   templateUrl: './footer-social-links.component.html',
-  styleUrls: ['./footer-social-links.component.scss']
+  
 })
 export class FooterSocialLinksComponent implements OnInit {
   social_links = environment.config.footer_social_links;
diff --git a/src/app/layout/footer/footer.component.html b/src/app/layout/footer/footer.component.html
index 252b2316..8652d75f 100644
--- a/src/app/layout/footer/footer.component.html
+++ b/src/app/layout/footer/footer.component.html
@@ -1,26 +1,26 @@
-<footer class="border-top">
+<footer class="border-t">
   <app-footer-contact-info></app-footer-contact-info>
   <div class="quicklinks">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
+    <div class="container mx-auto sm:px-4">
+      <div class="flex flex-wrap ">
+        <div class="md:w-1/2 pr-4 pl-4">
           <app-footer-quick-links></app-footer-quick-links>
         </div>
-        <div class="col-md-6">
+        <div class="md:w-1/2 pr-4 pl-4">
           <app-footer-social-links></app-footer-social-links>
         </div>
       </div>
     </div>
   </div>
   <section class="cpy">
-    <div class="container cpy1">
-      <div class="row">
-        <div class="col-md-6 col-xs-12 text-left">
+    <div class="container mx-auto sm:px-4 cpy1">
+      <div class="flex flex-wrap ">
+        <div class="md:w-1/2 pr-4 pl-4 sm:w-full pr-4 pl-4 text-left">
           <ul class="p-0 copy">
             <li class="pl-0 pr-0">{{ contact_info.copyright }}</li>
           </ul>
         </div>
-        <div class="col-md-6 col-xs-12 text-right">
+        <div class="md:w-1/2 pr-4 pl-4 sm:w-full pr-4 pl-4 text-right">
           <ul class="text-right term">
             <li>
               <a href="#">Terms Of Use</a>
diff --git a/src/app/layout/footer/footer.component.scss b/src/app/layout/footer/footer.component.scss
deleted file mode 100644
index 3b187336..00000000
--- a/src/app/layout/footer/footer.component.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import '../../shared/scss/_selected_theme_variables.scss';
-
-$break-small: 320px;
-footer {
-  height: 50px;
-  position: absolute;
-  right: 0;
-  bottom: -60px;
-  @media screen and (min-width: $break-small) and (max-width: 767px) {
-    bottom: auto;
-  }
-  left: 0;
-  background-color: $gray-10;
-  text-align: center;
-}
-.quicklinks {
-  padding: 2rem 0;
-  background-color: $theme-main-sub-color2;
-  color: $footer-font-color;
-}
-
-.cpy {
-  color: $footer-font-color;
-  background-color: $theme-main-sub-color4;
-}
-
-.cpy1 {
-  ul {
-    padding: 0px;
-    margin: 0px;
-    list-style: none;
-    li {
-      display: inline-block;
-      padding: 1rem;
-      a {
-        color: $gray-600;
-        font-size: 15px;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: $break-small) and (max-width: 767px) {
-  .quicklinks .row {
-    margin: 0px;
-  }
-  .cpy1 {
-    ul.copy {
-      li {
-        width: 100%;
-        text-align: center;
-        padding: 3px;
-      }
-    }
-    ul.term {
-      li {
-        width: 50%;
-        text-align: center;
-        padding: 3px;
-      }
-    }
-  }
-}
diff --git a/src/app/layout/footer/footer.component.ts b/src/app/layout/footer/footer.component.ts
index e649aebf..ffd45a9c 100644
--- a/src/app/layout/footer/footer.component.ts
+++ b/src/app/layout/footer/footer.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+  
 })
 export class FooterComponent implements OnInit {
   contact_info = environment.config.contact_info;
diff --git a/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.scss b/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.scss
deleted file mode 100644
index e91920d6..00000000
--- a/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../../../../../../shared/scss/selected_theme_variables';
-a {
-  &:focus {
-    color: $black;
-    text-decoration: None;
-    &:hover {
-      color: $theme-main-color;
-      text-decoration: underline;
-    }
-  }
-}
-
-.img-fit {
-  max-width: 100%;
-  height: 70px;
-  object-fit: scale-down;
-}
-
-.flex-container {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -moz-flex;
-  display: -webkit-flex;
-  display: flex;
-}
-
-.wrap {
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.wrap li {
-}
-
-.flex-item {
-  padding: 5px;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  line-height: 100px;
-  color: $white;
-  font-weight: bold;
-  font-size: 2em;
-  text-align: center;
-}
diff --git a/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.ts b/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.ts
index 02a2ef5c..6d93c66e 100644
--- a/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.ts
+++ b/src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.ts
@@ -12,7 +12,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-brand-list',
   templateUrl: './brand-list.component.html',
-  styleUrls: ['./brand-list.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BrandListComponent implements OnInit {
diff --git a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.html b/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.html
index 2a17e72f..053db3c5 100644
--- a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.html
+++ b/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.html
@@ -19,13 +19,13 @@
     <div
       id="dropdown-triggers-manual"
       *dropdownMenu
-      class="dropdown-menu"
+      class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded"
       role="menu"
       aria-labelledby="button-triggers-manual"
     >
       <div *ngIf="brandsList">
         <ul>
-          <li *ngFor="let brand of brandsList" class="col-2">
+          <li *ngFor="let brand of brandsList" class="w-1/5">
             <app-brand-list [brand]="brand"></app-brand-list>
           </li>
           <a [routerLink]="['b/brands']">
diff --git a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.scss b/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.scss
deleted file mode 100644
index f53cc82b..00000000
--- a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.dropdown-menu {
-  width: 50rem;
-  padding: 0px;
-  left: -0.2rem !important;
-  top: 3rem !important;
-  min-height: 36.5vw;
-  z-index: 10;
-  padding: 0.7rem;
-  border-radius: 0px;
-  height: 420px;
-  overflow: hidden;
-  overflow-y: auto;
-  &:before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: -9.5px;
-    left: 9.9rem;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid $white;
-    z-index: 3;
-  }
-  .col-2 {
-    flex: 0 0 16.66666667%;
-    max-width: 18.466667%;
-  }
-}
-
-.dpmenu {
-  position: relative;
-}
-
-.cust-menu-btn {
-  font-size: 1.2em;
-  padding: 0.7rem 1.2em 0.7em 0.7em;
-  border-radius: 7px 7px 0px 0px;
-  cursor: pointer;
-  margin-right: 2em;
-  position: relative;
-  left: -2px;
-  &:hover {
-    background-color:darken($theme-main-color, 25);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-  }
-}
-
-.open {
-  background-color:darken($theme-main-color, 25);
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-}
-
-li {
-  padding: 0;
-  margin: 0;
-  line-height: 100px;
-  font-weight: bold;
-  font-size: 1em;
-  text-align: center;
-  float: left;
-  line-height: 1.5em;
-  vertical-align: middle;
-  max-width: 111.6px !important;
-  border: 1px solid $gray-10;
-  padding: 22.2px 19px;
-  margin-right: -1px;
-  margin-top: -1px;
-  &:last-child {
-    padding: 45.3px 24px;
-    background-color: $theme-main-color;
-    /* border: 5px solid #ffffff; */
-    color: $white;
-    box-shadow: inset 0 0 13px $gray-600;
-    max-width: 282px !important;
-    cursor: pointer;
-  }
-}
diff --git a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.ts b/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.ts
index 1a1a2b49..09876617 100644
--- a/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.ts
+++ b/src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.ts
@@ -14,7 +14,7 @@ import { Brand } from '../../../../core/models/brand';
 @Component({
   selector: 'app-brand-menu-dropdown',
   templateUrl: './brand-menu-dropdown.component.html',
-  styleUrls: ['./brand-menu-dropdown.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BrandMenuDropdownComponent implements OnInit, OnDestroy {
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.html b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.html
index d98e1d3a..c657f5e9 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.html
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.html
@@ -1,11 +1,11 @@
-<div class="row pl-3" *ngIf="brandList">
+<div class="flex flex-wrap  pl-3" *ngIf="brandList">
   <div class="clearfix"></div>
   <div
     *ngFor="let brand of (brandList | slice: 0:5)"
     class="menu-popular-brand-list-item mr-1"
   >
     <a [routerLink]="['/s']" [queryParams]="{ f: 'Brand:' + brand.name }">
-      <img [src]="getBrandImageUrl(brand.icon)" class="img-fluid  p-1" />
+      <img [src]="getBrandImageUrl(brand.icon)" class="max-w-full h-auto  p-1" />
     </a>
   </div>
 </div>
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.scss b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.scss
deleted file mode 100644
index 42c21677..00000000
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../../../../../../../shared/scss/selected_theme_variables';
-.menu-popular-brand-list-item {
-  height: 5rem;
-  width: 5rem;
-  border: 1px solid $gray-10;
-  img {
-    height: 100%;
-    object-fit: scale-down;
-  }
-}
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.ts b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.ts
index 6825f2e8..5d6014dd 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.ts
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/brand-logo/brand-logo.component.ts
@@ -10,7 +10,7 @@ import {
 @Component({
   selector: 'app-brand-logo',
   templateUrl: './brand-logo.component.html',
-  styleUrls: ['./brand-logo.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BrandLogoComponent implements OnInit {
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.html b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.html
index 2c9e8e4b..cac3e423 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.html
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.html
@@ -3,10 +3,10 @@
   *ngIf="!screenwidth"
   [ngStyle]="{ background: '#fff url(' + taxonImageLink + ') no-repeat 0 0' }"
 >
-  <div class="row m-0">
-    <div class="col-md-9 py-3">
-      <div class="row m-0">
-        <div class="col-md-4 p-3" *ngFor="let taxon of taxons">
+  <div class="flex flex-wrap  m-0">
+    <div class="md:w-3/4 pr-4 pl-4 py-3">
+      <div class="flex flex-wrap  m-0">
+        <div class="md:w-1/3 pr-4 pl-4 p-6" *ngFor="let taxon of taxons">
           <div>
             <a
               class="headlinks"
@@ -18,23 +18,23 @@
           </div>
         </div>
       </div>
-      <!-- <div class="col-md-12 pl-3 my-3">
+      <!-- <div class="md:w-full pr-4 pl-4 pl-3 my-3">
         <h4>Popular Brands</h4>
         <app-brand-logo [brandList]="brandLists$ |async"></app-brand-logo>
       </div> -->
     </div>
     <!-- to do -->
-    <!-- <div class="col-md-5 imgcon">
-      <img class="w-100" [src]="taxonImageLink" alt="">
+    <!-- <div class="md:w-2/5 pr-4 pl-4 imgcon">
+      <img class="w-full" [src]="taxonImageLink" alt="">
     </div> -->
   </div>
 </div>
 <div class="catcon" *ngIf="screenwidth">
-  <div class="row">
-    <div class="col-md-8 catconinner">
-      <div class="row catadjustwidth">
+  <div class="flex flex-wrap ">
+    <div class="md:w-2/3 pr-4 pl-4 catconinner">
+      <div class="flex flex-wrap  catadjustwidth">
         <div
-          class="col-6 col-sm-6   p-0 no-gutters brandsmenu"
+          class="w-1/2 sm:w-1/2 pr-4 pl-4   p-0 no-gutters brandsmenu"
           [@popOverState]="stateName"
         >
           <ul>
@@ -47,7 +47,7 @@ <h4>Popular Brands</h4>
           </ul>
         </div>
         <div
-          class="col-6 col-sm-6  p-0 no-gutters brandsmenu"
+          class="w-1/2 sm:w-1/2 pr-4 pl-4  p-0 no-gutters brandsmenu"
           [@popOverState]="stateName"
         >
           <ul class="pb-0">
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.scss b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.scss
deleted file mode 100644
index 01e2c414..00000000
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@import '../../../../../../shared/scss/selected_theme_variables';
-.brandsmenu a {
-  color: $white;
-  text-decoration: None;
-}
-
-.brandsmenu a:hover {
-  color: $theme-main-color;
-  text-decoration: underline;
-}
-
-.headlinks {
-  display: inherit;
-  text-decoration: none;
-  border-bottom: 2px solid $gray-10;
-  margin-bottom: 10px;
-  color: darken($theme-main-color, 25);
-  &:hover {
-    border-bottom: 2px solid $theme-main-color;
-    text-decoration: none;
-    color: darken($theme-main-color, 30);
-  }
-}
-
-.brandsmenu {
-  ul {
-    list-style: none;
-    padding: 0.5rem 0 0.5rem 1.5rem;
-    margin: 0px;
-    background-color: $gray-100;
-    li {
-      padding: 0.5rem 0.4rem;
-      background-color: $gray-100;
-      border-bottom: 1px solid $gray-10;
-      color: $gray-10;
-      cursor: pointer;
-      &::after {
-        font-family: 'FontAwesome';
-        content: '\f105';
-        width: 20px;
-        height: 57px;
-        margin-right: 12px;
-        right: 0px;
-        position: absolute;
-        background-size: 10px;
-      }
-      &:hover::after {
-        color: $theme-main-color;
-      }
-      &:hover {
-        background-color: $white;
-        color: $theme-main-color !important;
-        border-radius: 4px 0px 0px 4px;
-      }
-      ul > li {
-        position: absolute;
-        left: 20%;
-        width: 78%;
-        top: 0px;
-        display: NONE;
-      }
-    }
-  }
-}
-
-.catadjustwidth {
-  width: 220%;
-}
-
-@media screen and (min-width: 320px) and (max-width: 332x) {
-  .sucathead {
-    color: $white;
-  }
-  .catadjustwidth {
-    width: 220%;
-  }
-}
-
-@media screen and (min-width: 375px) and (max-width: 413px) {
-  .sucathead {
-    color: $white;
-  }
-  .catadjustwidth {
-    width: 216%;
-  }
-}
-
-@media screen and (min-width: 414px) and (max-width: 627px) {
-  .sucathead {
-    color: $white;
-  }
-  .catadjustwidth {
-    width: 215%;
-  }
-}
-
-@media screen and (min-width: 628px) and (max-width: 767px) {
-  .sucathead {
-    color: $white;
-  }
-  .catadjustwidth {
-    width: 215%;
-  }
-}
-
-.bgimg {
-  position: relative;
-  background-repeat: no-repeat !important;
-  background-position: 100% !important;
-  background-size: 300px !important;
-}
-
-@media screen and (min-width: 628px) and (max-width: 768px) {
-  .catadjustwidth {
-    width: 310%;
-  }
-  .brandsmenu a {
-    color: $white !important;
-  }
-  .catcon {
-    padding: 0px;
-  }
-  .catconinner {
-    padding: 0px;
-  }
-}
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.ts b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.ts
index 666dcf9e..97b6aedb 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.ts
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.ts
@@ -23,7 +23,7 @@ import {
 @Component({
   selector: 'app-categories-details',
   templateUrl: './categories-details.component.html',
-  styleUrls: ['./categories-details.component.scss'],
+  
   encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('popOverState', [
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.scss b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.scss
deleted file mode 100644
index 10a231c5..00000000
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import '../../../../../../../shared/scss/selected_theme_variables';
-a {
-  color: $gray-600;
-  font-size: 0.9rem;
-  padding: 5px 0px;
-  display: block;
-  &:hover {
-    color: darken($theme-main-color, 55);
-    text-decoration: underline;
-  }
-  @media screen and (min-width: 320px) and (max-width: 767px) {
-    color: $white;
-  }
-}
-
-.subbrandmenu {
-  ul {
-    list-style: none;
-    padding: 0.5rem 0 0.5rem 1.5rem;
-    margin: 0px;
-    li {
-      padding: 0.5rem 0.4rem;
-      border-bottom: 1px solid $gray-10;
-      color: $white;
-      cursor: pointer;
-      &::after {
-        font-family: 'FontAwesome';
-        content: '\f105';
-        width: 20px;
-        height: 57px;
-        margin-right: 12px;
-        right: 0px;
-        position: absolute;
-        background-size: 10px;
-      }
-      &:hover::after {
-        color: $theme-main-color;
-      }
-      &:hover {
-        background-color: $white;
-        color: $theme-main-color;
-        border-radius: 4px 0px 0px 4px;
-      }
-      a:hover {
-        color: $theme-main-color;
-      }
-      ul > li {
-        position: absolute;
-        left: 20%;
-        width: 78%;
-        top: 0px;
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.ts b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.ts
index 237f8313..db554cc1 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.ts
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.ts
@@ -11,7 +11,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-categories-list',
   templateUrl: './categories-list.component.html',
-  styleUrls: ['./categories-list.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CategoriesListComponent implements OnInit {
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.html b/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.html
index f58a710b..1ebd8f37 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.html
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.html
@@ -22,22 +22,22 @@
     [autoClose]="false"
     (isOpenChange)="onOpenChange($event)"
     (mouseenter)="dropdown.show()"
-    class="open show"
+    class="open opacity-100 block"
     (mouseleave)="dropdown.hide()"
     (click)="dropdown.hide()"
   >
     <div
       id="dropdown-triggers-manual"
       *dropdownMenu
-      class="dropdown-menu container show"
+      class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded container mx-auto sm:px-4 opacity-100 block"
       style="left: 0px; right: auto; top: 100%; transform: translateY(0px);"
       [ngClass]="[isScrolled ? '' : 'notscrolled']"
       role="menu"
       aria-labelledby="button-triggers-manual"
     >
-      <div class="row m-0" *ngIf="catgeory_taxonomy?.root?.taxons">
-        <div class="col-md-3 p-0">
-          <ul class="h-100">
+      <div class="flex flex-wrap  m-0" *ngIf="catgeory_taxonomy?.root?.taxons">
+        <div class="md:w-1/4 pr-4 pl-4 p-0">
+          <ul class="h-full">
             <!-- <li *ngFor="let taxon of catgeory_taxonomy.root.taxons; let i= index" (click)="showCategoryonclick(i)" (mouseenter)="showCategory(i)"
               [ngClass]="{'active': selectedItem == i}" [routerLink]="['c' ,taxon.name]">
               {{taxon.name}}</li> -->
@@ -51,7 +51,7 @@
             </li>
           </ul>
         </div>
-        <div class="col-md-9 no-gutters detailcontainer p-0" *ngIf="menuTaxons">
+        <div class="md:w-3/4 pr-4 pl-4 no-gutters detailcontainer p-0" *ngIf="menuTaxons">
           <app-categories-details
             [taxons]="menuTaxons.taxons"
             [taxonName]="menuTaxons.name"
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.scss b/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.scss
deleted file mode 100644
index b11aba3c..00000000
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.scss
+++ /dev/null
@@ -1,232 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.dropdown-menu {
-  width: 76vw;
-  padding: 0px;
-  left: -0.2rem !important;
-  top: 3rem !important;
-  z-index: 1;
-  border-radius: 0px;
-}
-
-.notscrolled:before {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: -9.5px;
-  left: 8.6rem;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid $gray-10;
-  z-index: 3;
-}
-
-.dpmenu {
-  position: relative;
-}
-
-.cust-menu-btn {
-  font-size: 1.2em;
-  padding: 0.7rem 1.2em 0.7em 0.7em;
-  border-radius: 7px 7px 0px 0px;
-  cursor: pointer;
-  margin-right: 2em;
-  position: relative;
-  left: -2px;
-  &:hover {
-    background-color:darken($theme-main-color, 25);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-  }
-}
-
-.open {
-  background-color:darken($theme-main-color, 25);
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-}
-
-.dpbtn .dropdown-toggle::after {
-  display: none;
-}
-
-ul {
-  list-style: none;
-  padding: 1.3rem 0 0.5rem 1rem;
-  margin: 0px;
-  background-color: $gray-200;
-  li {
-    padding: 0.5rem 0.4rem;
-    background-color: $gray-200;
-    border-bottom: 1px solid $gray-10;
-    color: $gray-800;
-    cursor: pointer;
-    &::after {
-      font-family: 'FontAwesome';
-      content: '\f105';
-      width: 20px;
-      height: 57px;
-      margin-right: 12px;
-      right: 0px;
-      position: absolute;
-      background-size: 10px;
-    }
-    &:hover::after {
-      color: $gray-800;
-    }
-    ul > li {
-      position: relative;
-      left: 20%;
-      width: 78%;
-      top: 0px;
-      display: NONE;
-    }
-  }
-  .active {
-    &::after {
-      color: $gray-800;
-    }
-    background-color: $white !important;
-    color: $gray-600 !important;
-    border-radius: 4px 0px 0px 4px !important;
-  }
-}
-
-.detailcontainer {
-  padding: 0.9em 0.5rem;
-}
-
-.main-nav-trigger {
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  left: -3px;
-  position: relative;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-}
-
-.main-nav-trigger,
-.menu-items__links a {
-  display: block;
-  margin: 0;
-  width: 52px;
-  height: 50px;
-}
-
-label {
-  font-weight: 700;
-  text-transform: uppercase;
-  margin-bottom: 2px;
-  font-size: 12px;
-}
-
-.main-nav-trigger {
-  &:after,
-  &:before {
-    content: '';
-    width: 37px;
-    left: 40%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: transform 0.4s ease-out, transform-origin 0.4s ease-out;
-    transition: transform 0.4s ease-out, transform-origin 0.4s ease-out;
-  }
-}
-
-.main-nav-trigger {
-  &:before {
-    top: 11px;
-  }
-}
-
-.main-nav-trigger {
-  &:after {
-    bottom: 11px;
-  }
-}
-
-.main-nav-trigger {
-  span {
-    top: 24px;
-    left: 1px;
-    right: 11px;
-    opacity: 1;
-    width: 38px;
-  }
-}
-
-.main-nav-trigger {
-  &:after,
-  &:before,
-  span {
-    display: block;
-    height: 3px;
-    background: $white;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
-    position: absolute;
-  }
-}
-
-.main-nav-trigger-open {
-  background-color:darken($theme-main-color, 25);
-  box-shadow: none;
-  &:before {
-    -webkit-transform: translateX(-7px) rotate(45deg);
-    -ms-transform: translateX(-7px) rotate(45deg);
-    transform: translateX(-7px) rotate(45deg);
-    -webkit-transform-origin: top left;
-    -ms-transform-origin: top left;
-    transform-origin: top left;
-    background: $white;
-  }
-  &:after {
-    -webkit-transform: translateX(-7px) rotate(-45deg);
-    -ms-transform: translateX(-7px) rotate(-45deg);
-    transform: translateX(-7px) rotate(-45deg);
-    -webkit-transform-origin: bottom left;
-    -ms-transform-origin: bottom left;
-    transform-origin: bottom left;
-    background: $white;
-  }
-  span {
-    opacity: 0;
-  }
-}
-
-@media screen and (min-width: 320px) and (max-width: 768px) {
-  .dropup,
-  .dropright,
-  .dropdown,
-  .dropleft {
-    left: 20px !important;
-  }
-  .dropdown-menu {
-    padding: 0px;
-    margin: 0px;
-    left: -2px;
-    background: transparent;
-    border: 0px;
-    margin-top: 10px;
-  }
-  .petdropdown .btn {
-    padding: 0px 0 0 5px;
-  }
-}
-
-@media screen and (min-width: 628px) and (max-width: 768px) {
-  .petdropdown {
-    left: -20px;
-  }
-  .petdropdown .btn {
-    padding: 0px 0 0 5px;
-  }
-}
-
-.petmenu {
-  width: 207%;
-  display: flex;
-}
-
-.petdropdown .btn-group > .btn:first-child {
-  margin-left: -17px;
-}
diff --git a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.ts b/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.ts
index 8ab36dee..84c966d6 100644
--- a/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.ts
+++ b/src/app/layout/header/components/categories-menu-dropdown/categories-menu-dropdown.component.ts
@@ -20,7 +20,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-categories-menu-dropdown',
   templateUrl: './categories-menu-dropdown.component.html',
-  styleUrls: ['./categories-menu-dropdown.component.scss'],
+  
   animations: [
     trigger('popOverState', [
       state(
diff --git a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html
index 5cc40c55..0df64ff4 100644
--- a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html
+++ b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html
@@ -1,5 +1,5 @@
 <div
-  class="d-flex  my-flex-container"
+  class="flex  my-flex-container"
   *ngIf="taxonomies[0]; let catgeory_taxonomy"
 >
   <div
diff --git a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.scss b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.scss
deleted file mode 100644
index 5308f068..00000000
--- a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-ul {
-  width: 100vw;
-  list-style: none;
-  margin: 0px;
-  li {
-    cursor: pointer;
-    padding: 0.8rem 1.1rem;
-    border-bottom: 1px solid $gray-10;
-    color: $gray-900;
-    cursor: pointer;
-    &::after {
-      font-family: 'FontAwesome';
-      content: '\f105';
-      width: 20px;
-      height: 57px;
-      margin-right: 12px;
-      right: 0px;
-      position: absolute;
-      background-size: 10px;
-    }
-    ul > li {
-      position: absolute;
-      left: 20%;
-      width: 78%;
-      top: 0px;
-      display: NONE;
-    }
-  }
-}
-
-.otherlinks {
-  li {
-    border-bottom: 1px solid $gray-10;
-    a {
-      color: $gray-900;
-    }
-    &::after {
-      font-family: 'FontAwesome';
-      content: ' ';
-    }
-  }
-}
-
-.parrent-catgory {
-  width: 100vw;
-  left: 0vw;
-  position: relative;
-}
-
-.sub-catgory {
-  @extend .parrent-catgory;
-  left: -100vw;
-}
-
-.sub-sub-catgory {
-  @extend .parrent-catgory;
-}
-
-.bg-color {
-  background-color: $white;
-}
-
-.subhead {
-  padding: 16px;
-  font-size: 1.4em;
-  font-weight: 700;
-  line-height: 1.3;
-  background-color: darken($white, 25);
-  border-bottom: 1px solid $gray-10;
-}
-
-.backbtn {
-  padding-left: 10px;
-  &::after {
-    font-family: 'FontAwesome';
-    content: '';
-    width: 20px;
-    height: 57px;
-    margin-right: 12px;
-    left: 11px;
-    top: 7px;
-    display: none;
-    position: absolute;
-    background-size: 10px;
-    font-size: 20px;
-  }
-}
-
-.need-help {
-  position: fixed;
-  bottom: 7.8vh;
-  padding: 1rem;
-  text-align: center;
-  background-color: darken($theme-main-color, 25);
-  width: 100%;
-  color: $white;
-}
diff --git a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts
index 7e06b1fa..2f8c9765 100644
--- a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts
+++ b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts
@@ -20,7 +20,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-category-mobile-menu',
   templateUrl: './category-mobile-menu.component.html',
-  styleUrls: ['./category-mobile-menu.component.scss'],
+  
   animations: [
     trigger('popOverState', [
       state(
diff --git a/src/app/layout/header/components/header-cart/header-cart.component.html b/src/app/layout/header/components/header-cart/header-cart.component.html
index 9d0a8b07..3d8a2cd6 100644
--- a/src/app/layout/header/components/header-cart/header-cart.component.html
+++ b/src/app/layout/header/components/header-cart/header-cart.component.html
@@ -1,19 +1,19 @@
 <div
-  class="header-cart btn"
+  class="header-cart inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline"
   [routerLink]="['/checkout/cart']"
   *ngIf="!isMobile"
   (click)="getCurrentOrder()"
 >
   <i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart
-  <span class="badge badge-pill shadow-sm">{{ totalCartItems }}</span>
+  <span class="inline-block p-1 text-center font-semibold text-sm align-baseline leading-none rounded rounded-full py-1 px-3 shadow-sm">{{ totalCartItems }}</span>
 </div>
 
 <div
-  class="header-cart btn"
+  class="header-cart inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline"
   [routerLink]="['/checkout/cart']"
   *ngIf="isMobile"
   (click)="getCurrentOrder()"
 >
   <i class="fa fa-shopping-cart" aria-hidden="true"></i>
-  <span class="badge badge-pill shadow-sm">{{ totalCartItems }}</span>
+  <span class="inline-block p-1 text-center font-semibold text-sm align-baseline leading-none rounded rounded-full py-1 px-3 shadow-sm">{{ totalCartItems }}</span>
 </div>
diff --git a/src/app/layout/header/components/header-cart/header-cart.component.scss b/src/app/layout/header/components/header-cart/header-cart.component.scss
deleted file mode 100644
index 6cdc2d38..00000000
--- a/src/app/layout/header/components/header-cart/header-cart.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.header-cart {
-  border: 1px solid $theme-action-color;
-}
-
-@media screen and (min-width: 320px) and (max-width: 768px) {
-  .header-cart {
-    font-size: 20px !important;
-    padding: 0px !important;
-    border: 0;
-  }
-  .btn .badge {
-    position: relative;
-    top: -10px;
-    left: -5px;
-  }
-  .badge-pill {
-    padding-right: 0.5em;
-    padding-left: 0.4em;
-    border-radius: 11.2rem;
-    font-size: 0.6em;
-  }
-}
diff --git a/src/app/layout/header/components/header-cart/header-cart.component.ts b/src/app/layout/header/components/header-cart/header-cart.component.ts
index 88cc3a89..bef1de00 100644
--- a/src/app/layout/header/components/header-cart/header-cart.component.ts
+++ b/src/app/layout/header/components/header-cart/header-cart.component.ts
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-header-cart',
   templateUrl: './header-cart.component.html',
-  styleUrls: ['./header-cart.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderCartComponent implements OnInit, OnDestroy {
diff --git a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html b/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html
deleted file mode 100644
index 7e36aee8..00000000
--- a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div>
-  <div
-    class="btn helpbtn"
-    [ngClass]="[isOpen ? 'openhelp' : '']"
-    (mouseenter)="dropdown.show()"
-    (mouseleave)="dropdown.hide()"
-  >
-    <strong>24/7 help</strong>
-    <i class="fa pl-3 fa-chevron-down"></i>
-  </div>
-  <div
-    class="dpmenu"
-    dropdown
-    #dropdown="bs-dropdown"
-    [autoClose]="false"
-    (isOpenChange)="onOpenChange($event)"
-    (mouseenter)="dropdown.show()"
-    (mouseleave)="dropdown.hide()"
-    (click)="dropdown.hide()"
-  >
-    <div
-      id="dropdown-triggers-manual"
-      *dropdownMenu
-      class="dropdown-menu text-center"
-      role="menu"
-      aria-labelledby="button-triggers-manual"
-    >
-      <ul>
-        <li role="menuitem">
-          <h6>Get help from our experts 24/7</h6>
-          <h2 class="text-danger">{{ contactno }}</h2>
-        </li>
-        <li class="divider dropdown-divider"></li>
-        <li></li>
-        <li role="menuitem">
-          <a class="dropdown-item" [routerLink]="['/']">Contact Us</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
diff --git a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.scss b/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.scss
deleted file mode 100644
index 6c1309ae..00000000
--- a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.dropdown-menu {
-  width: 20rem;
-  top: -0.2rem !important;
-  border-radius: 0 0 5px 5px;
-  left: -2px !important;
-  &:before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: -6.9px;
-    left: 6.1rem;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-bottom: 7px solid $gray-10;
-    z-index: 3;
-  }
-}
-
-.dropdown-toggle::after {
-  vertical-align: 0.055em !important;
-}
-
-.dpmenu {
-  position: relative;
-}
-
-.helpbtn {
-  font-size: 1.2em;
-  padding: 0.7rem 1.2em 0.7em 0.7em;
-  border-radius: 7px 7px 0px 0px;
-  cursor: pointer;
-  margin-right: 1em;
-  position: relative;
-  &:hover {
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-    background-color:darken($theme-main-color, 25);
-  }
-}
-
-.dropdown-item {
-  cursor: pointer;
-}
-
-.dropdown-item.active,
-.dropdown-item:active {
-  background-color: $theme-main-color;
-}
-
-.openhelp {
-  background-color:darken($theme-main-color, 25) !important;
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-}
diff --git a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.spec.ts b/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.spec.ts
deleted file mode 100644
index 4848b63b..00000000
--- a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { HeaderHelpDropdownComponent } from './header-help-dropdown.component';
-
-describe('HeaderHelpDropdownComponent', () => {
-  let component: HeaderHelpDropdownComponent;
-  let fixture: ComponentFixture<HeaderHelpDropdownComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [HeaderHelpDropdownComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderHelpDropdownComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.ts b/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.ts
deleted file mode 100644
index 9cdc3957..00000000
--- a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { environment } from './../../../../../environments/environment';
-
-@Component({
-  selector: 'app-header-help-dropdown',
-  templateUrl: './header-help-dropdown.component.html',
-  styleUrls: ['./header-help-dropdown.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class HeaderHelpDropdownComponent implements OnInit {
-  isOpen: boolean;
-  contactno = environment.config.contact_info.contact_no;
-  constructor() {}
-
-  ngOnInit() {}
-
-  onOpenChange(data: boolean): void {
-    this.isOpen = !this.isOpen;
-  }
-}
diff --git a/src/app/layout/header/components/header-search/header-search.component.html b/src/app/layout/header/components/header-search/header-search.component.html
index 8d0df73f..ac695f92 100644
--- a/src/app/layout/header/components/header-search/header-search.component.html
+++ b/src/app/layout/header/components/header-search/header-search.component.html
@@ -2,7 +2,7 @@
   <app-search-bar></app-search-bar>
 </form>
 <form
-  class="desktop-query form-inline  my-lg-0"
+  class="desktop-query flex items-center  lg:my-0"
   *ngIf="isMobile"
   [ngClass]="{ 'bg-white desktop-query-updated': isSearchopen }"
 >
diff --git a/src/app/layout/header/components/header-search/header-search.component.scss b/src/app/layout/header/components/header-search/header-search.component.scss
deleted file mode 100644
index c3cfed13..00000000
--- a/src/app/layout/header/components/header-search/header-search.component.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-:host {
-  width: 100%;
-}
-
-.desktop-query {
-  line-height: 0;
-  margin: 4px 10px 20px 0;
-  a.desktop-submit {
-    box-sizing: content-box;
-    display: inline-block;
-    height: 28px;
-    width: 5%;
-    text-align: center;
-    padding: 8px 10px 2px;
-    background: $gray-200;
-    border: 1px solid $theme-main-color;
-    border-left: none;
-    border-radius: 0 4px 4px 0;
-    .desktop-iconSearch {
-      display: inline-block;
-    }
-    .sprites-search {
-      width: 21px;
-      height: 21px; // background-position: -284px -160px;
-    }
-    .web-sprite {
-      background: url(/assets/default/search-sprite.png);
-      background-position: -209px -148px; // background-size: 1404px 105px;
-      display: inline-block;
-    }
-  }
-}
-
-.themecolor {
-  color: $theme-main-color !important;
-}
-
-.desktop-query-updated {
-  background-color: $white;
-}
-
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-  input.desktop-search-bar {
-    width: 75%;
-  }
-}
-
-.searchinput {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  bottom: -48px;
-  background-color: $theme-main-color;
-  padding: 0px 7px 10px 7px;
-  .search-container {
-    border-radius: 4px;
-    background-color: $white;
-    .input.desktop-search-bar {
-      width: 100%;
-      border: 1px solid $theme-main-color;
-    }
-  }
-}
-
-@media screen and (min-width: 320px) and (max-width: 768px) {
-  .desktop-query input.desktop-search-bar {
-    width: 78%;
-    border: 0px solid $theme-main-color;
-    border-radius: 4px 0px 0px 4px;
-  }
-}
diff --git a/src/app/layout/header/components/header-search/header-search.component.ts b/src/app/layout/header/components/header-search/header-search.component.ts
index 2bc8477f..91f522d4 100644
--- a/src/app/layout/header/components/header-search/header-search.component.ts
+++ b/src/app/layout/header/components/header-search/header-search.component.ts
@@ -15,7 +15,7 @@ import {
 @Component({
   selector: 'app-header-search',
   templateUrl: './header-search.component.html',
-  styleUrls: ['./header-search.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderSearchComponent implements OnInit {
diff --git a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.html b/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.html
index 3c261545..e27ee717 100644
--- a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.html
+++ b/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="!isMobile">
   <div *ngIf="!isAuthenticated">
     <div
-      class="btn  helpbtn"
+      class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  helpbtn"
       [ngClass]="[isOpen ? 'openhelp' : '']"
       (mouseenter)="dropdown.show()"
       (mouseleave)="dropdown.hide()"
@@ -22,18 +22,18 @@
       <div
         id="dropdown-triggers-manual"
         *dropdownMenu
-        class="dropdown-menu text-center"
+        class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded text-center"
         [ngClass]="[isScrolled ? '' : 'notscrolled']"
         role="menu"
         aria-labelledby="button-triggers-manual"
       >
         <ul>
           <li role="menuitem">
-            <a class="dropdown-item" (click)="login()">Login</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" (click)="login()">Login</a>
           </li>
-          <li class="divider dropdown-divider"></li>
+          <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li>
           <li role="menuitem">
-            <a class="dropdown-item" [routerLink]="['/auth/signup']">Sign Up</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" [routerLink]="['/auth/signup']">Sign Up</a>
           </li>
         </ul>
       </div>
@@ -41,13 +41,13 @@
   </div>
   <div *ngIf="isAuthenticated">
     <div
-      class="btn  helpbtn"
+      class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  helpbtn"
       [ngClass]="[isOpen ? 'openhelp' : '']"
       (mouseenter)="dropdown.show()"
       (mouseleave)="dropdown.hide()"
     >
       <i class="fa fa-user mr-2" aria-hidden="true"></i>
-      <strong class="text-capitalize"
+      <strong class="capitalize"
         >{{ name }}
         <i class="fa pl-3 fa-chevron-down"></i>
       </strong>
@@ -65,30 +65,30 @@
       <div
         id="dropdown-triggers-manual"
         *dropdownMenu
-        class="dropdown-menu text-center"
+        class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded text-center"
         [ngClass]="{arrowalignement: isAuthenticated, notscrolled: !isScrolled}"
         role="menu"
         aria-labelledby="button-triggers-manual"
       >
         <ul>
           <!-- <li role="menuitem">
-            <a class="dropdown-item" routerLink="/user/profile">My Profile</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/profile">My Profile</a>
           </li> -->
-          <li class="divider dropdown-divider"></li>
+          <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li>
           <li role="menuitem">
-            <a class="dropdown-item" routerLink="/user/orders">My Orders</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/orders">My Orders</a>
           </li>
-          <!-- <li class="divider dropdown-divider"></li> -->
+          <!-- <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li> -->
           <!-- <li role="menuitem">
-            <a class="dropdown-item" routerLink="/user/addresses">My Saved Addresses</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/addresses">My Saved Addresses</a>
           </li> -->
-          <!-- <li class="divider dropdown-divider"></li>
+          <!-- <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li>
           <li role="menuitem">
-            <a class="dropdown-item" routerLink="/user/favorite-products">My Favorite Products</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/favorite-products">My Favorite Products</a>
           </li> -->
-          <li class="divider dropdown-divider"></li>
+          <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li>
           <li role="menuitem">
-            <a class="dropdown-item" (click)="logout()">Logout</a>
+            <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" (click)="logout()">Logout</a>
           </li>
         </ul>
       </div>
@@ -102,12 +102,12 @@
     aria-hidden="true"
     *ngIf="!isAuthenticated"
   ></i>
-  <div class="btn-group" dropdown *ngIf="isAuthenticated">
+  <div class="relative inline-flex align-middle" dropdown *ngIf="isAuthenticated">
     <button
       id="button-basic"
       dropdownToggle
       type="button"
-      class="btn pr-0 pl-0"
+      class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline pr-0 pl-0"
       aria-controls="dropdown-basic"
     >
       <i class="fa fa-user mr-2" aria-hidden="true"></i>
@@ -115,28 +115,28 @@
     <ul
       id="dropdown-split"
       *dropdownMenu
-      class="dropdown-menu mobile-profile"
+      class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded mobile-profile"
       role="menu"
       aria-labelledby="button-split"
     >
       <li role="menuitem">
-        <!-- <a class="dropdown-item" routerLink="/user/profile">My Profile</a> -->
+        <!-- <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/profile">My Profile</a> -->
       </li>
-      <!-- <li class="divider dropdown-divider"></li> -->
+      <!-- <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li> -->
       <li role="menuitem">
-        <a class="dropdown-item" routerLink="/user/orders">My Orders</a>
+        <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/orders">My Orders</a>
       </li>
-      <!-- <li class="divider dropdown-divider"></li> -->
+      <!-- <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li> -->
       <li role="menuitem">
-        <!-- <a class="dropdown-item" routerLink="/user/addresses">Saved Addresses</a> -->
+        <!-- <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/addresses">Saved Addresses</a> -->
       </li>
-      <!-- <li class="divider dropdown-divider"></li> -->
+      <!-- <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li> -->
       <li role="menuitem">
-        <!-- <a class="dropdown-item" routerLink="/user/favorite-products">My Favorite Products</a> -->
+        <!-- <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" routerLink="/user/favorite-products">My Favorite Products</a> -->
       </li>
-      <li class="divider dropdown-divider"></li>
+      <li class="divider h-0 my-2 overflow-hidden border-t-1 border-gray-300"></li>
       <li role="menuitem">
-        <a class="dropdown-item" (click)="logout()">Logout</a>
+        <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" (click)="logout()">Logout</a>
       </li>
     </ul>
   </div>
diff --git a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.scss b/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.scss
deleted file mode 100644
index a0f13b12..00000000
--- a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import "../../../../shared/scss/selected_theme_variables";
-.dropdown-toggle::after {
-  vertical-align: 0.055em !important;
-}
-
-.dropdown-menu {
-  top: -0.2rem !important;
-  border-radius: 0 0 5px 5px;
-  width: 12em;
-  left: 0.9em !important;
-  &:before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: -6.9px;
-    left: 8.7rem;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-bottom: 7px solid $gray-10;
-    z-index: 3;
-  }
-}
-
-.dropdown-item {
-  cursor: pointer;
-}
-
-.dropdown-item.active,
-.dropdown-item:active {
-  background-color: $theme-main-color;
-}
-
-.arrowalignement {
-  &:before {
-    left: 6.2rem;
-  }
-}
-
-.border-left {
-  border-left: 1px solid $gray-300 !important;
-}
-
-.mobileusericon {
-  margin-top: -16px;
-  font-size: 20px;
-}
-
-.mobile-profile {
-  width: 100vw;
-  min-width: 101.7vw;
-  left: -76.6vw !important;
-  height: calc(100vh - 9vw);
-  top: 10vw !important;
-  &:before {
-    left: 15.3rem;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-bottom: 7px solid $white;
-  }
-}
-
-.dpmenu {
-  position: relative;
-}
-
-.helpbtn {
-  font-size: 1.2em;
-  padding: 0.7rem 1.2em 0.7em 0.7em;
-  border-radius: 7px 7px 0px 0px;
-  cursor: pointer;
-  margin: 0 1em;
-  position: relative;
-  &:hover {
-    background-color: darken($theme-main-color, 25);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-  }
-}
-
-.openhelp {
-  background-color: darken($theme-main-color, 25) !important;
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
-}
diff --git a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.ts b/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.ts
index 0a9e67f2..ce036f79 100644
--- a/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.ts
+++ b/src/app/layout/header/components/profile-dropdown/profile-dropdown.component.ts
@@ -17,7 +17,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-profile-dropdown',
   templateUrl: './profile-dropdown.component.html',
-  styleUrls: ['./profile-dropdown.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfileDropdownComponent implements OnInit, OnChanges, OnDestroy {
diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index 7c94485a..b4f34706 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -1,115 +1,172 @@
-<div class="header">
-  <nav
-    class="navbar navbar-expand-lg"
-    id="main"
-    [ngClass]="{ 'page-scroll-header': isScrolled }"
-  >
-    <div class="container">
-      <app-categories-menu-dropdown
-        [taxonomies]="taxonomies$ | async"
-        [screenwidth]="screenwidth"
-        [isScrolled]="isScrolled"
-        *ngIf="!isMobile && isScrolled"
-      ></app-categories-menu-dropdown>
-      <a class="navbar-brand" routerLink="/" *ngIf="!isMobile">
-        <img
-          [src]="this.headerConfig.brand.logo"
-          [alt]="this.headerConfig.brand.name"
-          [width]="this.headerConfig.brand.width"
-          [height]="this.headerConfig.brand.height"
-          class="d-inline-block align-top"
-          alt
-        />
+<div class="bg-emerald-500 sticky top-0 z-20">
+  <div class="max-w-screen-2xl mx-auto px-3 sm:px-10">
+    <div class="top-bar h-16 lg:h-auto flex items-center justify-between py-4 mx-auto">
+      <img [src]="this.headerConfig.brand.logo" [alt]="this.headerConfig.brand.name"
+        [width]="this.headerConfig.brand.width" height="this.headerConfig.brand.height" class="inline-block align-top"
+        alt />
+      <div
+        class="w-full transition-all duration-200 ease-in-out lg:flex lg:max-w-[520px] xl:max-w-[750px] 2xl:max-w-[900px] md:mx-12 lg:mx-4 xl:mx-0">
+        <div class="w-full flex flex-col justify-center flex-shrink-0 relative z-30">
+          <div class="flex flex-col mx-auto w-full">
+            <form class="relative pr-12 md:pr-14 bg-white overflow-hidden shadow-sm rounded-md w-full"><label
+                class="flex items-center py-0.5"><input
+                  class="form-input w-full pl-5 appearance-none transition ease-in-out border text-input text-sm font-sans rounded-md min-h-10 h-10 duration-200 bg-white focus:ring-0 outline-none border-none focus:outline-none placeholder-gray-500 placeholder-opacity-75"
+                  placeholder="Search for products (e.g. fish, apple, oil)" value=""></label><button aria-label="Search"
+                type="submit"
+                class="outline-none text-xl text-gray-400 absolute top-0 right-0 end-0 w-12 md:w-14 h-full flex items-center justify-center transition duration-200 ease-in-out hover:text-heading focus:outline-none"><svg
+                  stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em"
+                  width="1em" xmlns="http://www.w3.org/2000/svg">
+                  <path fill="none" stroke-miterlimit="10" stroke-width="32"
+                    d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path>
+                  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"
+                    d="M338.29 338.29L448 448"></path>
+                </svg></button></form>
+          </div>
+        </div>
+      </div>
+      <div
+        class="hidden md:hidden md:items-center lg:flex xl:block absolute inset-y-0 right-0 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+        <button class="pr-5 text-white text-2xl font-bold" aria-label="Alert"><svg stroke="currentColor" fill="none"
+            stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
+            class="w-6 h-6 drop-shadow-xl" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+          </svg></button><button aria-label="Total" class="relative px-5 text-white text-2xl font-bold"><span
+            class="absolute z-10 top-0 right-0 inline-flex items-center justify-center p-1 h-5 w-5 text-xs font-medium leading-none text-red-100 transform -translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full">0</span><svg
+            stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
+            stroke-linejoin="round" class="w-6 h-6 drop-shadow-xl" height="1em" width="1em"
+            xmlns="http://www.w3.org/2000/svg">
+            <circle cx="9" cy="21" r="1"></circle>
+            <circle cx="20" cy="21" r="1"></circle>
+            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+          </svg></button><button class="pl-5 text-white text-2xl font-bold" aria-label="Login"><span><svg
+              stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
+              stroke-linejoin="round" class="w-6 h-6 drop-shadow-xl" height="1em" width="1em"
+              xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+              <circle cx="12" cy="7" r="4"></circle>
+            </svg></span></button>
+      </div>
+    </div>
+  </div>
+  <div class="hidden lg:block xl:block bg-white border-b">
+    <div class="max-w-screen-2xl mx-auto px-3 sm:px-10 h-12 flex justify-between items-center">
+      <div class="inline-flex">
+        <div class="relative" data-headlessui-state="">
+          <div class="max-w-7xl mx-auto">
+            <div class="flex justify-between items-center md:justify-start md:space-x-10">
+              <nav class="md:flex space-x-10 items-center">
+                <div class="relative font-serif" data-headlessui-state=""><button
+                    class="group inline-flex items-center py-2 hover:text-emerald-600 focus:outline-none" type="button"
+                    aria-expanded="false" data-headlessui-state="" id="headlessui-popover-button-11"><span
+                      class="font-serif text-sm font-medium">Categories</span><svg xmlns="http://www.w3.org/2000/svg"
+                      fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
+                      class="ml-1 h-3 w-3 group-hover:text-emerald-600">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                    </svg></button></div><a class="font-serif mx-4 py-2 text-sm font-medium hover:text-emerald-600"
+                  href="/about-us">About Us</a><a
+                  class="font-serif mx-4 py-2 text-sm font-medium hover:text-emerald-600" href="/contact-us">Contact
+                  Us</a>
+                <div class="relative font-serif" data-headlessui-state=""><button
+                    class="group inline-flex items-center py-2 text-sm font-medium hover:text-emerald-600 focus:outline-none"
+                    type="button" aria-expanded="false" data-headlessui-state=""
+                    id="headlessui-popover-button-13"><span>Pages</span><svg xmlns="http://www.w3.org/2000/svg"
+                      fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
+                      class="ml-1 h-3 w-3 group-hover:text-emerald-600">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                    </svg></button></div><a
+                  class="relative inline-flex items-center bg-red-100 font-serif ml-4 py-0 px-2 rounded text-sm font-medium text-red-500 hover:text-emerald-600"
+                  href="/offer">Offers<div class="absolute flex w-2 h-2 left-auto -right-1 -top-1"><span
+                      class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-red-400 opacity-75"></span><span
+                      class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span></div></a>
+              </nav>
+              <div
+                style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;">
+        </div>
+      </div>
+      <div class="flex">
+        <div class="dropdown">
+          <div class="flot-l flag us"></div><button class="dropbtn">English&nbsp;<i
+              class="fas fa-angle-down"></i></button>
+          <div class="dropdown-content"><a href="/">
+              <div class="flot-l flag bd"></div>bangla
+            </a><a href="/">
+              <div class="flot-l flag de"></div>German
+            </a><a href="/">
+              <div class="flot-l flag us"></div>English
+            </a></div>
+        </div><a class="font-serif mx-4 py-2 text-sm font-medium hover:text-emerald-600" href="/privacy-policy">Privacy
+          Policy</a><a class="font-serif mx-4 py-2 text-sm font-medium hover:text-emerald-600"
+          href="/terms-and-conditions">Terms &amp; Conditions</a>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="">
+  <nav class="relative flex flex-wrap items-center content-between py-3 px-4 " id="main"
+    [ngClass]="{ 'page-scroll-header': isScrolled }">
+    <div class="container mx-auto sm:px-4">
+      <app-categories-menu-dropdown [taxonomies]="taxonomies$ | async" [screenwidth]="screenwidth"
+        [isScrolled]="isScrolled" *ngIf="!isMobile && isScrolled"></app-categories-menu-dropdown>
+      <a class="inline-block pt-1 pb-1 mr-4 text-lg whitespace-no-wrap" routerLink="/" *ngIf="!isMobile">
+        <img [src]="this.headerConfig.brand.logo" [alt]="this.headerConfig.brand.name"
+          [width]="this.headerConfig.brand.width" [height]="this.headerConfig.brand.height"
+          class="inline-block align-top" alt />
       </a>
-      <a
-        (click)="showModal()"
-        for="main-nav-state"
-        class="main-nav-trigger"
-        *ngIf="isMobile"
-        [ngClass]="{ 'main-nav-trigger-open': isModalShown }"
-      >
+      <a (click)="showModal()" for="main-nav-state" class="main-nav-trigger" *ngIf="isMobile"
+        [ngClass]="{ 'main-nav-trigger-open': isModalShown }">
         <span></span>
       </a>
-      <a
-        *ngIf="this.headerConfig.showGithubRibon"
-        href="https://github.com/aviabird/angularspree"
-      >
-        <img
-          style="position: absolute; top: 0; right: 0; border: 0; height: 130px; z-index: 9999;"
+      <a *ngIf="this.headerConfig.showGithubRibon" href="https://github.com/aviabird/angularspree">
+        <img style="position: absolute; top: 0; right: 0; border: 0; height: 130px; z-index: 9999;"
           src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
           alt="Fork me on GitHub"
-          data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
-        />
+          data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
       </a>
       <!-- Collect the nav links, forms, and other content for toggling -->
-      <div
-        class="collapse navbar-collapse justify-content-end"
-        id="navbarNavDropdown"
-      >
-        <app-header-search></app-header-search>
-        <app-header-help-dropdown></app-header-help-dropdown>
-        <app-profile-dropdown
-          class="pr-2 border-left"
-          [isAuthenticated]="isAuthenticated$ | async"
-        ></app-profile-dropdown>
-        <app-header-cart
-          class="pl-2 border-left"
-          [totalCartItems]="totalCartItems$ | async"
-        ></app-header-cart>
+      <div class="flex-grow items-center justify-end" id="navbarNavDropdown">
+        <app-profile-dropdown class="pr-2 border-l" [isAuthenticated]="isAuthenticated$ | async"></app-profile-dropdown>
+        <app-header-cart class="pl-2 border-l" [totalCartItems]="totalCartItems$ | async"></app-header-cart>
       </div>
-      <div class="resheader row m-0 hidden-md hidden-lg" *ngIf="isMobile">
+      <div class="resheader flex flex-wrap  m-0 hidden-md hidden-lg" *ngIf="isMobile">
         <div class="mlogo">
-          <a class="navbar-brand small-logo" routerLink="/" *ngIf="isMobile">
-            <img
-              [src]="this.headerConfig.brand.logo"
-              [alt]="this.headerConfig.brand.name"
-              [width]="this.headerConfig.brand.width"
-              height="this.headerConfig.brand.height"
-              class="d-inline-block align-top"
-              alt
-            />
+          <a class="inline-block pt-1 pb-1 mr-4 text-lg whitespace-no-wrap small-logo" routerLink="/" *ngIf="isMobile">
+            <img [src]="this.headerConfig.brand.logo" [alt]="this.headerConfig.brand.name"
+              [width]="this.headerConfig.brand.width" height="this.headerConfig.brand.height"
+              class="inline-block align-top" alt />
           </a>
         </div>
         <div class="search">
-          <app-header-search
-            [isMobile]="isMobile"
-            (onSubCatClicked)="childCatLoaded($event)"
-            [isSearchopen]="isSearchopen"
-          ></app-header-search>
+          <app-header-search [isMobile]="isMobile" (onSubCatClicked)="childCatLoaded($event)"
+            [isSearchopen]="isSearchopen"></app-header-search>
         </div>
         <div class="profile">
-          <app-profile-dropdown
-            [isMobile]="isMobile"
-            class="pr-2 "
-            [isAuthenticated]="isAuthenticated$ | async"
-          ></app-profile-dropdown>
+          <app-profile-dropdown [isMobile]="isMobile" class="pr-2 "
+            [isAuthenticated]="isAuthenticated$ | async"></app-profile-dropdown>
         </div>
         <div class="cart">
-          <app-header-cart
-            class="pl-2 border-left"
-            [isMobile]="isMobile"
-            [totalCartItems]="totalCartItems$ | async"
-          ></app-header-cart>
+          <app-header-cart class="pl-2 border-l" [isMobile]="isMobile"
+            [totalCartItems]="totalCartItems$ | async"></app-header-cart>
         </div>
       </div>
     </div>
   </nav>
-  <nav
-    class="navbar navbar-expand-lg"
-    id="sub-header"
-    [ngClass]="{ 'hide-sub-header': isScrolled }"
-  >
-    <div class="container">
-      <div class="collapse navbar-collapse left-content-start">
-        <app-categories-menu-dropdown
-          [screenwidth]="screenwidth"
-          [taxonomies]="taxonomies$ | async"
-        ></app-categories-menu-dropdown>
-        <app-brand-menu-dropdown
-          [brands]="brands$ | async"
-        ></app-brand-menu-dropdown>
-        <div class="col text-right">
-          <button type="button" class="btn shippingbtn">
+  <nav class="relative flex flex-wrap items-center content-between py-3 px-4 " id="sub-header"
+    [ngClass]="{ 'hide-sub-header': isScrolled }">
+    <div class="container mx-auto sm:px-4">
+      <div class="flex-grow items-center left-content-start">
+        <app-categories-menu-dropdown [screenwidth]="screenwidth"
+          [taxonomies]="taxonomies$ | async"></app-categories-menu-dropdown>
+        <app-brand-menu-dropdown [brands]="brands$ | async"></app-brand-menu-dropdown>
+        <div class="relative flex-grow max-w-full flex-1 px-4 text-right">
+          <button type="button"
+            class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline shippingbtn">
             FREE 1-2 DAY SHIPPING OVER {{ currency }}{{ freeShippingAmount }}
             <i class="fa ml-2 fa-truck" aria-hidden="true"></i>
           </button>
@@ -118,25 +175,14 @@
     </div>
   </nav>
 </div>
-<div
-  *ngIf="isModalShown"
-  [config]="{ show: true, backdrop: false }"
-  (onHidden)="onHidden()"
-  bsModal
-  #autoShownModal="bs-modal"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="dialog-auto-name"
->
+<div *ngIf="isModalShown" [config]="{ show: true, backdrop: false }" (onHidden)="onHidden()" bsModal
+  #autoShownModal="bs-modal" class="modal opacity-0" tabindex="-1" role="dialog" aria-labelledby="dialog-auto-name">
   <div class="modal-dialog  cat-mobile ">
     <div class="modal-content">
       <div class="modal-body">
-        <app-category-mobile-menu
-          (onSubCatClicked)="allmenuClosed($event)"
-          [taxonomies]="taxonomies$ | async"
-        ></app-category-mobile-menu>
+        <app-category-mobile-menu (onSubCatClicked)="allmenuClosed($event)"
+          [taxonomies]="taxonomies$ | async"></app-category-mobile-menu>
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/layout/header/header.component.scss b/src/app/layout/header/header.component.scss
deleted file mode 100644
index 7346b57a..00000000
--- a/src/app/layout/header/header.component.scss
+++ /dev/null
@@ -1,276 +0,0 @@
-@import "../../shared/scss/selected_theme_variables";
-.navbar {
-  padding: 0px;
-  padding-top: 1rem;
-  @media screen and (min-width: 768px) {
-    &#main {
-      transition: all 500ms;
-      position: fixed;
-      width: 100%;
-      z-index: 100;
-    }
-    &:not(#main),
-    &.page-scroll-header {
-      box-shadow: 0 1px 3px $gray-300;
-      z-index: 1;
-    }
-    &#sub-header {
-      transition: all 150ms;
-      width: 100%;
-      z-index: 1;
-      top: 50px;
-      &.hide-sub-header {
-        top: 0;
-      }
-    }
-  }
-}
-
-.shippingbtn {
-  font-size: 1.3em !important;
-  i {
-    font-size: 20px;
-    color: $white;
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-    filter: FlipH;
-    -ms-filter: "FlipH";
-  }
-  &:hover {
-    background-color: darken($theme-main-color, 25) !important;
-  }
-}
-
-.page-scroll-header {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-:host ::ng-deep .page-scroll-header .cust-menu-btn {
-  border-radius: 0px;
-  margin-right: 10px;
-}
-
-:host ::ng-deep .dropdown-menu {
-  // top: 3.1em !important
-}
-
-.selected-theme .navbar {
-  box-shadow: none !important;
-}
-
-.header {
-  background-color: $theme-main-color;
-  .resheader {
-    width: calc(100vw - 15vw);
-    @media screen and (width: 768px) {
-      width: calc(100vw - 12vw);
-    }
-  }
-}
-
-.profile {
-  padding-top: 15px;
-  flex: 0.2;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.mlogo {
-  flex: 4;
-  display: flex;
-}
-
-.cart {
-  padding-top: 6px;
-  padding-right: 10px;
-  flex: 0.5;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.search {
-  padding-top: 2px;
-  flex: 0.2;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.small-logo img {
-  width: 110px;
-  margin-top: 0;
-}
-
-@media screen and (min-width: 321px) and (max-width: 768px) {
-  .navbar {
-    padding: 0px;
-  }
-  .cart {
-    padding-top: 0;
-    padding-right: 0;
-  }
-  :host ::ng-deep .page-scroll-header .cust-menu-btn {
-    display: none;
-  }
-  .navbar .btn {
-    padding: 0px;
-  }
-  .selected-theme .navbar .btn {
-    padding: 0px;
-  }
-}
-
-@media screen and (min-width: 310px) and (max-width: 320px) {
-  .navbar {
-    padding: 0px;
-  }
-  .cart {
-    padding-top: 0;
-    padding-right: 0;
-  }
-  :host ::ng-deep .page-scroll-header .cust-menu-btn {
-    display: none;
-  }
-  .search {
-    flex: 1;
-  }
-  .cart {
-    flex: 1;
-  }
-  .mlogo {
-    flex: 39;
-  }
-  .profile {
-    flex: 1;
-  }
-}
-
-.modal {
-  top: 2.5rem;
-  .cat-mobile {
-    border-radius: 0px;
-    margin: 0px;
-    width: 100vw;
-    height: 100vh;
-    max-width: 100vw !important;
-    .modal-content {
-      border-radius: 0px;
-      border: 0px solid transparent;
-      height: 100vh;
-    }
-    .modal-body {
-      padding: 0px;
-      background-color: darken($white, 25);
-    }
-  }
-}
-
-.main-nav-trigger {
-  ms-touch-action: manipulation;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  left: 3px;
-  position: relative;
-  -webkit-border-radius: 5px 5px 0 0;
-  border-radius: 5px 5px 0 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.main-nav-trigger,
-.menu-items__links a {
-  display: block;
-  width: 40px;
-  height: 37px;
-  margin: 0;
-  top: -4.5px;
-  left: 6px;
-}
-
-label {
-  font-weight: 700;
-  text-transform: uppercase;
-  margin-bottom: 2px;
-  font-size: 12px;
-}
-
-.main-nav-trigger {
-  &:after,
-  &:before {
-    content: "";
-    width: 20px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: transform 0.4s ease-out, transform-origin 0.4s ease-out;
-    transition: transform 0.4s ease-out, transform-origin 0.4s ease-out;
-  }
-}
-
-.main-nav-trigger {
-  &:before {
-    top: 13px;
-  }
-}
-
-.main-nav-trigger {
-  &:after {
-    bottom: 8px;
-  }
-}
-
-.main-nav-trigger {
-  span {
-    top: 20px;
-    left: 10px;
-    right: 11px;
-    opacity: 1;
-    width: 20px;
-  }
-}
-
-.main-nav-trigger {
-  &:after,
-  &:before,
-  span {
-    display: block;
-    height: 2px;
-    background: $white;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
-    position: absolute;
-  }
-}
-
-.main-nav-trigger-open {
-  top: 1.5px;
-  background: $white;
-  -webkit-box-shadow: 0 1px 0 $white;
-  box-shadow: 0 1px 0 $white;
-  &:before {
-    -webkit-transform: translateX(-7px) rotate(45deg);
-    -ms-transform: translateX(-7px) rotate(45deg);
-    transform: translateX(-7px) rotate(45deg);
-    -webkit-transform-origin: top left;
-    -ms-transform-origin: top left;
-    transform-origin: top left;
-    background: $theme-main-sub-color1;
-  }
-  &:after {
-    -webkit-transform: translateX(-7px) rotate(-45deg);
-    -ms-transform: translateX(-7px) rotate(-45deg);
-    transform: translateX(-7px) rotate(-45deg);
-    -webkit-transform-origin: bottom left;
-    -ms-transform-origin: bottom left;
-    transform-origin: bottom left;
-    background: $theme-main-sub-color1;
-  }
-  span {
-    opacity: 0;
-  }
-}
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index 5b69593a..82b385fc 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -29,7 +29,7 @@ import { Brand } from '../../core/models/brand';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+  
   // tslint:disable-next-line:use-host-property-decorator
   host: {
     '(window:scroll)': 'updateHeader($event)'
diff --git a/src/app/layout/index.ts b/src/app/layout/index.ts
index 9b45cb5d..98943eea 100644
--- a/src/app/layout/index.ts
+++ b/src/app/layout/index.ts
@@ -21,7 +21,6 @@ import { FooterComponent } from './footer/footer.component';
 import { ProfileDropdownComponent } from './header/components/profile-dropdown/profile-dropdown.component';
 import { HeaderSearchComponent } from './header/components/header-search/header-search.component';
 import { HeaderCartComponent } from './header/components/header-cart/header-cart.component';
-import { HeaderHelpDropdownComponent } from './header/components/header-help-dropdown/header-help-dropdown.component';
 import { CategoryMobileMenuComponent } from './header/components/category-mobile-menu/category-mobile-menu.component';
 // Modules
 import { SharedModule } from '../shared/index';
@@ -37,7 +36,6 @@ import { LayoutEffects } from './effects/layout.effects';
     HeaderComponent,
     HeaderSearchComponent,
     HeaderCartComponent,
-    HeaderHelpDropdownComponent,
     FooterComponent,
     CategoriesMenuDropdownComponent,
     BrandMenuDropdownComponent,
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.html b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.html
index 6b0bc05c..027c31ce 100644
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.html
+++ b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.html
@@ -1,5 +1,5 @@
-<div class="col-12">
-  <div class="row">
+<div class="w-full">
+  <div class="flex flex-wrap ">
     <div *ngFor="let filter of filterList">
       <app-filter-summary-filter
         *ngFor="let filterValue of filter.values"
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.scss b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.ts b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.ts
index 00bc699d..6669674e 100644
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.ts
+++ b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter-list/filter-summary-filter-list.component.ts
@@ -5,7 +5,7 @@ import { SearchingService } from '../../../../services';
 @Component({
   selector: 'app-filter-summary-filter-list',
   templateUrl: './filter-summary-filter-list.component.html',
-  styleUrls: ['./filter-summary-filter-list.component.scss']
+  
 })
 export class FilterSummaryFilterListComponent implements OnInit {
   @Input() appliedParams: SearchAppliedParams;
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.scss b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.scss
deleted file mode 100644
index 19797bf8..00000000
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '../../../../../../shared/scss/selected_theme_variables';
-
-:host-context {
-  margin: 3px;
-  padding: 0.2rem 0.5rem;
-  border-radius: 20px;
-  transition: all 500ms;
-
-  &:hover {
-    border-color: $gray-600 !important;
-  }
-
-  .cross-btn {
-    cursor: pointer;
-  }
-}
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.ts b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.ts
index 76af1c29..d2218363 100644
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.ts
+++ b/src/app/modules/search/components/filter-summary-container/components/filter-summary-filter/filter-summary-filter.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'app-filter-summary-filter',
   templateUrl: './filter-summary-filter.component.html',
-  styleUrls: ['./filter-summary-filter.component.scss']
+  
 })
 export class FilterSummaryFilterComponent implements OnInit {
   @Input() filterValue: string;
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.html b/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.html
index 6d0913f9..5cd20277 100644
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.html
+++ b/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.html
@@ -1,9 +1,9 @@
-<div class="btn-group float-right" dropdown triggers="mouseover">
+<div class="relative inline-flex align-middle float-right" dropdown triggers="mouseover">
   <button
     id="button-basic"
     dropdownToggle
     type="button"
-    class="btn dropdown-toggle border text-secondary float-right text-left"
+    class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  inline-block w-0 h-0 ml-1 align border-b-0 border-t-1 border-r-1 border-l-1 border text-gray-600 float-right text-left"
     aria-controls="dropdown-basic"
   >
     Sort by:
@@ -13,12 +13,12 @@
   <ul
     id="dropdown-basic"
     *dropdownMenu
-    class="dropdown-menu"
+    class=" absolute left-0 z-50 float-left hidden list-reset	 py-2 mt-1 text-base bg-white border border-gray-300 rounded"
     role="menu"
     aria-labelledby="button-basic"
   >
     <li role="menuitem" *ngFor="let sortOption of sortConfig">
-      <a class="dropdown-item" (click)="sortOrder(sortOption)">
+      <a class="block w-full py-1 px-6 font-normal text-gray-900 whitespace-no-wrap border-0" (click)="sortOrder(sortOption)">
         {{ sortOption.name }}
       </a>
     </li>
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.scss b/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.scss
deleted file mode 100644
index 9c9abb3b..00000000
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.btn-group {
-  position: relative;
-  bottom: 0.5rem;
-}
diff --git a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.ts b/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.ts
index 937cfa79..229632d1 100644
--- a/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.ts
+++ b/src/app/modules/search/components/filter-summary-container/components/filter-summary-sort-by/filter-summary-sort-by.component.ts
@@ -5,7 +5,7 @@ import { SearchingService } from '../../../../services';
 @Component({
   selector: 'app-filter-summary-sort-by',
   templateUrl: './filter-summary-sort-by.component.html',
-  styleUrls: ['./filter-summary-sort-by.component.scss']
+  
 })
 export class FilterSummarySortByComponent implements OnInit {
   sortConfig = SearchingService.SORT_CONFIG;
diff --git a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.html b/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.html
index 76de5aea..99d7c472 100644
--- a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.html
+++ b/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.html
@@ -1,12 +1,12 @@
-<section class="row px-4">
-  <div class="col-8">
+<section class="flex flex-wrap  px-4">
+  <div class="w-2/3">
     <app-filter-summary-filter-list
       [appliedParams]="appliedParams"
       (filterUpdated)="updateFilters($event)"
     ></app-filter-summary-filter-list>
   </div>
   <app-filter-summary-sort-by
-    class="col-4"
+    class="w-1/3"
     (selectedSort)="filterUpdated($event)"
   ></app-filter-summary-sort-by>
 </section>
diff --git a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.scss b/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.scss
deleted file mode 100644
index cb0c9c38..00000000
--- a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  box-shadow: 0 10px 20px -16px #aaa;
-}
diff --git a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.ts b/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.ts
index 79ec1c07..ed11a53d 100644
--- a/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.ts
+++ b/src/app/modules/search/components/filter-summary-container/filter-summary-container.component.ts
@@ -7,7 +7,7 @@ import { AppState } from '../../../../interfaces';
 @Component({
   selector: 'app-filter-summary-container',
   templateUrl: './filter-summary-container.component.html',
-  styleUrls: ['./filter-summary-container.component.scss']
+  
 })
 export class FilterSummaryContainerComponent implements OnInit {
   @Input() appliedParams: SearchAppliedParams;
diff --git a/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.html b/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.html
index bbcecb65..2f8b9b4b 100644
--- a/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.html
+++ b/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.html
@@ -1,11 +1,11 @@
 <ul
-  class="list-group border border-left-0 border-bottom-0 py-3"
+  class="flex flex-col pl-0 mb-0 border rounded border-gray-300 border border-l-0 border-b-0 py-3"
   *ngIf="showFilter"
 >
-  <small class="font-weight-bold pb-3 text-uppercase">{{ filter.id }}</small>
+  <small class="font-bold pb-3 uppercase">{{ filter.id }}</small>
   <li
     *ngFor="let filterValue of (filter.values | slice: skipCount)"
-    class="list-group-item border-0 p-0"
+    class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline border-0 p-0"
   >
     <div class="custom-control custom-checkbox">
       <input
@@ -16,12 +16,12 @@
         (change)="selectedItem(filterValue.id)"
       />
       <label
-        class="custom-control-label text-capitalize"
+        class="custom-control-label capitalize"
         for="{{ filterValue.id }}"
       >
         {{ filterValue.id }}
       </label>
-      <small class="text-secondary font-weight-light"
+      <small class="text-gray-600 font-weight-light"
         >( {{ filterValue.count }} )</small
       >
     </div>
diff --git a/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.scss b/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.ts b/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.ts
index 60a027f4..7020d829 100644
--- a/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.ts
+++ b/src/app/modules/search/components/search-filters-container/components/multiselect-filter/multiselect-filter.component.ts
@@ -17,7 +17,7 @@ import { ActivatedRoute } from '@angular/router';
   selector: 'app-multiselect-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './multiselect-filter.component.html',
-  styleUrls: ['./multiselect-filter.component.scss']
+  
 })
 export class MultiselectFilterComponent implements OnInit {
   @Input() filter: FilterAgg;
diff --git a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.html b/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.html
index 5b05bde6..c3e695a5 100644
--- a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.html
+++ b/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.html
@@ -1,6 +1,6 @@
-<ul class="list-group border border-left-0 border-bottom-0 py-3">
-  <small class="font-weight-bold pb-3 text-uppercase">{{ filter.id }}</small>
-  <li class="list-group-item custom-slider border-0 p-0 pr-1">
+<ul class="flex flex-col pl-0 mb-0 border rounded border-gray-300 border border-l-0 border-b-0 py-3">
+  <small class="font-bold pb-3 uppercase">{{ filter.id }}</small>
+  <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline custom-slider border-0 p-0 pr-1">
     <ngx-slider
       [(value)]="minValue"
       [(highValue)]="maxValue"
diff --git a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.scss b/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.scss
deleted file mode 100644
index 510e4c34..00000000
--- a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-::ng-deep {
-  .custom-slider .ng5-slider .ng5-slider-bar {
-    background: #f8d1d0;
-    height: 2px;
-  }
-  .custom-slider .ng5-slider .ng5-slider-selection {
-    background: #e18582;
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-pointer {
-    width: 11px;
-    height: 11px;
-    border-radius: 100px;
-    top: auto;
-    bottom: -2px;
-    background-color: #ffffff;
-    box-shadow: 0 0px 3px 0px #c96360;
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-pointer:after {
-    display: none;
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-bubble {
-    bottom: 14px;
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-limit {
-    font-weight: bold;
-    color: orange;
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-tick {
-    width: 1px;
-    height: 10px;
-    margin-left: 4px;
-    border-radius: 0;
-    background: #ffe4d1;
-    top: -1px;
-  }
-
-  .custom-slider .ng5-slider .ng5-slider-tick.ng5-slider-selected {
-    background: orange;
-  }
-}
diff --git a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.ts b/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.ts
index d96f7864..425aabaf 100644
--- a/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.ts
+++ b/src/app/modules/search/components/search-filters-container/components/range-filter/range-filter.component.ts
@@ -14,7 +14,7 @@ import { RangeAgg } from '../../../../models/search-param';
   selector: 'app-range-filter',
   templateUrl: './range-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./range-filter.component.scss']
+  
 })
 export class RangeFilterComponent implements OnInit {
   @Input() filter: RangeAgg;
diff --git a/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.html b/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.html
index 641316d0..9a1b8375 100644
--- a/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.html
+++ b/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.html
@@ -1,11 +1,11 @@
 <ul
-  class="list-group border border-left-0 border-bottom-0 py-3"
+  class="flex flex-col pl-0 mb-0 border rounded border-gray-300 border border-l-0 border-b-0 py-3"
   *ngIf="showFilter"
 >
-  <small class="font-weight-bold pb-3 text-uppercase">{{ filter.id }}</small>
+  <small class="font-bold pb-3 uppercase">{{ filter.id }}</small>
   <li
     *ngFor="let filterValue of (filter.values | slice: skipCount)"
-    class="list-group-item border-0 p-0"
+    class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline border-0 p-0"
   >
     <div class="custom-control custom-checkbox">
       <input
@@ -16,12 +16,12 @@
         (change)="selectedItem(filterValue.id)"
       />
       <label
-        class="custom-control-label text-capitalize"
+        class="custom-control-label capitalize"
         for="{{ filterValue.id }}"
       >
         {{ filterValue.id }}
       </label>
-      <small class="text-secondary font-weight-light"
+      <small class="text-gray-600 font-weight-light"
         >( {{ filterValue.count }} )</small
       >
     </div>
diff --git a/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.scss b/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.ts b/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.ts
index 747b44be..080b36f1 100644
--- a/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.ts
+++ b/src/app/modules/search/components/search-filters-container/components/single-selection-filter/single-selection-filter.component.ts
@@ -5,6 +5,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   selector: 'app-single-selection-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './single-selection-filter.component.html',
-  styleUrls: ['./single-selection-filter.component.scss']
+  
 })
 export class SingleSelectionFilterComponent extends MultiselectFilterComponent {}
diff --git a/src/app/modules/search/components/search-filters-container/search-filters-container.component.html b/src/app/modules/search/components/search-filters-container/search-filters-container.component.html
index f2fb78f9..22f28c5e 100644
--- a/src/app/modules/search/components/search-filters-container/search-filters-container.component.html
+++ b/src/app/modules/search/components/search-filters-container/search-filters-container.component.html
@@ -1,6 +1,6 @@
-<div class="h6 font-weight-bold clearfix mt-2 mb-3">
+<div class="h6 font-bold clearfix mt-2 mb-3">
   <div class="float-left">FILTERS</div>
-  <a class="pointer float-right text-danger" (click)="clearSearchFilters()">
+  <a class="pointer float-right text-red-600" (click)="clearSearchFilters()">
     CLEAR ALL
   </a>
 </div>
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.html b/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.html
index c20fb09e..f2568970 100644
--- a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.html
+++ b/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.html
@@ -4,7 +4,7 @@
 >
   <div class="product-image-container">
     <picture
-      class="img-responsive d-block bg-rand-{{ '' | random: 1:10 }}"
+      class="img-responsive block bg-rand-{{ '' | random: 1:10 }}"
       [ngClass]="{ 'bg-img-none': imageLoaded }"
     >
       <img
@@ -14,16 +14,16 @@
         [errorImage]="noImageUrl"
         [lazyLoad]="getProductImageUrl()"
         [offset]="100"
-        class="img-responsive w-100 h-100"
+        class="img-responsive w-full h-full"
       />
     </picture>
   </div>
   <div class="product-meta-info mb-2">
     <b
-      class="product-brand text-capitalize font-weight-lighter text-truncate"
+      class="product-brand capitalize font-weight-lighter truncate"
       >{{ product.brand?.name || '&nbsp;' }}</b
     >
-    <div class="product-name text-truncate">{{ product.name }}</div>
+    <div class="product-name truncate">{{ product.name }}</div>
     <div class="product-price">
       <span>
         <b class="product-discountedPrice">
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.scss b/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.scss
deleted file mode 100644
index 578472cb..00000000
--- a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import '../../../../../../shared/scss/selected_theme_variables';
-:host {
-  display: block;
-  @media screen and (min-width: 576px) {
-    min-width: 210px;
-    max-width: 210px;
-    padding: 0.8rem;
-    transition: all 300ms;
-    &:hover {
-      box-shadow: 0 5px 43px -16px #aaa;
-      transform: translateY(-5px);
-      picture img {
-        transform: scale(1.1);
-      }
-    }
-  }
-  @media screen and (min-width: 310px) and (max-width: 576px) {
-    padding: 0;
-    max-width: 50%;
-    min-width: 50%;
-    box-shadow: 0 0 1px -1px #aaa;
-    border: none;
-    .product-meta-info {
-      padding: 0 5px;
-      font-size: 0.8rem;
-    }
-  }
-}
-
-picture {
-  height: 250px;
-  @media screen and (min-width: 310px) and (max-width: 576px) {
-    height: 200px;
-  }
-  &.bg-img-none {
-    background-image: none;
-  }
-  img {
-    transition: all 300ms;
-    mix-blend-mode: darken;
-    object-fit: scale-down;
-  }
-}
-
-.disablePrice {
-  text-decoration: line-through;
-  color: #7e818c;
-  font-weight: 400;
-  margin-left: 5px;
-  font-size: 12px;
-}
-
-.product-discountPercentage {
-  color: $theme-action-color;
-}
-
-.product-starRating {
-  font-size: 0.9rem;
-}
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.ts b/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.ts
index e825b155..1d9fbd5f 100644
--- a/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.ts
+++ b/src/app/modules/search/components/search-results-container/components/search-result-item/search-result-item.component.ts
@@ -11,7 +11,7 @@ import {
   selector: 'app-search-result-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './search-result-item.component.html',
-  styleUrls: ['./search-result-item.component.scss']
+  
 })
 export class SearchResultItemComponent implements OnInit {
   @Input() product: Product;
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.html b/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.html
index df89cff7..b9c3981f 100644
--- a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.html
+++ b/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.html
@@ -1,11 +1,11 @@
-<div class="row justify-content-between">
+<div class="flex flex-wrap  justify-between">
   <app-search-result-item
-    class="col mb-sm-4 mx-sm-1 border"
+    class="relative flex-grow max-w-full flex-1 px-4 sm:mb-6 sm:mx-1 border"
     [product]="product"
     *ngFor="let product of searchResults; trackBy: trackBy"
   ></app-search-result-item>
   <div
-    class="results-li-dummy col mb-5 mx-sm-1"
+    class="results-li-dummy relative flex-grow max-w-full flex-1 px-4 mb-5 sm:mx-1"
     *ngFor="let _ of dummyResults"
   ></div>
 </div>
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.scss b/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.scss
deleted file mode 100644
index 84821c3b..00000000
--- a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.results-li-dummy {
-  display: block;
-  min-width: 210px;
-  max-width: 210px;
-  height: 1px;
-}
diff --git a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.ts b/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.ts
index 59cf6e26..d541992b 100644
--- a/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.ts
+++ b/src/app/modules/search/components/search-results-container/components/search-result-list/search-result-list.component.ts
@@ -10,7 +10,7 @@ import { Product } from '../../../../../../core/models';
   selector: 'app-search-result-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './search-result-list.component.html',
-  styleUrls: ['./search-result-list.component.scss']
+  
 })
 export class SearchResultListComponent implements OnInit {
   @Input() searchResults: Array<Product>;
diff --git a/src/app/modules/search/components/search-results-container/search-results-container.component.html b/src/app/modules/search/components/search-results-container/search-results-container.component.html
index e3923d4c..0ea3fa39 100644
--- a/src/app/modules/search/components/search-results-container/search-results-container.component.html
+++ b/src/app/modules/search/components/search-results-container/search-results-container.component.html
@@ -1,6 +1,6 @@
-<section class="row">
+<section class="flex flex-wrap ">
   <app-search-result-list
     [searchResults]="searchResults"
-    class="col-12 my-sm-2 py-sm-3 px-sm-5"
+    class="w-full sm:my-2 sm:py-4 sm:px-12"
   ></app-search-result-list>
 </section>
diff --git a/src/app/modules/search/components/search-results-container/search-results-container.component.scss b/src/app/modules/search/components/search-results-container/search-results-container.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/search-results-container/search-results-container.component.ts b/src/app/modules/search/components/search-results-container/search-results-container.component.ts
index ae8761c8..8305dd34 100644
--- a/src/app/modules/search/components/search-results-container/search-results-container.component.ts
+++ b/src/app/modules/search/components/search-results-container/search-results-container.component.ts
@@ -10,7 +10,7 @@ import { Product } from '../../../../core/models';
   selector: 'app-search-results-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './search-results-container.component.html',
-  styleUrls: ['./search-results-container.component.scss']
+  
 })
 export class SearchResultsContainerComponent implements OnInit {
   @Input() searchResults: Array<Product>;
diff --git a/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.scss b/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.ts b/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.ts
index 0f49b2dc..1e0d3c55 100644
--- a/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.ts
+++ b/src/app/modules/search/components/search-title-container/components/search-title-count/search-title-count.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
   selector: 'app-search-title-count',
   templateUrl: './search-title-count.component.html',
-  styleUrls: ['./search-title-count.component.scss']
+  
 })
 export class SearchTitleCountComponent implements OnInit {
   @Input() count = 0;
diff --git a/src/app/modules/search/components/search-title-container/search-title-container.component.html b/src/app/modules/search/components/search-title-container/search-title-container.component.html
index 8e29067d..701d2d03 100644
--- a/src/app/modules/search/components/search-title-container/search-title-container.component.html
+++ b/src/app/modules/search/components/search-title-container/search-title-container.component.html
@@ -1,7 +1,7 @@
 <h1 class="h6">
-  <div class="font-weight-bold d-inline text-capitalize">{{ title }}</div>
+  <div class="font-bold inline capitalize">{{ title }}</div>
   <app-search-title-count
-    class="text-secondary"
+    class="text-gray-600"
     [count]="metaInfo?.total"
   ></app-search-title-count>
 </h1>
diff --git a/src/app/modules/search/components/search-title-container/search-title-container.component.scss b/src/app/modules/search/components/search-title-container/search-title-container.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/modules/search/components/search-title-container/search-title-container.component.ts b/src/app/modules/search/components/search-title-container/search-title-container.component.ts
index a7f145aa..c9a66624 100644
--- a/src/app/modules/search/components/search-title-container/search-title-container.component.ts
+++ b/src/app/modules/search/components/search-title-container/search-title-container.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
   selector: 'app-search-title-container',
   templateUrl: './search-title-container.component.html',
-  styleUrls: ['./search-title-container.component.scss']
+  
 })
 export class SearchTitleContainerComponent implements OnInit {
   @Input() title = 'Placeholder';
diff --git a/src/app/modules/search/pages/search-page/search-page.component.html b/src/app/modules/search/pages/search-page/search-page.component.html
index b1e9fe54..a00bb460 100644
--- a/src/app/modules/search/pages/search-page/search-page.component.html
+++ b/src/app/modules/search/pages/search-page/search-page.component.html
@@ -1,17 +1,17 @@
 <section
-  class="row search-container my-3 mx-auto"
+  class="flex flex-wrap  search-container my-3 mx-auto"
   *ngIf="searchFound; else notFound"
 >
-  <div class="col-12">
+  <div class="w-full">
     <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
   </div>
-  <div class="col-12 mb-4">
+  <div class="w-full mb-4">
     <app-search-title-container
       [title]="'All Categories'"
       [metaInfo]="metaInfo"
     ></app-search-title-container>
   </div>
-  <div class="col pr-0 d-none d-sm-block verticalFilterContainer">
+  <div class="relative flex-grow max-w-full flex-1 px-4 pr-0 hidden sm:block verticalFilterContainer">
     <app-search-filters-container
       [appliedParams]="appliedParams"
       [metaInfo]="metaInfo"
@@ -19,10 +19,10 @@
       (filterUpdated)="updateFilters($event)"
     ></app-search-filters-container>
   </div>
-  <div class="col">
-    <div class="row d-none d-sm-flex">
+  <div class="relative flex-grow max-w-full flex-1 px-4">
+    <div class="flex flex-wrap  hidden sm:flex">
       <app-filter-summary-container
-        class="col-12 my-1"
+        class="w-full my-1"
         [appliedParams]="appliedParams"
         (updatedFilters)="updateFilters($event)"
       ></app-filter-summary-container>
@@ -34,18 +34,18 @@
 </section>
 
 <ng-template #notFound>
-  <div class="container search-failed-container">
-    <section class="row justify-content-center">
-      <div class="col-12 col-md-6 text-center">
-        <img [src]="noSearchImg" class="w-25 mx-auto" alt="No Search Found" />
+  <div class="container mx-auto sm:px-4 search-failed-container">
+    <section class="flex flex-wrap  justify-center">
+      <div class="w-full md:w-1/2 pr-4 pl-4 text-center">
+        <img [src]="noSearchImg" class="w-1/4 mx-auto" alt="No Search Found" />
         <h3 class="font-weight-light">We couldn't find any matches!</h3>
-        <small class="text-secondary">
+        <small class="text-gray-600">
           Please check the spelling or try searching something else
         </small>
-        <div class="input-group my-5">
+        <div class="relative flex items-stretch w-full my-5">
           <input
             type="text"
-            class="form-control rounded-0"
+            class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded rounded-none"
             placeholder="Search"
             aria-label="Search"
             aria-describedby="search-button"
@@ -57,7 +57,7 @@ <h3 class="font-weight-light">We couldn't find any matches!</h3>
           />
           <div class="input-group-append">
             <button
-              class="btn btn-outline-info rounded-0"
+              class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-white bg-white hover:bg-teal-600 rounded-none"
               type="button"
               id="search-button"
               (click)="onSearch(box.value)"
diff --git a/src/app/modules/search/pages/search-page/search-page.component.scss b/src/app/modules/search/pages/search-page/search-page.component.scss
deleted file mode 100644
index 21e3aea8..00000000
--- a/src/app/modules/search/pages/search-page/search-page.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.search-container {
-  max-width: 1600px;
-  .verticalFilterContainer {
-    max-width: 250px;
-    min-width: 250px;
-  }
-}
-
-.search-failed-container {
-  padding: 2rem 1rem 10rem;
-  @media (max-width: 720px) {
-    padding: 10rem 1rem;
-  }
-}
diff --git a/src/app/modules/search/pages/search-page/search-page.component.ts b/src/app/modules/search/pages/search-page/search-page.component.ts
index f47cbf9b..b123a3c3 100644
--- a/src/app/modules/search/pages/search-page/search-page.component.ts
+++ b/src/app/modules/search/pages/search-page/search-page.component.ts
@@ -14,7 +14,7 @@ import * as fromSearch from './../../store/selectors/search.selector';
 @Component({
   selector: 'app-search-page',
   templateUrl: './search-page.component.html',
-  styleUrls: ['./search-page.component.scss']
+  
 })
 export class SearchPageComponent implements OnInit, OnDestroy {
   appliedParams: SearchAppliedParams = SearchingService.DEFAULT_APPLIED_FILTERS;
diff --git a/src/app/product/components/product-detail-page/product-description/product-description.component.html b/src/app/product/components/product-detail-page/product-description/product-description.component.html
index 54f072e2..eedcbd39 100644
--- a/src/app/product/components/product-detail-page/product-description/product-description.component.html
+++ b/src/app/product/components/product-detail-page/product-description/product-description.component.html
@@ -1,3 +1,3 @@
-<div itemprop="description" class="col-12">
+<div itemprop="description" class="w-full">
   <div [innerHTML]="description | sanitizeHtml"></div>
 </div>
diff --git a/src/app/product/components/product-detail-page/product-description/product-description.component.scss b/src/app/product/components/product-detail-page/product-description/product-description.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/product/components/product-detail-page/product-description/product-description.component.ts b/src/app/product/components/product-detail-page/product-description/product-description.component.ts
index 422c01ac..dd719969 100644
--- a/src/app/product/components/product-detail-page/product-description/product-description.component.ts
+++ b/src/app/product/components/product-detail-page/product-description/product-description.component.ts
@@ -8,7 +8,7 @@ import {
 @Component({
   selector: 'app-product-description',
   templateUrl: './product-description.component.html',
-  styleUrls: ['./product-description.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductDescriptionComponent implements OnInit {
diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.html b/src/app/product/components/product-detail-page/product-details/product-details.component.html
index 1599b524..9362ec03 100644
--- a/src/app/product/components/product-detail-page/product-details/product-details.component.html
+++ b/src/app/product/components/product-detail-page/product-details/product-details.component.html
@@ -1,28 +1,28 @@
 <ngx-json-ld [json]="schema"></ngx-json-ld>
 <div *ngIf="!isMobile">
-  <div class="container">
+  <div class="container mx-auto sm:px-4">
     <div
       itemscope
       itemtype="https://schema.org/Product"
       *ngIf="product != null"
-      class="row pt-5"
+      class="flex flex-wrap  pt-5"
     >
-      <div class="col-12 col-md-5">
+      <div class="w-full md:w-2/5 pr-4 pl-4">
         <app-image-container
           [images]="images"
-          class="col-12"
+          class="w-full"
           [selectedImage]="selectedImage"
         >
         </app-image-container>
       </div>
-      <div class="col-md-7 col-12">
+      <div class="md:w-3/5 pr-4 pl-4 w-full">
         <app-product-price-info
           [brand]="brand"
           [product]="product"
           (onAddToCart)="addToCart($event)"
           (onMarkAsFavorites)="markAsFavorite()"
           (selectedVariant)="selectVariant($event)"
-          class="row"
+          class="flex flex-wrap "
         >
         </app-product-price-info>
       </div>
@@ -30,54 +30,54 @@
   </div>
   <div *ngIf="(relatedProducts$ | async); let relatedProducts">
     <div class="slider" *ngIf="relatedProducts.length > 0">
-      <div class="container">
-        <h2 class="position-absolute">Related products</h2>
+      <div class="container mx-auto sm:px-4">
+        <h2 class="absolute">Related products</h2>
         <app-product-slider
           [productsList]="relatedProducts"
         ></app-product-slider>
       </div>
     </div>
   </div>
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
+  <div class="container mx-auto sm:px-4">
+    <div class="flex flex-wrap ">
+      <div class="w-full">
         <h1 class="mt-2">
           Description
         </h1>
-        <app-product-description [description]="description" class="row">
+        <app-product-description [description]="description" class="flex flex-wrap ">
         </app-product-description>
       </div>
     </div>
   </div>
   <div *ngIf="(similarProducts$ | async); let similarProducts">
     <div class="slider" *ngIf="similarProducts.length > 0">
-      <div class="container">
-        <h2 class="position-absolute">Similar products</h2>
+      <div class="container mx-auto sm:px-4">
+        <h2 class="absolute">Similar products</h2>
         <app-product-slider
           [productsList]="similarProducts"
         ></app-product-slider>
       </div>
     </div>
   </div>
-  <div class="container pt-2">
+  <div class="container mx-auto sm:px-4 pt-2">
     <app-product-review [product]="product"></app-product-review>
   </div>
 </div>
 <div *ngIf="isMobile" class="bg">
-  <div class="container p-0">
+  <div class="container mx-auto sm:px-4 p-0">
     <div
       itemscope
       itemtype="https://schema.org/Product"
       *ngIf="product != null"
-      class="row m-0 pt-2"
+      class="flex flex-wrap  m-0 pt-2"
     >
-      <div class="col-12">
+      <div class="w-full">
         <h1 itemprop="name" class="title">{{ product.name }}</h1>
       </div>
     </div>
-    <div class="col-12">
-      <div class="row m-0">
-        <div class="product-subtitle col-5 p-0">
+    <div class="w-full">
+      <div class="flex flex-wrap  m-0">
+        <div class="product-subtitle w-2/5 p-0">
           <a
             [routerLink]="['/s']"
             [queryParams]="{ f: 'Brand:' + brand.name }"
@@ -87,7 +87,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
             {{ brand.name }}
           </a>
         </div>
-        <div class="product-header-extras col-7 p-0">
+        <div class="product-header-extras w-3/5 p-0">
           <div class="ugc pr-3">
             <a
               class="hide-phone js-revScrollTo reviewlink"
@@ -104,7 +104,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
               </span>
             </a>
           </div>
-          <!-- <div class="product-header-extras col-7 p-0">
+          <!-- <div class="product-header-extras w-3/5 p-0">
             <div class="ugc pr-3">
               <a class="hide-phone js-revScrollTo">
                 <ngx-input-star-rating disabled="true" value="{{product.avg_rating }}" class="rating" required></ngx-input-star-rating>
@@ -114,23 +114,23 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
           </div> -->
         </div>
       </div>
-      <div class="col-12 col-md-5">
+      <div class="w-full md:w-2/5 pr-4 pl-4">
         <app-image-container
           [images]="images"
           [isMobile]="isMobile"
-          class="col-12"
+          class="w-full"
           [selectedImage]="images[0]"
         >
         </app-image-container>
       </div>
-      <div class="col-md-7 col-12 p-0 p-sm-0">
+      <div class="md:w-3/5 pr-4 pl-4 w-full p-0 sm:p-0">
         <app-product-price-info
           [product]="product"
           [isMobile]="isMobile"
           (onAddToCart)="addToCart($event)"
           (onMarkAsFavorites)="markAsFavorite()"
           (selectedVariant)="selectVariant($event)"
-          class="row"
+          class="flex flex-wrap "
         >
         </app-product-price-info>
       </div>
@@ -138,22 +138,22 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
   </div>
   <div *ngIf="(relatedProducts$ | async); let relatedProducts">
     <div class="slider mb-5 pb-4" *ngIf="relatedProducts.length > 0">
-      <div class="container">
-        <h2 class="position-absolute">Related products</h2>
+      <div class="container mx-auto sm:px-4">
+        <h2 class="absolute">Related products</h2>
 
         <!-- <app-product-slider [productsList]="relatedProducts"></app-product-slider> -->
       </div>
     </div>
   </div>
-  <div class="container">
-    <div class="row">
-      <div class="col-12 mt-3 mb-3">
+  <div class="container mx-auto sm:px-4">
+    <div class="flex flex-wrap ">
+      <div class="w-full mt-3 mb-3">
         <h1 class="mt-2">
           Description
         </h1>
         <app-product-description
           [description]="product.description"
-          class="row"
+          class="flex flex-wrap "
         >
         </app-product-description>
       </div>
@@ -161,13 +161,13 @@ <h1 class="mt-2">
   </div>
   <div *ngIf="(similarProducts$ | async); let similarProducts">
     <div class="slider mb-3 pb-4 pt-3 " *ngIf="similarProducts.length > 0">
-      <div class="container">
-        <h2 class="position-absolute">Similar products</h2>
+      <div class="container mx-auto sm:px-4">
+        <h2 class="absolute">Similar products</h2>
         <!-- <app-product-slider [productsList]="similarProducts"></app-product-slider> -->
       </div>
     </div>
   </div>
-  <div class="container pt-2">
+  <div class="container mx-auto sm:px-4 pt-2">
     <app-product-review
       [product]="product"
       [isMobile]="isMobile"
diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.scss b/src/app/product/components/product-detail-page/product-details/product-details.component.scss
deleted file mode 100644
index a701d1ae..00000000
--- a/src/app/product/components/product-detail-page/product-details/product-details.component.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.padding-top {
-  padding-top: 50px;
-}
-
-h1 {
-  font-size: 1.7em;
-  color: $gray-900;
-  @media screen and (min-width: 310px) and (max-width: 768px) {
-    font-size: 1.2em;
-    line-height: 1.2em;
-    font-weight: 700;
-  }
-}
-
-.pdp-add-to-bag {
-  width: 60%;
-  text-align: center;
-  padding: 10px 0;
-  background-color: $theme-main-color;
-  border: 1px solid $theme-main-color;
-  color: $white;
-}
-
-.product-subtitle {
-  a {
-    span {
-      color: $gray-900;
-    }
-  }
-}
-
-.bg {
-  background-color: $white;
-  display: block;
-}
-
-.rating-count {
-  position: relative;
-  left: -10px;
-}
-
-.rating {
-  transform: scale(0.7);
-}
-
-.hide-phone {
-  @media screen and (min-width: 310px) and (max-width: 768px) {
-    display: block;
-    text-align: right;
-  }
-}
-
-.check-head {
-  font-size: 1.5em;
-}
-
-.msg {
-  display: block;
-  h5 {
-    font-size: 12px;
-    text-transform: capitalize;
-  }
-}
-
-.pdp-button {
-  border-radius: 3px;
-  outline: 0;
-  margin-top: 10px;
-  padding: 10px 30px;
-  font-size: 15px;
-  min-height: 22px;
-  margin-bottom: 10px;
-}
-
-.fav-icon-sontainer {
-  position: relative;
-  .favorite {
-    position: absolute;
-    right: 8px;
-    top: -24px;
-    background-color: $theme-main-color;
-    color: $white;
-    padding: 10px 13px;
-    border-radius: 50%;
-    box-shadow: 0px 0px 8px $gray-900;
-    z-index: 20;
-  }
-}
-
-.slider {
-  background-color: $gray-100;
-  border-bottom: 1px solid $gray-10;
-  border-top: 1px solid $gray-10;
-  margin: 1vw 0;
-  padding-top: 1vw;
-  padding-bottom: 1vw;
-  m h2 {
-    font-size: 1.7em;
-    color: $gray-900;
-  }
-  ::ng-deep .product-tile p {
-    margin-bottom: 10px;
-    font-size: 0.9em;
-  }
-  ::ng-deep .product-box {
-    box-shadow: 0 0 1px $gray-11;
-    border: 1px solid $gray-10;
-  }
-  ::ng-deep hr {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 310px) and (max-width: 768px) {
-  .fav-icon-sontainer {
-    .favorite {
-      top: 50px;
-    }
-  }
-}
-
-.cust-reviews {
-  .avg-review {
-    padding: 1rem 0 3rem;
-    .out-review {
-      border-left: 1px solid $gray-10;
-    }
-  }
-  .rataingpercentage {
-    font-size: 1.2em;
-    margin-bottom: 10px;
-    .progress-container {
-      .progress {
-        display: flex;
-        height: 1.6rem;
-      }
-    }
-  }
-  .review-display {
-    .rating-inner {
-      padding-bottom: 1rem;
-      border-bottom: 1px solid $gray-10;
-      margin-bottom: 1rem;
-      .rating-head {
-        font-weight: 700;
-        color: $gray-900;
-        position: relative;
-        left: -5px;
-        text-transform: capitalize;
-      }
-    }
-    .rating-by {
-      font-size: 1em;
-      color:darken($gray-700, 25);
-    }
-    .description {
-      padding-top: 1rem;
-      text-align: justify;
-    }
-  }
-  .review-sort-filter {
-    border-top: 1px solid $gray-10;
-    border-top: 1px solid $gray-10;
-    background-color: $gray-200;
-    padding: 1rem;
-  }
-}
-
-.product-box {
-  border-radius: 5px;
-  margin-top: 1rem;
-  border: 1px solid transparent;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    margin-right: 1rem;
-    border: 1px solid $gray-10;
-  }
-  &:hover {
-    border-color: darken($black, 25);
-  }
-}
diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.ts b/src/app/product/components/product-detail-page/product-details/product-details.component.ts
index 290095a0..93ed9a76 100644
--- a/src/app/product/components/product-detail-page/product-details/product-details.component.ts
+++ b/src/app/product/components/product-detail-page/product-details/product-details.component.ts
@@ -25,7 +25,7 @@ import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'app-product-details',
   templateUrl: './product-details.component.html',
-  styleUrls: ['./product-details.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductDetailsComponent implements OnInit {
diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.html b/src/app/product/components/product-detail-page/product-images/product-images.component.html
index c06d8253..5d3af564 100644
--- a/src/app/product/components/product-detail-page/product-images/product-images.component.html
+++ b/src/app/product/components/product-detail-page/product-images/product-images.component.html
@@ -1,25 +1,25 @@
 <div *ngIf="!isMobile">
   <div class="image-container" *ngIf="images">
-    <div class="row">
-      <div class="col-1">
-        <div class="thumbnails-vertical-container d-none d-lg-block">
+    <div class="flex flex-wrap ">
+      <div class="w-1/6">
+        <div class="thumbnails-vertical-container hidden lg:block">
           <button
                   class="thumbnails-thumbnail-button"
                   *ngFor="let image of images">
             <img
-                 class="thumbnails-thumbnail img-fluid"
+                 class="thumbnails-thumbnail max-w-full h-auto"
                  [src]="getProductImageUrl(image.small)"
                  alt="Product small image"
                  (mouseover)="onMouseOver(image)" />
           </button>
         </div>
       </div>
-      <div class="col-11" *ngIf="selectedImage">
+      <div class="w-5/6" *ngIf="selectedImage">
         <img
              itemprop="image"
              [src]="getProductImageUrl(selectedImage.large)"
              alt="Product large image"
-             class="thumbnails-selected-image img-fluid" />
+             class="thumbnails-selected-image max-w-full h-auto" />
       </div>
     </div>
   </div>
@@ -38,8 +38,8 @@
                style="display: block; width: 100%;" />
         </a>
       </ngu-item>
-      <button NguCarouselPrev class="leftRs d-none"></button>
-      <button NguCarouselNext class="rightRs d-none"></button>
+      <button NguCarouselPrev class="leftRs hidden"></button>
+      <button NguCarouselNext class="rightRs hidden"></button>
       <ul class="ngucarouselPoint" NguCarouselPoint>
         <li
             *ngFor="let idx of productSlider.pointNumbers; let i = index"
diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.scss b/src/app/product/components/product-detail-page/product-images/product-images.component.scss
deleted file mode 100644
index 2a078ee5..00000000
--- a/src/app/product/components/product-detail-page/product-images/product-images.component.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.image-container {
-  .thumbnails-selected-image {
-    background: $white none repeat scroll 0% 0% / auto padding-box border-box;
-    max-width: 100%;
-    width: 100%;
-    margin: auto;
-    object-fit: scale-down;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      width: auto;
-      margin: auto;
-      height: auto;
-      object-fit: scale-down;
-      mix-blend-mode: darken;
-    }
-  }
-  .thumbnails-vertical-container {
-    width: 60px;
-    float: left;
-    margin-bottom: 10px;
-    .thumbnails-thumbnail-button {
-      outline: 0;
-      margin-right: 15px;
-      background-color: $white;
-      border: 0;
-      padding: 0;
-      position: relative;
-      cursor: pointer;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-:host {
-  ::ng-deep .banner {
-    .ngucarouselPoint {
-      list-style-type: none;
-      padding: 3px;
-      white-space: nowrap;
-      overflow: auto;
-      left: 0;
-      box-sizing: border-box;
-      background-color: $white;
-      margin: 0 auto -28px;
-      align-self: center;
-      width: fit-content;
-      border-radius: 5px 5px 0 0;
-      bottom: 27px;
-      cursor: pointer;
-      @media (min-width: '768px') {
-        bottom: 0;
-      }
-    }
-
-    .ngucarouselPoint li {
-      display: inline-block;
-      border-radius: 999px;
-      background-color: $theme-main-color;
-      border: 1px solid $theme-main-color;
-      padding: 5px;
-      margin: 0 3px;
-      transition: 0.4s ease all;
-    }
-
-    .ngucarouselPoint li.active {
-      background-color: $white;
-    }
-
-    .bannerStyle {
-      img {
-        height: 240px;
-        margin: auto;
-        width: auto !important;
-      }
-    }
-  }
-}
-
-img {
-  display: block;
-}
-
-.img1 {
-  width: 400px;
-  height: 274px;
-}
-
-.img2 {
-  width: 200px;
-  height: 020px;
-}
diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.ts b/src/app/product/components/product-detail-page/product-images/product-images.component.ts
index 630c83f2..ddfaaf89 100644
--- a/src/app/product/components/product-detail-page/product-images/product-images.component.ts
+++ b/src/app/product/components/product-detail-page/product-images/product-images.component.ts
@@ -10,7 +10,7 @@ import { NguCarouselConfig } from '@ngu/carousel';
 @Component({
   selector: 'app-image-container',
   templateUrl: './product-images.component.html',
-  styleUrls: ['./product-images.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductImagesComponent implements OnInit {
diff --git a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.html b/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.html
index b8c24f1c..767c4a3a 100644
--- a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.html
+++ b/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.html
@@ -1,16 +1,16 @@
-<div class="row m-0">
-  <div class="col-12 p-3 p-sm-0">
+<div class="flex flex-wrap  m-0">
+  <div class="w-full p-6 sm:p-0">
     <h4 class="check-head">Check COD Availability</h4>
     <form
       [formGroup]="checkPincodeForm"
       (ngSubmit)="checkCodAvilability()"
-      class="d-block"
+      class="block"
     >
-      <div class="form-inline">
-        <div class="form-group mr-sm-3 mr-3 mt-3 mt-sm-0">
+      <div class="flex items-center">
+        <div class="mb-4 sm:mr-4 mr-3 mt-3 sm:mt-0">
           <input
             type="text"
-            class="form-control"
+            class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
             name="pincode"
             placeholder="Postal/Pin code"
             formControlName="pincode"
@@ -18,7 +18,7 @@ <h4 class="check-head">Check COD Availability</h4>
         </div>
         <button
           type="submit"
-          class="btn themebtnprimarybasic"
+          class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic"
           [disabled]="!checkPincodeForm.valid"
         >
           Check
@@ -27,12 +27,12 @@ <h4 class="check-head">Check COD Availability</h4>
       <div *ngIf="(isCodAvilable$ | async); let isCodAvilable" class="mt-2 msg">
         <h5
           *ngIf="isCodAvilable.available; else elseBlock"
-          class="text-success"
+          class="text-green-500"
         >
           CASH ON DELIVERY IS AVAILABLE!
         </h5>
         <ng-template #elseBlock>
-          <h5 class="text-danger">CASH ON DELIVERY IS NOT AVAILABLE!</h5>
+          <h5 class="text-red-600">CASH ON DELIVERY IS NOT AVAILABLE!</h5>
         </ng-template>
       </div>
     </form>
diff --git a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.scss b/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.scss
deleted file mode 100644
index a217bf8f..00000000
--- a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.check-head {
-  font-size: 1em;
-}
-
-.msg {
-  display: block;
-  h5 {
-    font-size: 12px;
-    text-transform: capitalize;
-  }
-}
diff --git a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.ts b/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.ts
index 614110eb..182cc19c 100644
--- a/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.ts
+++ b/src/app/product/components/product-detail-page/product-price-info/check-pincode/check-pincode.component.ts
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
 @Component({
   selector: 'app-check-pincode',
   templateUrl: './check-pincode.component.html',
-  styleUrls: ['./check-pincode.component.scss']
+  
 })
 export class CheckPincodeComponent implements OnInit {
   checkPincodeForm: UntypedFormGroup;
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.html b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.html
index 69c4a545..2b0ca5e2 100644
--- a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.html
+++ b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.html
@@ -1,38 +1,38 @@
 <div class="bordered">
   <div class="buybox__purchase">
-    <small class="py-2 d-block d-sm-none">
+    <small class="py-2 block sm:hidden">
       <b>FREE 1-2 day </b>shipping over {{ appConfig.currency_symbol
       }}{{ appConfig.freeShippingAmount }}</small
     >
     <form>
       <div>
         <div class="buy-quantity">
-          <a class="btn  quantity-minus" (click)="decreaseCount()">-</a>
+          <a class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  quantity-minus" (click)="decreaseCount()">-</a>
           <span class="quantity-input">
             <span class="quantity-number">{{ count }}</span>
             <span>Quantity</span>
           </span>
-          <a class="btn  quantity-plus" (click)="increseCount()">+</a>
+          <a class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline  quantity-plus" (click)="increseCount()">+</a>
         </div>
       </div>
-      <div class="buttons row" *ngIf="isOrderable">
+      <div class="buttons flex flex-wrap " *ngIf="isOrderable">
         <input
           type="submit"
-          class="btn col-12 themebtnprimary js-add-cart"
+          class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline w-full themebtnprimary js-add-cart"
           value="Add to Cart"
           (click)="addToCart(count)"
         />
         <button
           (click)="buyNow(count)"
-          class="btn col-12 themebtnprimary themebtnprimarysade mt-1"
+          class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline w-full themebtnprimary themebtnprimarysade mt-1"
         >
           Buy Now
         </button>
       </div>
-      <div class="buttons row" *ngIf="!isOrderable">
+      <div class="buttons flex flex-wrap " *ngIf="!isOrderable">
         <input
           type="submit"
-          class=" btn col-12 themebtnprimary themebtndisable"
+          class=" inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline w-full themebtnprimary themebtndisable"
           value="Out of Stock"
           (click)="addToCart(count)"
           disabled
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss
deleted file mode 100644
index 851b0a5b..00000000
--- a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@import '../../../../../shared/scss/selected_theme_variables';
-#buybox {
-  float: left;
-  width: 40%;
-  @media only screen and (min-width: 320px) and (max-width: 767px) {
-    width: 100%;
-  }
-  .bordered {
-    background-color: $gray-100;
-    border: 1px solid $gray-10;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      -webkit-border-radius: 0;
-      border-radius: 0;
-    }
-    .buybox__favorite {
-      cursor: pointer;
-      font-size: 1.1rem;
-      display: block;
-      text-align: center;
-      padding: 16px 20px;
-      background: $white;
-      border-top: 1px solid $gray-10;
-      -webkit-border-radius: 0 0 5px 5px;
-      border-radius: 0 0 5px 5px;
-    }
-    .buybox__purchase {
-      .buttons {
-        padding: 0 15px;
-        // @media only screen and (min-width: 320px) and (max-width: 767px) {
-        //   padding: 0rem;
-        // }
-      }
-      padding: 15px;
-      @media only screen and (min-width: 320px) and (max-width: 767px) {
-        text-align: center;
-        padding-top: 2px;
-      }
-      .buy-quantity {
-        display: block;
-        margin-bottom: 15px;
-        border: 1px solid $gray-10;
-        -webkit-box-shadow: 0 1px 0 $gray-10;
-        box-shadow: 0 1px 0 $gray-10;
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        overflow: hidden;
-        .quantity-input {
-          width: 33.33333%;
-          float: left;
-          padding: 4px;
-          background-color: $gray-10;
-          position: relative;
-          .quantity-number {
-            top: 0;
-            bottom: auto;
-            font-size: 1.2em;
-          }
-          span {
-            display: block;
-            text-align: center;
-            font-size: 0.8em;
-            color: $gray-800;
-          }
-        }
-        a.quantity-minus {
-          font-size: 2.4em;
-          line-height: 1.3em;
-        }
-        a.disabled {
-          cursor: default;
-          background: $gray-200;
-          color: $gray-10;
-        }
-        a {
-          width: 33.33333%;
-          float: left;
-          height: 50px;
-          padding: 0;
-          margin: 0;
-          line-height: 50px;
-          font-weight: 400;
-          font-size: 1.7em;
-          border: none;
-          -webkit-box-shadow: none;
-          box-shadow: none;
-          -webkit-border-radius: 0;
-          border-radius: 0;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts
index 485fe13b..5f211eb6 100644
--- a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts
+++ b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts
@@ -21,7 +21,7 @@ import { ToastrService } from 'ngx-toastr';
 @Component({
   selector: 'app-product-count',
   templateUrl: './product-count.component.html',
-  styleUrls: ['./product-count.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html
index b7501cd5..53128016 100644
--- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html
+++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="!isMobile" class="col-12 p-0">
-  <div class="col-12 p-0">
+<div *ngIf="!isMobile" class="w-full p-0">
+  <div class="w-full p-0">
     <h1 itemprop="name" class="title">{{ product.name }}</h1>
     <div class="product-subtitle">
       <a
@@ -14,7 +14,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
       </a>
     </div>
   </div>
-  <div class="col-12 p-0">
+  <div class="w-full p-0">
     <div class="product-header-extras">
       <div class="ugc pr-3">
         <a
@@ -31,8 +31,8 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
       </div>
     </div>
   </div>
-  <div class="col-12 d-flex p-0">
-    <div class="buybox-wrapper col-12 p-0">
+  <div class="w-full flex p-0">
+    <div class="buybox-wrapper w-full p-0">
       <div id="product-vitals">
         <div id="pricing">
           <ul class="product-price">
@@ -48,11 +48,11 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
               <ul>
                 <li>Price:</li>
                 <li>
-                  <span class="d-block float-left">
+                  <span class="block float-left">
                     {{ currency }}{{ product.selling_price.amount }}</span
                   >
                   <span
-                    class="free-shipping d-block float-left d-xs-none d-sm-none d-none d-lg-block"
+                    class="free-shipping block float-left sm:hidden sm:hidden hidden lg:block"
                     >FREE 1-2 Day
                     <span>Shipping on this item</span>
                   </span>
@@ -79,7 +79,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
             (onOptionClickEvent)="onOptionClick($event)"
             [correspondingOptions]="correspondingOptions"
             [mainOptions]="mainOptions"
-            class="row m-0"
+            class="flex flex-wrap  m-0"
           ></app-product-variants>
         </div>
         <!-- <app-check-pincode></app-check-pincode> -->
@@ -95,7 +95,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
   </div>
 </div>
 <div *ngIf="isMobile">
-  <div class="col-12 p-0">
+  <div class="w-full p-0">
     <div class="buybox-wrapper">
       <div id="product-vitals">
         <div id="pricing">
@@ -114,7 +114,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
                     {{ currency }}{{ product.selling_price.amount }}</span
                   >
                   <span
-                    class="free-shipping  d-xs-none d-sm-none d-none d-lg-block"
+                    class="free-shipping  sm:hidden sm:hidden hidden lg:block"
                     >FREE 1-2 Day
                     <span>Shipping on this item</span>
                   </span>
@@ -137,7 +137,7 @@ <h1 itemprop="name" class="title">{{ product.name }}</h1>
             (onOptionClickEvent)="onOptionClick($event)"
             [correspondingOptions]="correspondingOptions"
             [mainOptions]="mainOptions"
-            class="row m-0"
+            class="flex flex-wrap  m-0"
           ></app-product-variants>
         </div>
       </div>
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss
deleted file mode 100644
index 049279db..00000000
--- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.title {
-  color: $gray-800;
-  padding-top: 5px;
-  font-weight: 600;
-  font-size: 1.4em;
-  line-height: 1.4em;
-  font-family: $primary-font;
-  display: inline;
-}
-
-.reviewlink {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.product-subtitle {
-  display: inline-block;
-  font-size: 1.5em;
-  margin-left: 10px;
-  a {
-    color: darken($theme-main-sub-color4, 25);
-  }
-}
-
-.selling-price {
-  font-size: 16px;
-  margin: 10px 0;
-}
-
-.vatInfo {
-  color: $gray-800;
-  font-size: 13px;
-}
-
-.product-header-extras {
-  .ugc {
-    float: left;
-    a {
-      color: darken($theme-main-sub-color4, 25);
-    }
-    margin: 3px 0;
-    color: $theme-main-sub-color4;
-    font-family: Roboto, sans-serif;
-    font-weight: 400;
-    font-size: 10px;
-    -webkit-font-smoothing: antialiased;
-    font-size: 1em;
-  }
-  .product-header-extras__qna {
-    float: left;
-    a {
-      color: darken($theme-main-sub-color4, 25);
-    }
-    color: $theme-main-sub-color4;
-    font-size: 1em;
-    line-height: 1em;
-    border-left: 1px solid $gray-10;
-    margin-top: 5px;
-  }
-}
-
-.buybox-wrapper {
-  color: $gray-800;
-  widows: 100%;
-  #product-vitals {
-    float: left;
-    width: 60%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      width: 100%;
-      padding-right: 0;
-      margin-bottom: 0;
-    }
-    padding-right: 15px;
-    margin-bottom: 10px;
-    .product-pricing {
-      margin-top: 0;
-      margin-bottom: 0;
-      padding-right: 0;
-      padding-left: 0;
-      list-style-type: none;
-      border-bottom: 1px solid $gray-10;
-      padding: 5px 0 15px;
-      overflow: hidden;
-      li:first-child,
-      li:last-child {
-        padding-bottom: 0;
-      }
-      li {
-        margin: 0;
-        padding-bottom: 25px;
-        width: 80%;
-        margin: auto;
-        p {
-          &:first-child {
-            text-align: left;
-            @media only screen and (min-width: 320px) and (max-width: 767px) {
-              text-align: left;
-            }
-          }
-        }
-      }
-      .title {
-        font-size: 1em;
-        line-height: 1;
-        color: $gray-600;
-        font-weight: normal;
-        width: auto;
-        width: 85px;
-        float: left;
-        margin: 0;
-      }
-      .list-price .price {
-        font-size: 1rem;
-        line-height: 1.7em;
-        color: $red;
-        text-decoration: line-through;
-        font-weight: bold;
-        float: left;
-      }
-      .price {
-        display: block;
-        float: left;
-      }
-      p {
-        margin-top: 0;
-        margin-bottom: 10px;
-      }
-      .our-price {
-        .price {
-          font-size: 1em;
-          line-height: 1.5;
-          font-weight: bold;
-          color: $red;
-          padding-top: 11px;
-          span {
-            float: left;
-            display: grid;
-          }
-        }
-        .title {
-          padding-top: 10px;
-        }
-      }
-      .you-save {
-        .title {
-          margin-bottom: 0;
-        }
-        .price {
-          font-size: 1rem;
-          margin-bottom: 0;
-          line-height: 1.5;
-          color: $red;
-          font-weight: bold;
-        }
-      }
-    }
-    #featured-promotions {
-      .promotion {
-        margin: 5px 0;
-        text-align: left;
-        .title {
-          font-size: 1em;
-          font-weight: 600;
-          text-align: right;
-          color: $red;
-          padding: 11px 5px 0 0;
-          line-height: 1;
-          width: auto;
-          width: 85px;
-          float: left;
-        }
-        .value {
-          margin-left: 85px;
-          display: block;
-        }
-        .autoship-pricing {
-          font-weight: 600;
-          color: $red;
-          font-size: 1.714em;
-          margin: 0;
-          .autoship-percent {
-            font-size: 14px;
-            font-weight: 400;
-            padding-left: 5px;
-          }
-        }
-        .title span {
-          color: $red;
-          font-size: 0.8em;
-        }
-      }
-    }
-  }
-  #buybox {
-    float: left;
-    width: 40%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      width: 100%;
-    }
-  }
-}
-
-#pricing {
-  border-bottom: 1px solid $gray-10; // @media only screen and (min-width: 320px) and (max-width: 767px) {
-  //   border:0px solid
-  // }
-}
-
-.product-price {
-  li {
-    width: 100%;
-    ul {
-      @media only screen and (min-width: 320px) and (max-width: 767px) {
-        li {
-          &:first-child {
-            width: 40%;
-            text-align: right !important;
-            font-size: 1em;
-            color: $gray-600;
-            font-weight: 400;
-          }
-          width: 60%;
-          float: left;
-          padding: 7px 5px;
-          font-size: 1.2em;
-          font-weight: 700;
-          line-height: 1.2em;
-          color: $red;
-        }
-      }
-      li {
-        &:first-child {
-          width: 30%;
-          text-align: left;
-          font-size: 1em;
-          color: $gray-600;
-          font-weight: 400;
-        }
-        width: 70%;
-        float: left;
-        padding: 7px 5px;
-        font-size: 1.2em;
-        font-weight: 700;
-        line-height: 1.2em;
-        color: $red;
-        .free-shipping {
-          font-size: 12px;
-          line-height: 13px;
-          font-weight: 500;
-          color: $gray-800;
-          margin: -8px 0 0 10px;
-          text-transform: uppercase;
-          width: 11.5em;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts
index 456731dd..130f6d4b 100644
--- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts
+++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts
@@ -19,7 +19,7 @@ import { Price } from '../../../../core/models/price';
 @Component({
   selector: 'app-product-price-info',
   templateUrl: './product-price-info.component.html',
-  styleUrls: ['./product-price-info.component.scss']
+  
 })
 export class ProductPriceInfoComponent implements OnInit {
   @Input() product;
diff --git a/src/app/product/components/product-detail-page/product-review/product-review.component.html b/src/app/product/components/product-detail-page/product-review/product-review.component.html
index 779296b6..3dceeb99 100644
--- a/src/app/product/components/product-detail-page/product-review/product-review.component.html
+++ b/src/app/product/components/product-detail-page/product-review/product-review.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="product?.rating_summary; let productRating">
   <div class="cust-reviews" *ngIf="!isMobile">
     <h1>Customer Reviews</h1>
-    <div class="row">
-      <div class="col-12 col-md-6 pl-4">
+    <div class="flex flex-wrap ">
+      <div class="w-full md:w-1/2 pr-4 pl-4 pl-4">
         <div class="avg-review" id="review">
-          <div class="row">
-            <div class="review col-12 col-md-5 col-lg-5 p-0">
+          <div class="flex flex-wrap ">
+            <div class="review w-full md:w-2/5 pr-4 pl-4 lg:w-2/5 pr-4 pl-4 p-0">
               <ngx-input-star-rating
                 disabled="true"
                 value="{{ productRating.average_rating }}"
@@ -13,7 +13,7 @@ <h1>Customer Reviews</h1>
               ></ngx-input-star-rating>
               {{ productRating.review_count }} Reviews
             </div>
-            <div class="out-review col-12 col-md-5 col-lg-5 ">
+            <div class="out-review w-full md:w-2/5 pr-4 pl-4 lg:w-2/5 pr-4 pl-4 ">
               {{ productRating.average_rating }} out of
               {{ reviewsDisplayLimit }} stars
             </div>
@@ -22,13 +22,13 @@ <h1>Customer Reviews</h1>
         <div class="write-review"></div>
         <div *ngIf="(ratingOptions$ | async); let ratingOptions">
           <div
-            class="row rataingpercentage"
+            class="flex flex-wrap  rataingpercentage"
             *ngFor="let rating of (ratingOptions | reverse)"
           >
-            <div class="col-3 col-md-2 col-lg-2 pl-2 pr-0">
+            <div class="w-1/4 md:w-1/5 pr-4 pl-4 lg:w-1/5 pr-4 pl-4 pl-2 pr-0">
               {{ rating.value }} Star
             </div>
-            <div class="col-7 col-md-8 col-lg-8 pr-0 pl-0">
+            <div class="w-3/5 md:w-2/3 pr-4 pl-4 lg:w-2/3 pr-4 pl-4 pr-0 pl-0">
               <div class="mb-2 progress-container">
                 <div
                   *ngIf="
@@ -47,7 +47,7 @@ <h1>Customer Reviews</h1>
                 </ng-template>
               </div>
             </div>
-            <div class="col-2  col-md-2 col-lg-2 pl-2">
+            <div class="w-1/5  md:w-1/5 pr-4 pl-4 lg:w-1/5 pr-4 pl-4 pl-2">
               <ng-template #showZero>
                 <b>{{ 0 }}%</b>
               </ng-template>
@@ -64,10 +64,10 @@ <h1>Customer Reviews</h1>
           </div>
         </div>
       </div>
-      <div class="col-12 col-md-4 offset-md-1 mt-5 pt-5">
-        <div class="row">
-          <div class="col-12">
-            <div class="row">
+      <div class="w-full md:w-1/3 pr-4 pl-4 md:mx-1/6 mt-5 pt-5">
+        <div class="flex flex-wrap ">
+          <div class="w-full">
+            <div class="flex flex-wrap ">
               <div
                 class="float-left review-percentage"
                 *ngIf="productRating.review_count > 0"
@@ -104,7 +104,7 @@ <h1>Customer Reviews</h1>
                 </p>
                 <button
                   (click)="showReviewForm()"
-                  class="btn themebtnprimary  m-auto"
+                  class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary  m-auto"
                 >
                   Write Review
                 </button>
@@ -115,11 +115,11 @@ <h1>Customer Reviews</h1>
       </div>
     </div>
     <div class="review-display" *ngIf="product?.reviews?.length > 0">
-      <div class="row">
-        <div class="col-md-8">
+      <div class="flex flex-wrap ">
+        <div class="md:w-2/3 pr-4 pl-4">
           <div class="review-sort-filter mt-5 mb-4">
-            <div class="row">
-              <div class="float-left col-md-4 pt-2">
+            <div class="flex flex-wrap ">
+              <div class="float-left md:w-1/3 pr-4 pl-4 pt-2">
                 Showing {{ product?.reviews?.length }} of
                 {{ productRating.review_count }} reviews
               </div>
@@ -149,14 +149,14 @@ <h1>Customer Reviews</h1>
   </div>
   <div class="cust-reviews" *ngIf="isMobile" id="review">
     <h1>Customer Reviews</h1>
-    <div class="row">
-      <div class="col-12 col-md-6">
+    <div class="flex flex-wrap ">
+      <div class="w-full md:w-1/2 pr-4 pl-4">
         <div
           class="avg-review"
           *ngIf="productRating.review_count > 0; else noReviews"
         >
-          <div class="row">
-            <div class="col-5">
+          <div class="flex flex-wrap ">
+            <div class="w-2/5">
               <div class="review-percentage">
                 <div class="percent">
                   <div class="num">
@@ -182,7 +182,7 @@ <h1>Customer Reviews</h1>
                 ></round-progress>
               </div>
             </div>
-            <div class="review col-7 text-left mb-5 pl-2">
+            <div class="review w-3/5 text-left mb-5 pl-2">
               <p>
                 {{ reviewPercent }}% OF REVIEWERS <br />RECOMMEND THIS PRODUCT
               </p>
@@ -198,20 +198,20 @@ <h1>Customer Reviews</h1>
           <div class="write-review">
             <button
               (click)="showReviewForm()"
-              class="btn themebtnprimary col-12 m-auto"
+              class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary w-full m-auto"
             >
               Write a Review
             </button>
           </div>
         </div>
       </div>
-      <ng-template #noReviews class="col-12 col-md-3 offset-md-2 pt-2">
-        <div class="row">
-          <div class="box col-12">
-            <div class="col-12 pl-0">Be the first to Review this product</div>
+      <ng-template #noReviews class="w-full md:w-1/4 pr-4 pl-4 md:mx-1/5 pt-2">
+        <div class="flex flex-wrap ">
+          <div class="box w-full">
+            <div class="w-full pl-0">Be the first to Review this product</div>
             <button
               (click)="showReviewForm()"
-              class="btn themebtnprimary col-12 m-auto"
+              class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary w-full m-auto"
             >
               Write a Review
             </button>
@@ -220,11 +220,11 @@ <h1>Customer Reviews</h1>
       </ng-template>
     </div>
     <div class="review-display" *ngIf="productRating.review_count > 0">
-      <div class="row">
-        <div class="col-md-8">
+      <div class="flex flex-wrap ">
+        <div class="md:w-2/3 pr-4 pl-4">
           <div class="review-sort-filter mt-1 mb-4">
-            <div class="row">
-              <div class="float-left col-md-4 pt-2">
+            <div class="flex flex-wrap ">
+              <div class="float-left md:w-1/3 pr-4 pl-4 pt-2">
                 Showing {{ product?.reviews?.length }} of
                 {{ productRating.review_count }} reviews
               </div>
diff --git a/src/app/product/components/product-detail-page/product-review/product-review.component.scss b/src/app/product/components/product-detail-page/product-review/product-review.component.scss
deleted file mode 100644
index d35612bd..00000000
--- a/src/app/product/components/product-detail-page/product-review/product-review.component.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-@import "../../../../shared/scss/selected_theme_variables";
-.padding-top {
-  padding-top: 50px;
-}
-
-h1 {
-  font-size: 1.7em;
-  color: $gray-900;
-}
-
-.pdp-add-to-bag {
-  width: 60%;
-  text-align: center;
-  padding: 10px 0;
-  background-color: $theme-main-color;
-  border: 1px solid $theme-main-color;
-  color: $white;
-}
-
-.pdp-button {
-  border-radius: 3px;
-  outline: 0;
-  margin-top: 10px;
-  padding: 10px 30px;
-  font-size: 15px;
-  min-height: 22px;
-  margin-bottom: 10px;
-}
-
-.fav-icon-sontainer {
-  position: relative;
-  .favorite {
-    position: absolute;
-    right: 8px;
-    top: -24px;
-    background-color: $theme-main-color;
-    color: $white;
-    padding: 10px 13px;
-    border-radius: 50%;
-    box-shadow: 0px 0px 8px $gray-900;
-    z-index: 20;
-  }
-}
-
-.slider {
-  margin-top: 1vw;
-  padding-top: 1vw;
-  h2 {
-    font-size: 1.7em;
-    color: $gray-900;
-  }
-}
-
-@media screen and (min-width: 310px) and (max-width: 768px) {
-  .fav-icon-sontainer {
-    .favorite {
-      top: 50px;
-    }
-  }
-}
-
-.cust-reviews {
-  .avg-review {
-    padding: 1rem 0 3rem;
-    .out-review {
-      border-left: 1px solid $gray-10;
-      @media screen and (min-width: 310px) and (max-width: 768px) {
-        border-left: 0 solid $gray-10;
-        margin-top: 10px;
-        padding: 10px;
-      }
-    }
-  }
-  .rataingpercentage {
-    font-size: 1.2em;
-    margin-bottom: 10px;
-    .progress-container {
-      .progress {
-        display: flex;
-        height: 1.6rem;
-      }
-    }
-  }
-  .review-percentage {
-    position: relative;
-    width: 135px;
-    .percent {
-      position: absolute;
-      top: 35px;
-      left: 12px;
-      z-index: 12;
-      width: 85px;
-      text-align: center;
-      .num {
-        font-size: 2em;
-        padding: 0px;
-        margin: 0px;
-        line-height: 30px;
-        span {
-          font-size: 19px;
-          position: absolute;
-          top: -14px;
-        }
-      }
-      sup {
-        top: -31px;
-        right: -53px;
-        font-size: 22px;
-      }
-      small {
-        font-size: 11px;
-        left: 0px;
-        position: relative;
-      }
-    }
-  }
-  .write-review {
-    width: calc(100% - 135px);
-    @media screen and (min-width: 310px) and (max-width: 768px) {
-      width: 100%;
-    }
-  }
-  .review-display {
-    .rating-inner {
-      padding-bottom: 1rem;
-      border-bottom: 1px solid $gray-10;
-      margin-bottom: 1rem;
-      .rating-head {
-        font-weight: 700;
-        color: $gray-900;
-        position: relative;
-        left: -5px;
-        text-transform: capitalize;
-      }
-    }
-    .rating-by {
-      font-size: 1em;
-      color: darken($gray-700, 25);
-    }
-    .description {
-      padding-top: 1rem;
-      text-align: justify;
-      color: $gray-900;
-      word-wrap: break-word;
-    }
-  }
-  .review-sort-filter {
-    border-top: 1px solid $gray-10;
-    border-top: 1px solid $gray-10;
-    background-color: $gray-200;
-    padding: 1rem;
-  }
-}
-
-.box {
-  box-shadow: 0 0 1px $gray-10;
-  border: 1px solid $gray-10;
-  padding: 15px;
-}
-
-@media screen and (min-width: 310px) and (max-width: 768px) {
-  .review-percentage {
-    position: relative;
-    .percent {
-      position: absolute;
-      top: 35px !important;
-      left: 12px !important;
-      z-index: 12;
-      .num {
-        font-size: 2em;
-        padding: 0px;
-        margin: 0px;
-        line-height: 30px;
-        span {
-          font-size: 19px;
-          position: absolute;
-          top: -14px;
-        }
-      }
-      sup {
-        top: -31px;
-        right: -53px;
-        font-size: 22px;
-      }
-      small {
-        font-size: 11px;
-        left: 0;
-        position: relative;
-      }
-    }
-  }
-  .review {
-    font-size: 12.5px;
-    ngx-input-star-rating {
-      margin-left: -6px;
-    }
-  }
-}
diff --git a/src/app/product/components/product-detail-page/product-review/product-review.component.ts b/src/app/product/components/product-detail-page/product-review/product-review.component.ts
index 66e935bc..e43e91b7 100644
--- a/src/app/product/components/product-detail-page/product-review/product-review.component.ts
+++ b/src/app/product/components/product-detail-page/product-review/product-review.component.ts
@@ -25,7 +25,7 @@ import { Observable, Subscription } from 'rxjs';
 @Component({
   selector: 'app-product-review',
   templateUrl: './product-review.component.html',
-  styleUrls: ['./product-review.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductReviewComponent implements OnInit, OnDestroy {
diff --git a/src/app/product/components/product-detail-page/product-variants/product-variants.component.html b/src/app/product/components/product-detail-page/product-variants/product-variants.component.html
index f6c347a5..bc632883 100644
--- a/src/app/product/components/product-detail-page/product-variants/product-variants.component.html
+++ b/src/app/product/components/product-detail-page/product-variants/product-variants.component.html
@@ -4,7 +4,7 @@
   [ngClass]="[custopt?.length === 0 ? 'notvariant' : '']"
 >
   <div *ngFor="let variant of (customOptionTypesHash | keys)">
-    <div class="size-buttons-size-header d-none d-sm-block">
+    <div class="size-buttons-size-header hidden sm:block">
       <h6>{{ variant.key }}</h6>
     </div>
     <button
diff --git a/src/app/product/components/product-detail-page/product-variants/product-variants.component.scss b/src/app/product/components/product-detail-page/product-variants/product-variants.component.scss
deleted file mode 100644
index 650a286c..00000000
--- a/src/app/product/components/product-detail-page/product-variants/product-variants.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '../../../../shared/scss/_selected_theme_variables';
-.size-buttons-size-header {
-  overflow: auto;
-  color: $gray-900;
-  span {
-    font-weight: bold;
-    font-size: 1em;
-  }
-}
-
-.option-buttons {
-  display: inline-block;
-  background-color: $white;
-  border: 1px solid $gray-900;
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  text-align: center;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  color: $gray-900;
-  &.disabled {
-    position: relative;
-    color: $gray-900;
-    border: 1px solid $gray-10;
-    cursor: $red;
-    pointer-events: none;
-    .strike {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: $gray-10;
-    }
-  }
-  p {
-    margin: 0;
-  }
-  &:hover,
-  &.active {
-    color: $white;
-    font-weight: 500;
-    background-color: $theme-action-color;
-    border: 1px solid $theme-action-color;
-  }
-}
-
-.selected {
-  color: $white;
-  font-weight: 500;
-  background-color: $gray-900;
-}
-
-.variant {
-  padding-bottom: 12px;
-  border-bottom: 1px solid $gray-10;
-  width: 100%;
-  margin-bottom: 10px;
-  @media only screen and (min-width: 320px) and (max-width: 767px) {
-    padding: 12px 15px 5px;
-    display: block;
-    margin: auto;
-  }
-}
-
-.notvariant {
-  padding: 0;
-  margin: 0;
-  border: 0 solid;
-}
diff --git a/src/app/product/components/product-detail-page/product-variants/product-variants.component.ts b/src/app/product/components/product-detail-page/product-variants/product-variants.component.ts
index 02fca141..fe4bc25a 100644
--- a/src/app/product/components/product-detail-page/product-variants/product-variants.component.ts
+++ b/src/app/product/components/product-detail-page/product-variants/product-variants.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'app-product-variants',
   templateUrl: './product-variants.component.html',
-  styleUrls: ['./product-variants.component.scss']
+  
 })
 export class ProductVariantsComponent implements OnInit {
   @Input() customOptionTypesHash: any;
diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html
index c2f1bedd..33d48709 100644
--- a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html
+++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html
@@ -1,15 +1,15 @@
-<div class="container pt-5 pb-5" *ngIf="isAuthenticated">
+<div class="container mx-auto sm:px-4 pt-5 pb-5" *ngIf="isAuthenticated">
   <h3 *ngIf="!isReviewSubmitted">Write Review</h3>
   <h3 *ngIf="isReviewSubmitted">Review Submitted!</h3>
   <div class="write-review">
-    <div class="row">
-      <div class="col-12 pl-4 col-sm-2 text-center">
-        <img [src]="getProductImageUrl()" class="img-fluid" />
+    <div class="flex flex-wrap ">
+      <div class="w-full pl-4 sm:w-1/5 pr-4 pl-4 text-center">
+        <img [src]="getProductImageUrl()" class="max-w-full h-auto" />
       </div>
-      <div class="col-12 col-sm-7">
-        <div class="container">
-          <div class="row">
-            <div class="col-12" *ngIf="!isReviewSubmitted">
+      <div class="w-full sm:w-3/5 pr-4 pl-4">
+        <div class="container mx-auto sm:px-4">
+          <div class="flex flex-wrap ">
+            <div class="w-full" *ngIf="!isReviewSubmitted">
               <h2>{{ product.name }}</h2>
               <form
                 [formGroup]="reviewForm"
@@ -17,7 +17,7 @@ <h2>{{ product.name }}</h2>
                 data-toggle="validator"
                 *ngIf="reviewForm"
               >
-                <div class="form-group">
+                <div class="mb-4">
                   <label for="exampleInputEmail1">Rate this product</label>
                   <div>
                     <ngx-input-star-rating
@@ -26,11 +26,11 @@ <h2>{{ product.name }}</h2>
                     ></ngx-input-star-rating>
                   </div>
                 </div>
-                <div class="form-group">
+                <div class="mb-4">
                   <label for="exampleInputEmail1">Title</label>
                   <input
                     type="text"
-                    class="form-control"
+                    class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
                     aria-describedby="emailHelp"
                     placeholder="Headline for your review"
                     formControlName="title"
@@ -41,15 +41,15 @@ <h2>{{ product.name }}</h2>
                       reviewForm.get('title').hasError('required') &&
                       reviewForm.get('title').touched
                     "
-                    class="value-err text-danger show"
+                    class="value-err text-red-600 opacity-100 block"
                   >
                     Please enter your review title.
                   </p>
                 </div>
-                <div class="form-group">
+                <div class="mb-4">
                   <label for="exampleFormControlTextarea1">Content</label>
                   <textarea
-                    class="form-control"
+                    class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
                     rows="3"
                     placeholder="Your review"
                     formControlName="review"
@@ -60,33 +60,33 @@ <h2>{{ product.name }}</h2>
                       reviewForm.get('review').hasError('required') &&
                       reviewForm.get('review').touched
                     "
-                    class="value-err text-danger show"
+                    class="value-err text-red-600 opacity-100 block"
                   >
                     Please enter your review.
                   </p>
                 </div>
                 <button
                   type="submit"
-                  class="btn themebtnprimary col-12 col-sm-5 mb-4"
+                  class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary w-full sm:w-2/5 pr-4 pl-4 mb-4"
                 >
                   Submit Review
                 </button>
               </form>
             </div>
-            <div class="col-12" *ngIf="isReviewSubmitted">
+            <div class="w-full" *ngIf="isReviewSubmitted">
               <h3>Thanks for your review!</h3>
               <div class="float-left">
-                <i class="fa fa-check-circle fa-2x text-success"></i>
+                <i class="fa fa-check-circle fa-2x text-green-500"></i>
               </div>
               <div class="float-right">
-                <p class="w-75 text-success">
+                <p class="w-3/4 text-green-500">
                   Your review has been submitted.Please note that your review
                   may take up to 48 hours to appear.
                 </p>
               </div>
               <button
                 type="normal"
-                class="btn themebtnprimary col-12 col-sm-5 mt-4 mb-1"
+                class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary w-full sm:w-2/5 pr-4 pl-4 mt-4 mb-1"
                 (click)="goToProduct(product.slug)"
               >
                 Continue Shopping
@@ -95,7 +95,7 @@ <h3>Thanks for your review!</h3>
           </div>
         </div>
       </div>
-      <div class="col-12 col-sm-3" *ngIf="!isReviewSubmitted">
+      <div class="w-full sm:w-1/4 pr-4 pl-4" *ngIf="!isReviewSubmitted">
         <div class="guideline">
           <h4>Writing Guidelines</h4>
           <ul>
diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss
deleted file mode 100644
index 833caf40..00000000
--- a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-
-.write-review {
-  margin: 0 auto;
-  padding: 2em 0;
-  border-radius: 4px;
-  border: 1px solid $gray-10;
-  label {
-    font-size: 1em;
-    color: $gray-900;
-  }
-  .guideline {
-    background-color: $gray-100;
-    border-radius: 4px;
-    padding: 1em;
-    margin: 0 15px;
-  }
-  h4 {
-    color: $gray-900;
-    font-size: 1.2em;
-  }
-  h2 {
-    color: $gray-900;
-    font-size: 1.7em;
-  }
-  ul {
-    list-style: inside;
-    text-indent: -22px;
-    padding: 1rem 0rem 1rem 1.4rem;
-    line-height: 1.5em;
-    li {
-      padding-bottom: 0.5rem;
-      font-size: 1em;
-      color: $gray-900;
-    }
-  }
-}
diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts
index 5329a6d8..91b0b041 100644
--- a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts
+++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.ts
@@ -26,7 +26,7 @@ import { ProductActions } from '../../../actions/product-actions';
 @Component({
   selector: 'app-write-product-review',
   templateUrl: './write-product-review.component.html',
-  styleUrls: ['./write-product-review.component.scss']
+  
 })
 export class WriteProductReviewComponent implements OnInit, OnDestroy {
   reviewForm: UntypedFormGroup;
diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts
index 303fcf73..c18a8fcc 100644
--- a/src/app/product/product.component.ts
+++ b/src/app/product/product.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-product',
   templateUrl: './product.component.html',
-  styleUrls: ['./product.component.css']
+  
 })
 export class ProductComponent implements OnInit {
   constructor() {}
diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.html b/src/app/shared/components/breadcrumbs/breadcrumbs.component.html
index 075d042a..367a68e3 100644
--- a/src/app/shared/components/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.html
@@ -1,19 +1,19 @@
 <nav aria-label="breadcrumb">
-  <ol class="breadcrumb bg-transparent pl-0 mb-0">
+  <ol class="flex flex-wrap list-reset pt-3 pb-3 py-4 px-4 mb-4 bg-gray-200 rounded bg-transparent pl-0 mb-0">
     <li
-      class="breadcrumb-item"
+      class="inline-block px-2 py-2 text-gray-700"
       [ngClass]="{ active: lastCrumb }"
       *ngFor="let breadcrumb of breadcrumbs; last as lastCrumb"
     >
       <a
         *ngIf="!lastCrumb"
-        class="text-secondary"
+        class="text-gray-600"
         [routerLink]="breadcrumb.link"
         >{{ breadcrumb.crumb }}</a
       >
       <span
         *ngIf="lastCrumb"
-        class="font-weight-bold text-dark text-capitalize"
+        class="font-bold text-gray-900 capitalize"
         >{{ breadcrumb.crumb }}</span
       >
     </li>
diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
deleted file mode 100644
index 231e208e..00000000
--- a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.breadcrumb-item {
-  a {
-    text-decoration: none;
-  }
-}
diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts b/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts
index ec2170ab..45ab1ea1 100644
--- a/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts
+++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts
@@ -10,7 +10,7 @@ interface BreadCrumb {
 @Component({
   selector: 'app-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
+  
 })
 export class BreadcrumbsComponent implements OnInit {
   _breadcrumbs: Array<BreadCrumb> = [];
diff --git a/src/app/shared/components/product-slider/inner-product/inner-product.component.html b/src/app/shared/components/product-slider/inner-product/inner-product.component.html
index c10ae4fc..a325aeea 100644
--- a/src/app/shared/components/product-slider/inner-product/inner-product.component.html
+++ b/src/app/shared/components/product-slider/inner-product/inner-product.component.html
@@ -1,12 +1,12 @@
 <div class="product-tile">
   <a [routerLink]="['/', product.slug, product.id]">
-    <picture class="img-responsive d-block">
+    <picture class="img-responsive block">
       <img
         [alt]="product.name"
         [errorImage]="noImageUrl"
         [lazyLoad]="getProductImageUrl()"
         [offset]="100"
-        class="img-responsive w-100 h-100"
+        class="img-responsive w-full h-full"
       />
     </picture>
     <ngx-input-star-rating
@@ -15,6 +15,6 @@
       class="rating"
       disabled="true"
     ></ngx-input-star-rating>
-    <p class="mt-1 mb-2 text-dark">{{ product.name }}</p>
+    <p class="mt-1 mb-2 text-gray-900">{{ product.name }}</p>
   </a>
 </div>
diff --git a/src/app/shared/components/product-slider/inner-product/inner-product.component.scss b/src/app/shared/components/product-slider/inner-product/inner-product.component.scss
deleted file mode 100644
index 02b3bed5..00000000
--- a/src/app/shared/components/product-slider/inner-product/inner-product.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../../scss/selected_theme_variables';
-ngx-input-star-rating {
-  transform: scale(0.8) translateX(-10%);
-}
-
-picture {
-  height: 200px;
-  &.bg-img-none {
-    background-image: none;
-  }
-  img {
-    mix-blend-mode: darken;
-    object-fit: scale-down;
-  }
-}
-
-.rating {
-  position: relative;
-  left: 0.8em;
-  @media screen and (min-width: 320px) and (max-width: 768px) {
-    position: relative;
-    left: 8.5px;
-  }
-}
diff --git a/src/app/shared/components/product-slider/inner-product/inner-product.component.ts b/src/app/shared/components/product-slider/inner-product/inner-product.component.ts
index d7abd328..c37767e1 100644
--- a/src/app/shared/components/product-slider/inner-product/inner-product.component.ts
+++ b/src/app/shared/components/product-slider/inner-product/inner-product.component.ts
@@ -11,7 +11,7 @@ import {
 @Component({
   selector: 'app-inner-product',
   templateUrl: './inner-product.component.html',
-  styleUrls: ['./inner-product.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InnerIproductComponent implements OnInit {
diff --git a/src/app/shared/components/product-slider/product-slider.component.html b/src/app/shared/components/product-slider/product-slider.component.html
index 0d68ad26..01a50684 100644
--- a/src/app/shared/components/product-slider/product-slider.component.html
+++ b/src/app/shared/components/product-slider/product-slider.component.html
@@ -6,13 +6,13 @@
   >
     <ngu-item
       *nguCarouselDef="let product; let i = index"
-      class="col-6 col-sm-4 col-md-3 col-lg-2 product-box m-1 card p-1"
+      class="w-1/2 sm:w-1/3 pr-4 pl-4 md:w-1/4 pr-4 pl-4 lg:w-1/5 pr-4 pl-4 product-box m-1 relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 p-1"
     >
       <app-inner-product [product]="product" [showRating]="showRating">
       </app-inner-product>
     </ngu-item>
-    <button NguCarouselPrev class="leftRs d-none d-sm-block"></button>
-    <button NguCarouselNext class="rightRs d-none d-sm-block"></button>
+    <button NguCarouselPrev class="leftRs hidden sm:block"></button>
+    <button NguCarouselNext class="rightRs hidden sm:block"></button>
   </ngu-carousel>
   <hr />
 </section>
diff --git a/src/app/shared/components/product-slider/product-slider.component.scss b/src/app/shared/components/product-slider/product-slider.component.scss
deleted file mode 100644
index 005730e3..00000000
--- a/src/app/shared/components/product-slider/product-slider.component.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@import '../../scss/selected_theme_variables';
-:host {
-  ::ng-deep .section-title {
-    color: $black;
-    text-transform: capitalize;
-    font-weight: 600;
-  }
-  ::ng-deep .scrollbar-hidden {
-    overflow: hidden !important;
-  }
-  ::ng-deep .product-tile {
-    text-align: center;
-    a {
-      color: $gray-900;
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-  ::ng-deep .product-box {
-    border-radius: 5px;
-    border: 1px solid transparent;
-    &:hover {
-      -webkit-box-shadow: 0 1px 0 $gray-10;
-      box-shadow: 0 1px 0 $gray-10;
-      border-color: $gray-10;
-    }
-  }
-  ::ng-deep.product-tile p {
-    margin-bottom: 0px;
-    white-space: normal;
-    margin-top: 10px;
-    overflow: hidden;
-    height: 2.3rem;
-    font-size: 0.8rem;
-  }
-  ::ng-deep.dropdown-toggle::after {
-    vertical-align: 0.055em !important;
-  }
-  $break-small: 320px;
-  @media screen and (min-width: $break-small) and (max-width: 767px) {
-    ::ng-deep .section-title {
-      font-size: 1.4em;
-    }
-    ::ng-deep .product-box {
-      -webkit-box-shadow: 0 1px 0 $gray-10;
-      box-shadow: 0 0 5px $gray-10;
-    }
-  }
-}
-
-:host {
-  ::ng-deep .banner {
-    .ngucarousel {
-      padding-top: 3rem;
-    }
-
-    .leftRs,
-    .rightRs {
-      position: absolute;
-      top: 0rem;
-      margin: auto;
-      right: 0;
-      background-color: transparent;
-      border: 1.5px solid $theme-action-color;
-      height: 2rem;
-      width: 2rem;
-      border-radius: 9999px;
-      background-repeat: no-repeat;
-      background-size: 8px;
-      cursor: pointer;
-    }
-
-    .leftRs {
-      background-image: url(../../../../assets/custom/arrow-left.png);
-      background-position: 9px 8px;
-      right: 3rem;
-    }
-
-    .rightRs {
-      background-image: url(../../../../assets/custom/arrow-right.png);
-      background-position: 11px 8px;
-    }
-  }
-}
diff --git a/src/app/shared/components/product-slider/product-slider.component.ts b/src/app/shared/components/product-slider/product-slider.component.ts
index 46fb38e4..8e9a3d67 100644
--- a/src/app/shared/components/product-slider/product-slider.component.ts
+++ b/src/app/shared/components/product-slider/product-slider.component.ts
@@ -9,7 +9,7 @@ import {
 @Component({
   selector: 'app-product-slider',
   templateUrl: './product-slider.component.html',
-  styleUrls: ['./product-slider.component.scss'],
+  
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductSliderComponent implements OnInit {
diff --git a/src/app/shared/components/saved-address/saved-address.component.html b/src/app/shared/components/saved-address/saved-address.component.html
index 9206a48c..c98a9d43 100644
--- a/src/app/shared/components/saved-address/saved-address.component.html
+++ b/src/app/shared/components/saved-address/saved-address.component.html
@@ -1,33 +1,33 @@
 <div *ngIf="addressList">
   <div
     *ngFor="let address of (addressList | reverse); index as i"
-    class="card mb-3"
+    class="relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 mb-3"
   >
-    <div class="address-row  select card-body">
-      <div class="row ">
-        <div class="col-12 name">
+    <div class="address-row  select flex-auto p-6">
+      <div class="flex flex-wrap  ">
+        <div class="w-full name">
           <div class="">
-            <div class="col-md-3 col-2 p-0 float-left">
+            <div class="md:w-1/4 pr-4 pl-4 w-1/5 p-0 float-left">
               <button
-                class="btn themebtnprimarybasic mb-3"
+                class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic mb-3"
                 (click)="selectedDeliveryAddress(address)"
               >
                 Deliver here
               </button>
             </div>
-            <div class="col-md-6 col-2 float-right">
-              <div class="row float-right p-0 ">
-                <div class="col-md-6">
+            <div class="md:w-1/2 pr-4 pl-4 w-1/5 float-right">
+              <div class="flex flex-wrap  float-right p-0 ">
+                <div class="md:w-1/2 pr-4 pl-4">
                   <button
-                    class="btn themebtnprimarybasic mb-3"
+                    class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic mb-3"
                     (click)="editAddress(address)"
                   >
                     Edit
                   </button>
                 </div>
-                <div class="col-md-6">
+                <div class="md:w-1/2 pr-4 pl-4">
                   <button
-                    class="btn themebtnprimarybasic mb-3"
+                    class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic mb-3"
                     (click)="deleteAddress(address.id)"
                   >
                     Delete
@@ -37,22 +37,22 @@
             </div>
           </div>
         </div>
-        <div class="row m-0">
-          <div class="col-12 name">
+        <div class="flex flex-wrap  m-0">
+          <div class="w-full name">
             <span class="name mr-2 ">{{ address.first_name }}</span>
             <span class="name mr-2 ">{{ address.last_name }}</span>
             <span class="mob ">{{ address.phone }}</span>
           </div>
 
-          <div class="address col-12 ">
+          <div class="address w-full ">
             {{ address.address_line_1 }}
             <span class="address-field ">{{ address.address_line_2 }}</span
             >,
             <span class="address-field ">{{ address.city }}</span>
             <span class="address-field pin ">-{{ address.zip_code }}</span>
           </div>
-          <div class="address-field col-12">{{ address?.state?.name }}</div>
-          <div class="address-field col-12">{{ address.country.name }}</div>
+          <div class="address-field w-full">{{ address?.state?.name }}</div>
+          <div class="address-field w-full">{{ address.country.name }}</div>
         </div>
       </div>
     </div>
diff --git a/src/app/shared/components/saved-address/saved-address.component.scss b/src/app/shared/components/saved-address/saved-address.component.scss
deleted file mode 100644
index 02ea7600..00000000
--- a/src/app/shared/components/saved-address/saved-address.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../../scss/selected_theme_variables';
-.name {
-  font-size: 1em;
-  color: $gray-900;
-  font-weight: 700;
-}
-
-.mob {
-  font-size: 1em;
-  color: $gray-900;
-  font-weight: 700;
-}
-
-.pin {
-  font-weight: 700;
-}
-
-.reviewlink {
-  cursor: pointer;
-}
-
-.select {
-  &:hover {
-    text-decoration: none;
-    background-color: #62ff0009;
-  }
-}
-
-.address-option {
-  left: 18px !important;
-  right: auto;
-  top: -2% !important;
-  transform: translateY(0px);
-}
diff --git a/src/app/shared/components/saved-address/saved-address.component.ts b/src/app/shared/components/saved-address/saved-address.component.ts
index d0fa4b50..4b2e0eb3 100644
--- a/src/app/shared/components/saved-address/saved-address.component.ts
+++ b/src/app/shared/components/saved-address/saved-address.component.ts
@@ -7,7 +7,7 @@ import { UserActions } from '../../../user/actions/user.actions';
 @Component({
   selector: 'app-saved-address',
   templateUrl: './saved-address.component.html',
-  styleUrls: ['./saved-address.component.scss']
+  
 })
 export class SavedAddressComponent implements OnInit {
   @Input() addressList;
diff --git a/src/app/shared/components/search-bar/search-bar.component.html b/src/app/shared/components/search-bar/search-bar.component.html
index e7369ff4..c2eff4d4 100644
--- a/src/app/shared/components/search-bar/search-bar.component.html
+++ b/src/app/shared/components/search-bar/search-bar.component.html
@@ -1,32 +1,22 @@
-<div class="input-group searchBar">
-  <input
-    type="text"
-    class="form-control"
-    placeholder="Search"
-    aria-label="Search"
-    aria-describedby="search-button"
-    type="search"
-    placeholder="{{ searchPlaceholder }}"
-    aria-label="Search"
-    #box
-    [(ngModel)]="asyncSelected"
-    [typeaheadAsync]="true"
-    [typeahead]="dataSource"
-    (typeaheadLoading)="changeTypeaheadLoading($event)"
-    (typeaheadOnSelect)="typeaheadOnSelect($event)"
-    [typeaheadOptionsLimit]="7"
-    typeaheadOptionField="name"
-    typeaheadWaitMs="300"
-    typeaheadMinLength="3"
-    [placeholder]="searchPlaceholder"
-  />
-  <div class="input-group-append">
-    <button
-      class="btn btn-outline-light searchBar-btn"
-      type="button"
-      (click)="doSearch(box.value)"
-    >
-      <span class="fa fa-search searchBar-btn-icon"></span>
-    </button>
-  </div>
-</div>
+<form class="relative pr-12 md:pr-14 bg-white overflow-hidden shadow-sm rounded-md w-full">
+  <label class="flex items-center py-0.5">
+    <input
+      class="form-input w-full pl-5 appearance-none transition ease-in-out border text-input text-sm font-sans rounded-md min-h-10 h-10 duration-200 bg-white focus:ring-0 outline-none border-none focus:outline-none placeholder-gray-500 placeholder-opacity-75"
+      aria-describedby="search-button" type="search" placeholder="{{ searchPlaceholder }}" aria-label="Search" #box
+      [(ngModel)]="asyncSelected" [typeaheadAsync]="true" [typeahead]="dataSource"
+      (typeaheadLoading)="changeTypeaheadLoading($event)" (typeaheadOnSelect)="typeaheadOnSelect($event)"
+      [typeaheadOptionsLimit]="7" typeaheadOptionField="name" typeaheadWaitMs="300" typeaheadMinLength="3"
+      [placeholder]="searchPlaceholder" />
+  </label>
+
+  <button aria-label="Search" (click)="doSearch(box.value)" type="submit"
+    class="outline-none text-xl text-gray-400 absolute top-0 right-0 end-0 w-12 md:w-14 h-full flex items-center justify-center transition duration-200 ease-in-out hover:text-heading focus:outline-none">
+    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke-miterlimit="10" stroke-width="32"
+        d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path>
+      <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448">
+      </path>
+    </svg>
+  </button>
+</form>
\ No newline at end of file
diff --git a/src/app/shared/components/search-bar/search-bar.component.scss b/src/app/shared/components/search-bar/search-bar.component.scss
deleted file mode 100644
index 2d2673a3..00000000
--- a/src/app/shared/components/search-bar/search-bar.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../scss/selected_theme_variables';
-:host ::ng-deep .dropdown-menu {
-  .dropdown-item {
-    transition: background-color 700ms;
-    @media screen and (min-width: 320px) and (max-width: 768px) {
-      padding: 1.15rem 0.7rem;
-    }
-    &.active {
-      background-color: darken($theme-action-color, 35);
-      box-shadow: inset 0 0 5px 0px darken($theme-action-color, 25);
-      color: black;
-    }
-  }
-}
-
-.searchBar {
-  input {
-    border: none;
-    &:focus {
-      border-color: transparent;
-      box-shadow: none;
-    }
-  }
-  .searchBar-btn {
-    .searchBar-btn-icon {
-      font-size: 1.3rem;
-    }
-  }
-}
diff --git a/src/app/shared/components/search-bar/search-bar.component.ts b/src/app/shared/components/search-bar/search-bar.component.ts
index 1bb1c9f5..c81aa91c 100644
--- a/src/app/shared/components/search-bar/search-bar.component.ts
+++ b/src/app/shared/components/search-bar/search-bar.component.ts
@@ -9,7 +9,7 @@ import { mergeMap, map } from 'rxjs/operators';
 @Component({
   selector: 'app-search-bar',
   templateUrl: './search-bar.component.html',
-  styleUrls: ['./search-bar.component.scss']
+  
 })
 export class SearchBarComponent {
   asyncSelected: string;
diff --git a/src/app/shared/scss/_selected_theme_variables.scss b/src/app/shared/scss/_selected_theme_variables.scss
deleted file mode 100644
index 174bd679..00000000
--- a/src/app/shared/scss/_selected_theme_variables.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Uncomment Active Variables
-// Used to import variables in components
-@import './custom_themes/default/theme_variables';
-// @import "./custom_themes/custom/theme_variables";
-// @import "./custom_themes/custom2/theme_variables";
-// @import "./custom_themes/custom3/theme_variables";
-// @import "./custom_themes/custom4/theme_variables";
-// @import "./custom_themes/custom5/theme_variables";
diff --git a/src/app/shared/scss/_themes.scss b/src/app/shared/scss/_themes.scss
deleted file mode 100644
index a8a2a18d..00000000
--- a/src/app/shared/scss/_themes.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Uncomment Active themes
-@import './custom_themes/default/default';
-// @import "./custom_themes/custom/custom";
-// @import './custom_themes/custom2/_custom2.scss'
-// @import './custom_themes/custom3/_custom3.scss'
-// @import './custom_themes/custom4/_custom4.scss';
-// @import './custom_themes/custom5/_custom5.scss'
diff --git a/src/app/shared/scss/custom_themes/_core_bootstrap.scss b/src/app/shared/scss/custom_themes/_core_bootstrap.scss
deleted file mode 100644
index 80d3f0ce..00000000
--- a/src/app/shared/scss/custom_themes/_core_bootstrap.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../node_modules/bootstrap/scss/variables';
-@import '../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/_core_variables.scss b/src/app/shared/scss/custom_themes/_core_variables.scss
deleted file mode 100644
index 241b1ea6..00000000
--- a/src/app/shared/scss/custom_themes/_core_variables.scss
+++ /dev/null
@@ -1,989 +0,0 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-//
-// Color system
-//
-
-// stylelint-disable
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$gray-10: #ccc !default;
-$gray-11: #979797 !default;
-$gray-12: #d4d4d4 !default;
-$gray-13: #a7a7a7 !default;
-$black: #000 !default;
-
-$grays: () !default;
-$grays: map-merge(
-  (
-    "100": $gray-100,
-    "200": $gray-200,
-    "300": $gray-300,
-    "400": $gray-400,
-    "500": $gray-500,
-    "600": $gray-600,
-    "700": $gray-700,
-    "800": $gray-800,
-    "900": $gray-900
-  ),
-  $grays
-);
-
-$blue: #007bff !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #28a745 !default;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-
-$colors: () !default;
-$colors: map-merge(
-  (
-    "blue": $blue,
-    "indigo": $indigo,
-    "purple": $purple,
-    "pink": $pink,
-    "red": $red,
-    "orange": $orange,
-    "yellow": $yellow,
-    "green": $green,
-    "teal": $teal,
-    "cyan": $cyan,
-    "white": $white,
-    "gray": $gray-600,
-    "gray-dark": $gray-800
-  ),
-  $colors
-);
-
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-800 !default;
-
-$theme-colors: () !default;
-$theme-colors: map-merge(
-  (
-    "primary": $primary,
-    "secondary": $secondary,
-    "success": $success,
-    "info": $info,
-    "warning": $warning,
-    "danger": $danger,
-    "light": $light,
-    "dark": $dark
-  ),
-  $theme-colors
-);
-// stylelint-enable
-
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 8% !default;
-
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 150 !default;
-
-// Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: $gray-900 !default;
-$yiq-text-light: $white !default;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes: true !default;
-$enable-print-styles: true !default;
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// stylelint-disable
-$spacer: 1rem !default;
-$spacers: () !default;
-$spacers: map-merge(
-  (
-    0: 0,
-    1: (
-      $spacer * 0.25
-    ),
-    2: (
-      $spacer * 0.5
-    ),
-    3: $spacer,
-    4: (
-      $spacer * 1.5
-    ),
-    5: (
-      $spacer * 3
-    )
-  ),
-  $spacers
-);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map-merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto
-  ),
-  $sizes
-);
-// stylelint-enable
-
-// Body
-//
-// Settings for the `<body>` element.
-
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
-
-// Links
-//
-// Style anchor elements.
-
-$link-color: theme-color("primary") !default;
-$link-decoration: none !default;
-$link-hover-color: darken($link-color, 15%) !default;
-$link-hover-decoration: underline !default;
-
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom: 1rem !default;
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px
-) !default;
-
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints);
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px
-) !default;
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 30px !default;
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg: 1.5 !default;
-$line-height-sm: 1.5 !default;
-
-$border-width: 1px !default;
-$border-color: $gray-300 !default;
-
-$border-radius: 0.25rem !default;
-$border-radius-lg: 0.3rem !default;
-$border-radius-sm: 0.2rem !default;
-
-$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
-$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
-
-$component-active-color: $white !default;
-$component-active-bg: theme-color("primary") !default;
-
-$caret-width: 0.3em !default;
-
-$transition-base: all 0.2s ease-in-out !default;
-$transition-fade: opacity 0.15s linear !default;
-$transition-collapse: height 0.35s ease !default;
-
-// Fonts
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-  "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol" !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
-  "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
-
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: ($font-size-base * 1.25) !default;
-$font-size-sm: ($font-size-base * 0.875) !default;
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-
-$font-weight-base: $font-weight-normal !default;
-$line-height-base: 1.5 !default;
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-
-$headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family: inherit !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
-$headings-color: inherit !default;
-
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
-
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
-
-$lead-font-size: ($font-size-base * 1.25) !default;
-$lead-font-weight: 300 !default;
-
-$small-font-size: 80% !default;
-
-$text-muted: $gray-600 !default;
-
-$blockquote-small-color: $gray-600 !default;
-$blockquote-font-size: ($font-size-base * 1.25) !default;
-
-$hr-border-color: rgba($black, 0.1) !default;
-$hr-border-width: $border-width !default;
-
-$mark-padding: 0.2em !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
-$nested-kbd-font-weight: $font-weight-bold !default;
-
-$list-inline-padding: 0.5rem !default;
-
-$mark-bg: #fcf8e3 !default;
-
-$hr-margin-y: $spacer !default;
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-$table-cell-padding: 0.75rem !default;
-$table-cell-padding-sm: 0.3rem !default;
-
-$table-bg: transparent !default;
-$table-accent-bg: rgba($black, 0.05) !default;
-$table-hover-bg: rgba($black, 0.075) !default;
-$table-active-bg: $table-hover-bg !default;
-
-$table-border-width: $border-width !default;
-$table-border-color: $gray-300 !default;
-
-$table-head-bg: $gray-200 !default;
-$table-head-color: $gray-700 !default;
-
-$table-dark-bg: $gray-900 !default;
-$table-dark-accent-bg: rgba($white, 0.05) !default;
-$table-dark-hover-bg: rgba($white, 0.075) !default;
-$table-dark-border-color: lighten($gray-900, 7.5%) !default;
-$table-dark-color: $body-bg !default;
-
-$table-striped-order: odd !default;
-
-$table-caption-color: $text-muted !default;
-
-// Buttons, Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-$input-btn-padding-y: 0.375rem !default;
-$input-btn-padding-x: 0.75rem !default;
-$input-btn-line-height: $line-height-base !default;
-
-$input-btn-focus-width: 0.2rem !default;
-$input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm: 0.25rem !default;
-$input-btn-padding-x-sm: 0.5rem !default;
-$input-btn-line-height-sm: $line-height-sm !default;
-
-$input-btn-padding-y-lg: 0.5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-line-height-lg: $line-height-lg !default;
-
-$input-btn-border-width: $border-width !default;
-
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-$btn-padding-y: $input-btn-padding-y !default;
-$btn-padding-x: $input-btn-padding-x !default;
-$btn-line-height: $input-btn-line-height !default;
-
-$btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
-$btn-line-height-sm: $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg: $input-btn-padding-y-lg !default;
-$btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn-line-height-lg !default;
-
-$btn-border-width: $input-btn-border-width !default;
-
-$btn-font-weight: $font-weight-normal !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
-$btn-focus-width: $input-btn-focus-width !default;
-$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity: 0.65 !default;
-$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
-
-$btn-link-disabled-color: $gray-600 !default;
-
-$btn-block-spacing-y: 0.5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius: $border-radius !default;
-$btn-border-radius-lg: $border-radius-lg !default;
-$btn-border-radius-sm: $border-radius-sm !default;
-
-$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
-
-// Forms
-
-$label-margin-bottom: 0.5rem !default;
-
-$input-padding-y: $input-btn-padding-y !default;
-$input-padding-x: $input-btn-padding-x !default;
-$input-line-height: $input-btn-line-height !default;
-
-$input-padding-y-sm: $input-btn-padding-y-sm !default;
-$input-padding-x-sm: $input-btn-padding-x-sm !default;
-$input-line-height-sm: $input-btn-line-height-sm !default;
-
-$input-padding-y-lg: $input-btn-padding-y-lg !default;
-$input-padding-x-lg: $input-btn-padding-x-lg !default;
-$input-line-height-lg: $input-btn-line-height-lg !default;
-
-$input-bg: $white !default;
-$input-disabled-bg: $gray-200 !default;
-
-$input-color: $gray-700 !default;
-$input-border-color: $gray-400 !default;
-$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;
-
-$input-border-radius: $border-radius !default;
-$input-border-radius-lg: $border-radius-lg !default;
-$input-border-radius-sm: $border-radius-sm !default;
-
-$input-focus-bg: $input-bg !default;
-$input-focus-border-color: lighten($component-active-bg, 25%) !default;
-$input-focus-color: $input-color !default;
-$input-focus-width: $input-btn-focus-width !default;
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color: $gray-600 !default;
-$input-plaintext-color: $body-color !default;
-
-$input-height-border: $input-border-width * 2 !default;
-
-$input-height-inner: ($font-size-base * $input-btn-line-height) +
-  ($input-btn-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} - #{$input-height-border}) !default;
-
-$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) +
-  ($input-btn-padding-y-sm * 2) !default;
-$input-height-sm: calc(
-  #{$input-height-inner-sm},
-  #{$input-height-border}
-) !default;
-
-$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) +
-  ($input-btn-padding-y-lg * 2) !default;
-$input-height-lg: calc(
-  #{$input-height-inner-lg},
-  #{$input-height-border}
-) !default;
-
-$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
-
-$form-text-margin-top: 0.25rem !default;
-
-$form-check-input-gutter: 1.25rem !default;
-$form-check-input-margin-y: 0.3rem !default;
-$form-check-input-margin-x: 0.25rem !default;
-
-$form-check-inline-margin-x: 0.75rem !default;
-$form-check-inline-input-margin-x: 0.3125rem !default;
-
-$form-group-margin-bottom: 1rem !default;
-
-$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: $gray-200 !default;
-$input-group-addon-border-color: $input-border-color !default;
-
-$custom-control-gutter: 1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
-
-$custom-control-indicator-size: 1rem !default;
-$custom-control-indicator-bg: $gray-300 !default;
-$custom-control-indicator-bg-size: 50% 50% !default;
-$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;
-
-$custom-control-indicator-disabled-bg: $gray-200 !default;
-$custom-control-label-disabled-color: $gray-600 !default;
-
-$custom-control-indicator-checked-color: $component-active-color !default;
-$custom-control-indicator-checked-bg: $component-active-bg !default;
-$custom-control-indicator-checked-disabled-bg: rgba(
-  theme-color("primary"),
-  0.5
-) !default;
-$custom-control-indicator-checked-box-shadow: none !default;
-
-$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg,
-  $input-btn-focus-box-shadow !default;
-
-$custom-control-indicator-active-color: $component-active-color !default;
-$custom-control-indicator-active-bg: lighten(
-  $component-active-bg,
-  35%
-) !default;
-$custom-control-indicator-active-box-shadow: none !default;
-
-$custom-checkbox-indicator-border-radius: $border-radius !default;
-$custom-checkbox-indicator-icon-checked: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-
-$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
-
-$custom-radio-indicator-border-radius: 50% !default;
-$custom-radio-indicator-icon-checked: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-
-$custom-select-padding-y: 0.375rem !default;
-$custom-select-padding-x: 0.75rem !default;
-$custom-select-height: $input-height !default;
-$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-line-height: $input-btn-line-height !default;
-$custom-select-color: $input-color !default;
-$custom-select-disabled-color: $gray-600 !default;
-$custom-select-bg: $input-bg !default;
-$custom-select-disabled-bg: $gray-200 !default;
-$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator-color: $gray-800 !default;
-$custom-select-indicator: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-$custom-select-border-width: $input-btn-border-width !default;
-$custom-select-border-color: $input-border-color !default;
-$custom-select-border-radius: $border-radius !default;
-
-$custom-select-focus-border-color: $input-focus-border-color !default;
-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075),
-  0 0 5px rgba($custom-select-focus-border-color, 0.5) !default;
-
-$custom-select-font-size-sm: 75% !default;
-$custom-select-height-sm: $input-height-sm !default;
-
-$custom-select-font-size-lg: 125% !default;
-$custom-select-height-lg: $input-height-lg !default;
-
-$custom-range-track-width: 100% !default;
-$custom-range-track-height: 0.5rem !default;
-$custom-range-track-cursor: pointer !default;
-$custom-range-track-bg: $gray-300 !default;
-$custom-range-track-border-radius: 1rem !default;
-$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;
-
-$custom-range-thumb-width: 1rem !default;
-$custom-range-thumb-height: $custom-range-thumb-width !default;
-$custom-range-thumb-bg: $component-active-bg !default;
-$custom-range-thumb-border: 0 !default;
-$custom-range-thumb-border-radius: 1rem !default;
-$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
-$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
-  $input-btn-focus-box-shadow !default;
-$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
-
-$custom-file-height: $input-height !default;
-$custom-file-focus-border-color: $input-focus-border-color !default;
-$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$custom-file-padding-y: $input-btn-padding-y !default;
-$custom-file-padding-x: $input-btn-padding-x !default;
-$custom-file-line-height: $input-btn-line-height !default;
-$custom-file-color: $input-color !default;
-$custom-file-bg: $input-bg !default;
-$custom-file-border-width: $input-btn-border-width !default;
-$custom-file-border-color: $input-border-color !default;
-$custom-file-border-radius: $input-border-radius !default;
-$custom-file-box-shadow: $input-box-shadow !default;
-$custom-file-button-color: $custom-file-color !default;
-$custom-file-button-bg: $input-group-addon-bg !default;
-$custom-file-text: (
-  en: "Browse"
-) !default;
-
-// Form validation
-$form-feedback-margin-top: $form-text-margin-top !default;
-$form-feedback-font-size: $small-font-size !default;
-$form-feedback-valid-color: theme-color("success") !default;
-$form-feedback-invalid-color: theme-color("danger") !default;
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-y: 0.5rem !default;
-$dropdown-spacer: 0.125rem !default;
-$dropdown-bg: $white !default;
-$dropdown-border-color: rgba($black, 0.15) !default;
-$dropdown-border-radius: $border-radius !default;
-$dropdown-border-width: $border-width !default;
-$dropdown-divider-bg: $gray-200 !default;
-$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default;
-
-$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: darken($gray-900, 5%) !default;
-$dropdown-link-hover-bg: $gray-100 !default;
-
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: $gray-600 !default;
-
-$dropdown-item-padding-y: 0.25rem !default;
-$dropdown-item-padding-x: 1.5rem !default;
-
-$dropdown-header-color: $gray-600 !default;
-
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-popover: 1060 !default;
-$zindex-tooltip: 1070 !default;
-
-// Navs
-
-$nav-link-padding-y: 0.5rem !default;
-$nav-link-padding-x: 1rem !default;
-$nav-link-disabled-color: $gray-600 !default;
-
-$nav-tabs-border-color: $gray-300 !default;
-$nav-tabs-border-width: $border-width !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $gray-700 !default;
-$nav-tabs-link-active-bg: $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius: $border-radius !default;
-$nav-pills-link-active-color: $component-active-color !default;
-$nav-pills-link-active-bg: $component-active-bg !default;
-
-$nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: ($spacer / 2) !default;
-
-// Navbar
-
-$navbar-padding-y: ($spacer / 2) !default;
-$navbar-padding-x: $spacer !default;
-
-$navbar-nav-link-padding-x: 0.5rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: (
-  $font-size-base * $line-height-base,
-  $nav-link-padding-y * 2
-) !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height, $navbar-brand-height) / 2 !default;
-
-$navbar-toggler-padding-y: 0.25rem !default;
-$navbar-toggler-padding-x: 0.75rem !default;
-$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: $btn-border-radius !default;
-
-$navbar-dark-color: rgba($white, 0.5) !default;
-$navbar-dark-hover-color: rgba($white, 0.75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, 0.25) !default;
-$navbar-dark-toggler-icon-bg: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
-
-$navbar-light-color: rgba($black, 0.5) !default;
-$navbar-light-hover-color: rgba($black, 0.7) !default;
-$navbar-light-active-color: rgba($black, 0.9) !default;
-$navbar-light-disabled-color: rgba($black, 0.3) !default;
-$navbar-light-toggler-icon-bg: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-$navbar-light-toggler-border-color: rgba($black, 0.1) !default;
-
-// Pagination
-
-$pagination-padding-y: 0.5rem !default;
-$pagination-padding-x: 0.75rem !default;
-$pagination-padding-y-sm: 0.25rem !default;
-$pagination-padding-x-sm: 0.5rem !default;
-$pagination-padding-y-lg: 0.75rem !default;
-$pagination-padding-x-lg: 1.5rem !default;
-$pagination-line-height: 1.25 !default;
-
-$pagination-color: $link-color !default;
-$pagination-bg: $white !default;
-$pagination-border-width: $border-width !default;
-$pagination-border-color: $gray-300 !default;
-
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$pagination-focus-outline: 0 !default;
-
-$pagination-hover-color: $link-hover-color !default;
-$pagination-hover-bg: $gray-200 !default;
-$pagination-hover-border-color: $gray-300 !default;
-
-$pagination-active-color: $component-active-color !default;
-$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $pagination-active-bg !default;
-
-$pagination-disabled-color: $gray-600 !default;
-$pagination-disabled-bg: $white !default;
-$pagination-disabled-border-color: $gray-300 !default;
-
-// Jumbotron
-
-$jumbotron-padding: 2rem !default;
-$jumbotron-bg: $gray-200 !default;
-
-// Cards
-
-$card-spacer-y: 0.75rem !default;
-$card-spacer-x: 1.25rem !default;
-$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
-$card-border-color: rgba($black, 0.125) !default;
-$card-inner-border-radius: calc(
-  #{$card-border-radius},
-  #{$card-border-width}
-) !default;
-$card-cap-bg: rgba($black, 0.03) !default;
-$card-bg: $white !default;
-
-$card-img-overlay-padding: 1.25rem !default;
-
-$card-group-margin: ($grid-gutter-width / 2) !default;
-$card-deck-margin: $card-group-margin !default;
-
-$card-columns-count: 3 !default;
-$card-columns-gap: 1.25rem !default;
-$card-columns-margin: $card-spacer-y !default;
-
-// Tooltips
-
-$tooltip-font-size: $font-size-sm !default;
-$tooltip-max-width: 200px !default;
-$tooltip-color: $white !default;
-$tooltip-bg: $black !default;
-$tooltip-border-radius: $border-radius !default;
-$tooltip-opacity: 0.9 !default;
-$tooltip-padding-y: 0.25rem !default;
-$tooltip-padding-x: 0.5rem !default;
-$tooltip-margin: 0 !default;
-
-$tooltip-arrow-width: 0.8rem !default;
-$tooltip-arrow-height: 0.4rem !default;
-$tooltip-arrow-color: $tooltip-bg !default;
-
-// Popovers
-
-$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
-$popover-max-width: 276px !default;
-$popover-border-width: $border-width !default;
-$popover-border-color: rgba($black, 0.2) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
-
-$popover-header-bg: darken($popover-bg, 3%) !default;
-$popover-header-color: $headings-color !default;
-$popover-header-padding-y: 0.5rem !default;
-$popover-header-padding-x: 0.75rem !default;
-
-$popover-body-color: $body-color !default;
-$popover-body-padding-y: $popover-header-padding-y !default;
-$popover-body-padding-x: $popover-header-padding-x !default;
-
-$popover-arrow-width: 1rem !default;
-$popover-arrow-height: 0.5rem !default;
-$popover-arrow-color: $popover-bg !default;
-
-$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
-
-// Badges
-
-$badge-font-size: 75% !default;
-$badge-font-weight: $font-weight-bold !default;
-$badge-padding-y: 0.25em !default;
-$badge-padding-x: 0.4em !default;
-$badge-border-radius: $border-radius !default;
-
-$badge-pill-padding-x: 0.6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius: 10rem !default;
-
-// Modals
-
-// Padding applied to the modal body
-$modal-inner-padding: 1rem !default;
-
-$modal-dialog-margin: 0.5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-$modal-content-bg: $white !default;
-$modal-content-border-color: rgba($black, 0.2) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-border-radius: $border-radius-lg !default;
-$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
-$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
-
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: 0.5 !default;
-$modal-header-border-color: $gray-200 !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 1rem !default;
-
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
-$modal-sm: 300px !default;
-
-$modal-transition: transform 0.3s ease-out !default;
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y: 0.75rem !default;
-$alert-padding-x: 1.25rem !default;
-$alert-margin-bottom: 1rem !default;
-$alert-border-radius: $border-radius !default;
-$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: $border-width !default;
-
-$alert-bg-level: -10 !default;
-$alert-border-level: -9 !default;
-$alert-color-level: 6 !default;
-
-// Progress bars
-
-$progress-height: 1rem !default;
-$progress-font-size: ($font-size-base * 0.75) !default;
-$progress-bg: $gray-200 !default;
-$progress-border-radius: $border-radius !default;
-$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default;
-$progress-bar-color: $white !default;
-$progress-bar-bg: theme-color("primary") !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition: width 0.6s ease !default;
-
-// List group
-
-$list-group-bg: $white !default;
-$list-group-border-color: rgba($black, 0.125) !default;
-$list-group-border-width: $border-width !default;
-$list-group-border-radius: $border-radius !default;
-
-$list-group-item-padding-y: 0.75rem !default;
-$list-group-item-padding-x: 1.25rem !default;
-
-$list-group-hover-bg: $gray-100 !default;
-$list-group-active-color: $component-active-color !default;
-$list-group-active-bg: $component-active-bg !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: $gray-600 !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: $gray-700 !default;
-$list-group-action-hover-color: $list-group-action-color !default;
-
-$list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: $gray-200 !default;
-
-// Image thumbnails
-
-$thumbnail-padding: 0.25rem !default;
-$thumbnail-bg: $body-bg !default;
-$thumbnail-border-width: $border-width !default;
-$thumbnail-border-color: $gray-300 !default;
-$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default;
-
-// Figures
-
-$figure-caption-font-size: 90% !default;
-$figure-caption-color: $gray-600 !default;
-
-// Breadcrumbs
-
-$breadcrumb-padding-y: 0.75rem !default;
-$breadcrumb-padding-x: 1rem !default;
-$breadcrumb-item-padding: 0.5rem !default;
-
-$breadcrumb-margin-bottom: 1rem !default;
-
-$breadcrumb-bg: $gray-200 !default;
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-active-color: $gray-600 !default;
-$breadcrumb-divider: quote("/") !default;
-
-$breadcrumb-border-radius: $border-radius !default;
-
-// Carousel
-
-$carousel-control-color: $white !default;
-$carousel-control-width: 15% !default;
-$carousel-control-opacity: 0.5 !default;
-
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-spacer: 3px !default;
-$carousel-indicator-active-bg: $white !default;
-
-$carousel-caption-width: 70% !default;
-$carousel-caption-color: $white !default;
-
-$carousel-control-icon-width: 20px !default;
-
-$carousel-control-prev-icon-bg: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-$carousel-control-next-icon-bg: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"),
-  "#",
-  "%23"
-) !default;
-
-$carousel-transition: transform 0.6s ease !default; // Define transform transition first if using multiple transitons (e.g., `transform 2s ease, opacity .5s ease-out`)
-
-// Close
-
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: $font-weight-bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
-
-// Code
-
-$code-font-size: 87.5% !default;
-$code-color: $pink !default;
-
-$kbd-padding-y: 0.2rem !default;
-$kbd-padding-x: 0.4rem !default;
-$kbd-font-size: $code-font-size !default;
-$kbd-color: $white !default;
-$kbd-bg: $gray-900 !default;
-
-$pre-color: $gray-900 !default;
-$pre-scrollable-max-height: 340px !default;
-
-// Printing
-$print-page-size: a3 !default;
-$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
diff --git a/src/app/shared/scss/custom_themes/custom/_badge.scss b/src/app/shared/scss/custom_themes/custom/_badge.scss
deleted file mode 100644
index 00e0c444..00000000
--- a/src/app/shared/scss/custom_themes/custom/_badge.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override like
-// .badge-warning {
-//   background-color: $red;
-// }
diff --git a/src/app/shared/scss/custom_themes/custom/_custom.scss b/src/app/shared/scss/custom_themes/custom/_custom.scss
deleted file mode 100644
index e031f77c..00000000
--- a/src/app/shared/scss/custom_themes/custom/_custom.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'font';
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/custom/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/custom/_custom_bootstrap.scss
deleted file mode 100644
index 3cf51ffb..00000000
--- a/src/app/shared/scss/custom_themes/custom/_custom_bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/custom/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/custom/_custom_bootstrap_variables.scss
deleted file mode 100644
index 7a78ff3b..00000000
--- a/src/app/shared/scss/custom_themes/custom/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Whitney', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Whitney', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/custom/_font.scss b/src/app/shared/scss/custom_themes/custom/_font.scss
deleted file mode 100644
index 422346d2..00000000
--- a/src/app/shared/scss/custom_themes/custom/_font.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-//@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400%7CRoboto:300,300i,400,400i,500,500i,700,700i");
-@font-face {
-  font-family: 'Roboto Regular';
-  src: url('assets/custom/fonts/Roboto-Regular.eot?') format('eot'),
-    url('assets/custom/fonts/Roboto-Regular.ttf') format('truetype'),
-    url('assets/custom/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-// :root {
-//   font: 400 62.5%/1.5 Roboto, Franklin Gothic Medium, Tahoma, sans-serif;
-//   -ms-text-size-adjust: 100%;
-//   -webkit-text-size-adjust: 100%;
-//   -webkit-font-smoothing: antialiased;
-//   -moz-osx-font-smoothing: grayscale
-// }
diff --git a/src/app/shared/scss/custom_themes/custom/_header.scss b/src/app/shared/scss/custom_themes/custom/_header.scss
deleted file mode 100644
index dedb872d..00000000
--- a/src/app/shared/scss/custom_themes/custom/_header.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-sub-color1;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom/_notify.scss b/src/app/shared/scss/custom_themes/custom/_notify.scss
deleted file mode 100644
index 9e76bdbd..00000000
--- a/src/app/shared/scss/custom_themes/custom/_notify.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@keyframes notify-bounce-in-down {
-  0% {
-    top: -1000px;
-  }
-  10% {
-    top: 100px;
-  }
-  15% {
-    opacity: 1;
-    top: 80px;
-  }
-  60% {
-    opacity: 1;
-    top: 80px;
-  }
-  65% {
-    opacity: 1;
-    top: 100px;
-  }
-  100% {
-    opacity: 0;
-    top: -1000px;
-  }
-}
-
-.notify-container {
-  position: fixed;
-  top: 122px;
-  color: $white;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  min-height: 50px;
-  z-index: 8;
-  text-align: center;
-  opacity: 0;
-  &.in {
-    -webkit-animation-duration: 5s;
-    animation-duration: 5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-name: notify-bounce-in-down;
-    animation-name: notify-bounce-in-down;
-  }
-}
-
-.notify-error {
-  background-color: $theme-action-color;
-}
-
-.notify-content {
-  max-width: 380px;
-  width: 80%;
-  padding: 10px 20px;
-  border-radius: 3px;
-  box-shadow: 0 2px 10px rgba(40, 44, 64, 0.2);
-  margin: 0 auto;
-}
-
-.notify-error-message {
-  font-size: 16px;
-  font-weight: 500;
-  position: relative;
-}
-
-.notify-icon {
-  border: 2px solid $white;
-  padding: 0 7px;
-  border-radius: 20px;
-  position: absolute;
-  top: 12px;
-  left: 0;
-  margin-top: -10px;
-  width: 27px;
-}
-
-.notify-icon-text {
-  margin-left: 40px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: left;
-}
diff --git a/src/app/shared/scss/custom_themes/custom/_theme_style.scss b/src/app/shared/scss/custom_themes/custom/_theme_style.scss
deleted file mode 100644
index f928beee..00000000
--- a/src/app/shared/scss/custom_themes/custom/_theme_style.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-.selected-theme {
-  @import 'header';
-  @import 'badge';
-  @import 'notify';
-  @media screen and (max-width: 768px) {
-    background-color: $gray-100;
-  }
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-  .caret {
-    color: lighter($orange, 25);
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom/_theme_variables.scss b/src/app/shared/scss/custom_themes/custom/_theme_variables.scss
deleted file mode 100644
index 254bdca9..00000000
--- a/src/app/shared/scss/custom_themes/custom/_theme_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Used to import variables in components
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import 'custom_bootstrap_variables';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #a3d032;
-$theme-action-color: #fe9700;
-$primary-font: 'Roboto Regular';
-$header-font-color: $white;
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: $theme-action-sub-color1, 30;
-$theme-action-sub-color3: $theme-action-sub-color2, 25;
-$theme-action-sub-color4: $theme-action-sub-color3 -10;
-$theme-main-sub-color1: #aae714;
-$theme-main-sub-color2: #8fb62c;
-$theme-main-sub-color3: #c0e75d;
-$theme-main-sub-color4: #afdd35;
-$footer-font-color: $header-font-color;
diff --git a/src/app/shared/scss/custom_themes/custom2/_badge.scss b/src/app/shared/scss/custom_themes/custom2/_badge.scss
deleted file mode 100644
index 00e0c444..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_badge.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override like
-// .badge-warning {
-//   background-color: $red;
-// }
diff --git a/src/app/shared/scss/custom_themes/custom2/_custom2.scss b/src/app/shared/scss/custom_themes/custom2/_custom2.scss
deleted file mode 100644
index e031f77c..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_custom2.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'font';
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap.scss
deleted file mode 100644
index 3cf51ffb..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap_variables.scss
deleted file mode 100644
index 7a78ff3b..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Whitney', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Whitney', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/custom2/_font.scss b/src/app/shared/scss/custom_themes/custom2/_font.scss
deleted file mode 100644
index ba70775f..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_font.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@font-face {
-  font-family: 'Roboto Regular';
-  src: url('assets/custom/fonts/Roboto-Regular.eot?') format('eot'),
-    url('assets/custom/fonts/Roboto-Regular.ttf') format('truetype'),
-    url('assets/custom/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/app/shared/scss/custom_themes/custom2/_header.scss b/src/app/shared/scss/custom_themes/custom2/_header.scss
deleted file mode 100644
index dedb872d..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_header.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-sub-color1;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom2/_notify.scss b/src/app/shared/scss/custom_themes/custom2/_notify.scss
deleted file mode 100644
index 9e76bdbd..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_notify.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@keyframes notify-bounce-in-down {
-  0% {
-    top: -1000px;
-  }
-  10% {
-    top: 100px;
-  }
-  15% {
-    opacity: 1;
-    top: 80px;
-  }
-  60% {
-    opacity: 1;
-    top: 80px;
-  }
-  65% {
-    opacity: 1;
-    top: 100px;
-  }
-  100% {
-    opacity: 0;
-    top: -1000px;
-  }
-}
-
-.notify-container {
-  position: fixed;
-  top: 122px;
-  color: $white;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  min-height: 50px;
-  z-index: 8;
-  text-align: center;
-  opacity: 0;
-  &.in {
-    -webkit-animation-duration: 5s;
-    animation-duration: 5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-name: notify-bounce-in-down;
-    animation-name: notify-bounce-in-down;
-  }
-}
-
-.notify-error {
-  background-color: $theme-action-color;
-}
-
-.notify-content {
-  max-width: 380px;
-  width: 80%;
-  padding: 10px 20px;
-  border-radius: 3px;
-  box-shadow: 0 2px 10px rgba(40, 44, 64, 0.2);
-  margin: 0 auto;
-}
-
-.notify-error-message {
-  font-size: 16px;
-  font-weight: 500;
-  position: relative;
-}
-
-.notify-icon {
-  border: 2px solid $white;
-  padding: 0 7px;
-  border-radius: 20px;
-  position: absolute;
-  top: 12px;
-  left: 0;
-  margin-top: -10px;
-  width: 27px;
-}
-
-.notify-icon-text {
-  margin-left: 40px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: left;
-}
diff --git a/src/app/shared/scss/custom_themes/custom2/_theme_style.scss b/src/app/shared/scss/custom_themes/custom2/_theme_style.scss
deleted file mode 100644
index 54ccb0a8..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_theme_style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-@import '../../selected_theme_variables';
-.selected-theme {
-  @import 'header';
-  @import 'badge';
-  @import 'notify';
-
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-
-  .caret {
-    color: lighter($orange, 25);
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom2/_theme_variables.scss b/src/app/shared/scss/custom_themes/custom2/_theme_variables.scss
deleted file mode 100644
index 733bdd86..00000000
--- a/src/app/shared/scss/custom_themes/custom2/_theme_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Used to import variables in components
-@import 'custom_bootstrap_variables';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #e40046;
-$theme-action-color: #e40046;
-$primary-font: 'Roboto Regular';
-$header-font-color: $white;
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: darken($theme-action-sub-color1, 30);
-$theme-action-sub-color3: darken($theme-action-sub-color2, 25);
-$theme-action-sub-color4: darken($theme-action-sub-color3 -10);
-$theme-main-sub-color1:darken($theme-main-color, 25);
-$theme-main-sub-color2: darken($theme-main-sub-color1, 30);
-$theme-main-sub-color3: darken($theme-main-sub-color2, 25);
-$theme-main-sub-color4: darken($theme-main-sub-color3, 25);
-$footer-font-color: $header-font-color;
diff --git a/src/app/shared/scss/custom_themes/custom3/_badge.scss b/src/app/shared/scss/custom_themes/custom3/_badge.scss
deleted file mode 100644
index 00e0c444..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_badge.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override like
-// .badge-warning {
-//   background-color: $red;
-// }
diff --git a/src/app/shared/scss/custom_themes/custom3/_custom3.scss b/src/app/shared/scss/custom_themes/custom3/_custom3.scss
deleted file mode 100644
index e031f77c..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_custom3.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'font';
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap.scss
deleted file mode 100644
index 3cf51ffb..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap_variables.scss
deleted file mode 100644
index 7a78ff3b..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Whitney', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Whitney', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/custom3/_font.scss b/src/app/shared/scss/custom_themes/custom3/_font.scss
deleted file mode 100644
index ba70775f..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_font.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@font-face {
-  font-family: 'Roboto Regular';
-  src: url('assets/custom/fonts/Roboto-Regular.eot?') format('eot'),
-    url('assets/custom/fonts/Roboto-Regular.ttf') format('truetype'),
-    url('assets/custom/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/app/shared/scss/custom_themes/custom3/_header.scss b/src/app/shared/scss/custom_themes/custom3/_header.scss
deleted file mode 100644
index dedb872d..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_header.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-sub-color1;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom3/_notify.scss b/src/app/shared/scss/custom_themes/custom3/_notify.scss
deleted file mode 100644
index 9e76bdbd..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_notify.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@keyframes notify-bounce-in-down {
-  0% {
-    top: -1000px;
-  }
-  10% {
-    top: 100px;
-  }
-  15% {
-    opacity: 1;
-    top: 80px;
-  }
-  60% {
-    opacity: 1;
-    top: 80px;
-  }
-  65% {
-    opacity: 1;
-    top: 100px;
-  }
-  100% {
-    opacity: 0;
-    top: -1000px;
-  }
-}
-
-.notify-container {
-  position: fixed;
-  top: 122px;
-  color: $white;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  min-height: 50px;
-  z-index: 8;
-  text-align: center;
-  opacity: 0;
-  &.in {
-    -webkit-animation-duration: 5s;
-    animation-duration: 5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-name: notify-bounce-in-down;
-    animation-name: notify-bounce-in-down;
-  }
-}
-
-.notify-error {
-  background-color: $theme-action-color;
-}
-
-.notify-content {
-  max-width: 380px;
-  width: 80%;
-  padding: 10px 20px;
-  border-radius: 3px;
-  box-shadow: 0 2px 10px rgba(40, 44, 64, 0.2);
-  margin: 0 auto;
-}
-
-.notify-error-message {
-  font-size: 16px;
-  font-weight: 500;
-  position: relative;
-}
-
-.notify-icon {
-  border: 2px solid $white;
-  padding: 0 7px;
-  border-radius: 20px;
-  position: absolute;
-  top: 12px;
-  left: 0;
-  margin-top: -10px;
-  width: 27px;
-}
-
-.notify-icon-text {
-  margin-left: 40px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: left;
-}
diff --git a/src/app/shared/scss/custom_themes/custom3/_theme_style.scss b/src/app/shared/scss/custom_themes/custom3/_theme_style.scss
deleted file mode 100644
index 54ccb0a8..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_theme_style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-@import '../../selected_theme_variables';
-.selected-theme {
-  @import 'header';
-  @import 'badge';
-  @import 'notify';
-
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-
-  .caret {
-    color: lighter($orange, 25);
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom3/_theme_variables.scss b/src/app/shared/scss/custom_themes/custom3/_theme_variables.scss
deleted file mode 100644
index 2aa48c42..00000000
--- a/src/app/shared/scss/custom_themes/custom3/_theme_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Used to import variables in components
-@import 'custom_bootstrap_variables';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #46d2de;
-$theme-action-color: #36a2ab;
-$primary-font: 'Roboto Regular';
-$header-font-color: $white;
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: darken($theme-action-sub-color1, 30);
-$theme-action-sub-color3: darken($theme-action-sub-color2, 25);
-$theme-action-sub-color4: darken($theme-action-sub-color3 -10);
-$theme-main-sub-color1:darken($theme-main-color, 25);
-$theme-main-sub-color2: darken($theme-main-sub-color1, 30);
-$theme-main-sub-color3: darken($theme-main-sub-color2, 25);
-$theme-main-sub-color4: darken($theme-main-sub-color3, 25);
-$footer-font-color: $header-font-color;
diff --git a/src/app/shared/scss/custom_themes/custom4/_badge.scss b/src/app/shared/scss/custom_themes/custom4/_badge.scss
deleted file mode 100644
index 00e0c444..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_badge.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override like
-// .badge-warning {
-//   background-color: $red;
-// }
diff --git a/src/app/shared/scss/custom_themes/custom4/_custom4.scss b/src/app/shared/scss/custom_themes/custom4/_custom4.scss
deleted file mode 100644
index e031f77c..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_custom4.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'font';
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap.scss
deleted file mode 100644
index 3cf51ffb..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap_variables.scss
deleted file mode 100644
index 7a78ff3b..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Whitney', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Whitney', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/custom4/_font.scss b/src/app/shared/scss/custom_themes/custom4/_font.scss
deleted file mode 100644
index ba70775f..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_font.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@font-face {
-  font-family: 'Roboto Regular';
-  src: url('assets/custom/fonts/Roboto-Regular.eot?') format('eot'),
-    url('assets/custom/fonts/Roboto-Regular.ttf') format('truetype'),
-    url('assets/custom/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/app/shared/scss/custom_themes/custom4/_header.scss b/src/app/shared/scss/custom_themes/custom4/_header.scss
deleted file mode 100644
index dedb872d..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_header.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-sub-color1;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom4/_notify.scss b/src/app/shared/scss/custom_themes/custom4/_notify.scss
deleted file mode 100644
index 9e76bdbd..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_notify.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@keyframes notify-bounce-in-down {
-  0% {
-    top: -1000px;
-  }
-  10% {
-    top: 100px;
-  }
-  15% {
-    opacity: 1;
-    top: 80px;
-  }
-  60% {
-    opacity: 1;
-    top: 80px;
-  }
-  65% {
-    opacity: 1;
-    top: 100px;
-  }
-  100% {
-    opacity: 0;
-    top: -1000px;
-  }
-}
-
-.notify-container {
-  position: fixed;
-  top: 122px;
-  color: $white;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  min-height: 50px;
-  z-index: 8;
-  text-align: center;
-  opacity: 0;
-  &.in {
-    -webkit-animation-duration: 5s;
-    animation-duration: 5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-name: notify-bounce-in-down;
-    animation-name: notify-bounce-in-down;
-  }
-}
-
-.notify-error {
-  background-color: $theme-action-color;
-}
-
-.notify-content {
-  max-width: 380px;
-  width: 80%;
-  padding: 10px 20px;
-  border-radius: 3px;
-  box-shadow: 0 2px 10px rgba(40, 44, 64, 0.2);
-  margin: 0 auto;
-}
-
-.notify-error-message {
-  font-size: 16px;
-  font-weight: 500;
-  position: relative;
-}
-
-.notify-icon {
-  border: 2px solid $white;
-  padding: 0 7px;
-  border-radius: 20px;
-  position: absolute;
-  top: 12px;
-  left: 0;
-  margin-top: -10px;
-  width: 27px;
-}
-
-.notify-icon-text {
-  margin-left: 40px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: left;
-}
diff --git a/src/app/shared/scss/custom_themes/custom4/_theme_style.scss b/src/app/shared/scss/custom_themes/custom4/_theme_style.scss
deleted file mode 100644
index 54ccb0a8..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_theme_style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-@import '../../selected_theme_variables';
-.selected-theme {
-  @import 'header';
-  @import 'badge';
-  @import 'notify';
-
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-
-  .caret {
-    color: lighter($orange, 25);
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom4/_theme_variables.scss b/src/app/shared/scss/custom_themes/custom4/_theme_variables.scss
deleted file mode 100644
index 94d97bea..00000000
--- a/src/app/shared/scss/custom_themes/custom4/_theme_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Used to import variables in components
-@import 'custom_bootstrap_variables';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #128ced;
-$theme-action-color: #ef6c00;
-$primary-font: 'Roboto Regular';
-$header-font-color: $white;
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: darken($theme-action-sub-color1, 30);
-$theme-action-sub-color3: darken($theme-action-sub-color2, 25);
-$theme-action-sub-color4: darken($theme-action-sub-color3 -10);
-$theme-main-sub-color1:darken($theme-main-color, 25);
-$theme-main-sub-color2: darken($theme-main-sub-color1, 30);
-$theme-main-sub-color3: darken($theme-main-sub-color2, 25);
-$theme-main-sub-color4: darken($theme-main-sub-color3, 25);
-$footer-font-color: $header-font-color;
diff --git a/src/app/shared/scss/custom_themes/custom5/_badge.scss b/src/app/shared/scss/custom_themes/custom5/_badge.scss
deleted file mode 100644
index 00e0c444..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_badge.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override like
-// .badge-warning {
-//   background-color: $red;
-// }
diff --git a/src/app/shared/scss/custom_themes/custom5/_custom5.scss b/src/app/shared/scss/custom_themes/custom5/_custom5.scss
deleted file mode 100644
index e031f77c..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_custom5.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'font';
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap.scss
deleted file mode 100644
index 3cf51ffb..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap_variables.scss
deleted file mode 100644
index 7a78ff3b..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Whitney', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Whitney', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/custom5/_font.scss b/src/app/shared/scss/custom_themes/custom5/_font.scss
deleted file mode 100644
index ba70775f..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_font.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@font-face {
-  font-family: 'Roboto Regular';
-  src: url('assets/custom/fonts/Roboto-Regular.eot?') format('eot'),
-    url('assets/custom/fonts/Roboto-Regular.ttf') format('truetype'),
-    url('assets/custom/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/app/shared/scss/custom_themes/custom5/_header.scss b/src/app/shared/scss/custom_themes/custom5/_header.scss
deleted file mode 100644
index dedb872d..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_header.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-sub-color1;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom5/_notify.scss b/src/app/shared/scss/custom_themes/custom5/_notify.scss
deleted file mode 100644
index 9e76bdbd..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_notify.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@keyframes notify-bounce-in-down {
-  0% {
-    top: -1000px;
-  }
-  10% {
-    top: 100px;
-  }
-  15% {
-    opacity: 1;
-    top: 80px;
-  }
-  60% {
-    opacity: 1;
-    top: 80px;
-  }
-  65% {
-    opacity: 1;
-    top: 100px;
-  }
-  100% {
-    opacity: 0;
-    top: -1000px;
-  }
-}
-
-.notify-container {
-  position: fixed;
-  top: 122px;
-  color: $white;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  min-height: 50px;
-  z-index: 8;
-  text-align: center;
-  opacity: 0;
-  &.in {
-    -webkit-animation-duration: 5s;
-    animation-duration: 5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-name: notify-bounce-in-down;
-    animation-name: notify-bounce-in-down;
-  }
-}
-
-.notify-error {
-  background-color: $theme-action-color;
-}
-
-.notify-content {
-  max-width: 380px;
-  width: 80%;
-  padding: 10px 20px;
-  border-radius: 3px;
-  box-shadow: 0 2px 10px rgba(40, 44, 64, 0.2);
-  margin: 0 auto;
-}
-
-.notify-error-message {
-  font-size: 16px;
-  font-weight: 500;
-  position: relative;
-}
-
-.notify-icon {
-  border: 2px solid $white;
-  padding: 0 7px;
-  border-radius: 20px;
-  position: absolute;
-  top: 12px;
-  left: 0;
-  margin-top: -10px;
-  width: 27px;
-}
-
-.notify-icon-text {
-  margin-left: 40px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: left;
-}
diff --git a/src/app/shared/scss/custom_themes/custom5/_theme_style.scss b/src/app/shared/scss/custom_themes/custom5/_theme_style.scss
deleted file mode 100644
index 54ccb0a8..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_theme_style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-@import '../../selected_theme_variables';
-.selected-theme {
-  @import 'header';
-  @import 'badge';
-  @import 'notify';
-
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-
-  .caret {
-    color: lighter($orange, 25);
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/custom5/_theme_variables.scss b/src/app/shared/scss/custom_themes/custom5/_theme_variables.scss
deleted file mode 100644
index e6bdefe3..00000000
--- a/src/app/shared/scss/custom_themes/custom5/_theme_variables.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Used to import variables in components
-@import 'custom_bootstrap_variables';
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #4e688a;
-$theme-action-color: #ef6c00;
-$primary-font: 'Roboto Regular';
-$header-font-color: $white;
-
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: darken($theme-action-sub-color1, 30);
-$theme-action-sub-color3: darken($theme-action-sub-color2, 25);
-$theme-action-sub-color4: darken($theme-action-sub-color3 -10);
-$theme-main-sub-color1:darken($theme-main-color, 25);
-$theme-main-sub-color2: darken($theme-main-sub-color1, 30);
-$theme-main-sub-color3: darken($theme-main-sub-color2, 25);
-$theme-main-sub-color4: darken($theme-main-sub-color3, 25);
-$footer-font-color: $header-font-color;
diff --git a/src/app/shared/scss/custom_themes/default/_custom_bootstrap.scss b/src/app/shared/scss/custom_themes/default/_custom_bootstrap.scss
deleted file mode 100644
index 88c524b4..00000000
--- a/src/app/shared/scss/custom_themes/default/_custom_bootstrap.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import '../../../../../../node_modules/bootstrap/scss/root';
-@import '../../../../../../node_modules/bootstrap/scss/reboot';
-@import '../../../../../../node_modules/bootstrap/scss/type';
-@import '../../../../../../node_modules/bootstrap/scss/images';
-@import '../../../../../../node_modules/bootstrap/scss/code';
-@import '../../../../../../node_modules/bootstrap/scss/grid';
-@import '../../../../../../node_modules/bootstrap/scss/tables';
-@import '../../../../../../node_modules/bootstrap/scss/forms';
-@import '../../../../../../node_modules/bootstrap/scss/buttons';
-@import '../../../../../../node_modules/bootstrap/scss/transitions';
-@import '../../../../../../node_modules/bootstrap/scss/dropdown';
-@import '../../../../../../node_modules/bootstrap/scss/button-group';
-@import '../../../../../../node_modules/bootstrap/scss/input-group';
-@import '../../../../../../node_modules/bootstrap/scss/custom-forms';
-@import '../../../../../../node_modules/bootstrap/scss/nav';
-@import '../../../../../../node_modules/bootstrap/scss/navbar';
-@import '../../../../../../node_modules/bootstrap/scss/card';
-@import '../../../../../../node_modules/bootstrap/scss/breadcrumb';
-@import '../../../../../../node_modules/bootstrap/scss/pagination';
-@import '../../../../../../node_modules/bootstrap/scss/badge';
-@import '../../../../../../node_modules/bootstrap/scss/jumbotron';
-@import '../../../../../../node_modules/bootstrap/scss/alert';
-@import '../../../../../../node_modules/bootstrap/scss/progress';
-@import '../../../../../../node_modules/bootstrap/scss/media';
-@import '../../../../../../node_modules/bootstrap/scss/list-group';
-@import '../../../../../../node_modules/bootstrap/scss/close';
-@import '../../../../../../node_modules/bootstrap/scss/modal';
-@import '../../../../../../node_modules/bootstrap/scss/tooltip';
-@import '../../../../../../node_modules/bootstrap/scss/popover';
-@import '../../../../../../node_modules/bootstrap/scss/carousel';
-@import '../../../../../../node_modules/bootstrap/scss/utilities';
-@import '../../../../../../node_modules/bootstrap/scss/print';
diff --git a/src/app/shared/scss/custom_themes/default/_custom_bootstrap_variables.scss b/src/app/shared/scss/custom_themes/default/_custom_bootstrap_variables.scss
deleted file mode 100644
index 23a57e6f..00000000
--- a/src/app/shared/scss/custom_themes/default/_custom_bootstrap_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Customize variables here
-
-// Import Bootstrap functions before using functions here
-@import '../../../../../../node_modules/bootstrap/scss/functions';
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Refer this https://getbootstrap.com/docs/4.0/getting-started/theming/
-
-$font-family-sans-serif: 'Catamaran', 'Lato', -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-monospace: 'Catamaran', 'Lato', SFMono-Regular, Menlo, Monaco,
-  Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-
-// XXXXXXXXXXXXXXXXXX--STOP--XXXXXXXXXXXXXXXXXXXX
-// Variables should be override above
-@import './../_core_variables.scss';
-// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
diff --git a/src/app/shared/scss/custom_themes/default/_default.scss b/src/app/shared/scss/custom_themes/default/_default.scss
deleted file mode 100644
index 6c2e2877..00000000
--- a/src/app/shared/scss/custom_themes/default/_default.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'theme_variables';
-@import 'theme_style';
-@import 'custom_bootstrap';
diff --git a/src/app/shared/scss/custom_themes/default/_header.scss b/src/app/shared/scss/custom_themes/default/_header.scss
deleted file mode 100644
index e6a8f207..00000000
--- a/src/app/shared/scss/custom_themes/default/_header.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.navbar {
-  color: $header-font-color;
-  background-color: $theme-main-color;
-  .header-cart {
-    .fa-shopping-bag {
-      color: $theme-action-color;
-    }
-    .badge {
-      background-color: $theme-action-color;
-    }
-  }
-  .btn {
-    background-color: $theme-main-color;
-    @extend .h6;
-    margin-bottom: 0 !important;
-  }
-  .small-logo img {
-    height: 30px;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/default/_theme_style.scss b/src/app/shared/scss/custom_themes/default/_theme_style.scss
deleted file mode 100644
index 7663ff69..00000000
--- a/src/app/shared/scss/custom_themes/default/_theme_style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-// selected-theme is the main theme class add to top level main html component
-// <div class="selected-theme">...
-@import '../../selected_theme_variables';
-.selected-theme {
-  @import 'header';
-  input,
-  button {
-    &:focus {
-      outline: none;
-    }
-  }
-  .panel {
-    box-shadow: 0 0 4px rgba(40, 44, 63, 0.08);
-  }
-  .strong {
-    font-family: $primary-font;
-    font-weight: 800;
-  }
-  color: $gray-700;
-  .pointer {
-    cursor: pointer;
-  }
-
-  rating {
-    color: $theme-action-color;
-  }
-}
diff --git a/src/app/shared/scss/custom_themes/default/_theme_variables.scss b/src/app/shared/scss/custom_themes/default/_theme_variables.scss
deleted file mode 100644
index c7ed4e44..00000000
--- a/src/app/shared/scss/custom_themes/default/_theme_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Used to import variables in components
-@import '../../../../../../node_modules/bootstrap/scss/mixins';
-@import 'custom_bootstrap_variables';
-// -- Theme Colors here --
-// Custom theme colors
-// Refer _default_variables to generate colors
-$theme-main-color: #212e40;
-$theme-action-color: #f2903d;
-$primary-font: 'Catamaran', 'Lato', sans-serif;
-$header-font-color: $gray-200;
-$theme-action-sub-color1: darken($theme-action-color, 25);
-$theme-action-sub-color2: darken($theme-action-sub-color1, 30);
-$theme-action-sub-color3: darken($theme-action-sub-color2, 25);
-$theme-action-sub-color4: darken($theme-action-sub-color3, 25);
-$theme-main-sub-color1: #46566b;
-$theme-main-sub-color2: #212e40;
-$theme-main-sub-color3: #121a23;
-$theme-main-sub-color4: #121a23;
-$footer-font-color: $gray-500;
diff --git a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.html b/src/app/user/components/addresses/add-edit-address/add-edit-address.component.html
index b32860f7..21df2cf4 100644
--- a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.html
+++ b/src/app/user/components/addresses/add-edit-address/add-edit-address.component.html
@@ -1,102 +1,102 @@
 <form class="form" [formGroup]="addressForm" (ngSubmit)="onSubmit()">
-  <div class="row">
-    <div class="form-group col-sm-6">
+  <div class="flex flex-wrap ">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >Pin Code
         <span class="required">*</span>
       </label>
-      <input type="tel" class="form-control" formControlName="zipcode" />
+      <input type="tel" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="zipcode" />
       <p
         *ngIf="
           addressForm.get('zipcode').hasError('required') &&
           addressForm.get('zipcode').touched
         "
-        class="value-err  text-danger show"
+        class="value-err  text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label>
         Locality / Town
         <span class="required">*</span>
       </label>
-      <input type="text" class="form-control" formControlName="address2" />
+      <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="address2" />
       <p
         *ngIf="
           addressForm.get('address2').hasError('required') &&
           addressForm.get('address2').touched
         "
-        class="value-err text-danger show"
+        class="value-err text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >City / District
         <span class="required">*</span>
       </label>
-      <input type="text" class="form-control" formControlName="city" />
+      <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="city" />
       <p
         *ngIf="
           addressForm.get('city').hasError('required') &&
           addressForm.get('city').touched
         "
-        class="value-err text-danger show"
+        class="value-err text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label> State</label>
-      <select class="form-control" formControlName="state_name">
+      <select class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="state_name">
         <option *ngIf="stateName">{{ stateName }} </option
         ><option *ngFor="let state of states">{{ state.name }}</option>
       </select>
     </div>
 
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >First Name
         <span class="required">*</span>
       </label>
-      <input type="text" class="form-control" formControlName="firstname" />
+      <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="firstname" />
       <p
         *ngIf="
           addressForm.get('firstname').hasError('required') &&
           addressForm.get('firstname').touched
         "
-        class="value-err text-danger show"
+        class="value-err text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label>
         Last Name
         <span class="required">*</span>
       </label>
-      <input type="text" class="form-control" formControlName="lastname" />
+      <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="lastname" />
       <p
         *ngIf="
           addressForm.get('lastname').hasError('required') &&
           addressForm.get('lastname').touched
         "
-        class="value- text-danger show"
+        class="value- text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
 
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >Address
         <span class="required">*</span>
       </label>
       <textarea
         type="text"
-        class="form-control"
+        class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
         formControlName="address1"
       ></textarea>
       <p
@@ -104,29 +104,29 @@
           addressForm.get('address1').hasError('required') &&
           addressForm.get('address1').touched
         "
-        class="value-err text-danger show"
+        class="value-err text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="form-group col-sm-6">
+    <div class="mb-4 sm:w-1/2 pr-4 pl-4">
       <label
         >Mobile No
         <span class="required">*</span>
       </label>
-      <input type="tel" class="form-control" formControlName="phone" />
+      <input type="tel" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" formControlName="phone" />
       <p
         *ngIf="
           addressForm.get('phone').hasError('required') &&
           addressForm.get('phone').touched
         "
-        class="value-err text-danger show"
+        class="value-err text-red-600 opacity-100 block"
       >
         This is a mandatory field
       </p>
     </div>
-    <div class="save-button col-12 col-sm-6">
-      <button class="btn themebtnprimary">SAVE</button>
+    <div class="save-button w-full sm:w-1/2 pr-4 pl-4">
+      <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary">SAVE</button>
     </div>
   </div>
 </form>
diff --git a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.scss b/src/app/user/components/addresses/add-edit-address/add-edit-address.component.scss
deleted file mode 100644
index 7d5e6e83..00000000
--- a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// @import './../../shared/scss/selected_theme_variables';
-// .form {
-//   .half-width {
-//     width: 190px;
-//   }
-//   .full-width {
-//     width: 400px;
-//   }
-//   .value-err {
-//     height: 18px;
-//     padding-top: 2px;
-//   }
-//   .readonly {
-//     border: 1px solid $gray-10 !important;
-//   }
-// }
-
-// .email {
-//   padding-bottom: 10px;
-//   padding-top: 15px;
-//   label {
-//     top: 4px;
-//   }
-// }
-
-// .pincode {
-//   padding-top: 15px;
-//   label {
-//     top: 4px;
-//   }
-// }
-
-// .city,
-// .state,
-// .first-name,
-// .last-name {
-//   display: inline-block;
-//   vertical-align: top;
-// }
-
-// .state,
-// .last-name {
-//   padding-left: 7px;
-// }
-
-// .address {
-//   textarea {
-//     height: 70px;
-//     padding: 10px;
-//   }
-// }
diff --git a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.ts b/src/app/user/components/addresses/add-edit-address/add-edit-address.component.ts
index a0b537c8..9342554c 100644
--- a/src/app/user/components/addresses/add-edit-address/add-edit-address.component.ts
+++ b/src/app/user/components/addresses/add-edit-address/add-edit-address.component.ts
@@ -8,7 +8,7 @@ import { Address } from '../../../../core/models/address';
 @Component({
   selector: 'app-add-edit-address',
   templateUrl: './add-edit-address.component.html',
-  styleUrls: ['./add-edit-address.component.scss']
+  
 })
 export class AddEditAddressComponent implements OnInit {
   addressForm: UntypedFormGroup;
diff --git a/src/app/user/components/addresses/addresses.component.scss b/src/app/user/components/addresses/addresses.component.scss
deleted file mode 100644
index dee60e3f..00000000
--- a/src/app/user/components/addresses/addresses.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.reviewlink {
-  font-size: 1.2em;
-  color: $white;
-
-  font-weight: bold;
-  text-align: center;
-  width: 30px;
-  height: 30px;
-  /* display: block; */
-  background-color: $theme-action-sub-color2;
-  border-radius: 5px;
-  padding: 3px;
-  cursor: pointer;
-  float: right;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.useraddress {
-  border: 1px solid $gray-10;
-  padding: 0.8em;
-  margin-bottom: 15px;
-}
-
-.head {
-  font-size: 1.4em;
-  color: $theme-action-sub-color2;
-  margin: 0 0 15px;
-}
diff --git a/src/app/user/components/addresses/addresses.component.ts b/src/app/user/components/addresses/addresses.component.ts
index a103f324..ac609980 100644
--- a/src/app/user/components/addresses/addresses.component.ts
+++ b/src/app/user/components/addresses/addresses.component.ts
@@ -7,7 +7,7 @@ import { Address } from '../../../core/models/address';
 @Component({
   selector: 'app-addresses',
   templateUrl: './addresses.component.html',
-  styleUrls: ['./addresses.component.scss']
+  
 })
 export class AddressesComponent implements OnInit {
   userAddresses$: Observable<Array<Address>>;
diff --git a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.html b/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.html
index 47148a12..bff2496d 100644
--- a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.html
+++ b/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.html
@@ -1,24 +1,24 @@
 <div *ngFor="let productinfo of product" class="lineitems">
-  <div class="row favorite m-0 p-2" *ngFor="let productinfo of product">
-    <div class="col-12 col-sm-1">
+  <div class="flex flex-wrap  favorite m-0 p-2" *ngFor="let productinfo of product">
+    <div class="w-full sm:w-1/6 pr-4 pl-4">
       <img
         [src]="productinfo.product_url"
-        class="img-fluid fimg"
+        class="max-w-full h-auto fimg"
         [routerLink]="['/', productinfo.slug]"
       />
     </div>
-    <div class="col-12 col-sm-6">
+    <div class="w-full sm:w-1/2 pr-4 pl-4">
       <a class="lineitems-name" [routerLink]="['/', productinfo.slug]">{{
         productinfo.name
       }}</a>
     </div>
-    <div class="col-12 col-sm-2">
+    <div class="w-full sm:w-1/5 pr-4 pl-4">
       <div class="price">
         {{ productinfo.currency_symbol }}{{ productinfo.price }}
       </div>
     </div>
-    <div class="col-12 col-sm-3 text-right">
-      <button (click)="removeFromFavorite(productinfo.id)" class="btn">
+    <div class="w-full sm:w-1/4 pr-4 pl-4 text-right">
+      <button (click)="removeFromFavorite(productinfo.id)" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline">
         <i class="fa fa-trash"></i>
       </button>
     </div>
diff --git a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.scss b/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.scss
deleted file mode 100644
index ed48b0ba..00000000
--- a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.fimg {
-  object-fit: contain;
-  width: 5.6em;
-}
-
-.favorite {
-  border: 1px solid $gray-10;
-  margin: 0 10px 10px !important;
-  background-color: $white;
-  box-shadow: 0 0 1px $gray-10;
-  a {
-    font-size: 1.5em;
-    color: $gray-900;
-  }
-}
-.size-buttons-size-header {
-  overflow: auto;
-  color: $gray-900;
-  span {
-    font-weight: bold;
-    font-size: 1em;
-  }
-}
-
-.option-buttons {
-  display: inline-block;
-  background-color: $white;
-  border: 1px solid $gray-900;
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  text-align: center;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  color: $gray-900;
-  &.disabled {
-    position: relative;
-    color: $gray-900;
-    border: 1px solid $gray-10;
-    cursor: $red;
-    pointer-events: none;
-    .strike {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: $gray-10;
-    }
-  }
-  p {
-    margin: 0;
-  }
-  &:hover,
-  &.active {
-    color: $white;
-    font-weight: 500;
-    background-color: $theme-action-color;
-    border: 1px solid $theme-action-color;
-  }
-}
-
-.selected {
-  color: $white;
-  font-weight: 500;
-  background-color: $gray-900;
-}
-
-.variant {
-  @media only screen and (min-width: 320px) and (max-width: 767px) {
-    padding: 12px 15px 5px;
-    display: block;
-    margin: auto;
-  }
-}
-.lineitems {
-  &:last-child {
-    border-bottom: 0 solid;
-  }
-  border-bottom: 1px solid $gray-10;
-  padding: 0.5rem;
-  img {
-    height: 75px;
-    width: 100%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      height: 121px;
-      width: 100%;
-      margin: auto;
-      object-fit: scale-down;
-    }
-  }
-  .lineitems-name {
-    font-size: 1em;
-    color: $gray-900;
-    font-weight: 200;
-    margin-top: 17px;
-    cursor: pointer;
-    display: block;
-  }
-  .lineitems-info {
-    font-size: 0.8em;
-    color: $gray-900;
-    cursor: pointer;
-  }
-  .price {
-    color: $red;
-    font-size: 1.2em;
-    font-weight: bold;
-  }
-  .qty {
-    font-size: 0.8em;
-  }
-}
diff --git a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.ts b/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.ts
index b4ef86ba..bda1712a 100644
--- a/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.ts
+++ b/src/app/user/components/favorite-products/favorite-product-list-item/favorite-product-list-item.component.ts
@@ -9,7 +9,7 @@ import { Store } from '@ngrx/store';
 @Component({
   selector: 'app-favorite-product-list-item',
   templateUrl: './favorite-product-list-item.component.html',
-  styleUrls: ['./favorite-product-list-item.component.scss']
+  
 })
 export class FavoriteProductListItemComponent implements OnInit {
   @Input() product: Product;
diff --git a/src/app/user/components/favorite-products/favorite-products.component.html b/src/app/user/components/favorite-products/favorite-products.component.html
index 704c12ac..e2685a08 100644
--- a/src/app/user/components/favorite-products/favorite-products.component.html
+++ b/src/app/user/components/favorite-products/favorite-products.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="(products$ | async); let products">
-  <div class="table-responsive" *ngIf="products.length; else elseBlock">
+  <div class="block w-full overflow-auto scrolling-touch" *ngIf="products.length; else elseBlock">
     <app-favorite-product-list-item
       [product]="products"
     ></app-favorite-product-list-item>
   </div>
   <ng-template #elseBlock>
-    <div class="p-5">You have'nt favorited anything yet.</div>
+    <div class="p-12">You have'nt favorited anything yet.</div>
   </ng-template>
 </div>
diff --git a/src/app/user/components/favorite-products/favorite-products.component.scss b/src/app/user/components/favorite-products/favorite-products.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/user/components/favorite-products/favorite-products.component.ts b/src/app/user/components/favorite-products/favorite-products.component.ts
index f2bbebd5..884c411c 100644
--- a/src/app/user/components/favorite-products/favorite-products.component.ts
+++ b/src/app/user/components/favorite-products/favorite-products.component.ts
@@ -10,7 +10,7 @@ import { getUserFavoriteProducts } from '../../reducers/selector';
 @Component({
   selector: 'app-favorite-products',
   templateUrl: './favorite-products.component.html',
-  styleUrls: ['./favorite-products.component.scss']
+  
 })
 export class FavoriteProductsComponent implements OnInit {
   products$: Observable<Product[]>;
diff --git a/src/app/user/components/orders/order-detail/order-detail.component.html b/src/app/user/components/orders/order-detail/order-detail.component.html
index 90b041bb..576d899f 100644
--- a/src/app/user/components/orders/order-detail/order-detail.component.html
+++ b/src/app/user/components/orders/order-detail/order-detail.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="order">
-  <div class="row box m-0">
-    <div class="col-12 col-sm-6 p-0 p-sm-3">
+  <div class="flex flex-wrap  box m-0">
+    <div class="w-full sm:w-1/2 pr-4 pl-4 p-0 sm:p-4">
       <h3>Order Details</h3>
       <table>
         <tr>
@@ -26,7 +26,7 @@ <h3>Order Details</h3>
         <!-- <tr>
             <td>Payment Status:</td>
             <td>
-              <b class="text-uppercase">{{order.payment_state | humanize | uppercase}}</b>
+              <b class="uppercase">{{order.payment_state | humanize | uppercase}}</b>
             </td>
           </tr> -->
         <!-- <tr>
@@ -35,7 +35,7 @@ <h3>Order Details</h3>
           </tr> -->
       </table>
     </div>
-    <div class="col-12 col-sm-6 p-0 p-sm-3">
+    <div class="w-full sm:w-1/2 pr-4 pl-4 p-0 sm:p-4">
       <h3>Address</h3>
       <table>
         <tr>
@@ -69,49 +69,49 @@ <h3>Address</h3>
     </div>
   </div>
 
-  <div class="box mt-2 p-0 mb-4 row m-0" *ngIf="!isMobile">
+  <div class="box mt-2 p-0 mb-4 flex flex-wrap  m-0" *ngIf="!isMobile">
     <div *ngFor="let item of order.line_items" class="lineitems">
-      <div class="row ">
-        <div class="col-12 pr-0 col-sm-1">
+      <div class="flex flex-wrap  ">
+        <div class="w-full pr-0 sm:w-1/6 pr-4 pl-4">
           <img
             [routerLink]="['/', item.product.slug]"
             [src]="getProductImageUrl(item)"
           />
         </div>
-        <div class="col-12 col-sm-5" [routerLink]="['/', item.product.slug]">
+        <div class="w-full sm:w-2/5 pr-4 pl-4" [routerLink]="['/', item.product.slug]">
           <div class="lineitems-name">{{ item.product.name }}</div>
           <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
         </div>
-        <div class="col-12 col-sm-2">
+        <div class="w-full sm:w-1/5 pr-4 pl-4">
           <div class="price">{{ currency }} {{ item.unit_price.amount }}</div>
           <div class="qty">QTY: {{ item.quantity }}</div>
         </div>
-        <div class="col-12 col-sm-4">
-          <b class="text-danger note p-0">Please note:</b> You can return or
+        <div class="w-full sm:w-1/3 pr-4 pl-4">
+          <b class="text-red-600 note p-0">Please note:</b> You can return or
           exchange this within 15 days.
         </div>
       </div>
     </div>
   </div>
-  <div class="box mt-2 p-0 mb-4 row m-0" *ngIf="isMobile">
+  <div class="box mt-2 p-0 mb-4 flex flex-wrap  m-0" *ngIf="isMobile">
     <div *ngFor="let item of order.line_items" class="lineitems">
-      <div class="row ">
-        <div class="col-12 pr-0 col-sm-1">
+      <div class="flex flex-wrap  ">
+        <div class="w-full pr-0 sm:w-1/6 pr-4 pl-4">
           <img
             [routerLink]="['/', item.product.slug]"
             [src]="getProductImageUrl(item)"
           />
         </div>
-        <div class="col-6 col-sm-5" [routerLink]="['/', item.product.slug]">
+        <div class="w-1/2 sm:w-2/5 pr-4 pl-4" [routerLink]="['/', item.product.slug]">
           <div class="lineitems-name">{{ item.product.name }}</div>
           <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
         </div>
-        <div class="col-6 col-sm-2 text-right">
+        <div class="w-1/2 sm:w-1/5 pr-4 pl-4 text-right">
           <div class="qty">QTY: {{ item.quantity }}</div>
           <div class="price">{{ currency }} {{ item.unit_price.amount }}</div>
         </div>
-        <div class="col-12 col-sm-4">
-          <b class="note text-danger p-0">Note:</b>
+        <div class="w-full sm:w-1/3 pr-4 pl-4">
+          <b class="note text-red-600 p-0">Note:</b>
           <span class="note"
             >You can return or exchange this within 15 days.</span
           >
diff --git a/src/app/user/components/orders/order-detail/order-detail.component.scss b/src/app/user/components/orders/order-detail/order-detail.component.scss
deleted file mode 100644
index c727ed4d..00000000
--- a/src/app/user/components/orders/order-detail/order-detail.component.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.status {
-  color: $theme-action-color;
-}
-
-.line_item_image {
-  // border: 1px solid $gray-10;
-  height: 75px;
-}
-
-.box {
-  background-color: lighter($gray-100, 25);
-  padding: 1rem;
-  border-radius: 2px;
-  margin-bottom: 10px;
-  margin: 0 15px;
-  border: 1px solid $gray-10;
-  h3 {
-    font-size: 1.2em;
-  }
-  a {
-    color: $gray-900;
-    text-decoration: none;
-    font-size: 1em;
-  }
-  .ptitle {
-    font-size: 1em;
-    a {
-      font-size: 1.2em;
-    }
-  }
-}
-
-.lineitems {
-  &:last-child {
-    border-bottom: 0 solid;
-  }
-  border-bottom: 1px solid $gray-10;
-  padding: 0.5rem;
-  img {
-    height: 75px;
-    width: 100%;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      height: 121px;
-      width: 100%;
-      margin: auto;
-      object-fit: scale-down;
-    }
-  }
-  .lineitems-name {
-    font-size: 1em;
-    color: $gray-900;
-    font-weight: 200;
-    margin-top: 17px;
-    cursor: pointer;
-    @media only screen and (min-width: 320px) and (max-width: 767px) {
-      margin-top: 0;
-    }
-  }
-  .lineitems-info {
-    font-size: 0.8em;
-    color: $gray-900;
-    cursor: pointer;
-  }
-  .price {
-    color: $red;
-    font-size: 1.2em;
-    font-weight: bold;
-  }
-  .qty {
-    font-size: 0.8em;
-  }
-}
-
-table {
-  tr {
-    td {
-      &:first-child {
-        font-weight: 200;
-        padding-right: 1rem;
-        font-size: 1em;
-        color: $gray-600;
-      }
-    }
-  }
-}
-.note {
-  color: $gray-600;
-  padding-left: 5px;
-  font-size: 11px;
-}
diff --git a/src/app/user/components/orders/order-detail/order-detail.component.ts b/src/app/user/components/orders/order-detail/order-detail.component.ts
index 97de2bc9..f4e1fccd 100644
--- a/src/app/user/components/orders/order-detail/order-detail.component.ts
+++ b/src/app/user/components/orders/order-detail/order-detail.component.ts
@@ -17,7 +17,7 @@ import { CheckoutService } from '../../../../core/services/checkout.service';
 @Component({
   selector: 'app-order-detail',
   templateUrl: './order-detail.component.html',
-  styleUrls: ['./order-detail.component.scss']
+  
 })
 export class OrderDetailComponent implements OnInit, OnDestroy {
   routeSubscription$: Subscription;
diff --git a/src/app/user/components/orders/order-list-item/order-list-item.component.html b/src/app/user/components/orders/order-list-item/order-list-item.component.html
index d6aef3c2..d574cae1 100644
--- a/src/app/user/components/orders/order-list-item/order-list-item.component.html
+++ b/src/app/user/components/orders/order-list-item/order-list-item.component.html
@@ -2,7 +2,7 @@
   <div *ngFor="let order of (orders | reverse)">
     <div *ngIf="order.state === 'confirmed'" class=" box shadow-sm">
       <div class="order">
-        <div class="order-num btn float-left">
+        <div class="order-num inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline float-left">
           <a [routerLink]="['detail', order.number]" class="view-details-link">
             {{ order.number | humanize | uppercase }}
           </a>
@@ -12,28 +12,28 @@
       <div class="order-detail">
         <div class="order-body" *ngIf="!isMobile">
           <div *ngFor="let item of order.line_items" class="lineitems">
-            <div class="row ">
-              <div class="col-12 pr-0 col-sm-1">
+            <div class="flex flex-wrap  ">
+              <div class="w-full pr-0 sm:w-1/6 pr-4 pl-4">
                 <img
                   [routerLink]="['/', item.product.slug]"
                   [src]="getProductImageUrl(item)"
                 />
               </div>
               <div
-                class="col-12 col-sm-5"
+                class="w-full sm:w-2/5 pr-4 pl-4"
                 [routerLink]="['/', item.product.slug]"
               >
                 <div class="lineitems-name">{{ item.product.name }}</div>
                 <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
               </div>
-              <div class="col-12 col-sm-2">
+              <div class="w-full sm:w-1/5 pr-4 pl-4">
                 <div class="price">
                   {{ currency }}{{ item.unit_price.amount }}
                 </div>
                 <div class="qty">QTY: {{ item.quantity }}</div>
               </div>
-              <div class="col-12 col-sm-4">
-                <b class="text-danger note p-0">Note:</b>
+              <div class="w-full sm:w-1/3 pr-4 pl-4">
+                <b class="text-red-600 note p-0">Note:</b>
                 <span class="note"
                   >You can return or exchange this within 15 days.</span
                 >
@@ -43,28 +43,28 @@
         </div>
         <div class="order-body" *ngIf="isMobile">
           <div *ngFor="let item of order.line_items" class="lineitems">
-            <div class="row ">
-              <div class="col-12 pr-0 col-sm-1">
+            <div class="flex flex-wrap  ">
+              <div class="w-full pr-0 sm:w-1/6 pr-4 pl-4">
                 <img
                   [routerLink]="['/', item.product.slug]"
                   [src]="getProductImageUrl(item)"
                 />
               </div>
               <div
-                class="col-7 col-sm-5"
+                class="w-3/5 sm:w-2/5 pr-4 pl-4"
                 [routerLink]="['/', item.product.slug]"
               >
                 <div class="lineitems-name">{{ item.product.name }}</div>
                 <!-- <div class="lineitems-info"> {{item.product.options_text}}</div> -->
               </div>
-              <div class="col-5 col-sm-2">
+              <div class="w-2/5 sm:w-1/5 pr-4 pl-4">
                 <div class="qty">QTY: {{ item.quantity }}</div>
                 <div class="price">
                   {{ currency }} {{ item.unit_price.amount }}
                 </div>
               </div>
-              <div class="col-12 col-sm-4">
-                <b class="text-danger note p-0">Note:</b>
+              <div class="w-full sm:w-1/3 pr-4 pl-4">
+                <b class="text-red-600 note p-0">Note:</b>
                 <span class="note"
                   >You can return or exchange this within 15 days.</span
                 >
@@ -73,19 +73,19 @@
           </div>
         </div>
         <div class="order-footer" *ngIf="!isMobile">
-          <div class="order-on float-left col-12 col-sm-6">
+          <div class="order-on float-left w-full sm:w-1/2 pr-4 pl-4">
             <span class="head">Order Status : </span>
             <span>{{ order.state | humanize | uppercase }}</span>
           </div>
-          <!-- <div class="order-on float-right col-12 col-sm-6">
+          <!-- <div class="order-on float-right w-full sm:w-1/2 pr-4 pl-4">
             <span class="head">Payment Status : </span>
             <span>{{order.payment_state | humanize | uppercase}}</span>
           </div> -->
-          <!-- <div class="order-on float-left col-12 col-sm-6">
+          <!-- <div class="order-on float-left w-full sm:w-1/2 pr-4 pl-4">
             <span class="head">Ordered On : </span>
             <span>{{order.completed_at | date:'fullDate'}}</span>
           </div> -->
-          <div class="order-on float-right col-12 col-sm-6">
+          <div class="order-on float-right w-full sm:w-1/2 pr-4 pl-4">
             <span class="head">Order Total : </span>
             <span>{{ currency }}{{ order.order_total_amount.amount }}</span>
           </div>
diff --git a/src/app/user/components/orders/order-list-item/order-list-item.component.scss b/src/app/user/components/orders/order-list-item/order-list-item.component.scss
deleted file mode 100644
index 3707ac91..00000000
--- a/src/app/user/components/orders/order-list-item/order-list-item.component.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '../../../../shared/scss/selected_theme_variables';
-.line_item_image {
-  float: left;
-}
-
-.box {
-  border: 1px solid $gray-10;
-  margin-bottom: 1rem;
-  background-color: $white;
-  .order {
-    width: 100%;
-    background-color: $gray-100;
-    .order-num {
-      @media only screen and (min-width: 320px) and (max-width: 767px) {
-        margin: 0.5rem 0.4rem 0.4rem 0.4rem;
-      }
-      margin: 0.5rem 0.4rem 0.4rem 0.5rem;
-      border-radius: 0;
-      background-color: $theme-action-color;
-      color: $white;
-      .view-details-link {
-        color: $white;
-        font-weight: bold;
-        font-size: 1em;
-        text-decoration: underline;
-      }
-    }
-  }
-  .order-detail {
-    border-top: 1px solid $gray-10;
-    .order-body {
-      .lineitems {
-        &:last-child {
-          border-bottom: 0 solid;
-        }
-        border-bottom: 1px solid $gray-10;
-        padding: 0.5rem;
-        img {
-          height: 75px;
-          width: 100%;
-          object-fit: contain;
-          @media only screen and (min-width: 320px) and (max-width: 767px) {
-            height: 121px;
-            width: 100%;
-            margin: auto;
-            object-fit: scale-down;
-          }
-        }
-        .lineitems-name {
-          font-size: 1em;
-          color: $gray-900;
-          font-weight: 200;
-          margin-top: 17px;
-          cursor: pointer;
-          @media only screen and (min-width: 320px) and (max-width: 767px) {
-            margin-top: 0;
-          }
-        }
-        .lineitems-info {
-          font-size: 0.8em;
-          color: $gray-900;
-          cursor: pointer;
-        }
-        .price {
-          color: $red;
-          font-size: 1.2em;
-          font-weight: bold;
-          @media only screen and (min-width: 320px) and (max-width: 767px) {
-            text-align: right;
-          }
-        }
-        .qty {
-          font-size: 0.8em;
-          @media only screen and (min-width: 320px) and (max-width: 767px) {
-            text-align: right;
-          }
-        }
-      }
-    }
-    .order-footer {
-      padding: 0.4rem;
-      border-top: 1px solid $gray-10;
-      .order-on {
-        padding: 3px;
-        span {
-          font-weight: 200;
-          color: $gray-900;
-        }
-        .head {
-          font-weight: normal;
-          color: $gray-600;
-        }
-      }
-    }
-  }
-}
-
-.note {
-  color: $gray-600;
-  padding-left: 5px;
-  font-size: 11px;
-}
diff --git a/src/app/user/components/orders/order-list-item/order-list-item.component.ts b/src/app/user/components/orders/order-list-item/order-list-item.component.ts
index 86bd27ca..b3aa1eb7 100644
--- a/src/app/user/components/orders/order-list-item/order-list-item.component.ts
+++ b/src/app/user/components/orders/order-list-item/order-list-item.component.ts
@@ -6,7 +6,7 @@ import { environment } from '../../../../../environments/environment.dev-ng-spre
 @Component({
   selector: 'app-order-list-item',
   templateUrl: './order-list-item.component.html',
-  styleUrls: ['./order-list-item.component.scss']
+  
 })
 export class OrderListItemComponent implements OnInit {
   @Input() orders: Array<Order>;
diff --git a/src/app/user/components/orders/orders.component.html b/src/app/user/components/orders/orders.component.html
index b6e1896c..07f40988 100644
--- a/src/app/user/components/orders/orders.component.html
+++ b/src/app/user/components/orders/orders.component.html
@@ -4,15 +4,15 @@
       [orders]="orders"
       [isMobile]="isMobile"
     ></app-order-list-item>
-    <div class="col-12 d-none d-sm-block">
-      <div class="row">
+    <div class="w-full hidden sm:block">
+      <div class="flex flex-wrap ">
         <!-- <pagination class="m-auto" *ngIf="orders.total_count > orders.per_page" [totalItems]="orders.total_count" [itemsPerPage]="orders.per_page"
           [(ngModel)]="orders.current_page" (pageChanged)="pageChanged($event)" [rotate]="rotate" [maxSize]="5">
         </pagination> -->
       </div>
     </div>
-    <div class="col-12 d-block d-sm-none mb-2">
-      <div class="row">
+    <div class="w-full block sm:hidden mb-2">
+      <div class="flex flex-wrap ">
         <!-- <pagination class="m-auto" *ngIf="orders.total_count > orders.per_page" [totalItems]="orders.total_count" [itemsPerPage]="orders.per_page"
           [(ngModel)]="orders.current_page" (pageChanged)="pageChanged($event)" [rotate]="rotate" [maxSize]="3">
         </pagination> -->
@@ -25,7 +25,7 @@
       <div class="empty-cart-message">You have'nt ordered anything yet.</div>
       <button
         type="button"
-        class="btn themebtnprimary col-sm-4 m-auto"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimary sm:w-1/3 pr-4 pl-4 m-auto"
         [routerLink]="['/']"
       >
         Start Shopping
diff --git a/src/app/user/components/orders/orders.component.scss b/src/app/user/components/orders/orders.component.scss
deleted file mode 100644
index a6ea3b08..00000000
--- a/src/app/user/components/orders/orders.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '../../../shared/scss/selected_theme_variables';
-.cart-empty {
-  min-height: 500px;
-  text-align: center;
-  .empty-cart-icon {
-    height: 85px;
-    width: 85px;
-    margin: 0 auto; // background-image: url(/assets/shoppingbag.png);
-  }
-  .empty-cart-message {
-    font-size: 20px;
-    color: $gray-700;
-    font-weight: 600;
-    font-family: $primary-font;
-    line-height: 1.5em;
-    margin: 15px 0;
-  }
-  .empty-wishlist-link {
-    color: $theme-action-color;
-    font-size: 16px;
-    font-weight: 500;
-  }
-}
diff --git a/src/app/user/components/orders/orders.component.ts b/src/app/user/components/orders/orders.component.ts
index 67d949ea..77444abb 100644
--- a/src/app/user/components/orders/orders.component.ts
+++ b/src/app/user/components/orders/orders.component.ts
@@ -10,7 +10,7 @@ import { getUserOrders } from '../../reducers/selector';
 @Component({
   selector: 'app-orders',
   templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.scss']
+  
 })
 export class OrdersComponent implements OnInit {
   orders$: Observable<Order[]>;
diff --git a/src/app/user/components/overview/overview.component.ts b/src/app/user/components/overview/overview.component.ts
index ae0813ca..5f3cd503 100644
--- a/src/app/user/components/overview/overview.component.ts
+++ b/src/app/user/components/overview/overview.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-overview',
   templateUrl: './overview.component.html',
-  styleUrls: ['./overview.component.css']
+  
 })
 export class OverviewComponent implements OnInit {
   constructor() {}
diff --git a/src/app/user/components/profile/profile-email/profile-email.component.html b/src/app/user/components/profile/profile-email/profile-email.component.html
index 6d8bb481..ed4b8853 100644
--- a/src/app/user/components/profile/profile-email/profile-email.component.html
+++ b/src/app/user/components/profile/profile-email/profile-email.component.html
@@ -1,35 +1,35 @@
-<div class="row" *ngIf="userDetails">
-  <div class="col-md-12">
-    <div class="alert alert-success col-12">
+<div class="flex flex-wrap " *ngIf="userDetails">
+  <div class="md:w-full pr-4 pl-4">
+    <div class="relative px-3 py-3 mb-4 border rounded bg-green-200 border-green-300 text-green-800 w-full">
       <strong>Welcome!</strong> {{ userDetails.email }}
     </div>
-    <h5 class="d-block">Email Address</h5>
+    <h5 class="block">Email Address</h5>
     <form
       [formGroup]="emailForm"
       (ngSubmit)="emailConfirmModal(emailModal, userDetails.id)"
-      class="form-inline"
+      class="flex items-center"
     >
-      <div class="form-group mr-sm-3 d-none d-sm-block">
+      <div class="mb-4 sm:mr-4 hidden sm:block">
         <input
           type="email"
           [readonly]="!isEditEmailPressed"
-          class="form-control mt-1"
+          class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded mt-1"
           placeholder="Email Address"
           formControlName="email"
         />
       </div>
-      <div class="form-group mr-sm-3 col-12 p-0 d-bolck d-sm-none">
+      <div class="mb-4 sm:mr-4 w-full p-0 d-bolck sm:hidden">
         <input
           type="email"
           [readonly]="!isEditEmailPressed"
-          class="form-control mt-1"
+          class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded mt-1"
           placeholder="Email Address"
           formControlName="email"
         />
       </div>
       <button
         type="submit"
-        class="btn themebtnprimarybasic col-12 col-sm-2"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic w-full sm:w-1/5 pr-4 pl-4"
         (click)="editEmail()"
         *ngIf="!isEditEmailPressed"
       >
@@ -37,7 +37,7 @@ <h5 class="d-block">Email Address</h5>
       </button>
       <button
         type="submit"
-        class="btn themebtnprimarybasic col-12 col-sm-3 mr-3"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic w-full sm:w-1/4 pr-4 pl-4 mr-3"
         *ngIf="isEditEmailPressed"
         [disabled]="!emailForm.valid"
       >
@@ -45,7 +45,7 @@ <h5 class="d-block">Email Address</h5>
       </button>
       <button
         type="submit"
-        class="btn themebtnprimarybasic col-12 col-sm-3 mt-2 mt-sm-0"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic w-full sm:w-1/4 pr-4 pl-4 mt-2 sm:mt-0"
         *ngIf="isEditEmailPressed"
         (click)="cancelEmail()"
       >
@@ -59,9 +59,9 @@ <h5 class="d-block">Email Address</h5>
   <div class="modal-body text-center">
     <p>After updating email, you will be automatically logged out!</p>
     <p>Do you want to confirm?</p>
-    <button type="button" class="btn btn-success mr-3" (click)="confirm()">
+    <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:bg-green-600 mr-3" (click)="confirm()">
       Yes
     </button>
-    <button type="button" class="btn btn-danger" (click)="decline()">No</button>
+    <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-red-600 text-white hover:bg-red-700" (click)="decline()">No</button>
   </div>
 </ng-template>
diff --git a/src/app/user/components/profile/profile-email/profile-email.component.scss b/src/app/user/components/profile/profile-email/profile-email.component.scss
deleted file mode 100644
index adbeb6f3..00000000
--- a/src/app/user/components/profile/profile-email/profile-email.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.reviewlink {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-}
diff --git a/src/app/user/components/profile/profile-email/profile-email.component.ts b/src/app/user/components/profile/profile-email/profile-email.component.ts
index 92bf804c..32e30f7f 100644
--- a/src/app/user/components/profile/profile-email/profile-email.component.ts
+++ b/src/app/user/components/profile/profile-email/profile-email.component.ts
@@ -9,7 +9,7 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 @Component({
   selector: 'app-profile-email',
   templateUrl: './profile-email.component.html',
-  styleUrls: ['./profile-email.component.scss']
+  
 })
 export class ProfileEmailComponent implements OnInit {
   @Input() userDetails;
diff --git a/src/app/user/components/profile/profile-password/profile-password.component.html b/src/app/user/components/profile/profile-password/profile-password.component.html
index 87585c9d..cbe54b1d 100644
--- a/src/app/user/components/profile/profile-password/profile-password.component.html
+++ b/src/app/user/components/profile/profile-password/profile-password.component.html
@@ -1,9 +1,9 @@
-<div class="row mt-4">
-  <div class="col-md-8">
+<div class="flex flex-wrap  mt-4">
+  <div class="md:w-2/3 pr-4 pl-4">
     <form
       [formGroup]="passwordForm"
       (ngSubmit)="onPasswordChange(userDetails.id)"
-      class="d-block"
+      class="block"
     >
       <span
         *ngIf="!isChangePasswordPressed"
@@ -12,10 +12,10 @@
         ><strong class="reviewlink">Change Password</strong></span
       >
       <div *ngIf="isChangePasswordPressed">
-        <div class="form-group">
+        <div class="mb-4">
           <input
             type="password"
-            class="form-control"
+            class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
             name="password"
             formControlName="password"
             placeholder="Choose Password"
@@ -28,17 +28,17 @@
             passwordForm.get('password').touched
           "
         >
-          <p class="login-error-message text-danger">
+          <p class="login-error-message text-red-600">
             {{
               passwordForm.get('password').errors.msg ||
                 'Password must be at least 6 characters!'
             }}
           </p>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <input
             type="password"
-            class="form-control"
+            class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
             name="password_confirmation"
             formControlName="password_confirmation"
             placeholder="Confirm Password"
@@ -52,27 +52,27 @@
             passwordForm.get('password_confirmation').touched
           "
         >
-          <p class="login-error-message text-danger">This can't be blank!</p>
+          <p class="login-error-message text-red-600">This can't be blank!</p>
         </div>
         <div>
           <p
-            class="login-error-message text-danger"
+            class="login-error-message text-red-600"
             *ngIf="passwordForm.errors?.doesMatchPassword"
           >
             Password must match
           </p>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <button
             type="submit"
-            class="btn themebtnprimarybasic"
+            class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic"
             [disabled]="!passwordForm.valid"
           >
             Change Password
           </button>
           <button
             *ngIf="isChangePasswordPressed"
-            class="btn themebtnprimarybasic ml-2"
+            class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline themebtnprimarybasic ml-2"
             (click)="cancelPressed()"
           >
             Cancel
diff --git a/src/app/user/components/profile/profile-password/profile-password.component.scss b/src/app/user/components/profile/profile-password/profile-password.component.scss
deleted file mode 100644
index 51de132d..00000000
--- a/src/app/user/components/profile/profile-password/profile-password.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.reviewlink {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-  @media only screen and (min-width: 320px) and (max-width: 767px) {
-    margin-bottom: 10px;
-    display: block;
-  }
-}
-
-.change {
-  padding-top: 15px;
-  cursor: pointer;
-}
diff --git a/src/app/user/components/profile/profile-password/profile-password.component.ts b/src/app/user/components/profile/profile-password/profile-password.component.ts
index 701184ee..688929fb 100644
--- a/src/app/user/components/profile/profile-password/profile-password.component.ts
+++ b/src/app/user/components/profile/profile-password/profile-password.component.ts
@@ -6,7 +6,7 @@ import { PasswordMatchValidator } from '../../../../shared/custom-validator/pass
 @Component({
   selector: 'app-profile-password',
   templateUrl: './profile-password.component.html',
-  styleUrls: ['./profile-password.component.scss']
+  
 })
 export class ProfilePasswordComponent implements OnInit {
   @Input() userDetails;
diff --git a/src/app/user/components/profile/profile.component.html b/src/app/user/components/profile/profile.component.html
index 6e7f45ab..38199ef1 100644
--- a/src/app/user/components/profile/profile.component.html
+++ b/src/app/user/components/profile/profile.component.html
@@ -1,5 +1,5 @@
-<div class="row" *ngIf="(userDetails$ | async); let userDetails">
-  <div class="col-md-8" *ngIf="userDetails">
+<div class="flex flex-wrap " *ngIf="(userDetails$ | async); let userDetails">
+  <div class="md:w-2/3 pr-4 pl-4" *ngIf="userDetails">
     <app-profile-email [userDetails]="userDetails"></app-profile-email>
     <hr />
     <app-profile-password
diff --git a/src/app/user/components/profile/profile.component.scss b/src/app/user/components/profile/profile.component.scss
deleted file mode 100644
index adbeb6f3..00000000
--- a/src/app/user/components/profile/profile.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.reviewlink {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-}
diff --git a/src/app/user/components/profile/profile.component.ts b/src/app/user/components/profile/profile.component.ts
index 266979f9..d0884ae6 100644
--- a/src/app/user/components/profile/profile.component.ts
+++ b/src/app/user/components/profile/profile.component.ts
@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+  
 })
 export class ProfileComponent implements OnInit {
   userDetails$: Observable<any>;
diff --git a/src/app/user/components/returns/return-list-item/return-list-item.component.ts b/src/app/user/components/returns/return-list-item/return-list-item.component.ts
index f11914c6..02f93344 100644
--- a/src/app/user/components/returns/return-list-item/return-list-item.component.ts
+++ b/src/app/user/components/returns/return-list-item/return-list-item.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-return-list-item',
   templateUrl: './return-list-item.component.html',
-  styleUrls: ['./return-list-item.component.css']
+  
 })
 export class ReturnListItemComponent implements OnInit {
   constructor() {}
diff --git a/src/app/user/components/returns/returns.component.ts b/src/app/user/components/returns/returns.component.ts
index aa02bd18..3fb2dd04 100644
--- a/src/app/user/components/returns/returns.component.ts
+++ b/src/app/user/components/returns/returns.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-returns',
   templateUrl: './returns.component.html',
-  styleUrls: ['./returns.component.css']
+  
 })
 export class ReturnsComponent implements OnInit {
   constructor() {}
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 2f86b832..c303bbaf 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -1,6 +1,6 @@
-<div class="container">
-  <div class="row">
-    <div class="col-md-12 my-3">
+<div class="container mx-auto sm:px-4">
+  <div class="flex flex-wrap ">
+    <div class="md:w-full pr-4 pl-4 my-3">
       <h5 *ngIf="selectedProfileMenu; else elseBlock">
         My Account > {{ selectedProfileMenu.name }}
       </h5>
@@ -10,7 +10,7 @@ <h5>My Account</h5>
       <hr />
     </div>
 
-    <div class="sidebar col-md-3 d-none d-lg-block">
+    <div class="sidebar md:w-1/4 pr-4 pl-4 hidden lg:block">
       <!-- <p><a routerLink="/user/overview" routerLinkActive="active">Overview</a></p> -->
       <!-- <hr> -->
       <p>
@@ -29,7 +29,7 @@ <h5>My Account</h5>
         <a routerLink="/user/favorite-products" routerLinkActive="active">My Favorite Products</a>
       </p> -->
     </div>
-    <div class="col-md-9">
+    <div class="md:w-3/4 pr-4 pl-4">
       <router-outlet></router-outlet>
     </div>
   </div>
diff --git a/src/app/user/user.component.scss b/src/app/user/user.component.scss
deleted file mode 100644
index 7b2de3da..00000000
--- a/src/app/user/user.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../shared/scss/selected_theme_variables';
-p a {
-  color: $gray-600;
-  text-decoration: none;
-  &.active {
-    font-family: $primary-font;
-    color: $theme-action-color;
-    font-weight: 900;
-    background-color: transparent;
-  }
-}
-.bg {
-  padding: 0;
-}
-.sidebar {
-  border-right: 1px solid $gray-10;
-}
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 1938d9ab..51eaa1cc 100644
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -8,7 +8,7 @@ import {
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
-  styleUrls: ['./user.component.scss']
+  
 })
 export class UserComponent implements OnInit {
   selectedProfileMenu: any;
diff --git a/src/styles.scss b/src/styles.scss
index 398f03ff..b5c61c95 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,118 +1,3 @@
-@import '../node_modules/bootstrap/scss/bootstrap-reboot';
-@import '../node_modules/bootstrap/scss/bootstrap-grid';
-@import 'app/shared/scss/themes';
-@import 'app/shared/scss/selected_theme_variables';
-@import '../node_modules/ngx-toastr/toastr-bs4-alert';
-$break-small: 320px;
-ol,
-ul {
-  list-style: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-.btn:focus,
-.btn.focus {
-  outline: 0;
-  box-shadow: None;
-}
-
-.col-centered {
-  float: none;
-  margin: 0 auto;
-}
-
-.row-base {
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.coming-soon {
-  cursor: url('/assets/comingsoon.png'), auto !important;
-}
-
-html {
-  overflow-y: scroll;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  font-size: 15px;
-  line-height: 1.5;
-  min-height: 32vw;
-  position: relative;
-  background-color: $white;
-  -webkit-font-smoothing: subpixel-antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-}
-
-.isModalShown {
-  margin: 0;
-  height: 100%;
-}
-
-.cat-mobile {
-  background-color: $white;
-  border-radius: 0px;
-  margin: 0px;
-  width: 100vw;
-  max-width: 100vw !important;
-  .modal-content {
-    border-radius: 0px;
-  }
-  .modal-body {
-    padding: 0px;
-  }
-}
-
-@media screen and (min-width: 1100px) and (max-width: 1400px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media screen and (min-width: 320px) and (max-width: 768px) {
-  .container {
-    max-width: 100%;
-  }
-}
-
-$s-min: 20;
-$s-max: 70;
-$l-min: 30;
-$l-max: 90;
-@for $i from 1 through 20 {
-  $rand-color: hsla(
-    random(360),
-    $s-min + random($s-max + -$s-min),
-    $l-min + random($l-max + -$l-min),
-    0.3
-  );
-  .bg-rand-#{$i} {
-    background-image: radial-gradient($rand-color, #efefef);
-  }
-}
-
-.pointer {
-  cursor: pointer;
-  &:focus {
-    outline: none;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index a7244a33..4455f8d5 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -20,5 +20,7 @@
     },
     "useDefineForClassFields": false
   },
-  "exclude": ["test.ts", "**/*.spec.ts"]
+  "exclude": ["test.ts", "**/*.spec.ts"],
+  "files": ["main.ts", "polyfills.ts"],
+  "include": ["./**/*.d.ts"]
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..483802b9
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,84 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        "primary": {
+          50: "#F1F9F6",
+          100: "#E6F4EF",
+          200: "#CEE9DE",
+          300: "#B5DECE",
+          400: "#9CD3BD",
+          500: "#82C7AB",
+          DEFAULT: "#82C7AB",
+          600: "#56B38E",
+          700: "#3E896B",
+          800: "#295C47",
+          900: "#152E24",
+          950: "#091510",
+        },
+        "danger": {
+          50: "#FCE9E8",
+          100: "#FAD7D6",
+          200: "#F5ABA8",
+          300: "#F1827F",
+          400: "#EC5A55",
+          500: "#E7302A",
+          DEFAULT: "#E7302A",
+          600: "#C51C16",
+          700: "#931511",
+          800: "#600E0B",
+          900: "#320706",
+          950: "#170303",
+        },
+        "warning": {
+          50: "#FFFDFA",
+          100: "#FFFBF5",
+          200: "#FEF8EB",
+          300: "#FEF6E6",
+          400: "#FDF1D8",
+          500: "#FDEDCE",
+          DEFAULT: "#FDEDCE",
+          600: "#FAD384",
+          700: "#F6B32C",
+          800: "#D38F09",
+          900: "#986706",
+          950: "#714D05",
+        },
+        "secondary": {
+          50: "#EFF7EE",
+          100: "#DFEFDC",
+          200: "#C2E0BD",
+          300: "#A1D09A",
+          400: "#84C27B",
+          500: "#65B259",
+          DEFAULT: "#65B259",
+          600: "#4E9244",
+          700: "#3A6C32",
+          800: "#274922",
+          900: "#132310",
+          950: "#091108",
+        },
+        "info": {
+          50: "#F3F2F8",
+          100: "#EDEBF5",
+          200: "#E1DDEE",
+          300: "#D5D0E7",
+          400: "#C9C3E0",
+          500: "#B7AFD5",
+          600: "#A59ACB",
+          700: "#9083BE",
+          800: "#7565AF",
+          900: "#493D75",
+          950: "#1E1930",
+          DEFAULT: "#1E1930",
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+
diff --git a/yarn.lock b/yarn.lock
index f96a4fe6..edb21ce8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@aduh95/viz.js/-/viz.js-3.2.1.tgz#189d7bc08d83e487487fe6c1810cf50fd8747a94"
   integrity sha512-5Hmejfgemk1qJw24M5I+NabADKmD5Io7LU2fxHw/E6Bo0ji9EdmHP16KrFnt6Sz0/w7VIzc1ZAasyLULaPLGJQ==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@2.2.0", "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -2655,6 +2660,11 @@ ansi-wrap@0.1.0:
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
   integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -2709,6 +2719,11 @@ are-we-there-yet@^3.0.0:
     delegates "^1.0.0"
     readable-stream "^3.6.0"
 
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2874,6 +2889,18 @@ autoprefixer@10.4.13:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+autoprefixer@^10.4.16:
+  version "10.4.16"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
+  integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
+  dependencies:
+    browserslist "^4.21.10"
+    caniuse-lite "^1.0.30001538"
+    fraction.js "^4.3.6"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -3323,6 +3350,16 @@ browserslist@^4.20.2:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.4"
 
+browserslist@^4.21.10:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
+  dependencies:
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.13"
+
 browserstack@^1.5.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.6.0.tgz#5a56ab90987605d9c138d7a8b88128370297f9bf"
@@ -3490,6 +3527,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -3523,6 +3565,11 @@ caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.300014
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001456.tgz#734ec1dbfa4f3abe6e435b78ecf40d68e8c32ce4"
   integrity sha512-XFHJY5dUgmpMV25UqaD4kVq2LsiaU5rS8fb0f17pCoXQiQslzmFgnfOxfvo1bTpTqf7dwG/N/05CnLCnOEKmzA==
 
+caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+  version "1.0.30001563"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001563.tgz#aa68a64188903e98f36eb9c56e48fba0c1fe2a32"
+  integrity sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==
+
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
@@ -3858,6 +3905,11 @@ commander@^3.0.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -4513,6 +4565,11 @@ di@^0.0.1:
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
   integrity sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff@^3.1.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -4746,6 +4803,11 @@ electron-to-chromium@^1.4.251, electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.301.tgz#175d9fa1509a5b062752c6db321051e610fe2eae"
   integrity sha512-bz00ASIIDjcgszZKuEA1JEFhbDjqUNbQ/PEhNEl1wbixzYpeTp2H2QWjsQvAL2T1wJBdOwCF5hE896BoMwYKrA==
 
+electron-to-chromium@^1.4.535:
+  version "1.4.590"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.590.tgz#85a428fbabb77265a4804040837ed4f2538e3300"
+  integrity sha512-hohItzsQcG7/FBsviCYMtQwUSWvVF7NVqPOnJCErWsAshsP/CR2LAXdmq276RbESNdhxiAq5/vRo1g2pxGXVww==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -5464,6 +5526,17 @@ fast-glob@^3.2.11:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -5723,6 +5796,11 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+fraction.js@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5842,6 +5920,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"
@@ -5943,7 +6026,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -5960,28 +6043,28 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@8.0.3, glob@^8.0.1:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
-  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
+glob@7.1.6, glob@^7.0.3, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^5.0.1"
+    minimatch "^3.0.4"
     once "^1.3.0"
+    path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@8.0.3, glob@^8.0.1:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
+  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^5.0.1"
     once "^1.3.0"
-    path-is-absolute "^1.0.0"
 
 glob@^7.1.7:
   version "7.2.3"
@@ -6238,6 +6321,13 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  dependencies:
+    function-bind "^1.1.2"
+
 hdr-histogram-js@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/hdr-histogram-js/-/hdr-histogram-js-2.0.3.tgz#0b860534655722b6e3f3e7dca7b78867cf43dcb5"
@@ -6760,6 +6850,13 @@ is-core-module@^2.1.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-core-module@^2.8.1, is-core-module@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
@@ -7186,6 +7283,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7554,6 +7656,16 @@ lie@~3.3.0:
   dependencies:
     immediate "~3.0.5"
 
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.0.0.tgz#f8067feb033b5b74dab4602a5f5029420be749bc"
+  integrity sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==
+
 limiter@^1.0.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.5.tgz#8f92a25b3b16c6131293a0cc834b4a838a2aa7c2"
@@ -7995,7 +8107,7 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -8254,6 +8366,15 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nan@^2.12.1:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
@@ -8264,6 +8385,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8385,6 +8511,11 @@ node-gyp@^9.0.0:
     tar "^6.1.2"
     which "^2.0.2"
 
+node-releases@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
+  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+
 node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
@@ -8570,6 +8701,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 object-inspect@^1.6.0, object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
@@ -9111,7 +9247,7 @@ picturefill@^3.0.3:
   resolved "https://registry.yarnpkg.com/picturefill/-/picturefill-3.0.3.tgz#a5c38eeb02d74def38e1790ff61e166166b4f224"
   integrity sha512-JDdx+3i4fs2pkqwWZJgGEM2vFWsq+01YsQFT9CKPGuv2Q0xSdrQZoxi9XwyNARTgxiOdgoAwWQRluLRe/JQX2g==
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
@@ -9138,6 +9274,11 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 piscina@3.2.0, piscina@~3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/piscina/-/piscina-3.2.0.tgz#f5a1dde0c05567775690cccefe59d9223924d154"
@@ -9181,6 +9322,30 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
 postcss-loader@7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.2.tgz#b53ff44a26fba3688eee92a048c7f2d4802e23bb"
@@ -9218,6 +9383,21 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.2:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
@@ -9236,16 +9416,16 @@ postcss-selector-parser@^6.0.4:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss-value-parser@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
-  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
-
 postcss@8.4.21, postcss@^8.4.19:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
@@ -9264,6 +9444,15 @@ postcss@^8.2.14, postcss@^8.3.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.23, postcss@^8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9480,6 +9669,13 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
 read-package-json-fast@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049"
@@ -9865,6 +10061,15 @@ resolve@^1.1.5, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.3.2:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
+resolve@^1.1.7, resolve@^1.22.2:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resp-modifier@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/resp-modifier/-/resp-modifier-6.0.2.tgz#b124de5c4fbafcba541f48ffa73970f4aa456b4f"
@@ -10942,6 +11147,19 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+sucrase@^3.32.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -11026,6 +11244,34 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tailwindcss@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
+  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.19.1"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -11116,6 +11362,20 @@ tfunk@^4.0.0:
     chalk "^1.1.3"
     dlv "^1.1.3"
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 through2@^2.0.0, through2@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -11280,6 +11540,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-loader@^5.3.0:
   version "5.4.5"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.4.5.tgz#a0c1f034b017a9344cef0961bfd97cc192492b8b"
@@ -11648,6 +11913,14 @@ update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.9:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-browserslist-db@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz#dbfc5a789caa26b1db8990796c2c8ebbce304824"
@@ -12284,6 +12557,11 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
+yaml@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2"
+  integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==
+
 yargs-parser@^13.1.1, yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"