diff --git a/IsraelHiking.Web/src/application/components/drawing.component.html b/IsraelHiking.Web/src/application/components/drawing.component.html
index 5e51b8dca..2e4ed5904 100644
--- a/IsraelHiking.Web/src/application/components/drawing.component.html
+++ b/IsraelHiking.Web/src/application/components/drawing.component.html
@@ -1,11 +1,11 @@
 <div class="side-control maplibregl-ctrl" *ngIf="isShow()" [dir]="resources.direction">
-    <button mat-button (click)="toggleEditPoi()" [ngClass]="{active : isPoiEditActive()}" [ngStyle]="{'color': getRouteColor()}" matTooltip="{{resources.editPoi}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw POI toggle"><i class="fa icon-map-marker fa-lg"></i></button>
-    <button mat-button (click)="toggleEditRoute()" [ngClass]="{active : isRouteEditActive() }" [style.color]="getRouteColor()" matTooltip="{{resources.editRoute}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw route toggle"><i class="fa icon-pencil fa-lg"></i></button>
-    <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Hike')" [ngClass]="{active : getRoutingType() === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Hike"><i class="fa icon-hike fa-lg"></i></button>
-    <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Bike')" [ngClass]="{active : getRoutingType() === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Bike"><i class="fa icon-bike fa-lg"></i></button>
-    <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('4WD')" [ngClass]="{active : getRoutingType() === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing 4WD"><i class="fa icon-four-by-four fa-lg"></i></button>
-    <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('None')" [ngClass]="{active : getRoutingType() === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing None"><i class="fa icon-none fa-lg"></i></button>
-    <button mat-button (click)="undo()" [disabled]="(undoQueueLength$ | async) === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
+    <button mat-button class="mt-1" (click)="toggleEditPoi()" [ngClass]="{active : isPoiEditActive()}" [ngStyle]="{'color': getRouteColor()}" matTooltip="{{resources.editPoi}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw POI toggle"><i class="fa icon-map-marker fa-lg"></i></button>
+    <button mat-button class="mt-1" (click)="toggleEditRoute()" [ngClass]="{active : isRouteEditActive() }" [style.color]="getRouteColor()" matTooltip="{{resources.editRoute}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw route toggle"><i class="fa icon-pencil fa-lg"></i></button>
+    <button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('Hike')" [ngClass]="{active : getRoutingType() === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Hike"><i class="fa icon-hike fa-lg"></i></button>
+    <button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('Bike')" [ngClass]="{active : getRoutingType() === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Bike"><i class="fa icon-bike fa-lg"></i></button>
+    <button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('4WD')" [ngClass]="{active : getRoutingType() === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing 4WD"><i class="fa icon-four-by-four fa-lg"></i></button>
+    <button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('None')" [ngClass]="{active : getRoutingType() === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing None"><i class="fa icon-none fa-lg"></i></button>
+    <button mat-button class="mt-1" (click)="undo()" [disabled]="(undoQueueLength$ | async) === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
     <mat-menu #appMenu="matMenu" overlapTrigger="false" [xPosition]="'before'">
         <button mat-menu-item (click)="clearRoute()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear route"><i class="fa icon-recordings"></i> {{resources.clearRoute}}</button>
         <button mat-menu-item (click)="clearPois()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear pois"><i class="fa icon-map-marker"></i> {{resources.clearPois}}</button>
diff --git a/IsraelHiking.Web/src/application/components/main-menu.component.html b/IsraelHiking.Web/src/application/components/main-menu.component.html
index cfee85254..5a001b651 100644
--- a/IsraelHiking.Web/src/application/components/main-menu.component.html
+++ b/IsraelHiking.Web/src/application/components/main-menu.component.html
@@ -1,15 +1,15 @@
 <div class="side-control maplibregl-ctrl">
     <div class="control-container">
-        <button mat-button class="pull-right high-button" [matMenuTriggerFor]="appMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle main menu"><i class="fa fa-lg icon-bars"></i></button>
-        <div class="pull-right relative">
+        <div class="flex flex-row relative">
             <button mat-button class="high-button" *ngIf="isLoggedIn()" [matMenuTriggerFor]="userMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle user menu">
-                <img *ngIf="userInfo?.imageUrl" class="pull-right space-after profile-image" [src]="userInfo.imageUrl | offlineImage:true | async" alt=""/>
+                <img *ngIf="userInfo?.imageUrl" class="space-after profile-image" [src]="userInfo.imageUrl | offlineImage:true | async" alt=""/>
                 <i *ngIf="!userInfo.imageUrl" class="fa icon-user fa-lg"></i>
             </button>
             <button mat-button class="high-button" *ngIf="!isLoggedIn() && !isIFrame()" (click)="login()" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Login">
                 <i class="fa icon-frown-o fa-lg"></i>
             </button>
             <span class="circle" [ngClass]="{'offline': isOffline(), 'online': !isOffline()}">{{getQueueText()}}</span>
+            <button mat-button class="high-button" [matMenuTriggerFor]="appMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle main menu"><i class="fa fa-lg icon-bars"></i></button>
         </div>
         <mat-menu #appMenu="matMenu" xPosition="before">
             <ng-template matMenuContent>
diff --git a/IsraelHiking.Web/src/application/components/main-menu.component.scss b/IsraelHiking.Web/src/application/components/main-menu.component.scss
index 66751c53a..653eb9d85 100644
--- a/IsraelHiking.Web/src/application/components/main-menu.component.scss
+++ b/IsraelHiking.Web/src/application/components/main-menu.component.scss
@@ -19,7 +19,7 @@
 
 .profile-image { 
     max-width: 80%; 
-    margin: 10%;
+    margin: 20% 10%;
 }
 
 .eye-end {
diff --git a/IsraelHiking.Web/src/application/components/route-statistics.component.html b/IsraelHiking.Web/src/application/components/route-statistics.component.html
index 5c603a618..01a5df779 100644
--- a/IsraelHiking.Web/src/application/components/route-statistics.component.html
+++ b/IsraelHiking.Web/src/application/components/route-statistics.component.html
@@ -81,37 +81,47 @@
                 </div>
             </div>
         </div>
-        <button mat-button class="chart-button chart-table-button" *ngIf="!isExpanded" (click)="changeState('table')" [class.active]="isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle table view"><i class="fa icon-table fa-lg"></i></button>
-        <button mat-button class="chart-button chart-graph-button" (click)="changeState('graph')" [class.active]="!isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle graph view"><i class="fa icon-area-chart fa-lg"></i></button>
-        <button mat-button class="chart-button chart-close-button" (click)="toggle()" angularticsCategory="Route statistics" angularticsAction="Route statistics close"><i class="fa icon-close fa-lg"></i></button>
-        <button mat-button class="chart-button chart-expand-button hidden-xs" *ngIf="!isTable" (click)="toggleExpand()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle expand view"><i class="fa fa-lg" [ngClass]="{ 'icon-chevron-right' : isExpanded, 'icon-chevron-left' : !isExpanded }"></i></button>
-        <mat-menu #appMenu="matMenu" overlapTrigger="false" xPosition="before">
-            <button mat-menu-item (click)="toggleKmMarker()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle KM markers"><i [class.active]="isKmMarkersOn" class="fa icon-map-marker"></i> {{resources.kmPoi}}</button>
-            <button mat-menu-item (click)="toggleSlope()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle Slope"><i [class.active]="isSlopeOn" class="fa icon-line-chart"></i> {{resources.showSlopes}}</button>
-        </mat-menu>
-        <button mat-button class="chart-button chart-more-button" [matMenuTriggerFor]="appMenu" matTooltip="{{resources.more}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="More"><i class="fa icon-ellipsis-v fa-lg"></i></button>        
+        <div class="absolute right-0 bottom-0 flex flex-col m-1">
+            <button mat-button *ngIf="!isExpanded" (click)="changeState('table')" [class.active]="isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle table view"><i class="fa icon-table fa-lg"></i></button>
+            <button mat-button (click)="changeState('graph')" [class.active]="!isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle graph view"><i class="fa icon-area-chart fa-lg"></i></button>
+        </div>
+        <div class="absolute top-0 left-0 flex flex-col">
+            <button mat-button class="m-1" (click)="toggle()" angularticsCategory="Route statistics" angularticsAction="Route statistics close"><i class="fa icon-close fa-lg"></i></button>
+            <button mat-button class="m-1 max-sm:!hidden" *ngIf="!isTable" (click)="toggleExpand()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle expand view"><i class="fa fa-lg" [ngClass]="{ 'icon-chevron-right' : isExpanded, 'icon-chevron-left' : !isExpanded }"></i></button>
+            <mat-menu #appMenu="matMenu" overlapTrigger="false" xPosition="before">
+                <button mat-menu-item (click)="toggleKmMarker()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle KM markers">
+                    <i [class.active]="isKmMarkersOn" class="fa icon-map-marker p-1"></i> 
+                    <span class="ms-2">{{resources.kmPoi}}</span>
+                </button>
+                <button mat-menu-item (click)="toggleSlope()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle Slope">
+                    <i [class.active]="isSlopeOn" class="fa icon-line-chart p-1"></i> 
+                    <span class="ms-2">{{resources.showSlopes}}</span>
+                </button>
+            </mat-menu>
+            <button mat-button class="m-1" [matMenuTriggerFor]="appMenu" matTooltip="{{resources.more}}" matTooltipPosition="below" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="More"><i class="fa icon-ellipsis-v fa-lg"></i></button>        
+        </div>
     </div>
-    <div *ngIf="!isOpen" (click)="toggle()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Route statistics open">
-        <button mat-button class="pull-right" [class.active]="isOpen" matTooltip="{{resources.routeStatistics}}" matTooltipPosition="above"><i class="fa {{isTable ? 'icon-table' : 'icon-area-chart'}} fa-lg"></i></button>
+    <div class="flex flex-row" *ngIf="!isOpen" (click)="toggle()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Route statistics open">
+        <button mat-button [class.active]="isOpen" matTooltip="{{resources.routeStatistics}}" matTooltipPosition="above"><i class="fa {{isTable ? 'icon-table' : 'icon-area-chart'}} fa-lg"></i></button>
         <ng-container *ngIf="!isFollowing">
-            <div class="pull-right" matTooltip="{{resources.gain}}" matTooltipPosition="above">
+            <div matTooltip="{{resources.gain}}" matTooltipPosition="above">
                 <span class="control-container-item gutters"><i class="fa icon-arrow-up"></i> {{toShortNumber(gain)}} <span class="units">{{getUnits(gain)}}</span></span>
             </div>
-            <div class="pull-right" matTooltip="{{resources.loss}}" matTooltipPosition="above">
+            <div matTooltip="{{resources.loss}}" matTooltipPosition="above">
                 <span class="control-container-item gutters"><i class="fa icon-arrow-down"></i>&nbsp;<span dir="ltr">{{toShortNumber(loss)}}</span>&nbsp;<span class="units">{{getUnits(loss)}}</span></span>
             </div>
-            <div class="pull-right" matTooltip="{{resources.length}}" matTooltipPosition="above">
+            <div matTooltip="{{resources.length}}" matTooltipPosition="above">
                 <span class="control-container-item gutters"><i class="fa icon-arrow-right"></i> {{toShortNumber(length)}} <span class="units">{{getUnits(length)}}</span></span>
             </div>
         </ng-container>
         <ng-container *ngIf="isFollowing">
-            <div class="pull-right">
+            <div>
                 <span class="control-container-item gutters">ETA <span dir="ltr">{{ETA}}</span></span>
             </div>
-            <div class="pull-right" matTooltip="{{resources.remainingDistance}}" matTooltipPosition="above">
+            <div matTooltip="{{resources.remainingDistance}}" matTooltipPosition="above">
                 <span class="control-container-item gutters"><i class="fa icon-arrow-circle-right"></i>&nbsp;<span dir="ltr">{{toShortNumber(remainingDistance)}}</span>&nbsp;<span class="units">{{getUnits(remainingDistance)}}</span></span>
             </div>
-            <div class="pull-right" matTooltip="{{resources.traveledDistance}}" matTooltipPosition="above">
+            <div matTooltip="{{resources.traveledDistance}}" matTooltipPosition="above">
                 <span class="control-container-item gutters"><i class="fa icon-arrow-right"></i> {{toShortNumber(traveledDistance)}} <span class="units">{{getUnits(traveledDistance)}}</span></span>
             </div>
         </ng-container>
diff --git a/IsraelHiking.Web/src/application/components/route-statistics.component.scss b/IsraelHiking.Web/src/application/components/route-statistics.component.scss
index 4251384fa..6a9f38113 100644
--- a/IsraelHiking.Web/src/application/components/route-statistics.component.scss
+++ b/IsraelHiking.Web/src/application/components/route-statistics.component.scss
@@ -65,31 +65,6 @@ $buttons-margin: 5px;
     min-width: unset !important;
 }
 
-.chart-close-button {
-    top: $buttons-margin;
-    left: $buttons-margin;
-}
-
-.chart-expand-button {
-    top: calc(#{$buttons-margin} + #{$button-size});
-    left: $buttons-margin;
-}
-
-.chart-more-button {
-    top: calc(#{$buttons-margin} + 2 * #{$button-size});
-    left: $buttons-margin;
-}
-
-.chart-graph-button {
-    bottom: $buttons-margin;
-    right: $buttons-margin;
-}
-
-.chart-table-button {
-    bottom: calc(#{$buttons-margin} + #{$button-size});
-    right: $buttons-margin;
-}
-
 .chart-container-tooltip {
     top: 20px;
     position: absolute
@@ -100,10 +75,6 @@ $buttons-margin: 5px;
 }
 
 @media (width <= 550px) {
-    .hidden-xs {
-        display: none !important
-    }
-    
     .chart-control-container {
         width: calc(100vw - 2 * #{$control-border});
         height: $container-height-small-screen;
@@ -116,9 +87,4 @@ $buttons-margin: 5px;
     .chart-buttons .mat-mdc-button {
         padding: 0 !important;
     }
-
-    .chart-more-button {
-        top: calc(#{$buttons-margin} + #{$button-size});
-        left: $buttons-margin;
-    }
 }
diff --git a/IsraelHiking.Web/src/application/components/search.component.html b/IsraelHiking.Web/src/application/components/search.component.html
index f71fdf9d2..956c17450 100644
--- a/IsraelHiking.Web/src/application/components/search.component.html
+++ b/IsraelHiking.Web/src/application/components/search.component.html
@@ -1,6 +1,6 @@
 <div class="side-control maplibregl-ctrl !absolute align-next-to-menu">
     <div class="flex flex-row">
-        <button mat-button class="pull-right" (click)="toggleDirectional()" matTooltip="{{resources.directionalSearch}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Search" angularticsAction="Toggle directional search"><i class="fa fa-lg" [ngClass]="{'icon-plus': !directional.isOn, 'icon-minus': directional.isOn}"></i></button>
+        <button mat-button (click)="toggleDirectional()" matTooltip="{{resources.directionalSearch}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Search" angularticsAction="Toggle directional search"><i class="fa fa-lg" [ngClass]="{'icon-plus': !directional.isOn, 'icon-minus': directional.isOn}"></i></button>
         <div [dir]="resources.direction">
             <mat-form-field class="search-input-container" subscriptSizing="dynamic">
                 <input type="text" matInput #searchFromInput class="control-container-item" [formControl]="searchFrom" [matAutocomplete]="autoFrom" placeholder="{{resources.searchPlaceHolder}}" [dir]="resources.getDirection(fromContext.searchTerm)" (focus)="focusOnSearchInput()" (blur)="hasFocus = false">
@@ -14,18 +14,16 @@
         </div>
     </div>
     <ng-container *ngIf="directional.isOn">
-        <div class="pull-left-important flex flex-row">
-            <button mat-button class="pull-right" (click)="setRouting('Hike')" [ngClass]="{active : routingType === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="below"><i class="fa icon-hike fa-lg"></i></button>
-            <button mat-button class="pull-right" (click)="setRouting('Bike')" [ngClass]="{active : routingType === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="below"><i class="fa icon-bike fa-lg"></i></button>
-            <button mat-button class="pull-right" (click)="setRouting('4WD')" [ngClass]="{active : routingType === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="below"><i class="fa icon-four-by-four fa-lg"></i></button>
-            <button mat-button class="pull-right" (click)="setRouting('None')" [ngClass]="{active : routingType === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="below"><i class="fa icon-none fa-lg"></i></button>
+        <div class="flex flex-row mt-1 mb-1">
+            <button mat-button (click)="setRouting('Hike')" [ngClass]="{active : routingType === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="below"><i class="fa icon-hike fa-lg"></i></button>
+            <button mat-button (click)="setRouting('Bike')" [ngClass]="{active : routingType === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="below"><i class="fa icon-bike fa-lg"></i></button>
+            <button mat-button (click)="setRouting('4WD')" [ngClass]="{active : routingType === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="below"><i class="fa icon-four-by-four fa-lg"></i></button>
+            <button mat-button (click)="setRouting('None')" [ngClass]="{active : routingType === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="below"><i class="fa icon-none fa-lg"></i></button>
         </div>
-        <br />
-        <br />
         <div class="flex flex-row">
-            <button mat-button class="pull-right" (click)="searchRoute()"><i class="fa icon-arrow-left fa-lg"></i></button>
+            <button mat-button (click)="searchRoute()"><i class="fa icon-arrow-left fa-lg"></i></button>
             <div [dir]="resources.direction">
-                <mat-form-field class="pull-right search-input-container" subscriptSizing="dynamic">
+                <mat-form-field class="search-input-container" subscriptSizing="dynamic">
                     <input type="text" matInput #searchToInput [formControl]="searchTo" [matAutocomplete]="autoTo" class="control-container-item" placeholder="{{resources.searchPlaceHolder}}" [dir]="resources.getDirection(toContext.searchTerm)">
                     <mat-autocomplete positionY="below" #autoTo="matAutocomplete" [displayWith]="displayResults">
                         <mat-option *ngFor="let result of toContext.searchResults" [value]="result" [ngClass]="[resources.getTextAlignment(result.title), 'search-result-option']" [dir]="resources.getDirection(result.title)">
diff --git a/IsraelHiking.Web/src/application/components/search.component.scss b/IsraelHiking.Web/src/application/components/search.component.scss
index b69cef5cf..c59a30683 100644
--- a/IsraelHiking.Web/src/application/components/search.component.scss
+++ b/IsraelHiking.Web/src/application/components/search.component.scss
@@ -4,10 +4,6 @@
     right: 85px
 }
 
-.pull-left-important {
-    float: left !important;
-}
-
 .search-input-container {
     width: calc(100vw - 178px);
     @include mat.all-component-densities(-3);
diff --git a/IsraelHiking.Web/src/scss/common.scss b/IsraelHiking.Web/src/scss/common.scss
index d241ce8a2..75c938edb 100644
--- a/IsraelHiking.Web/src/scss/common.scss
+++ b/IsraelHiking.Web/src/scss/common.scss
@@ -119,7 +119,7 @@ body {
 }
 
 .active {
-    outline: 2px solid #32CD6D !important;
+    outline: 3px solid #32CD6D !important;
 }
 // photoswipe, used for placing overlay at the right z-index
 overlay.overlay-shown {