diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 898dd5cef3ba3b938b6d7f25750e04f57c5a12a0..a8ad9775764ced365376a28d12c2c6286a288977 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -45,39 +45,33 @@
   </button>
 
     <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
-      <div class="themeMenuWrp">
-        <div id="themeMenu">
-          <div class="scrollWrp">
-            <button
-              *ngFor="let theme of themes"
-              (click)="changeTheme(theme);"
-              matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
-              title="{{theme.toString(getLanguage())}}"
-              aria-label="test">
-              <div class="btnContent">
-                <div class="btnColorIcon" [ngStyle]="{
+      <button
+        *ngFor="let theme of themes"
+        (click)="changeTheme(theme);"
+        matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
+        title="{{theme.toString(getLanguage())}}"
+        aria-label="test">
+        <div class="btnContent">
+          <div class="btnColorIcon" [ngStyle]="{
                   'background-color':theme.getPreviewColor()}">
-                  <div class="checked" [ngClass]="{
+            <div class="checked" [ngClass]="{
                         'checked_true':theme.key===themeClass,
                         'checked_false':theme.key!==themeClass}">
-                    <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
-                      checked
-                    </mat-icon>
-                  </div>
-                </div>
-                <div class="btnAppend">
-                  <div class="title">
-                    <p class="title_bold">{{theme.getName(getLanguage())}}</p>
-                  </div>
-                  <div class="title">
-                    <p>{{theme.getDescription(getLanguage())}}</p>
-                  </div>
-                </div>
-              </div>
-            </button>
+              <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
+                checked
+              </mat-icon>
+            </div>
+          </div>
+          <div class="btnAppend">
+            <div class="title">
+              <p class="title_bold">{{theme.getName(getLanguage())}}</p>
+            </div>
+            <div class="title">
+              <p>{{theme.getDescription(getLanguage())}}</p>
+            </div>
           </div>
         </div>
-      </div>
+      </button>
     </mat-menu>
 
     <!--
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index baa867e47dc3b9e43b05023023138bf3078903f2..91a2ac6ae68154b6712c3a3b2e21081d687ea3d3 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -60,6 +60,11 @@ mat-icon {
   padding: 0 8px 0 8px;
 }
 
+::ng-deep .mat-menu-panel {
+  padding: 0 10px!important;
+  width: 100%!important;
+}
+
 .check {
   font-size: 25px;
   height: 25px;
@@ -72,17 +77,10 @@ mat-icon {
   color: white;
 }
 
-.themeMenuWrp{
-  width:350px;
-  height:215px;
-  position:fixed;
-  left:23%;
-  bottom:35px;
-  z-index:5;
-  background-color:#FFFFFF;
-  border-radius:5px;
-  padding:8px;
-  box-shadow:0px 4px 8px rgba(0,0,0,0.5);
+::ng-deep .color-menu{
+  min-width:400px!important;
+  max-width:400px!important;
+  width:400px!important;
 }
 
 @media (max-width: 500px){
@@ -90,24 +88,12 @@ mat-icon {
     width:calc( 100% - 40px );
     height:215px;
     left:12px;
+    bottom:35px;
     padding:8px;
   }
 }
 
-#themeMenu{
-  width:100%;
-  height:215px;
-  margin-bottom:8px;
-  float:left;
-  overflow-y:auto;
-}
-
-.scrollWrp{
-  width:100%;
-  float:left;
-}
-
-#themeMenu button{
+::ng-deep .color-menu button{
   width:100%;
   outline:none;
   background-color:transparent;
@@ -118,12 +104,8 @@ mat-icon {
   cursor:pointer;
 }
 
-#themeMenu button:focus-visible{
-  outline:solid 2px red;
-}
-
-#themeMenu button:last-child>.btnContent{
-  margin-bottom:0px;
+::ng-deep .color-menu button:last-child{
+  margin-bottom:5px;
 }
 
 .btnContent{