From 834f09c7d121d6a6b16ae73134aec49e4b5fce8a Mon Sep 17 00:00:00 2001
From: Oleg Hasjanov <oleg.phenomenon@gmail.com>
Date: Wed, 20 Dec 2023 15:13:17 +0200
Subject: [PATCH] updated ui, updated new invoices path

---
 app/assets/builds/application.css             | 324 ++++++++++++------
 app/assets/builds/application.js              |  38 +-
 .../stylesheets/components/_account.scss      | 237 ++++++++-----
 .../stylesheets/components/_address.scss      |  59 +++-
 .../stylesheets/components/_footer.scss       | 108 ++++--
 .../stylesheets/components/_header.scss       |  51 ++-
 app/assets/stylesheets/components/_login.scss |   4 +
 app/assets/stylesheets/components/_modal.scss |  67 +++-
 app/assets/stylesheets/components/_table.scss |   3 +-
 app/assets/stylesheets/components/_tabs.scss  |   4 -
 .../stylesheets/components/_toolbar.scss      | 154 +++++++--
 app/assets/stylesheets/mixins/_btn.scss       |   6 +-
 app/assets/stylesheets/objects/_grid.scss     |  65 ++--
 .../stylesheets/utilities/_background.scss    |   2 +-
 .../stylesheets/utilities/_flexbox.scss       |  12 +-
 app/assets/stylesheets/utilities/_margin.scss |  16 +-
 .../common/header/component.html.erb          | 220 +++++++++---
 .../header/component_deprecated.html.erb      |  66 ++++
 .../header/notification/component.html.erb    |   4 +-
 .../pages/auction/filter/component.html.erb   |  12 +-
 .../outstanding_invoices/component.html.erb   |  20 +-
 ...l_cancelled_payable_invoices_controller.rb |  24 ++
 .../pay_all_issued_invoices_controller.rb     |  24 ++
 app/controllers/invoices_controller.rb        |   3 +-
 app/controllers/users_controller.rb           |   4 +-
 app/helpers/daily_summary_helper.rb           |   2 +
 .../controllers/daily_summary_controller.js   |  12 +
 app/javascript/controllers/index.js           |   3 +
 .../controllers/table/tab_controller.js       |  24 +-
 app/presenters/english_bids_presenter.rb      |   2 +-
 app/views/auctions/index.html.erb             |   8 +
 .../billing_profiles/_billing_info.html.erb   |   9 +-
 app/views/billing_profiles/_form.html.erb     |  31 +-
 app/views/offers/_offer.html.erb              |   2 +-
 app/views/users/_form.html.erb                |  16 +-
 app/views/users/_user_info.html.erb           |   6 +-
 config/locales/invoices.en.yml                |   1 +
 config/locales/invoices.et.yml                |   1 +
 config/routes.rb                              |   7 +
 .../daily_summary_controller_test.rb          |   8 +
 40 files changed, 1214 insertions(+), 445 deletions(-)
 create mode 100644 app/components/common/header/component_deprecated.html.erb
 create mode 100644 app/controllers/invoices/pay_all_cancelled_payable_invoices_controller.rb
 create mode 100644 app/controllers/invoices/pay_all_issued_invoices_controller.rb
 create mode 100644 app/helpers/daily_summary_helper.rb
 create mode 100644 app/javascript/controllers/daily_summary_controller.js
 create mode 100644 test/controllers/daily_summary_controller_test.rb

diff --git a/app/assets/builds/application.css b/app/assets/builds/application.css
index 27c9d453d..50eed18b5 100644
--- a/app/assets/builds/application.css
+++ b/app/assets/builds/application.css
@@ -1968,24 +1968,29 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
   }
 }
 
-.c-account .o-grid--two-col {
+.c-account .o-grid--two-col,
+.c-login .o-grid--two-col {
   grid-template-columns: repeat(1, 1fr);
 }
 @media all and (min-width: 992px) {
-  .c-account .o-grid--two-col {
+  .c-account .o-grid--two-col,
+  .c-login .o-grid--two-col {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-.c-account .o-grid--sep {
+.c-account .o-grid--sep,
+.c-login .o-grid--sep {
   row-gap: 1.25rem;
 }
 @media all and (min-width: 768px) {
-  .c-account .o-grid--sep {
+  .c-account .o-grid--sep,
+  .c-login .o-grid--sep {
     row-gap: 2.5rem;
   }
 }
 @media all and (min-width: 992px) {
-  .c-account .o-grid--sep {
+  .c-account .o-grid--sep,
+  .c-login .o-grid--sep {
     row-gap: 3.125rem;
     column-gap: 3.125rem;
   }
@@ -2660,13 +2665,11 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
 .c-toolbar {
   color: #FFFFFF;
   display: none;
-  min-width: 23.4375rem;
-  width: auto;
+  width: 23.4375rem;
+  max-width: 100%;
   border-radius: 0 0 0.5rem 0.5rem;
-  overflow: hidden;
   background-color: #FFFFFF;
   box-shadow: 0 0 48px rgba(0, 0, 0, 0.06);
-  background-color: #212224;
   position: absolute;
   top: 3.15rem;
   left: 0;
@@ -2681,6 +2684,7 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
     min-width: unset;
     display: block;
     padding-right: 0;
+    background-color: #212224;
   }
 }
 
@@ -2721,9 +2725,6 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
   }
 }
 .s-toolbar-nav > li a {
-  font-weight: 400;
-}
-.s-toolbar-nav > li a .active {
   font-weight: 800;
 }
 @media all and (min-width: 1120px) {
@@ -2736,6 +2737,7 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
   gap: 0.375rem;
   flex-wrap: wrap;
   align-items: center;
+  width: 100%;
 }
 .s-toolbar-nav li:nth-child(1) a:hover {
   background-color: #0085ca;
@@ -2835,14 +2837,16 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
 .s-toolbar-nav li.is-active .submenu li {
   position: relative;
 }
-.s-toolbar-nav li.is-active .submenu a, .s-toolbar-nav li.is-active .submenu button {
+.s-toolbar-nav li.is-active .submenu a,
+.s-toolbar-nav li.is-active .submenu button {
   text-transform: uppercase;
   font-weight: 500;
   background: transparent;
   border: none;
 }
 @media all and (min-width: 1120px) {
-  .s-toolbar-nav li.is-active .submenu a, .s-toolbar-nav li.is-active .submenu button {
+  .s-toolbar-nav li.is-active .submenu a,
+  .s-toolbar-nav li.is-active .submenu button {
     padding: 1.25rem 0;
   }
 }
@@ -2852,7 +2856,7 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
 .s-toolbar-nav .submenu {
   width: 100%;
   list-style: none;
-  padding: 0 0 0.5rem 1.5rem;
+  padding: 0 0 0 1.5rem;
   margin: 0;
   display: none;
 }
@@ -2870,6 +2874,7 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
 }
 .s-toolbar-nav > li:nth-child(2) {
   background: #48A23F;
+  box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.12);
 }
 @media all and (min-width: 1120px) {
   .s-toolbar-nav > li:nth-child(2) {
@@ -2981,77 +2986,136 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
   right: unset;
 }
 
-.c-toolbar__notice {
-  display: flex !important;
+.s-toolbar-nav .c-toolbar__notice-wrapper {
+  display: none;
+}
+@media all and (min-width: 1120px) {
+  .s-toolbar-nav .c-toolbar__notice-wrapper {
+    display: flex;
+  }
+}
+
+.c-header .c-toolbar__notice {
+  display: flex;
   gap: 0.5625rem;
-  color: #FFFFFF;
   align-items: center;
   white-space: nowrap;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0 1.5rem 0 0 !important;
 }
-.c-toolbar__notice span {
+.c-header .c-toolbar__notice span {
+  text-transform: capitalize;
   display: flex;
   gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #FFFFFF;
 }
-.c-toolbar__notice sup {
+.c-header .c-toolbar__notice sup {
   top: 0.65em;
 }
 @media all and (min-width: 1120px) {
-  .c-toolbar__notice {
+  .c-header .c-toolbar__notice {
     padding: 0 2rem 0 0 !important;
   }
 }
-.c-toolbar__notice:hover {
-  color: #212224 !important;
+.c-header .c-toolbar__notice:hover svg path {
+  fill: #E2E2E2;
 }
-.c-toolbar__notice:hover svg {
-  fill: #212224 !important;
+.c-header .c-toolbar__notice:hover span {
+  color: #E2E2E2;
 }
 
-.c-header {
-  background-color: #212224;
-  color: #FFFFFF;
+.c-toolbar__lang-socials {
+  box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.12);
+  background: #FFFFFF;
+  color: #212224;
+  border-radius: 0 0 0.5rem 0.5rem;
+  width: 100%;
+  padding: 1rem 1.5625rem 1.125rem 1rem;
   display: flex;
-  align-items: center;
-  z-index: 99;
-  position: relative;
-}
-
-.c-header__menu {
-  display: block;
+  justify-content: space-between;
 }
 @media all and (min-width: 1120px) {
-  .c-header__menu {
+  .c-toolbar__lang-socials {
     display: none;
   }
 }
+.c-toolbar__lang-socials .c-header__lang .c-dropdown__label__lang {
+  color: #212224;
+}
+.c-toolbar__lang-socials .c-header__lang svg {
+  fill: #212224;
+}
+.c-toolbar__lang-socials .c-header__lang .c-dropdown__list {
+  left: -0.5rem;
+  right: auto;
+}
 
-.c-header__lang {
+.c-header__tools {
+  display: flex;
+  align-items: center;
+  gap: 20px;
   margin-left: auto;
   margin-right: 1.25rem;
 }
 @media all and (min-width: 1120px) {
-  .c-header__lang {
+  .c-header__tools {
     margin-right: 2rem;
   }
 }
 @media all and (min-width: 1600px) {
-  .c-header__lang {
+  .c-header__tools {
     margin-left: 0;
     margin-right: 3.125rem;
   }
 }
+.c-header__tools .c-toolbar__notice {
+  display: flex;
+  text-decoration: none;
+}
+.c-header__tools .c-toolbar__notice span {
+  gap: 0;
+}
+@media all and (min-width: 1120px) {
+  .c-header__tools .c-toolbar__notice {
+    margin-right: 2rem;
+    display: none;
+  }
+}
+.c-header__tools .c-header__lang {
+  display: none;
+}
+@media all and (min-width: 1120px) {
+  .c-header__tools .c-header__lang {
+    display: block;
+  }
+}
+
+.c-header {
+  background-color: #212224;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  z-index: 99;
+  position: relative;
+}
+
+.c-header__menu {
+  display: block;
+  margin-right: 0.3125rem;
+}
+@media all and (min-width: 1120px) {
+  .c-header__menu {
+    display: none;
+  }
+}
 
 .c-header__toggle {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.5625rem;
-  background-color: linear-gradient(90deg, #48A23F 1.35%, #3EB54C 98.65%);
+  background-color: linear-gradient(90deg, #009DE1 1.35%, #0085CA 98.65%);
   color: #FFFFFF;
   border-radius: 0;
   border: none;
@@ -3074,30 +3138,16 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
 .c-header__user {
   display: flex;
   gap: 0.5625rem;
-  color: #212224;
+  color: #FFFFFF;
   align-items: center;
   white-space: nowrap;
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--Black, #212224);
-}
-@media all and (min-width: 1120px) {
-  .c-header__user {
-    color: #FFFFFF;
-  }
-}
-.c-header__user svg {
-  fill: #212224;
-}
-@media all and (min-width: 1120px) {
-  .c-header__user svg {
-    fill: #FFFFFF;
-  }
 }
 .c-header__user:hover {
-  color: #212224;
+  color: #E2E2E2;
   text-decoration: underline;
 }
 @media all and (min-width: 1120px) {
@@ -3105,13 +3155,8 @@ input:not([type=checkbox]):not([type=radio]).is-invalid + span, select.is-invali
     color: #E2E2E2;
   }
 }
-.c-header__user:hover svg {
-  fill: #212224;
-}
-@media all and (min-width: 1120px) {
-  .c-header__user:hover svg {
-    fill: #E2E2E2;
-  }
+.c-header__user:hover svg path {
+  fill: #E2E2E2;
 }
 
 .c-socials {
@@ -4463,7 +4508,7 @@ table .c-btn--icon {
 }
 
 .c-footer {
-  background: linear-gradient(90deg, #003D63 1.35%, #064F7C 98.65%);
+  background: linear-gradient(90deg, #003d63 1.35%, #064f7c 98.65%);
   margin-top: 4.375rem;
 }
 @media all and (min-width: 768px) {
@@ -4483,9 +4528,14 @@ table .c-btn--icon {
   gap: 2rem;
   position: relative;
 }
+@media all and (min-width: 768px) {
+  .c-footer__grid {
+    gap: 2.5rem;
+  }
+}
 @media all and (min-width: 1120px) {
   .c-footer__grid {
-    gap: 5.3125rem;
+    gap: 7rem;
     flex-wrap: nowrap;
   }
 }
@@ -4501,7 +4551,7 @@ table .c-btn--icon {
   padding: 1.25rem 1.125rem;
   transform-origin: bottom left;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: space-around;
   transform: translateY(-20px);
 }
 @media all and (min-width: 768px) {
@@ -4511,11 +4561,6 @@ table .c-btn--icon {
     position: absolute;
   }
 }
-@media all and (min-width: 992px) {
-  .c-footer__highlight {
-    top: -50%;
-  }
-}
 @media (min-width: 992px) and (max-width: 1044px) {
   .c-footer__highlight {
     top: -28%;
@@ -4557,22 +4602,24 @@ table .c-btn--icon {
 
 @media all and (min-width: 768px) {
   .c-footer__highlight__grid--row-t {
-    width: 45%;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
+    flex: 1;
+    align-items: flex-end;
   }
 }
 @media all and (min-width: 1120px) {
   .c-footer__highlight__grid--row-t {
     width: auto;
     flex-direction: column;
+    align-items: center;
   }
 }
 
 .c-footer__highlight__title {
   font-weight: 900;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
+  font-size: 1rem;
+  line-height: 1.25rem;
   text-align: left;
   color: #FFFFFF;
   margin: 0;
@@ -4583,23 +4630,27 @@ table .c-btn--icon {
   }
 }
 
-.c-footer__highlight__info, .c-footer__highlight__contact {
+.c-footer__highlight__info,
+.c-footer__highlight__contact {
   font-weight: 500;
-  font-size: 0.875rem;
+  font-size: 1rem;
   line-height: 1.375rem;
   text-align: left;
   color: #FFFFFF;
 }
 @media all and (min-width: 1120px) {
-  .c-footer__highlight__info, .c-footer__highlight__contact {
+  .c-footer__highlight__info,
+  .c-footer__highlight__contact {
     text-align: center;
   }
 }
-.c-footer__highlight__info a, .c-footer__highlight__contact a {
+.c-footer__highlight__info a,
+.c-footer__highlight__contact a {
   color: #FFFFFF;
   text-decoration: none;
 }
-.c-footer__highlight__info a:hover, .c-footer__highlight__contact a:hover {
+.c-footer__highlight__info a:hover,
+.c-footer__highlight__contact a:hover {
   color: #003D63;
 }
 
@@ -4616,23 +4667,25 @@ table .c-btn--icon {
 
 .c-footer__grid__row {
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
   position: relative;
-  gap: 2rem;
+  row-gap: 2rem;
   flex-grow: 1;
   padding-top: 0.625rem;
   padding-bottom: 2.375rem;
+  justify-content: space-between;
 }
 @media all and (min-width: 768px) {
   .c-footer__grid__row {
     padding-bottom: 0.625rem;
-    gap: 4.5rem;
+    gap: 1.875rem;
     padding-top: 4.5rem;
   }
 }
 @media all and (min-width: 1120px) {
   .c-footer__grid__row {
-    gap: 2rem;
+    row-gap: 1rem;
     padding-bottom: 0;
     flex-wrap: nowrap;
     justify-content: space-between;
@@ -4644,6 +4697,58 @@ table .c-btn--icon {
   color: #FFFFFF;
   line-height: 1.5rem;
 }
+.s-footer-col:nth-child(1) {
+  width: 100%;
+}
+@media all and (min-width: 768px) {
+  .s-footer-col:nth-child(1) {
+    width: 33.3333333333%;
+  }
+}
+@media all and (min-width: 1120px) {
+  .s-footer-col:nth-child(1) {
+    width: 25%;
+  }
+}
+.s-footer-col:nth-child(2) {
+  width: 100%;
+}
+@media all and (min-width: 768px) {
+  .s-footer-col:nth-child(2) {
+    width: 33.3333333333%;
+    flex: 1;
+  }
+}
+@media all and (min-width: 1120px) {
+  .s-footer-col:nth-child(2) {
+    width: 25%;
+    flex: unset;
+  }
+}
+.s-footer-col:nth-child(3) {
+  width: 100%;
+}
+@media all and (min-width: 768px) {
+  .s-footer-col:nth-child(3) {
+    padding-right: 0;
+    width: calc(33.3333333333% - 4rem);
+    flex: unset;
+  }
+}
+@media all and (min-width: 1120px) {
+  .s-footer-col:nth-child(3) {
+    width: 25%;
+  }
+}
+.s-footer-col:nth-child(4) {
+  width: 100%;
+}
+@media all and (min-width: 1120px) {
+  .s-footer-col:nth-child(4) {
+    width: 25%;
+    align-items: flex-start;
+  }
+}
 .s-footer-col p {
   color: #FFFFFF;
 }
@@ -4658,6 +4763,12 @@ table .c-btn--icon {
 }
 .s-footer-col .c-socials {
   gap: 0.5rem;
+  margin-bottom: 2.875rem;
+}
+@media all and (min-width: 1120px) {
+  .s-footer-col .c-socials {
+    display: flex;
+  }
 }
 .s-footer-col .c-socials a {
   width: 1.5rem;
@@ -4671,21 +4782,37 @@ table .c-btn--icon {
 
 .c-footer__sviiter {
   position: absolute;
-  bottom: 2.375rem;
+  bottom: 2.25rem;
   right: 0;
 }
-@media all and (min-width: 992px) {
+@media all and (min-width: 768px) {
+  .c-footer__sviiter {
+    bottom: 3.125rem;
+    right: 1rem;
+  }
+}
+@media all and (min-width: 1120px) {
+  .c-footer__sviiter {
+    bottom: 0.625rem;
+    right: 1rem;
+  }
+}
+@media all and (min-width: 1480px) {
   .c-footer__sviiter {
     bottom: 0.625rem;
+    right: 3rem;
   }
 }
-.c-footer__sviiter svg, .c-footer__sviiter svg path {
+.c-footer__sviiter svg,
+.c-footer__sviiter svg path {
   transition: 0.25s;
 }
-.c-footer__sviiter:hover svg, .c-footer__sviiter:hover svg path {
+.c-footer__sviiter:hover svg,
+.c-footer__sviiter:hover svg path {
   fill: #FFFFFF;
 }
-.c-footer__sviiter a:hover svg, .c-footer__sviiter a:hover svg path {
+.c-footer__sviiter a:hover svg,
+.c-footer__sviiter a:hover svg path {
   fill: #0085ca;
 }
 
@@ -5121,7 +5248,7 @@ table .c-btn--icon {
 }
 @media all and (min-width: 1120px) {
   .c-table__filters__more {
-    width: 24.5rem;
+    width: auto;
   }
 }
 
@@ -5836,6 +5963,9 @@ table .c-btn--icon {
 .c-login__checkbox-container {
   margin-top: 0.4375rem;
 }
+.c-login__checkbox-container .o-checkbox-text {
+  white-space: nowrap;
+}
 
 .c-login__links {
   flex-wrap: wrap;
@@ -5945,11 +6075,13 @@ table .c-btn--icon {
   padding: 0;
 }
 
-.c-account__input--editable input, .c-account__input--editable select {
+.c-account__input--editable input,
+.c-account__input--editable select {
   border-color: transparent;
   transition: border 0.5s;
 }
-.c-account__input--editable.is-editable input, .c-account__input--editable.is-editable select {
+.c-account__input--editable.is-editable input,
+.c-account__input--editable.is-editable select {
   border: 1px solid #e2e2e2;
 }
 
diff --git a/app/assets/builds/application.js b/app/assets/builds/application.js
index 4d7cb1d6b..3192a67a3 100644
--- a/app/assets/builds/application.js
+++ b/app/assets/builds/application.js
@@ -7538,6 +7538,12 @@
     }
   };
 
+  // ../../node_modules/@rails/request.js/src/verbs.js
+  async function get(url, options) {
+    const request = new FetchRequest2("get", url, options);
+    return request.perform();
+  }
+
   // controllers/form/checkbox_autosubmit_controller.js
   var checkbox_autosubmit_controller_default = class extends Controller {
     static targets = ["checkbox"];
@@ -7618,11 +7624,18 @@
 
   // controllers/table/tab_controller.js
   var tab_controller_default = class extends Controller {
-    static targets = ["tab", "content"];
+    static targets = ["tab", "content", "payablebtn"];
     static classes = ["active"];
     initialize() {
       this.showTab = this.showTab.bind(this);
     }
+    connect() {
+      console.log(this.payablebtnTargets);
+      if (this.payablebtnTargets.length > 0) {
+        this.payablebtnTargets[0].style.display = "block";
+        this.payablebtnTargets[1].style.display = "none";
+      }
+    }
     showTab(event2) {
       const index = event2.params.index;
       this.tabTargets.forEach((tab) => {
@@ -7633,6 +7646,18 @@
       });
       this.tabTargets[index].classList.add(this.activeClass);
       this.contentTargets[index].classList.add(this.activeClass);
+      if (this.payablebtnTargets.length > 0) {
+        if (index == 0) {
+          this.payablebtnTargets[0].style.display = "block";
+          this.payablebtnTargets[1].style.display = "none";
+        } else if (index == 1) {
+          this.payablebtnTargets[1].style.display = "block";
+          this.payablebtnTargets[0].style.display = "none";
+        } else {
+          this.payablebtnTargets[0].style.display = "none";
+          this.payablebtnTargets[1].style.display = "none";
+        }
+      }
     }
   };
 
@@ -8628,6 +8653,16 @@
     }
   };
 
+  // controllers/daily_summary_controller.js
+  var daily_summary_controller_default = class extends Controller {
+    updateDailtSummary(_event) {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        get("/profile/toggle_subscription");
+      }, 500);
+    }
+  };
+
   // controllers/index.js
   application.register("modals--offer-modal", offer_modal_controller_default);
   application.register("modals--modal", modal_controller_default);
@@ -8651,6 +8686,7 @@
   application.register("cookie-consent", cookie_consent_controller_default);
   application.register("google-analytics", google_analytics_controller_default);
   application.register("auction-timezone", auction_timezone_controller_default);
+  application.register("daily-summary", daily_summary_controller_default);
 })();
 /*! Bundled license information:
 
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index 34f051f60..09b15cc3b 100644
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -1,47 +1,54 @@
-.c-account__title-wrapper{
+.c-account__title-wrapper {
     flex-direction: column-reverse;
-    @include mq(tablet){
+
+    @include mq(tablet) {
         flex-direction: row;
     }
 }
 
-.c-account__title{
+.c-account__title {
     margin-top: 0;
     margin-bottom: rem(24px);
-    @include mq(tablet){
+
+    @include mq(tablet) {
         margin-bottom: rem(32px);
     }
 }
 
-.c-account--mainpage{
+.c-account--mainpage {
     .c-account_editicons {
-        &> svg:first-child{
+        &>svg:first-child {
             display: none;
         }
     }
 }
+
 .c-account_editicons {
     gap: 8px;
     height: rem(32px);
     margin-bottom: rem(24px);
-    &> svg{
+
+    &>svg {
         cursor: pointer;
         opacity: 1;
         transition: opacity .3s;
-        &:nth-last-child(-n + 2){
+
+        &:nth-last-child(-n + 2) {
             display: none;
         }
-        &:hover{
+
+        &:hover {
             opacity: .7;
         }
     }
 
-    &.is-editable{
-        >svg{
-            &:nth-last-child(-n + 2){
+    &.is-editable {
+        >svg {
+            &:nth-last-child(-n + 2) {
                 display: inline-flex;
             }
-            &:nth-child(-n + 2){
+
+            &:nth-child(-n + 2) {
                 display: none;
             }
         }
@@ -53,56 +60,71 @@
     gap: 0;
     max-width: 450px;
     justify-content: space-between;
-    @include mq(tablet){
+
+    @include mq(tablet) {
         column-gap: 15px;
         justify-content: flex-start;
     }
+
     .c-account__input {
         width: 100%;
         flex-shrink: 0;
-        @include mq(mobile){
+
+        @include mq(mobile) {
             width: 50%;
         }
-        @include mq(tablet){
+
+        @include mq(tablet) {
             width: rem(131px);
         }
-        &:last-child{
-            @include mq(tablet){
+
+        &:last-child {
+            @include mq(tablet) {
                 width: rem(165px);
             }
         }
     }
-    span{
+
+    span {
         font-weight: 500;
         font-size: rem(14px);
         line-height: rem(24px);
         padding: rem(12px 16px);
-        &:last-child{
+
+        &:last-child {
             padding-right: 0;
         }
     }
-    
-    .c-account__input--readonly{
-        label{
+
+    .c-account__input--readonly {
+        label {
             margin-bottom: rem(20px);
         }
-        input{
+
+        input {
             border: 0;
             padding: 0;
         }
     }
 }
-.c-account__input--editable{
-    input,select{
+
+.c-account__input--editable {
+
+    input,
+    select {
         border-color: transparent;
         transition: border .5s;
     }
-    &.is-editable{
-        input,select{
+
+    &.is-editable {
+
+        input,
+        select {
             border: 1px solid #e2e2e2;
         }
     }
 }
+
 .c-account__checkbox {
     gap: 16px;
 
@@ -110,16 +132,19 @@
         margin: 0;
     }
 }
+
 .c-account .c-account__checkbox label {
     margin: 0;
     margin-top: rem(5px);
 }
+
 .c-account__chekboxtitle {
     color: $black-color;
     font-size: rem(14px);
     font-weight: 500;
     line-height: rem(24px);
 }
+
 .c-acount__link {
     color: $primary-blue-color;
     font-size: rem(14px);
@@ -129,116 +154,144 @@
     margin-bottom: rem(30px);
     display: block;
 }
-.c-acount__buttons{
+
+.c-acount__buttons {
     gap: 5px;
-    @include mq(mobile){
+
+    @include mq(mobile) {
         gap: 10px;
     }
-    @include mq(tablet){
+
+    @include mq(tablet) {
         gap: 24px;
     }
 }
-.c-acount__button{
+
+.c-acount__button {
     font-size: rem(11px);
-    @include mq(mobile){
+
+    @include mq(mobile) {
         font-size: rem(14px);
     }
 }
-.c-acount__button--icon{
+
+.c-acount__button--icon {
     display: inline-flex;
     align-items: center;
     gap: 10px;
 }
+
 .c-account__label-explain {
     display: flex;
     justify-content: space-between;
+
     span {
         font-weight: 500;
-        &:first-child{
+
+        &:first-child {
             display: block;
-            @include mq(tablet){
+
+            @include mq(tablet) {
                 display: inline-block;
             }
         }
     }
-    & > span {
+
+    &>span {
         color: $grey-400-color;
         margin-right: rem(16px);
         display: none;
-        @include mq(tablet){
+
+        @include mq(tablet) {
             display: block;
         }
-        @include mq(laptop){
+
+        @include mq(laptop) {
             display: none;
         }
-        @include mq(menu){
+
+        @include mq(menu) {
             display: block;
         }
     }
-  }
-
-.c-account__input-explain{
-color: $grey-400-color;
-text-align: right;
-font-size: rem(14px);
-font-weight: 500;
-line-height: rem(24px);
-display: block;
-@include mq(tablet){
-    display: none;
 }
-@include mq(laptop){
+
+.c-account__input-explain {
+    color: $grey-400-color;
+    text-align: right;
+    font-size: rem(14px);
+    font-weight: 500;
+    line-height: rem(24px);
     display: block;
+
+    @include mq(tablet) {
+        display: none;
+    }
+
+    @include mq(laptop) {
+        display: block;
+    }
+
+    @include mq(menu) {
+        display: none;
+    }
 }
-@include mq(menu){
-    display: none;
-}
-}
+
 .c-account__title--password {
     margin-bottom: rem(24px);
+
     @include mq(tablet) {
-      margin-bottom: rem(32px);
+        margin-bottom: rem(32px);
     }
 }
+
 .o-checkbox-text {
-margin-left: rem(8px);
-@include mq(tablet){
-    margin-left: rem(16px);
-}
-white-space: normal;
-&:first-child {
-    margin-bottom: rem(24px);
-    @include mq(tablet){
-    margin-bottom: rem(32px);
-}
-}
-a {
-    color: $primary-blue-color;
-    text-decoration: underline;
-}
-}
+    margin-left: rem(8px);
+
+    @include mq(tablet) {
+        margin-left: rem(16px);
+    }
 
+    white-space: normal;
 
-.c-account__title--confirm{
-margin-bottom: rem(8px);
-}
-.c-account__subtitle{
-font-size: rem(14px);
-font-weight: 500;
-line-height: rem(24px);
-margin: rem(0 0 16px 0);
-@include mq(tablet){
-    margin: rem(0 0 24px 0);
-}
-@include mq(laptop){
-    margin: rem(0 0 32px 0);
-}
+    &:first-child {
+        margin-bottom: rem(24px);
+
+        @include mq(tablet) {
+            margin-bottom: rem(32px);
+        }
+    }
+
+    a {
+        color: $primary-blue-color;
+        text-decoration: underline;
+    }
 }
-.c-account__btns{
-justify-content: center;
-@include mq(laptop){
-    justify-content: flex-start;
+
+
+.c-account__title--confirm {
+    margin-bottom: rem(8px);
 }
+
+.c-account__subtitle {
+    font-size: rem(14px);
+    font-weight: 500;
+    line-height: rem(24px);
+    margin: rem(0 0 16px 0);
+
+    @include mq(tablet) {
+        margin: rem(0 0 24px 0);
+    }
+
+    @include mq(laptop) {
+        margin: rem(0 0 32px 0);
+    }
 }
 
-  
\ No newline at end of file
+.c-account__btns {
+    justify-content: center;
+
+    @include mq(laptop) {
+        justify-content: flex-start;
+    }
+}
diff --git a/app/assets/stylesheets/components/_address.scss b/app/assets/stylesheets/components/_address.scss
index 16317b7ae..4450311a0 100644
--- a/app/assets/stylesheets/components/_address.scss
+++ b/app/assets/stylesheets/components/_address.scss
@@ -1,87 +1,108 @@
-.c-account--adresses{
+.c-account--adresses {
     .c-account_editicons {
         width: 100%;
-        @include mq(laptop){
+
+        @include mq(laptop) {
             width: unset;
         }
     }
-    input{
+
+    input {
         max-width: 550px;
     }
-    .c-account__input-title{
-        input{
+
+    .c-account__input-title {
+        input {
             border-radius: 0;
         }
-        &.is-editable{
-            input{
+
+        &.is-editable {
+            input {
                 border-color: transparent;
                 border-bottom-color: $grey-200-color;
             }
         }
     }
-    .c-account__input-wrapper{
+
+    .c-account__input-wrapper {
         max-width: 100%;
         flex-wrap: wrap;
         column-gap: 8px;
-        @include mq(tablet){
+
+        @include mq(tablet) {
             column-gap: 16px;
         }
-        .c-account__input{
-            input{
+
+        .c-account__input {
+            input {
                 width: 100%;
             }
+
             select {
                 cursor: pointer;
                 min-width: 62px;
                 width: fit-content;
                 background-position: right 0.6rem center;
             }
-            &:nth-child(1){
+
+            &:nth-child(1) {
                 width: 100%;
             }
+
             &:nth-child(2) {
                 width: 88px;
             }
+
             &:nth-child(3) {
                 width: 88px;
             }
+
             &:nth-child(4) {
                 width: fit-content;
             }
-            @include mq(tablet){
-                &:nth-child(1){
+
+            @include mq(tablet) {
+                &:nth-child(1) {
                     width: 200px;
                 }
+
                 &:nth-child(2) {
                     width: 130px;
                 }
+
                 &:nth-child(3) {
                     width: 108px;
                 }
             }
-            @include mq(desktop){
-                &:nth-child(1){
+
+            @include mq(desktop) {
+                &:nth-child(1) {
                     width: 100%;
                 }
+
                 &:nth-child(2) {
                     width: 88px;
                 }
+
                 &:nth-child(3) {
                     width: 88px;
                 }
             }
-            @include mq(menu){
-                &:nth-child(1){
+
+            @include mq(menu) {
+                &:nth-child(1) {
                     width: 200px;
                 }
+
                 &:nth-child(2) {
                     width: 130px;
                 }
+
                 &:nth-child(3) {
                     width: 108px;
                 }
             }
         }
-            
+
     }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_footer.scss b/app/assets/stylesheets/components/_footer.scss
index f96cad010..aa82f38a1 100644
--- a/app/assets/stylesheets/components/_footer.scss
+++ b/app/assets/stylesheets/components/_footer.scss
@@ -1,12 +1,11 @@
 .c-footer {
-  background: linear-gradient(90deg, #003D63 1.35%, #064F7C 98.65%);
+  background: linear-gradient(90deg, #003d63 1.35%, #064f7c 98.65%);
   margin-top: rem(70px);
 
   @include mq(tablet) {
     margin-top: rem(185px);
   }
 
-
   @include mq(desktop) {
     margin-top: rem(105px);
   }
@@ -17,9 +16,11 @@
   flex-wrap: wrap;
   gap: rem(32px);
   position: relative;
-
+  @include mq(tablet) {
+    gap: rem(40px);
+  }
   @include mq(desktop) {
-    gap: rem(85px);
+    gap: rem(112px);
     flex-wrap: nowrap;
   }
 }
@@ -35,7 +36,7 @@
   padding: rem(20px 18px);
   transform-origin: bottom left;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: space-around;
   transform: translateY(-20px);
 
   @include mq(tablet) {
@@ -44,10 +45,6 @@
     position: absolute;
   }
 
-  @include mq(laptop) {
-    top: -50%;
-  }
-
   @media (min-width: 992px) and (max-width: 1044px) {
     top: -28%;
   }
@@ -84,21 +81,23 @@
 
 .c-footer__highlight__grid--row-t {
   @include mq(tablet) {
-    width: 45%;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
+    flex: 1;
+    align-items: flex-end;
   }
 
   @include mq(desktop) {
     width: auto;
     flex-direction: column;
+    align-items: center;
   }
 }
 
 .c-footer__highlight__title {
   font-weight: 900;
-  font-size: rem(14px);
-  line-height: rem(18px);
+  font-size: rem(16px);
+  line-height: rem(20px);
   text-align: left;
   color: $white-color;
   margin: 0;
@@ -108,9 +107,10 @@
   }
 }
 
-.c-footer__highlight__info, .c-footer__highlight__contact {
+.c-footer__highlight__info,
+.c-footer__highlight__contact {
   font-weight: 500;
-  font-size: rem(14px);
+  font-size: rem(16px);
   line-height: rem(22px);
   text-align: left;
   color: $white-color;
@@ -143,21 +143,23 @@
 
 .c-footer__grid__row {
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
   position: relative;
-  gap: rem(32px);
+  row-gap: rem(32px);
   flex-grow: 1;
   padding-top: rem(10px);
   padding-bottom: rem(38px);
+  justify-content: space-between;
 
   @include mq(tablet) {
     padding-bottom: rem(10px);
-    gap: rem(72px);
+    gap: rem(30px);
     padding-top: rem(72px);
   }
 
   @include mq(desktop) {
-    gap: rem(32px);
+    row-gap: rem(16px);
     padding-bottom: 0;
     flex-wrap: nowrap;
     justify-content: space-between;
@@ -169,6 +171,47 @@
   color: $white-color;
   line-height: rem(24px);
 
+  &:nth-child(1) {
+    width: 100%;
+    @include mq(tablet) {
+      width: calc(100% / 3);
+    }
+    @include mq(desktop) {
+      width: calc(100% / 4);
+    }
+  }
+  &:nth-child(2) {
+    width: 100%;
+    @include mq(tablet) {
+      width: calc(100% / 3);
+      flex: 1;
+    }
+    @include mq(desktop) {
+      width: calc(100% / 4);
+      flex: unset;
+    }
+  }
+  &:nth-child(3) {
+    width: 100%;
+    @include mq(tablet) {
+      padding-right: 0;
+      width: calc(100% / 3 - 4rem);
+      flex: unset;
+    }
+    @include mq(desktop) {
+      width: calc(100% / 4);
+    }
+  }
+  &:nth-child(4) {
+    width: 100%;
+
+    @include mq(desktop) {
+      width: calc(100% / 4);
+      align-items: flex-start;
+    }
+    
+  }
+
   p {
     color: $white-color;
   }
@@ -186,6 +229,10 @@
 
   .c-socials {
     gap: rem(8px);
+    margin-bottom: rem(46px);
+    @include mq(desktop) {
+      display: flex;
+    }
 
     a {
       width: rem(24px);
@@ -202,26 +249,37 @@
 
 .c-footer__sviiter {
   position: absolute;
-  bottom: rem(38px);
+  bottom: rem(36px);
   right: 0;
 
-  @include mq(laptop) {
+  @include mq(tablet) {
+    bottom: rem(50px);
+    right: rem(16px);
+  }
+  @include mq(desktop) {
     bottom: rem(10px);
+    right: 1rem;
   }
-
-  svg, svg path {
+  @include mq(menu) {
+    bottom: rem(10px);
+    right: 3rem;
+  }
+  svg,
+  svg path {
     transition: $transition;
   }
 
   &:hover {
-    svg, svg path {
+    svg,
+    svg path {
       fill: $white-color;
     }
   }
 
   a:hover {
-    svg, svg path {
+    svg,
+    svg path {
       fill: $primary-blue-color;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_header.scss b/app/assets/stylesheets/components/_header.scss
index 80ab86aed..4696fe75d 100644
--- a/app/assets/stylesheets/components/_header.scss
+++ b/app/assets/stylesheets/components/_header.scss
@@ -9,31 +9,32 @@
 
 .c-header__menu {
   display: block;
+  margin-right: rem(5px);
 
   @include mq(desktop) {
     display: none;
   }
 }
 
-.c-header__lang {
-  margin-left: auto;
-  margin-right: rem(20px);
-  @include mq(desktop) {
-    margin-right: rem(32px);
-  }
+// .c-header__lang {
+//   margin-left: auto;
+//   margin-right: rem(20px);
+//   @include mq(desktop) {
+//     margin-right: rem(32px);
+//   }
 
-  @include mq(ultra) {
-    margin-left: 0;
-    margin-right: rem(50px);
-  }
-}
+//   @include mq(ultra) {
+//     margin-left: 0;
+//     margin-right: rem(50px);
+//   }
+// }
 
 .c-header__toggle {
   display: flex;
   align-items: center;
   gap: rem(16px);
   padding: rem(16px 25px);
-  background-color: $gradient-green;
+  background-color: $gradient-blue;
   color: $white-color;
   border-radius: 0;
   border: none;
@@ -55,34 +56,22 @@
 .c-header__user {
   display: flex;
   gap: rem(9px);
-  color: $black-color;
+  color: $white-color;
   align-items: center;
   white-space: nowrap;
   text-decoration: none;
   font-weight: 500;
   font-size: rem(14px);
   line-height: rem(20px);
-  color: var(--Black, #212224);
-  @include mq(desktop){
-    color: $white-color;
-  }
-  svg {
-    fill: $black-color;
-    @include mq(desktop){
-      fill: $white-color;
-    }
-  }
+
   &:hover {
-    color: $black-color;
+    color: $grey-200-color;
     text-decoration: underline;
-    @include mq(desktop){
+    @include mq(desktop) {
       color: $grey-200-color;
     }
-    svg {
-      fill: $black-color;
-      @include mq(desktop){
-        fill: $grey-200-color;
-      }
+    svg path {
+      fill: $grey-200-color;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_login.scss b/app/assets/stylesheets/components/_login.scss
index eea5550be..592e4ce44 100644
--- a/app/assets/stylesheets/components/_login.scss
+++ b/app/assets/stylesheets/components/_login.scss
@@ -45,6 +45,10 @@
 }
 .c-login__checkbox-container{
     margin-top: rem(7px);
+
+    .o-checkbox-text{
+        white-space: nowrap;
+    }
 }
 .c-login__links {
     flex-wrap: wrap;
diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss
index 869ba7b1c..d69fed945 100644
--- a/app/assets/stylesheets/components/_modal.scss
+++ b/app/assets/stylesheets/components/_modal.scss
@@ -31,20 +31,24 @@
   scroll-behavior: smooth;
   scrollbar-width: thin;
   scrollbar-color: $grey-400-color $grey-100-color;
+
   /* width */
   ::-webkit-scrollbar {
     width: 20px;
     border-radius: 12px;
   }
+
   /* Track */
   ::-webkit-scrollbar-track {
     background: $grey-100-color;
     border-radius: rem(20px);
   }
+
   /* Handle */
   ::-webkit-scrollbar-thumb {
     background: $grey-400-color;
   }
+
   max-height: calc(98vh - 2.5rem);
 
   @include mq(tablet) {
@@ -159,20 +163,25 @@
     gap: rem(0 40px);
   }
 }
-.c-modal__grid--gap{
-  &:nth-child(-n + 2){
+
+.c-modal__grid--gap {
+  &:nth-child(-n + 2) {
     gap: rem(12px);
-    @include mq(tablet){
+
+    @include mq(tablet) {
       gap: rem(20px);
     }
+
     @include mq(laptop) {
       gap: rem(30px);
     }
+
     @include mq(desktop) {
       gap: rem(40px);
     }
   }
 }
+
 .c-modal__main {
   padding: rem(40px 0);
 }
@@ -205,41 +214,52 @@
     padding: rem(24px);
     width: calc(50% - 1.25rem);
   }
-  h3{
+
+  h3 {
     line-height: 30px;
   }
 }
-.c-modal__main__info__wrapper{
+
+.c-modal__main__info__wrapper {
   height: 100%;
   padding: rem(24px 0 0 0);
+
   @include mq(desktop) {
     padding: rem(24px 6px 0 0);
   }
 }
+
 .c-modal__main__info--black {
   background-color: $black-color;
   color: $white-color;
 }
+
 .c-modal__main__info--orange {
   background: $gradient-orange-secondary;
   color: $white-color;
 }
-.c-modal__main__info--white{
+
+.c-modal__main__info--white {
   background-color: $white-color;
   padding: 0;
-  span{
+
+  span {
     text-align: left;
   }
 }
-.c-modal__main__info--wide{
+
+.c-modal__main__info--wide {
   width: 100%;
-  @include mq(tablet){
-    width:calc(50% - .75rem);
+
+  @include mq(tablet) {
+    width: calc(50% - .75rem);
   }
+
   @include mq(laptop) {
     width: calc(50% - 0.9375rem);
   }
-  @include mq(desktop){
+
+  @include mq(desktop) {
     width: calc(50% - 1.25rem);
   }
 }
@@ -320,6 +340,7 @@
   line-height: rem(14px);
   text-decoration: underline;
   color: $primary-blue-color;
+
   &:hover {
     color: $black-color;
   }
@@ -361,6 +382,7 @@
     padding: rem(8px 0);
   }
 }
+
 .c-modal.c-modal--bill {
   .c-modal__grid {
     gap: rem(30px);
@@ -377,12 +399,15 @@
       gap: rem(0 40px);
     }
   }
+
   .c-modal__main {
     padding: rem(30px 0 50px 0);
+
     @include mq(tablet) {
       padding: rem(40px 0);
     }
   }
+
   .c-modal__scroll__content {
     padding: rem(40px 20px 30px 20px);
 
@@ -390,34 +415,43 @@
       padding: rem(40px);
     }
   }
+
   .c-modal__header__title {
     color: $grey-400-color;
   }
+
   .c-modal__text-title {
     margin-bottom: 20px;
     padding-left: 0;
   }
+
   .c-modal__text {
     color: $black-color;
     font-size: rem(14px);
     font-weight: 500;
     line-height: rem(24px);
   }
+
   .c-modal__extrainfo {
     gap: 70px;
   }
+
   td {
     word-break: break-all;
+
     strong {
       word-break: break-all;
     }
   }
+
   thead {
     th {
       background-color: $grey-400-color;
+
       &:first-child {
         padding: 0;
         font-size: 0;
+
         @include mq(tablet) {
           padding: rem(8px 16px);
           font-size: 14px;
@@ -425,25 +459,31 @@
       }
     }
   }
+
   tbody {
     tr {
       transition: background 0.3s;
+
       td {
         transition: font-weight 0.3s;
+
         &:first-child {
           padding: 0;
           font-size: 0;
+
           @include mq(tablet) {
             padding: rem(8px 16px);
             font-size: 14px;
           }
         }
       }
+
       &:hover {
         background-color: $grey-100-color;
       }
     }
   }
+
   tfoot {
     td {
       background-color: $black-color;
@@ -452,12 +492,15 @@
       border: 0;
     }
   }
+
   .c-modal__footer {
     margin-bottom: 20px;
+
     .c-btn {
       font-size: rem(14px);
     }
   }
+
   .c-modal__col {
     width: 100%;
 
@@ -489,4 +532,4 @@
   .c-modal__header {
     padding-bottom: rem(10px);
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
index 1b7290190..5e1688a53 100644
--- a/app/assets/stylesheets/components/_table.scss
+++ b/app/assets/stylesheets/components/_table.scss
@@ -153,7 +153,8 @@
   }
 
   @include mq(desktop) {
-    width: rem(392px);
+    // width: rem(392px);
+    width: auto;
   }
 }
 
diff --git a/app/assets/stylesheets/components/_tabs.scss b/app/assets/stylesheets/components/_tabs.scss
index 1ffc8d567..2cec36566 100644
--- a/app/assets/stylesheets/components/_tabs.scss
+++ b/app/assets/stylesheets/components/_tabs.scss
@@ -84,10 +84,6 @@
   align-self: center;
 }
 
-.c-tabs__content {
-
-}
-
 .c-tabs__content__tab {
   display: none;
 
diff --git a/app/assets/stylesheets/components/_toolbar.scss b/app/assets/stylesheets/components/_toolbar.scss
index ad209ad25..4a4cac207 100644
--- a/app/assets/stylesheets/components/_toolbar.scss
+++ b/app/assets/stylesheets/components/_toolbar.scss
@@ -1,12 +1,11 @@
 .c-toolbar {
   color: $white-color;
   display: none;
-  min-width: rem(375px);
-  width: auto;
+  width: rem(375px);
+  max-width: 100%;
   border-radius: rem(0 0 8px 8px);
-  overflow: hidden;
+  // overflow: hidden;
   @include box-shadow-light;
-  background-color: $black-color;
   position: absolute;
   top: rem(50.4px);
   left: 0;
@@ -20,6 +19,7 @@
     min-width: unset;
     display: block;
     padding-right: 0;
+    background-color: $black-color;
   }
 }
 
@@ -56,12 +56,8 @@
     flex-direction: row;
   }
 
-  & > li a {
-    font-weight: 400;
-
-    .active {
-      font-weight: 800;
-    }
+  &>li a {
+    font-weight: 800;
 
     @include mq(desktop) {
       font-weight: 500;
@@ -73,25 +69,31 @@
     gap: rem(6px);
     flex-wrap: wrap;
     align-items: center;
+    width: 100%;
 
     &:nth-child(1) a:hover {
       background-color: $primary-blue-color;
       color: $white-color;
     }
+
     &:nth-child(2) a:hover {
       background-color: $primary-green-color;
       color: $white-color;
     }
+
     &:nth-child(3) a:hover {
       background-color: $primary-orange-color;
       color: $white-color;
     }
+
     &:nth-child(4) a:hover {
       background-color: $secondary-blue-color;
       color: $white-color;
     }
-    &:nth-child(n+5) a:hover {
+
+    &:nth-child(n + 5) a:hover {
       color: $white-color;
+
       @include mq(desktop) {
         background-color: #000000;
       }
@@ -115,10 +117,9 @@
     white-space: nowrap;
 
     &:hover {
-
       @include mq(desktop) {
-      color: $primary-blue-color;
-    }
+        color: $primary-blue-color;
+      }
     }
 
     @include mq(desktop) {
@@ -128,7 +129,7 @@
   }
 
   li.is-active {
-    & > a {
+    &>a {
       @include mq(desktop) {
         box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
       }
@@ -160,6 +161,7 @@
 
     .submenu {
       display: block;
+
       @include mq(desktop) {
         background-color: $primary-blue-color;
         display: flex;
@@ -179,7 +181,8 @@
       }
     }
 
-    .submenu a, .submenu button {
+    .submenu a,
+    .submenu button {
       text-transform: uppercase;
       font-weight: 500;
       background: transparent;
@@ -198,7 +201,7 @@
   .submenu {
     width: 100%;
     list-style: none;
-    padding: rem(0 0 8px 24px);
+    padding: rem(0 0 0 24px);
     margin: 0;
     display: none;
 
@@ -208,7 +211,7 @@
     }
   }
 
-  & > li {
+  &>li {
     padding: rem(16px 0);
 
     @include mq(desktop) {
@@ -217,11 +220,13 @@
 
     &:nth-child(2) {
       background: $primary-green-color;
+      box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.12);
 
       @include mq(desktop) {
         background: transparent;
       }
     }
+
     &:nth-child(3) {
       background: $primary-orange-color;
 
@@ -229,6 +234,7 @@
         background: transparent;
       }
     }
+
     &:nth-child(4) {
       background: $secondary-blue-color;
 
@@ -236,6 +242,7 @@
         background: transparent;
       }
     }
+
     &:nth-child(5) {
       background: $black-color;
 
@@ -313,7 +320,6 @@
   display: flex;
   justify-content: space-between;
 
-
   @include mq(desktop) {
     margin-right: 0;
     width: auto;
@@ -332,21 +338,28 @@
   }
 }
 
-.c-toolbar__notice {
-  display: flex !important;
+.s-toolbar-nav .c-toolbar__notice-wrapper {
+  display: none;
+
+  @include mq(desktop) {
+    display: flex;
+  }
+}
+
+.c-header .c-toolbar__notice {
+  display: flex;
   gap: rem(9px);
-  color: $white-color;
   align-items: center;
   white-space: nowrap;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: rem(14px);
-  line-height: rem(20px);
-  padding: rem(0 24px 0 0) !important;
 
   span {
+    text-transform: capitalize;
     display: flex;
     gap: rem(4px);
+    font-size: rem(14px);
+    font-weight: 500;
+    line-height: rem(20px);
+    color: $white-color;
   }
 
   sup {
@@ -358,10 +371,93 @@
   }
 
   &:hover {
-    color: $black-color !important;
+    svg path {
+      fill: $grey-200-color;
+    }
+
+    span {
+      color: $grey-200-color;
+    }
+  }
+}
+
+.c-toolbar__lang-socials {
+  box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.12);
+  background: $white-color;
+  color: $black-color;
+  border-radius: 0 0 0.5rem 0.5rem;
+  width: 100%;
+  padding: rem(16px 25px 18px 16px);
+  display: flex;
+  justify-content: space-between;
+
+  @include mq(desktop) {
+    display: none;
+  }
+
+  .c-header__lang {
+    .c-dropdown__label__lang {
+      color: $black-color;
+    }
 
     svg {
-      fill: $black-color !important;
+      fill: $black-color;
+    }
+
+    .c-dropdown__list {
+      left: -0.5rem;
+      right: auto;
+    }
+  }
+}
+
+// .c-header__lang {
+//   margin-left: auto;
+//   margin-right: rem(20px);
+//   @include mq(desktop) {
+//     margin-right: rem(32px);
+//   }
+
+//   @include mq(ultra) {
+//     margin-left: 0;
+//     margin-right: rem(50px);
+//   }
+// }
+.c-header__tools {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-left: auto;
+  margin-right: rem(20px);
+
+  @include mq(desktop) {
+    margin-right: rem(32px);
+  }
+
+  @include mq(ultra) {
+    margin-left: 0;
+    margin-right: rem(50px);
+  }
+
+  .c-toolbar__notice {
+    display: flex;
+    text-decoration: none;
+
+    span {
+      gap: 0;
+    }
+
+    @include mq(desktop) {
+      margin-right: rem(32px);
+      display: none;
+    }
+  }
+
+  .c-header__lang {
+    display: none;
+
+    @include mq(desktop) {
+      display: block;
     }
   }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/mixins/_btn.scss b/app/assets/stylesheets/mixins/_btn.scss
index 6309c0ca8..1bb7bc472 100644
--- a/app/assets/stylesheets/mixins/_btn.scss
+++ b/app/assets/stylesheets/mixins/_btn.scss
@@ -45,10 +45,11 @@
   @include btn;
   background: $secondary-blue-color;
   border: 1px solid $secondary-blue-color;
+
   &:hover {
     background: $white-color;
     color: $secondary-blue-color;
-    
+
   }
 }
 
@@ -61,6 +62,7 @@
     color: $black-color;
   }
 }
+
 @mixin btn-white {
   @include btn;
   background: $white-color;
@@ -93,4 +95,4 @@
   &:hover {
     background: $black-color;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss
index a7b221452..144661d77 100644
--- a/app/assets/stylesheets/objects/_grid.scss
+++ b/app/assets/stylesheets/objects/_grid.scss
@@ -25,11 +25,13 @@
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
 .o-grid--two-col-laptop {
   @include mq(laptop) {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
 .o-grid--two-col-desktop {
   @include mq(desktop) {
     grid-template-columns: repeat(2, 1fr);
@@ -45,42 +47,55 @@
 .o-grid--sep {
   row-gap: rem(48px);
 }
-.o-grid--wishlist{
+
+.o-grid--wishlist {
   row-gap: rem(24px);
-  @include mq(tablet){
-      row-gap: rem(40px);
+
+  @include mq(tablet) {
+    row-gap: rem(40px);
   }
-  @include mq(laptop){
-      row-gap: 0;
+
+  @include mq(laptop) {
+    row-gap: 0;
   }
 }
-.o-grid--auction{
+
+.o-grid--auction {
   column-gap: rem(24px);
-  @include mq(tablet){
-      column-gap: rem(50px);
+
+  @include mq(tablet) {
+    column-gap: rem(50px);
   }
 }
-.o-grid--auction-cards{
+
+.o-grid--auction-cards {
   column-gap: rem(16px);
-  @include mq(laptop){
-      column-gap: rem(48px);
+
+  @include mq(laptop) {
+    column-gap: rem(48px);
   }
 }
-.c-account {
+
+.c-account,
+.c-login {
   .o-grid--two-col {
-      grid-template-columns: repeat(1,1fr);
-      @include mq(laptop){
-          grid-template-columns: repeat(2,1fr);
-      }
+    grid-template-columns: repeat(1, 1fr);
+
+    @include mq(laptop) {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
+
   .o-grid--sep {
-      row-gap: rem(20px);
-      @include mq(tablet){
-          row-gap: rem(40px);
-      }
-      @include mq(laptop){
-          row-gap: rem(50px);
-          column-gap: rem(50px);
-      }
+    row-gap: rem(20px);
+
+    @include mq(tablet) {
+      row-gap: rem(40px);
+    }
+
+    @include mq(laptop) {
+      row-gap: rem(50px);
+      column-gap: rem(50px);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/utilities/_background.scss b/app/assets/stylesheets/utilities/_background.scss
index fefad96a4..b426cbc83 100644
--- a/app/assets/stylesheets/utilities/_background.scss
+++ b/app/assets/stylesheets/utilities/_background.scss
@@ -8,4 +8,4 @@
 
 .u-bg-silver-gradient {
   background: linear-gradient(90deg, #EEEEF0 0%, #FFFFFF 24.48%, #EEEEF0 51.56%, #FFFFFF 77.08%, #EEEEF0 100%);
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/utilities/_flexbox.scss b/app/assets/stylesheets/utilities/_flexbox.scss
index b8f35588e..e9a7e7d9c 100644
--- a/app/assets/stylesheets/utilities/_flexbox.scss
+++ b/app/assets/stylesheets/utilities/_flexbox.scss
@@ -1,7 +1,8 @@
-.u-flex{
+.u-flex {
   display: flex;
 }
-.u-flex-col{
+
+.u-flex-col {
   flex-direction: column;
 }
 
@@ -18,12 +19,15 @@
 .u-align-center {
   align-items: center;
 }
+
 .u-align-start {
   align-items: flex-start;
 }
-.u-align-end{
+
+.u-align-end {
   align-items: flex-end;
 }
+
 .u-content-center {
   justify-content: center;
 }
@@ -31,9 +35,11 @@
 .u-content-sp {
   justify-content: space-between;
 }
+
 .u-content-start {
   justify-content: flex-start;
 }
+
 .u-content-end {
   justify-content: flex-end;
 }
diff --git a/app/assets/stylesheets/utilities/_margin.scss b/app/assets/stylesheets/utilities/_margin.scss
index f16b2e7d0..980eabbce 100644
--- a/app/assets/stylesheets/utilities/_margin.scss
+++ b/app/assets/stylesheets/utilities/_margin.scss
@@ -1,6 +1,7 @@
 .u-mt-0 {
   margin-top: rem(0);
 }
+
 .u-mt-24 {
   margin-top: rem(24px);
 }
@@ -17,6 +18,7 @@
 .u-mt-48 {
   margin-top: rem(48px);
 }
+
 .u-mt-60 {
   margin-top: rem(60px);
 }
@@ -31,6 +33,7 @@
     margin-top: rem(40px);
   }
 }
+
 .u-mb-60 {
   margin-bottom: rem(60px);
 }
@@ -38,26 +41,33 @@
 .u-mb-48 {
   margin-bottom: rem(48px);
 }
+
 .u-mb-40 {
   margin-bottom: rem(40px);
 }
+
 .u-mb-40-l {
-  @include mq(tablet){
+  @include mq(tablet) {
     margin-bottom: rem(40px);
   }
 }
+
 .u-mb-30-48 {
   margin-bottom: rem(30px);
-  @include mq(tablet){
+
+  @include mq(tablet) {
     margin-bottom: rem(48px);
   }
 }
+
 .u-mb-36 {
   margin-bottom: rem(36px);
 }
+
 .u-mb-30 {
   margin-bottom: rem(30px);
 }
+
 .u-mb-20 {
   margin-bottom: rem(20px);
 }
@@ -84,4 +94,4 @@
 
 .u-ml-4 {
   margin-left: rem(4px);
-}
\ No newline at end of file
+}
diff --git a/app/components/common/header/component.html.erb b/app/components/common/header/component.html.erb
index bf844b89e..52525fe0e 100644
--- a/app/components/common/header/component.html.erb
+++ b/app/components/common/header/component.html.erb
@@ -1,42 +1,159 @@
     <header class="c-header" data-controller='hamburger' data-hamburger-open-class='is-active'>
-      <div class="c-header__menu">
-        <button class="c-header__toggle u-bg-green-gradient js-nav-toggle hamburger hamburger--collapse" data-action='hamburger#toggle'>
-          <span class="hamburger-box">
-            <span class="hamburger-inner"></span>
-          </span>
-          <span><%= t('common.header.auction_portal') %></span>
-        </button>
-      </div>
-      <div class="c-toolbar js-toolbar" data-hamburger-target='menu'>
-        <div class="c-toolbar__grid">
-          <div class="c-toolbar__nav">
-            <ul class="s-toolbar-nav">
-              <li>
-                <a href="https://internet.ee"><%= t('common.open_portal') %></a>
-              </li>
+        <div class="c-header__menu">
+            <button class="c-header__toggle u-bg-green-gradient js-nav-toggle hamburger hamburger--collapse" data-action='hamburger#toggle'>
+                <span class="hamburger-box">
+                    <span class="hamburger-inner"></span>
+                </span>
+                <span><%= t('common.header.auction_portal') %></span>
+            </button>
+        </div>
+        <div class="c-toolbar js-toolbar" data-hamburger-target='menu'>
+            <div class="c-toolbar__grid">
+                <div class="c-toolbar__nav">
+                    <ul class="s-toolbar-nav">
+                        <li>
+                            <a href="https://internet.ee"><%= t('common.open_portal') %></a>
+                            <span class="o-arrow js-submenu-toggle"></span>
+                            <ul class="submenu">
+                                <li>
+                                    <a href="#">Info</a>
+                                    <span class="o-arrow o-arrow--visible-on-desktop js-submenu-toggle"></span>
+                                    <ul class="submenu">
+                                        <li>
+                                            <a href="#">hell</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        
+                        <li class="is-active" data-controller='navbar--expandable'>
+                            <a><%= t('common.header.auction_portal') %></a>
+                            <span class="o-arrow js-submenu-toggle" data-action='click->navbar--expandable#expand'></span>
+
+                            <ul class="submenu" data-navbar--expandable-target='element'>
+                                <%= regular_menu_list %>
+                                <%= component 'common/header/notification', notifications: notifications %>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="https://www.internet.ee/registrar-portal"><%= t('common.registrar_portal') %></a>
+                        </li>
+                        <li>
+                            <a href="https://registrant.internet.ee"><%= t('common.registrant_portal') %></a>
+                        </li>
+                        <li>
+                            <a href="#">eeIDc-hero</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="c-toolbar__lang-socials">
+                    <div class="c-header__lang">
+                        <div class="c-dropdown">
+                            <span class="c-dropdown__label" onclick="this.parentNode.classList.toggle('is-open')">
+                                <span class="c-dropdown__label__lang">
+                                    <%= current_language %>
+                                </span>
+                                <%= render 'svg/down_arrow' %>
+                            </span>
+
+                            <ul class="c-dropdown__list s-dropdown-list">
+                                <%= languages %>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="c-socials">
+                        <a href="" class="c-socials__link" target="_blank">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="white"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM9.744 7.9995H8.6245V12.0615H6.946V8H6.1075V6.6H6.946V5.7595C6.946 4.6175 7.4195 3.9385 8.7645 3.9385H9.8845V5.3385H9.1845C8.661 5.3385 8.626 5.5345 8.626 5.899L8.6245 6.6H9.8925L9.744 7.9995Z">
+                                </path>
+                            </svg>
+                        </a>
+                        <a href="" class="c-socials__link" target="_blank">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="white"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM12.22 5.4285C12.183 5.4905 11.993 5.708 11.79 5.9065C11.446 6.248 11.4275 6.285 11.4275 6.571C11.4275 7.0115 11.219 7.931 11.01 8.4335C10.623 9.3775 9.794 10.3525 8.9645 10.8435C7.7975 11.5325 6.2435 11.707 4.935 11.303C4.499 11.166 3.7495 10.8185 3.7495 10.7565C3.7495 10.7375 3.9765 10.713 4.2535 10.7065C4.8321 10.6943 5.39825 10.5363 5.8995 10.247L6.231 10.048L5.85 9.918C5.3095 9.7315 4.8245 9.303 4.7015 8.8995C4.6645 8.769 4.677 8.7625 5.0205 8.7625L5.3765 8.7565L5.0755 8.6135C4.719 8.433 4.3935 8.1295 4.234 7.8185C4.1175 7.595 3.97 7.03 4.013 6.9865C4.0255 6.968 4.1545 7.0055 4.3015 7.055C4.725 7.2105 4.7805 7.173 4.535 6.912C4.0745 6.44 3.933 5.7385 4.154 5.074L4.2585 4.776L4.664 5.1795C5.4935 5.993 6.47 6.4775 7.5875 6.62L7.8945 6.657L7.876 6.3525C7.821 5.564 8.306 4.8435 9.074 4.564C9.3565 4.4645 9.836 4.4525 10.149 4.539C10.272 4.576 10.505 4.7005 10.671 4.812L10.972 5.017L11.3035 4.911C11.488 4.8555 11.7335 4.762 11.844 4.7C11.9485 4.644 12.0405 4.613 12.0405 4.6315C12.0405 4.737 11.813 5.0975 11.623 5.296C11.3645 5.5755 11.4385 5.6005 11.9605 5.414C12.275 5.3105 12.2815 5.3105 12.22 5.4285Z">
+                                </path>
+                            </svg>
+                        </a>
+                        <a href="" class="c-socials__link" target="_blank">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="white"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M8 0C3.582 0 0 3.5815 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.5815 12.418 0 8 0ZM5.922 11.1385H4.29V6.2285H5.922V11.1385ZM5.106 5.558H5.0955C4.5475 5.558 4.1935 5.1805 4.1935 4.7095C4.1935 4.228 4.5585 3.8615 5.1165 3.8615C5.6745 3.8615 6.0185 4.228 6.029 4.7095C6.029 5.181 5.6745 5.558 5.106 5.558ZM11.8065 11.1385H10.1745V8.5115C10.1745 7.8515 9.9385 7.4015 9.3475 7.4015C8.897 7.4015 8.6285 7.705 8.5105 7.9985C8.4675 8.1035 8.4565 8.25 8.4565 8.3965V11.1385H6.825C6.825 11.1385 6.8465 6.6895 6.825 6.2285H8.457V6.924C8.6735 6.5895 9.0615 6.113 9.928 6.113C11.0015 6.113 11.8065 6.815 11.8065 8.323V11.1385Z">
+                                </path>
+                            </svg>
+                        </a>
+                        <a href="" class="c-socials__link" target="_blank">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="white"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_739_409)">
+                                    <path d="M6.91406 9.62948L9.63006 7.99998L6.91406 6.37048V9.62948Z"></path>
+                                    <path
+                                        d="M8 0C3.582 0 0 3.5815 0 8C0 12.4185 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM12.344 8.3505C12.344 9.1005 12.257 9.8505 12.257 9.8505C12.257 9.8505 12.172 10.4895 11.912 10.77C11.5815 11.139 11.2115 11.141 11.0415 11.163C9.8255 11.256 8 11.259 8 11.259C8 11.259 5.741 11.237 5.046 11.166C4.8525 11.1275 4.419 11.1385 4.088 10.77C3.8275 10.489 3.743 9.8505 3.743 9.8505C3.743 9.8505 3.656 9.101 3.656 8.3505V7.6475C3.656 6.8975 3.743 6.148 3.743 6.148C3.743 6.148 3.828 5.509 4.088 5.2275C4.4185 4.858 4.7885 4.856 4.9585 4.835C6.174 4.741 7.998 4.741 7.998 4.741H8.002C8.002 4.741 9.826 4.741 11.0415 4.835C11.211 4.856 11.5815 4.858 11.912 5.227C12.1725 5.5085 12.257 6.1475 12.257 6.1475C12.257 6.1475 12.344 6.8975 12.344 7.6475V8.3505Z">
+                                    </path>
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_739_409">
+                                        <rect width="16" height="16"></rect>
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </a>
+                        <a href="" class="c-socials__link" target="_blank">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="white"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM5.952 10.9755C5.83075 10.9758 5.71063 10.9521 5.59852 10.906C5.4864 10.8598 5.38448 10.792 5.29858 10.7064C5.21268 10.6208 5.14448 10.5192 5.09788 10.4072C5.05128 10.2953 5.0272 10.1753 5.027 10.054C5.0349 9.81381 5.13586 9.58609 5.30857 9.41897C5.48127 9.25186 5.71218 9.15843 5.9525 9.15843C6.19282 9.15843 6.42373 9.25186 6.59643 9.41897C6.76914 9.58609 6.8701 9.81381 6.878 10.054C6.878 10.564 6.464 10.9755 5.952 10.9755ZM8.2755 10.974C8.27693 10.5464 8.19353 10.1228 8.03012 9.72763C7.8667 9.33249 7.62653 8.97368 7.3235 8.672C7.02275 8.36901 6.66486 8.12871 6.27056 7.96504C5.87627 7.80136 5.45341 7.71757 5.0265 7.7185V6.3865C7.555 6.3865 9.613 8.4445 9.613 10.974H8.2755ZM10.637 10.9735C10.637 7.877 8.1195 5.3565 5.027 5.357V4.0245C8.857 4.0245 11.9735 7.143 11.9735 10.9735H10.637Z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-              <li class="is-active" data-controller='navbar--expandable'>
-                <a><%= t('common.header.auction_portal') %></a>
-                <span class="o-arrow js-submenu-toggle" data-action='click->navbar--expandable#expand'></span>
-                
-                <ul class="submenu" data-navbar--expandable-target='element'>
-                  <%= regular_menu_list %>
-                  <%= component 'common/header/notification', notifications: notifications %>
-                </ul>
-              </li>
 
-              <li>
-                <a href="https://www.internet.ee/registrar-portal"><%= t('common.registrar_portal') %></a>
-              </li>
-              <li>
-                <a href="https://registrant.internet.ee"><%= t('common.registrant_portal') %></a>
-              </li>
-              <li>
-                <a href="#">eeIDc-hero</a>
-              </li>
-            </ul>
-          </div>
-          <div class="c-toolbar__socials">
+        <div class="c-header__tools" data-controller='toggle' data-toggle-toggle-class='is-hidden'>
+            <% if user_signed_in? %>
+                <a class="c-toolbar__notice" href="#" data-action="toggle#toggle">
+                    <span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+                            <path fill="#fff"
+                                d="M8 15.333A1.334 1.334 0 0 0 9.333 14H6.667A1.333 1.333 0 0 0 8 15.333Zm-5.333-2.666h10.666a.666.666 0 0 0 .472-1.138l-1.139-1.138V6.667a4.67 4.67 0 0 0-4-4.614v-.72a.667.667 0 1 0-1.333 0v.72a4.67 4.67 0 0 0-4 4.614v3.724l-1.138 1.138a.667.667 0 0 0 .472 1.138Zm1.804-1.529a.667.667 0 0 0 .196-.471v-4a3.333 3.333 0 1 1 6.666 0v4c0 .176.07.346.195.471l.196.195H4.276l.195-.195Z" />
+                        </svg>
+                        <sup>(<%= current_user&.notifications&.unread&.count %>)</sup>
+                    </span>
+                </a>
+
+                <div class="c-notices is-hidden js-notices" data-toggle-target='element'>
+                    <div class="js-notices-list">
+
+                        <% current_user&.notifications&.unread&.limit(5)&.each do |n| %>
+                        <div class="c-notice">
+                        <div class="c-notice__header">
+                            <%= component 'common/notifications/icon', notification: n, readed: false %>
+                        </div>
+                        <div class="c-notice__main"><%= n.to_notification.message %></div>
+                        <div class="c-notice__footer">
+                            <div class="c-notification__header__date"><%= I18n.t('.notification_received', datetime: I18n.l(n.created_at)) %></div>
+                        </div>
+                        </div>
+                        <% end %>
+
+                    </div>
+                    <div class="c-notices__footer u-text-center">
+                        <%= link_to t('notifications.show_all'), notifications_path, class: 'o-link' %>
+                    </div>
+                </div>
+            <% end %>
+            
+
             <% if user_signed_in? %>
               <%= link_to destroy_user_session_path, class: "c-header__user", method: :delete, data: { 'turbo-method': 'delete' } do %>
                 <%= render 'svg/person' %><%= t(:sign_out) %>
@@ -46,20 +163,21 @@
                 <%= render 'svg/person' %><%= t(:sign_in) %>
               <% end %>
             <% end %>
-          </div>
-          <div class="c-toolbar__lang">
-          </div>
-        </div>
-      </div>
 
-      <div class="c-header__lang">
-        <div class="c-dropdown">
-          <span class="c-dropdown__label" onclick="this.parentNode.classList.toggle('is-open')">
-            <span class="c-dropdown__label__lang"><%= current_language %></span><%= render 'svg/down_arrow' %>
-          </span>
-          <ul class="c-dropdown__list s-dropdown-list">
-            <%= languages %>
-          </ul>
+            <div class="c-header__lang">
+                <div class="c-dropdown">
+                    <span class="c-dropdown__label" onclick="this.parentNode.classList.toggle('is-open')">
+                        <span class="c-dropdown__label__lang">
+                            <%= current_language %>
+                        </span>
+                        <%= render 'svg/down_arrow' %>
+                    </span>
+
+                    <ul class="c-dropdown__list s-dropdown-list">
+                        <%= languages %>
+                    </ul>
+
+                </div>
+            </div>
         </div>
-      </div>
-    </header>
\ No newline at end of file
+    </header>
diff --git a/app/components/common/header/component_deprecated.html.erb b/app/components/common/header/component_deprecated.html.erb
new file mode 100644
index 000000000..c0407cf2a
--- /dev/null
+++ b/app/components/common/header/component_deprecated.html.erb
@@ -0,0 +1,66 @@
+    <header class="c-header" data-controller='hamburger' data-hamburger-open-class='is-active'>
+      <div class="c-header__menu">
+        <button class="c-header__toggle u-bg-green-gradient js-nav-toggle hamburger hamburger--collapse" data-action='hamburger#toggle'>
+          <span class="hamburger-box">
+            <span class="hamburger-inner"></span>
+          </span>
+          <span><%= t('common.header.auction_portal') %></span>
+        </button>
+      </div>
+      <div class="c-toolbar js-toolbar" data-hamburger-target='menu'>
+        <div class="c-toolbar__grid">
+          <div class="c-toolbar__nav">
+            <ul class="s-toolbar-nav">
+              <li>
+                <a href="https://internet.ee"><%= t('common.open_portal') %></a>
+              </li>
+
+              <li class="is-active" data-controller='navbar--expandable'>
+                <a><%= t('common.header.auction_portal') %></a>
+                <span class="o-arrow js-submenu-toggle" data-action='click->navbar--expandable#expand'></span>
+                
+                <ul class="submenu" data-navbar--expandable-target='element'>
+                  <%= regular_menu_list %>
+                  <%= component 'common/header/notification', notifications: notifications %>
+                </ul>
+              </li>
+
+              <li>
+                <a href="https://www.internet.ee/registrar-portal"><%= t('common.registrar_portal') %></a>
+              </li>
+              <li>
+                <a href="https://registrant.internet.ee"><%= t('common.registrant_portal') %></a>
+              </li>
+              <li>
+                <a href="#">eeIDc-hero</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="c-toolbar__socials">
+            <% if user_signed_in? %>
+              <%= link_to destroy_user_session_path, class: "c-header__user", method: :delete, data: { 'turbo-method': 'delete' } do %>
+                <%= render 'svg/person' %><%= t(:sign_out) %>
+              <% end %>
+            <% else %>
+              <%= link_to new_user_session_path, class: "c-header__user" do %>
+                <%= render 'svg/person' %><%= t(:sign_in) %>
+              <% end %>
+            <% end %>
+          </div>
+          <div class="c-toolbar__lang">
+          </div>
+        </div>
+      </div>
+
+      <div class="c-header__lang">
+        <div class="c-dropdown">
+          <span class="c-dropdown__label" onclick="this.parentNode.classList.toggle('is-open')">
+            <span class="c-dropdown__label__lang"><%= current_language %></span><%= render 'svg/down_arrow' %>
+          </span>
+          <ul class="c-dropdown__list s-dropdown-list">
+            <%= languages %>
+          </ul>
+        </div>
+      </div>
+    </header>
\ No newline at end of file
diff --git a/app/components/common/header/notification/component.html.erb b/app/components/common/header/notification/component.html.erb
index 532326b60..141fcde14 100644
--- a/app/components/common/header/notification/component.html.erb
+++ b/app/components/common/header/notification/component.html.erb
@@ -1,6 +1,6 @@
 <% if user_signed_in?  %>
-  <li class="c-toolbar__search js-search-toolbar" data-controller='toggle' data-toggle-toggle-class='is-hidden'>
-    <button class="c-toolbar__notice js-notices-toggle" data-action="toggle#toggle">
+  <li class="c-toolbar__notice-wrapper" data-controller='toggle' data-toggle-toggle-class='is-hidden'>
+    <button class="c-toolbar__notice" data-action="toggle#toggle">
       <svg width="12" height="16" viewBox="0 0 12 16" fill="white"
                                          xmlns="http://www.w3.org/2000/svg">
         <path d="M5.99986 15.3333C6.35348 15.3333 6.69262 15.1928 6.94267 14.9428C7.19272 14.6927 7.33319 14.3536 7.33319 14H4.66652C4.66652 14.3536 4.807 14.6927 5.05705 14.9428C5.3071 15.1928 5.64624 15.3333 5.99986 15.3333ZM0.666525 12.6666H11.3332C11.465 12.6666 11.5939 12.6275 11.7035 12.5542C11.8131 12.481 11.8985 12.3769 11.949 12.2551C11.9994 12.1333 12.0126 11.9992 11.9869 11.8699C11.9612 11.7406 11.8977 11.6219 11.8045 11.5286L10.6665 10.3906V6.66663C10.6644 5.54563 10.2591 4.46279 9.52477 3.61582C8.7904 2.76885 7.77591 2.21426 6.66652 2.05329V1.33329C6.66652 1.15648 6.59629 0.986912 6.47126 0.861888C6.34624 0.736864 6.17667 0.666626 5.99986 0.666626C5.82305 0.666626 5.65348 0.736864 5.52845 0.861888C5.40343 0.986912 5.33319 1.15648 5.33319 1.33329V2.05329C4.2238 2.21426 3.20932 2.76885 2.47495 3.61582C1.74059 4.46279 1.33534 5.54563 1.33319 6.66663V10.3906L0.195191 11.5286C0.101985 11.6219 0.038514 11.7406 0.0128023 11.8699C-0.0129094 11.9992 0.000292634 12.1333 0.0507393 12.2551C0.101186 12.3769 0.186612 12.481 0.296219 12.5542C0.405825 12.6275 0.534691 12.6666 0.666525 12.6666ZM2.47119 11.138C2.59622 11.013 2.66649 10.8434 2.66652 10.6666V6.66663C2.66652 5.78257 3.01771 4.93472 3.64284 4.3096C4.26796 3.68448 5.1158 3.33329 5.99986 3.33329C6.88391 3.33329 7.73176 3.68448 8.35688 4.3096C8.982 4.93472 9.33319 5.78257 9.33319 6.66663V10.6666C9.33323 10.8434 9.40349 11.013 9.52852 11.138L9.72386 11.3333H2.27586L2.47119 11.138Z"/>
diff --git a/app/components/pages/auction/filter/component.html.erb b/app/components/pages/auction/filter/component.html.erb
index 4568b45a9..975e3be22 100644
--- a/app/components/pages/auction/filter/component.html.erb
+++ b/app/components/pages/auction/filter/component.html.erb
@@ -22,19 +22,13 @@
     </div>
     
 
-    <div class="c-table__filters__more">
-      <% if current_page?(auctions_path) || current_page?(root_path) %>
-        <%= component 'common/links/link_button', link_title: t(:finished_auctions), href: histories_path, color: 'ghost' %>
-      <% else %>
-        <%= component 'common/links/link_button', link_title: t(:auctions_name), href: auctions_path, color: 'ghost' %>
-      <% end %>
-
+    <div class="c-table__filters__more" style="justify-content: flex-end;">
       <%= component 'pages/auction/notification_subscribe', current_user: @current_user %>
     </div>
 
     <div class="c-auctions__legend">
-      <div><span class="o-io-icon o-icon--sm"></span><%= t('auctions.english_auction') %></div>
-      <div><span class="o-po-icon o-icon--sm"></span><%= t('auctions.blind_auction') %></div>
+      <div><span class="o-io-icon o-icon--sm"></span> <%= t('auctions.english_auction').downcase %></div>
+      <div><span class="o-po-icon o-icon--sm"></span> <%= t('auctions.blind_auction').downcase %></div>
     </div>
   </div>
 <% end %>
diff --git a/app/components/pages/invoices/outstanding_invoices/component.html.erb b/app/components/pages/invoices/outstanding_invoices/component.html.erb
index ec1f235e1..e3a02dbb2 100644
--- a/app/components/pages/invoices/outstanding_invoices/component.html.erb
+++ b/app/components/pages/invoices/outstanding_invoices/component.html.erb
@@ -12,11 +12,21 @@
           <%= t('invoices.cancelled_expired') %> <sup>(<%= @cancelled_expired_invoices.count %>)</sup>
         </button>
 
-        <%= tag.div class: 'c-tabs__nav__btn--ind' do %>
-          <%= button_to pay_all_bills_invoices_path, method: :post, style: 'background-color: inherit; color: inherit; text-decoration: none; border: none; box-shadow: none;' do %>
-            <%= t('.pay') %> <sup>(<%= @unpaid_invoices_count %>)</sup>
-          <% end %>
-        <% end if @unpaid_invoices_count.positive?%>
+        <div data-table--tab-target='payablebtn' style='margin-left: auto'>
+          <%= tag.div class: 'c-tabs__nav__btn--ind', style:'margin-right: auto' do %>
+            <%= button_to pay_all_issued_invoices_path, method: :post, style: 'background-color: inherit; color: inherit; text-decoration: none; border: none; box-shadow: none;' do %>
+              <%= t('invoices.pay_all') %> <sup>(<%= @issued_invoices.count %>)</sup>
+            <% end %>
+          <% end if @issued_invoices.count.positive? %>
+        </div>
+
+        <div data-table--tab-target='payablebtn' style='margin-left: auto'>
+          <%= tag.div class: 'c-tabs__nav__btn--ind' do %>
+            <%= button_to pay_all_cancelled_payable_invoices_path, method: :post, style: 'background-color: inherit; color: inherit; text-decoration: none; border: none; box-shadow: none;' do %>
+              <%= t('invoices.pay_all') %> <sup>(<%= @cancelled_payable_invoices.count %>)</sup>
+            <% end %>
+          <% end if @cancelled_payable_invoices.count.positive? %>
+        </div>
 
       </div>
       <div class="c-tabs__content">
diff --git a/app/controllers/invoices/pay_all_cancelled_payable_invoices_controller.rb b/app/controllers/invoices/pay_all_cancelled_payable_invoices_controller.rb
new file mode 100644
index 000000000..879aa611d
--- /dev/null
+++ b/app/controllers/invoices/pay_all_cancelled_payable_invoices_controller.rb
@@ -0,0 +1,24 @@
+class Invoices::PayAllCancelledPayableInvoices < ApplicationController
+  before_action :authenticate_user!
+  before_action :authorize_user
+
+  def create
+    cancelled_payable_invoices = Invoice.accessible_by(current_ability)
+                                        .where(user_id: current_user.id).to_a.select(&:cancelled_and_have_valid_ban?)
+
+    response = EisBilling::BulkInvoicesService.call(invoices: cancelled_payable_invoices,
+                                                    customer_url: linkpay_callback_url)
+
+    if response.result?
+      redirect_to response.instance['oneoff_redirect_link'], allow_other_host: true
+    else
+      flash.alert = response.errors
+      redirect_to invoices_path and return
+    end
+  end
+
+  def authorize_user
+    authorize! :read, Invoice
+    authorize! :update, Invoice
+  end
+end
diff --git a/app/controllers/invoices/pay_all_issued_invoices_controller.rb b/app/controllers/invoices/pay_all_issued_invoices_controller.rb
new file mode 100644
index 000000000..6a5e089be
--- /dev/null
+++ b/app/controllers/invoices/pay_all_issued_invoices_controller.rb
@@ -0,0 +1,24 @@
+class Invoices::PayAllIssuedInvoicesController < ApplicationController
+  before_action :authenticate_user!
+  before_action :authorize_user
+
+  def create
+    issued_invoices = Invoice.accessible_by(current_ability)
+                             .where(user_id: current_user.id).to_a.select(&:issued?)
+
+    response = EisBilling::BulkInvoicesService.call(invoices: issued_invoices,
+                                                    customer_url: linkpay_callback_url)
+
+    if response.result?
+      redirect_to response.instance['oneoff_redirect_link'], allow_other_host: true
+    else
+      flash.alert = response.errors
+      redirect_to invoices_path and return
+    end
+  end
+
+  def authorize_user
+    authorize! :read, Invoice
+    authorize! :update, Invoice
+  end
+end
diff --git a/app/controllers/invoices_controller.rb b/app/controllers/invoices_controller.rb
index dc0422bb7..23a4216cb 100644
--- a/app/controllers/invoices_controller.rb
+++ b/app/controllers/invoices_controller.rb
@@ -28,7 +28,7 @@ def index
     @cancelled_payable_invoices = invoices_list_by_status(Invoice.statuses[:cancelled]).with_ban
     @cancelled_expired_invoices = invoices_list_by_status(Invoice.statuses[:cancelled]).without_ban
 
-    @unpaid_invoices_count = @issued_invoices.count + @cancelled_payable_invoices.count + @cancelled_expired_invoices.count
+    # @unpaid_invoices_count = @issued_invoices.count + @cancelled_payable_invoices.count
 
     @paid_invoices = invoices_list_by_status(Invoice.statuses[:paid])
     @deposit_paid = current_user.domain_participate_auctions.order(created_at: :desc)
@@ -46,6 +46,7 @@ def download
     send_data(raw_pdf, filename: @invoice.filename)
   end
 
+  # TODO: Remove. It is deprecated
   def pay_all_bills
     payable_invoices = Invoice.accessible_by(current_ability)
                               .where(user_id: current_user.id).to_a.select(&:payable?)
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 45b383249..8d06f74a8 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -28,7 +28,9 @@ def toggle_subscription
     @user = current_user
     @user.daily_summary = !@user.daily_summary
     @user.save!
-    redirect_to :auctions, notice: t('.subscription_status_toggled_flash')
+
+    flash[:notice] = t('.subscription_status_toggled_flash')
+    render turbo_stream: turbo_stream.replace('flash', partial: 'common/flash', locals: { flash: })
   end
 
   # POST /users/new
diff --git a/app/helpers/daily_summary_helper.rb b/app/helpers/daily_summary_helper.rb
new file mode 100644
index 000000000..e8e96aba0
--- /dev/null
+++ b/app/helpers/daily_summary_helper.rb
@@ -0,0 +1,2 @@
+module DailySummaryHelper
+end
diff --git a/app/javascript/controllers/daily_summary_controller.js b/app/javascript/controllers/daily_summary_controller.js
new file mode 100644
index 000000000..3bb504d83
--- /dev/null
+++ b/app/javascript/controllers/daily_summary_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from '@rails/request.js'
+
+export default class extends Controller {
+  updateDailtSummary(_event) {
+    clearTimeout(this.timeout)
+    
+    this.timeout = setTimeout(() => {
+      get('/profile/toggle_subscription')
+    }, 500)
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 90da84a60..df3dcecd7 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -69,3 +69,6 @@ application.register("google-analytics", GoogleAnalyticsController);
 
 import AuctionTimezoneController from "./auction_timezone_controller";
 application.register("auction-timezone", AuctionTimezoneController);
+
+import DailySummaryController from "./daily_summary_controller";
+application.register("daily-summary", DailySummaryController);
diff --git a/app/javascript/controllers/table/tab_controller.js b/app/javascript/controllers/table/tab_controller.js
index 5cc56b6bc..ea7e36792 100644
--- a/app/javascript/controllers/table/tab_controller.js
+++ b/app/javascript/controllers/table/tab_controller.js
@@ -1,13 +1,22 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["tab", "content"]
+  static targets = ["tab", "content", "payablebtn"]
   static classes = ["active"]
 
   initialize() {
     this.showTab = this.showTab.bind(this);
   }
 
+  connect() {
+    console.log(this.payablebtnTargets);
+
+    if (this.payablebtnTargets.length > 0) {
+      this.payablebtnTargets[0].style.display = "block"
+      this.payablebtnTargets[1].style.display = "none"
+    }
+  }
+
   showTab(event) {
     const index = event.params.index;
 
@@ -21,5 +30,18 @@ export default class extends Controller {
 
     this.tabTargets[index].classList.add(this.activeClass)
     this.contentTargets[index].classList.add(this.activeClass)
+
+    if (this.payablebtnTargets.length > 0) {
+      if (index == 0) {
+        this.payablebtnTargets[0].style.display = "block"
+        this.payablebtnTargets[1].style.display = "none"
+      } else if (index == 1) {
+        this.payablebtnTargets[1].style.display = "block"
+        this.payablebtnTargets[0].style.display = "none"
+      } else {
+        this.payablebtnTargets[0].style.display = "none"
+        this.payablebtnTargets[1].style.display = "none"
+      }
+    }
   }
 }
diff --git a/app/presenters/english_bids_presenter.rb b/app/presenters/english_bids_presenter.rb
index d1aa18b0b..30338755b 100644
--- a/app/presenters/english_bids_presenter.rb
+++ b/app/presenters/english_bids_presenter.rb
@@ -14,7 +14,7 @@ def last_actual_offer
 
   def maximum_bids
     return 'Bad auction type' if auction.platform == 'blind'
-    return 0.0 if auction.offers.empty?
+    return Money.new(0, Setting.find_by(code: 'auction_currency').retrieve) if auction.offers.empty?
 
     Money.new(last_actual_offer.cents, Setting.find_by(code: 'auction_currency').retrieve)
   end
diff --git a/app/views/auctions/index.html.erb b/app/views/auctions/index.html.erb
index c5a67ab3e..4e5dcc943 100644
--- a/app/views/auctions/index.html.erb
+++ b/app/views/auctions/index.html.erb
@@ -19,6 +19,14 @@
 
     <%= component 'pages/auction/filter', current_user: current_user %>
 
+  <div style='margin: 10px 0;'>
+    <% if current_page?(auctions_path) || current_page?(root_path) %>
+      <%= component 'common/links/link_button', link_title: t(:finished_auctions), href: histories_path, color: 'ghost' %>
+    <% else %>
+      <%= component 'common/links/link_button', link_title: t(:auctions_name), href: auctions_path, color: 'ghost' %>
+    <% end %>
+  </div>
+
     <!-- 
     These parameters are passed to the Common::Table::Component. These parameters are used to generate headers in the table component. The name "column_name" indicates the name of the column. This is necessary for sorting, so the name of this column should correspond to the name of the column in the database table. If you want to make it so that the data is not sorted by the column, then you should add a nil value. "Caption" is the table header, and "options" are additional parameters that are passed into the tags. 
     -->
diff --git a/app/views/billing_profiles/_billing_info.html.erb b/app/views/billing_profiles/_billing_info.html.erb
index 1d810f705..85000c09b 100644
--- a/app/views/billing_profiles/_billing_info.html.erb
+++ b/app/views/billing_profiles/_billing_info.html.erb
@@ -1,17 +1,18 @@
 <%= turbo_frame_tag dom_id(billing_profile) do %>
   <div class="o-card">
     <div class="c-account__form">
-      <div class="c-account__input c-account__input--editable c-account__input-title u-flex u-align-center u-content-sp u-mb-20 ">
+      <div class="c-account__title-wrapper c-account__input c-account__input--editable c-account__input-title u-flex u-content-sp">
         <input type="text" class="o-card__title c-account__title" placeholder="" value="<%= billing_profile.name %>" readonly>
-        <div class="c-account_editicons u-flex u-align-center u-content-sp">
+        <div class="c-account_editicons u-flex u-align-center u-content-end">
 
-          <%= button_to billing_profile_path(uuid: billing_profile.uuid), method: :delete, data: {turbo_method: :delete, turbo_confirm: "Are you sure to delete "}, target: '_top', class: "c-btn c-btn--ghost c-btn--icon js-modal-delete-toggle" do %>
-            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none"><path fill="#212224" d="M0 2.544a.558.558 0 0 0 .558.557h.297v6.593a1.838 1.838 0 0 0 1.836 1.836H7.31a1.838 1.838 0 0 0 1.836-1.836V3.1h.297a.558.558 0 1 0 0-1.115H7.49V1.41C7.49.633 6.857 0 6.08 0H3.92c-.777 0-1.41.632-1.41 1.41v.575H.558A.558.558 0 0 0 0 2.544ZM3.626 1.41c0-.162.132-.294.294-.294h2.16c.162 0 .294.132.294.294v.576H3.626V1.41ZM1.971 3.101H8.03v6.593a.721.721 0 0 1-.72.72H2.69a.721.721 0 0 1-.72-.72V3.1Z"/><path fill="#212224" d="M3.613 9.387a.558.558 0 0 0 .557-.558V4.688a.558.558 0 0 0-1.115 0v4.141a.558.558 0 0 0 .558.558Zm2.773 0a.558.558 0 0 0 .557-.558V4.688a.558.558 0 0 0-1.115 0v4.141a.558.558 0 0 0 .558.558Z"/></svg>
+          <%= button_to billing_profile_path(uuid: billing_profile.uuid), method: :delete, data: {turbo_method: :delete, turbo_confirm: "Are you sure to delete "}, target: '_top', style: 'background: transparent; border: none;' do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><circle cx="16" cy="16" r="15.5" fill="#FFEEE1" stroke="#FF6E00"/><path stroke="#FF6E00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12 12 8 8M12 20l8-8"/></svg>
           <% end %>
 
           <%= component 'common/action_button', type: 'edit', href: edit_billing_profile_path(billing_profile.uuid), options: { data: { turbo_frame: dom_id(billing_profile) }} %>
         </div>
       </div>
+
       <div class="c-account__input c-account__input--editable u-mb-20">
         <label for="input1"><%= t('billing_profiles.vat_code') %></label>
         <input id="input1" type="text" placeholder="" value="<%= billing_profile.vat_code %>" readonly/>
diff --git a/app/views/billing_profiles/_form.html.erb b/app/views/billing_profiles/_form.html.erb
index 146a895cf..af825f1d1 100644
--- a/app/views/billing_profiles/_form.html.erb
+++ b/app/views/billing_profiles/_form.html.erb
@@ -1,37 +1,46 @@
 <%= turbo_frame_tag dom_id(billing_profile) do %>
   <div class="o-card">
     <%= form_with model: billing_profile, url: billing_profile_path(billing_profile.uuid), class: "c-account__form" do |f| %>
-      <div class="c-account__input c-account__input--editable c-account__input-title u-flex u-align-center u-content-sp u-mb-20 ">
+      <div class="c-account__title-wrapper c-account__input c-account__input--editable c-account__input-title u-flex u-content-sp">
         <input type="text" class="o-card__title c-account__title" placeholder="" value="<%= billing_profile.name %>" readonly>
-        <div class="c-account_editicons u-flex u-align-center u-content-sp">
+        
+        <div class="c-account_editicons u-flex u-align-center u-content-end">
           <%# TODO: Resolve the problem of nested elements in button component %>
-          <%= f.button class: "c-btn c-btn--ghost c-btn--icon js-modal-delete-toggle" do %>
+          <%= f.button style: 'background: transparent; border: none;' do %>
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><circle cx="16" cy="16" r="15.5" fill="#E3FEE0" stroke="#48A23F"/><path fill="#E3FEE0" d="M8 8h16v16H8z"/><path stroke="#48A23F" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 15.818 14.125 19 21 12"/></svg>
           <% end %>
-          <%= component 'common/action_button', type: 'close', href: '#', options: { data: { turbo_frame: dom_id(billing_profile) }} %>
+
+          <%= link_to '#', data: { turbo_frame: dom_id(billing_profile) } do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><circle cx="16" cy="16" r="15.5" fill="#FFEEE1" stroke="#FF6E00"/><path stroke="#FF6E00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12 12 8 8M12 20l8-8"/></svg>
+          <% end %>
         </div>
+
       </div>
       <div class="c-account__input c-account__input--editable u-mb-20 is-editable">
-        <%= component 'common/form/label', form: f, attribute: :vat_code, title: t('illing_profiles.vat_code') %>
+        <%#= component 'common/form/label', form: f, attribute: :vat_code, title: t('illing_profiles.vat_code') %>
+        <label for="input1"><%= t('billing_profiles.vat_code') %></label>
         <%= component 'common/form/text_field', form: f, attribute: :vat_code, options: { autofocus: true } %>
       </div>
+
       <div class="c-account__input-wrapper u-flex u-align-start u-content-start">
         <div class="c-account__input c-account__input--editable u-mb-20 is-editable">
-          <%= component 'common/form/label', form: f, attribute: :street, title: t('illing_profiles.street') %>
+          <%#= component 'common/form/label', form: f, attribute: :street, title: t('illing_profiles.street') %>
+          <label for="input2"><%= t('billing_profiles.street') %></label>
           <%= component 'common/form/text_field', form: f, attribute: :street, options: { autofocus: true } %>
         </div>
         <div class="c-account__input c-account__input--editable u-mb-20 is-editable">
-          <%= component 'common/form/label', form: f, attribute: :city, title: t('illing_profiles.city') %>
+          <%#= component 'common/form/label', form: f, attribute: :city, title: t('illing_profiles.city') %>
+          <label for="input3"><%= t('billing_profiles.city') %></label>
           <%= component 'common/form/text_field', form: f, attribute: :city, options: { autofocus: true } %>
         </div>
         <div class="c-account__input c-account__input--editable u-mb-20 is-editable">
-          <%= component 'common/form/label', form: f, attribute: :postal_code, title: t('illing_profiles.postal_code') %>
+          <%#= component 'common/form/label', form: f, attribute: :postal_code, title: t('illing_profiles.postal_code') %>
+          <label for="input3"><%= t('billing_profiles.postal_code') %></label>
           <%= component 'common/form/text_field', form: f, attribute: :postal_code, options: { autofocus: true } %>
         </div>
         <div class="c-account__input c-account__input--editable u-mb-20 is-editable">
-          <%= component 'common/form/label', form: f, attribute: :country_code, title: t('illing_profiles.country_code') %>
-          <%= f.select :country_code, options_for_select(Countries.for_selection,
-                billing_profile.country_code || Setting.find_by(code: 'default_country').retrieve), {} %>
+          <%#= component 'common/form/label', form: f, attribute: :country_code, title: t('illing_profiles.country_code') %>
+          <label for="input3"><%= t('billing_profiles.country') %></label>
 
           <%= component 'common/form/dropdown_input', form: f, attribute: :country_code, 
                         enum: options_for_select(Countries.for_selection, billing_profile.country_code || Setting.find_by(code: 'default_country').retrieve) %>
diff --git a/app/views/offers/_offer.html.erb b/app/views/offers/_offer.html.erb
index abcd4b220..50a187518 100644
--- a/app/views/offers/_offer.html.erb
+++ b/app/views/offers/_offer.html.erb
@@ -1,5 +1,5 @@
 <%# TODO: Move to component and all logic should be in represent part %>
-<tr data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= offer.auction.ends_at.iso8601 %>">>
+<tr data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= offer.auction.ends_at.iso8601 %>">
   <td>
     <% if offer.auction.english? %>
       <%= link_to offer.auction.domain_name, english_offer_path(offer.uuid), style: 'color: black;', target: '_top' %>
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index da11b8ca9..cde5cea2a 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -51,17 +51,11 @@
           <span class="c-account__chekboxtitle"><%= t('common.webpush_modal.webpush_title') %></span>
         </div>
 
-        <div class="c-account__checkbox u-flex u-align-center u-mb-30">
-            <%= component 'common/form/checkboxes/rounded_checkbox', form: f, attribute: :daily_summary,
-                options: {
-                  id: :daily_summary,
-                  data: {
-                    controller: 'form--checkbox-autosubmit', form__checkbox_autosubmit_target: 'checkbox',
-                    form__checkbox_autosubmit_url_value: user_path(user.uuid), action: 'change->form--checkbox-autosubmit#submit' 
-                  }
-                } 
-            %>
-
+        <div class="c-account__checkbox u-flex u-align-center u-mb-30" data-controller="daily-summary">
+          <label class="o-checkbox" for="checkbox2">
+            <input type="checkbox" id="checkbox2" data-action="change->daily-summary#updateDailtSummary" <%= current_user.daily_summary ? 'checked' : '' %> />
+            <div class="o-checkbox__slider round"></div>
+          </label>
           <span class="c-account__chekboxtitle"><%= t('users.show.daily_summary') %></span>
         </div>
 
diff --git a/app/views/users/_user_info.html.erb b/app/views/users/_user_info.html.erb
index a67ab93e9..0dd446f05 100644
--- a/app/views/users/_user_info.html.erb
+++ b/app/views/users/_user_info.html.erb
@@ -44,9 +44,9 @@
       </div>
 
 
-      <div class="c-account__checkbox u-flex u-align-center u-mb-30">
-        <label class="o-checkbox u-disabled" for="checkbox2">
-          <input disabled type="checkbox" id="checkbox2" <%= @user.daily_summary ? 'checked' : '' %> />
+      <div class="c-account__checkbox u-flex u-align-center u-mb-30" data-controller="daily-summary">
+        <label class="o-checkbox" for="checkbox2">
+          <input type="checkbox" id="checkbox2" data-action="change->daily-summary#updateDailtSummary" <%= current_user.daily_summary ? 'checked' : '' %> />
           <div class="o-checkbox__slider round"></div>
         </label>
         <span class="c-account__chekboxtitle"><%= t('users.show.daily_summary') %></span>
diff --git a/config/locales/invoices.en.yml b/config/locales/invoices.en.yml
index a1893070c..43c778dbb 100644
--- a/config/locales/invoices.en.yml
+++ b/config/locales/invoices.en.yml
@@ -41,6 +41,7 @@ en:
     marked_as_paid: "Invoice marked as paid."
     already_paid: "Invoice is already paid."
     paid_deposit_title: "Paid deposits"
+    pay_all: Pay all invoices
     paid_deposit: 
       date: Date
       sum: Sum
diff --git a/config/locales/invoices.et.yml b/config/locales/invoices.et.yml
index a279b7094..bb8c1e216 100644
--- a/config/locales/invoices.et.yml
+++ b/config/locales/invoices.et.yml
@@ -42,6 +42,7 @@ et:
     marked_as_paid: "Arve makstuks märgitud."
     already_paid: "Arve on juba makstud."
     paid_deposit_title: Deposiidi maksed
+    pay_all: "Maksa kõik arved"
     paid_deposit: 
       date: Kuupäev
       sum: Summa
diff --git a/config/routes.rb b/config/routes.rb
index 4e3a10c75..978cc28b4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -95,6 +95,11 @@
   resources :billing_profiles, param: :uuid
   match '/status', via: :get, to: 'health_checks#index'
 
+  scope module: :invoices do
+    resource :pay_all_cancelled_payable_invoices, only: :create
+    resource :pay_all_issued_invoices, only: :create
+  end
+
   resources :invoices, only: %i[show edit update index], param: :uuid do
     member do
       get 'download'
@@ -103,6 +108,8 @@
     end
 
     collection do
+
+      # TODO: Remove it. It is deprecated
       post 'invoices/pay_all_bills', to: 'invoices#pay_all_bills', as: 'pay_all_bills'
     end
 
diff --git a/test/controllers/daily_summary_controller_test.rb b/test/controllers/daily_summary_controller_test.rb
new file mode 100644
index 000000000..e72c3f660
--- /dev/null
+++ b/test/controllers/daily_summary_controller_test.rb
@@ -0,0 +1,8 @@
+require "test_helper"
+
+class DailySummaryControllerTest < ActionDispatch::IntegrationTest
+  test "should get update" do
+    get daily_summary_update_url
+    assert_response :success
+  end
+end