diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index a4621ec1..a2886dd2 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -107,43 +107,90 @@ class BookPage extends Component {
     );
   };
 
-  mainView = () => {
+  mainView = (doubleView, widthEm, heightEm) => {
     if (this.props.bookNotFound) {
       return this.NoOrdersFound();
     }
 
-    if (this.state.view === 'depth') {
+    if (doubleView) {
+      const width = widthEm * 0.9;
+      const bookTableWidth = 85;
+      const chartWidthEm = width - bookTableWidth;
+      const tableWidthXS = (bookTableWidth / width) * 12;
+      const chartWidthXS = (chartWidthEm / width) * 12;
+      console.log(bookTableWidth, chartWidthEm, tableWidthXS, chartWidthXS);
       return (
-        <DepthChart
-          bookLoading={this.props.bookLoading}
-          orders={this.props.bookOrders}
-          lastDayPremium={this.props.lastDayPremium}
-          currency={this.props.currency}
-          compact={true}
-          setAppState={this.props.setAppState}
-          limits={this.props.limits}
-          maxWidth={(this.props.windowWidth / this.props.theme.typography.fontSize) * 0.8} // EM units
-          maxHeight={(this.props.windowHeight / this.props.theme.typography.fontSize) * 0.8 - 11} // EM units
-        />
+        <Grid
+          container
+          alignItems='center'
+          justifyContent='flex-start'
+          spacing={1}
+          direction='row'
+          style={{ width: `${widthEm}em`, position: 'relative', left: `${widthEm / 140}em` }}
+        >
+          <Grid item xs={tableWidthXS} style={{ width: `${bookTableWidth}em` }}>
+            <BookTable
+              loading={this.props.bookLoading}
+              orders={this.props.bookOrders}
+              type={this.props.type}
+              currency={this.props.currency}
+              maxWidth={bookTableWidth} // EM units
+              maxHeight={heightEm * 0.8 - 11} // EM units
+            />
+          </Grid>
+          <Grid
+            item
+            xs={chartWidthXS}
+            style={{ width: `${chartWidthEm}em`, position: 'relative', left: '-10em' }}
+          >
+            <DepthChart
+              bookLoading={this.props.bookLoading}
+              orders={this.props.bookOrders}
+              lastDayPremium={this.props.lastDayPremium}
+              currency={this.props.currency}
+              compact={true}
+              setAppState={this.props.setAppState}
+              limits={this.props.limits}
+              maxWidth={chartWidthEm} // EM units
+              maxHeight={heightEm * 0.8 - 11} // EM units
+            />
+          </Grid>
+        </Grid>
       );
     } else {
-      return (
-        <BookTable
-          loading={this.props.bookLoading}
-          orders={this.props.bookOrders}
-          type={this.props.type}
-          currency={this.props.currency}
-          maxWidth={(this.props.windowWidth / this.props.theme.typography.fontSize) * 0.97} // EM units
-          maxHeight={(this.props.windowHeight / this.props.theme.typography.fontSize) * 0.8 - 11} // EM units
-        />
-      );
+      if (this.state.view === 'depth') {
+        return (
+          <DepthChart
+            bookLoading={this.props.bookLoading}
+            orders={this.props.bookOrders}
+            lastDayPremium={this.props.lastDayPremium}
+            currency={this.props.currency}
+            compact={true}
+            setAppState={this.props.setAppState}
+            limits={this.props.limits}
+            maxWidth={widthEm * 0.8} // EM units
+            maxHeight={heightEm * 0.8 - 11} // EM units
+          />
+        );
+      } else {
+        return (
+          <BookTable
+            loading={this.props.bookLoading}
+            orders={this.props.bookOrders}
+            type={this.props.type}
+            currency={this.props.currency}
+            maxWidth={widthEm * 0.97} // EM units
+            maxHeight={heightEm * 0.8 - 11} // EM units
+          />
+        );
+      }
     }
   };
 
-  getTitle = () => {
+  getTitle = (doubleView) => {
     const { t } = this.props;
 
-    if (this.state.view == 'list') {
+    if (this.state.view == 'list' || doubleView) {
       if (this.props.type == 0) {
         return t('You are SELLING BTC for {{currencyCode}}', {
           currencyCode: this.props.bookCurrencyCode,
@@ -160,10 +207,10 @@ class BookPage extends Component {
     }
   };
 
-  render() {
+  mainFilters = () => {
     const { t } = this.props;
     return (
-      <Grid className='orderBook' container spacing={1} sx={{ minWidth: 400 }}>
+      <>
         <IconButton
           sx={{ position: 'fixed', right: '0px', top: '30px' }}
           onClick={() => this.setState({ loading: true }) & this.getOrderDetails()}
@@ -235,13 +282,26 @@ class BookPage extends Component {
             </Select>
           </FormControl>
         </Grid>
+      </>
+    );
+  };
+
+  render() {
+    const { t } = this.props;
+    const widthEm = this.props.windowWidth / this.props.theme.typography.fontSize;
+    const heightEm = this.props.windowHeight / this.props.theme.typography.fontSize;
+    const doubleView = widthEm > 115;
+
+    return (
+      <Grid className='orderBook' container spacing={1} sx={{ minWidth: 400 }}>
+        {this.mainFilters()}
         <Grid item xs={12} align='center'>
           <Typography component='h5' variant='h5'>
-            {this.getTitle()}
+            {this.getTitle(doubleView)}
           </Typography>
         </Grid>
         <Grid item xs={12} align='center'>
-          {this.mainView()}
+          {this.mainView(doubleView, widthEm, heightEm)}
         </Grid>
         <Grid item xs={12} align='center'>
           <ButtonGroup variant='contained' aria-label='outlined primary button group'>
@@ -250,17 +310,23 @@ class BookPage extends Component {
                 <Button variant='contained' color='primary' to='/make/' component={Link}>
                   {t('Make Order')}
                 </Button>
-                <Button color='inherit' style={{ color: '#111111' }} onClick={this.handleClickView}>
-                  {this.state.view == 'depth' ? (
-                    <>
-                      <FormatListBulleted /> {t('List')}
-                    </>
-                  ) : (
-                    <>
-                      <BarChart /> {t('Chart')}
-                    </>
-                  )}
-                </Button>
+                {doubleView ? null : (
+                  <Button
+                    color='inherit'
+                    style={{ color: '#111111' }}
+                    onClick={this.handleClickView}
+                  >
+                    {this.state.view == 'depth' ? (
+                      <>
+                        <FormatListBulleted /> {t('List')}
+                      </>
+                    ) : (
+                      <>
+                        <BarChart /> {t('Chart')}
+                      </>
+                    )}
+                  </Button>
+                )}
               </>
             ) : null}
             <Button color='secondary' variant='contained' to='/' component={Link}>
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 7b7975a6..6f12b3b7 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -171,12 +171,10 @@ class BottomBar extends Component {
 
   showProfileButton = () => {
     return (
-      this.props.avatarLoaded && (
-        window.NativeRobosats || (
-          (this.props.token ? getCookie('robot_token') === this.props.token : true) &&
-          getCookie('sessionid')
-        )
-      )
+      this.props.avatarLoaded &&
+      (window.NativeRobosats ||
+        ((this.props.token ? getCookie('robot_token') === this.props.token : true) &&
+          getCookie('sessionid')))
     );
   };
 
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 52f42017..10189be0 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { HashRouter, BrowserRouter , Switch, Route } from 'react-router-dom';
+import { HashRouter, BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import UserGenPage from './UserGenPage';
 import MakerPage from './MakerPage';
@@ -59,16 +59,16 @@ export default class HomePage extends Component {
   getBasename() {
     if (window.NativeRobosats) {
       // Only for Android
-      return window.location.pathname
+      return window.location.pathname;
     }
 
-    return ""
+    return '';
   }
 
   render() {
     const fontSize = this.props.theme.typography.fontSize;
     const fontSizeFactor = fontSize / 14; // default fontSize is 14
-    const Router = window.NativeRobosats ? HashRouter : BrowserRouter
+    const Router = window.NativeRobosats ? HashRouter : BrowserRouter;
 
     return (
       <Router basename={this.getBasename()}>
diff --git a/frontend/src/components/Robots/RobotAvatar/index.tsx b/frontend/src/components/Robots/RobotAvatar/index.tsx
index 62e8d4d4..a7002510 100644
--- a/frontend/src/components/Robots/RobotAvatar/index.tsx
+++ b/frontend/src/components/Robots/RobotAvatar/index.tsx
@@ -30,13 +30,13 @@ const RobotAvatar: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [avatarSrc, setAvatarSrc] = useState<string>()
+  const [avatarSrc, setAvatarSrc] = useState<string>();
 
   useEffect(() => {
     if (nickname) {
-      apiClient.fileImageUrl('/static/assets/avatars/' + nickname + '.png').then(setAvatarSrc)
+      apiClient.fileImageUrl('/static/assets/avatars/' + nickname + '.png').then(setAvatarSrc);
     }
-  }, [nickname])
+  }, [nickname]);
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '6px', top: '1px' }}>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 74008cf9..81ed25c6 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -296,10 +296,9 @@ class UserGenPage extends Component {
                             <IconButton
                               color='primary'
                               disabled={
-                                !this.props.avatarLoaded || (
-                                  !window.NativeRobosats && 
-                                  !(getCookie('robot_token') === this.state.token)
-                                )
+                                !this.props.avatarLoaded ||
+                                (!window.NativeRobosats &&
+                                  !(getCookie('robot_token') === this.state.token))
                               }
                               onClick={() =>
                                 saveAsJson(this.state.nickname + '.json', this.createJsonFile())
@@ -317,10 +316,9 @@ class UserGenPage extends Component {
                           <IconButton
                             color={this.props.copiedToken ? 'inherit' : 'primary'}
                             disabled={
-                              !this.props.avatarLoaded || (
-                                !window.NativeRobosats && 
-                                !(getCookie('robot_token') === this.state.token)
-                              )
+                              !this.props.avatarLoaded ||
+                              (!window.NativeRobosats &&
+                                !(getCookie('robot_token') === this.state.token))
                             }
                             onClick={() =>
                               copyToClipboard(getCookie('robot_token')) &
@@ -375,10 +373,9 @@ class UserGenPage extends Component {
           <ButtonGroup variant='contained' aria-label='outlined primary button group'>
             <Button
               disabled={
-                this.state.loadingRobot !== false || (
-                  !window.NativeRobosats &&
-                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
-                )
+                this.state.loadingRobot !== false ||
+                (!window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true))
               }
               color='primary'
               to='/make/'
@@ -396,10 +393,9 @@ class UserGenPage extends Component {
             />
             <Button
               disabled={
-                this.state.loadingRobot !== false || (
-                  !window.NativeRobosats &&
-                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
-                )
+                this.state.loadingRobot !== false ||
+                (!window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true))
               }
               color='secondary'
               to='/book/'
diff --git a/frontend/src/components/i18n.Native.js b/frontend/src/components/i18n.Native.js
index 39254d59..8db4e57b 100644
--- a/frontend/src/components/i18n.Native.js
+++ b/frontend/src/components/i18n.Native.js
@@ -3,29 +3,29 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import HttpApi from 'i18next-http-backend';
 
-import translationEN from "../../static/locales/en.json";
-import translationES from "../../static/locales/es.json";
-import translationDE from "../../static/locales/de.json";
-import translationRU from "../../static/locales/ru.json";
-import translationPL from "../../static/locales/pl.json";
-import translationFR from "../../static/locales/fr.json";
-import translationCA from "../../static/locales/ca.json";
-import translationIT from "../../static/locales/it.json";
-import translationPT from "../../static/locales/pt.json";
-import translationEU from "../../static/locales/th.json";
+import translationEN from '../../static/locales/en.json';
+import translationES from '../../static/locales/es.json';
+import translationDE from '../../static/locales/de.json';
+import translationRU from '../../static/locales/ru.json';
+import translationPL from '../../static/locales/pl.json';
+import translationFR from '../../static/locales/fr.json';
+import translationCA from '../../static/locales/ca.json';
+import translationIT from '../../static/locales/it.json';
+import translationPT from '../../static/locales/pt.json';
+import translationEU from '../../static/locales/th.json';
 
 const config = {
   resources: {
-    en: {translations: translationEN},
-    es: {translations: translationES},
-    ru: {translations: translationRU},
-    de: {translations: translationDE},
-    pl: {translations: translationPL},
-    fr: {translations: translationFR},
-    ca: {translations: translationCA},
-    it: {translations: translationIT},
-    pt: {translations: translationPT},
-    eu: {translations: translationEU},
+    en: { translations: translationEN },
+    es: { translations: translationES },
+    ru: { translations: translationRU },
+    de: { translations: translationDE },
+    pl: { translations: translationPL },
+    fr: { translations: translationFR },
+    ca: { translations: translationCA },
+    it: { translations: translationIT },
+    pt: { translations: translationPT },
+    eu: { translations: translationEU },
   },
   fallbackLng: 'en',
   debug: false,
@@ -40,13 +40,8 @@ const config = {
   react: {
     useSuspense: false,
   },
-}
+};
 
-
-i18n
-  .use(HttpApi)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init(config);
+i18n.use(HttpApi).use(LanguageDetector).use(initReactI18next).init(config);
 
 export default i18n;
diff --git a/frontend/src/components/i18n.js b/frontend/src/components/i18n.js
index 443e1d65..ae2c72b4 100644
--- a/frontend/src/components/i18n.js
+++ b/frontend/src/components/i18n.js
@@ -26,13 +26,8 @@ const config = {
   react: {
     useSuspense: false,
   },
-}
+};
 
-
-i18n
-  .use(HttpApi)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init(config);
+i18n.use(HttpApi).use(LanguageDetector).use(initReactI18next).init(config);
 
 export default i18n;
diff --git a/frontend/src/services/Native/index.d.ts b/frontend/src/services/Native/index.d.ts
index de95860e..749142e9 100644
--- a/frontend/src/services/Native/index.d.ts
+++ b/frontend/src/services/Native/index.d.ts
@@ -1,28 +1,28 @@
-import NativeRobosats from './index'
+import NativeRobosats from './index';
 
 declare global {
   interface Window {
-    ReactNativeWebView?: ReactNativeWebView
-    NativeRobosats?: NativeRobosats
+    ReactNativeWebView?: ReactNativeWebView;
+    NativeRobosats?: NativeRobosats;
   }
 }
 
 export interface ReactNativeWebView {
-  postMessage(message: string): void
+  postMessage(message: string): void;
 }
 
 export interface NativeWebViewMessageHttp {
-  id?: number
-  category: 'http'
-  type: 'post' | 'get' | 'put' | 'delete' | 'xhr'
-  path: string
-  headers?: object
-  body?: object
+  id?: number;
+  category: 'http';
+  type: 'post' | 'get' | 'put' | 'delete' | 'xhr';
+  path: string;
+  headers?: object;
+  body?: object;
 }
 
-export declare type NativeWebViewMessage = NativeWebViewMessageHttp
+export declare type NativeWebViewMessage = NativeWebViewMessageHttp;
 
 export interface NativeRobosatsPromise {
-  resolve: (value: object | PromiseLike<object>) => void, 
-  reject: (reason?: any) => void
+  resolve: (value: object | PromiseLike<object>) => void;
+  reject: (reason?: any) => void;
 }
diff --git a/frontend/src/services/Native/index.ts b/frontend/src/services/Native/index.ts
index de46804d..cbdabc42 100644
--- a/frontend/src/services/Native/index.ts
+++ b/frontend/src/services/Native/index.ts
@@ -1,43 +1,51 @@
-import { NativeRobosatsPromise, NativeWebViewMessage } from './index.d'
+import { NativeRobosatsPromise, NativeWebViewMessage } from './index.d';
 
 class NativeRobosats {
-  constructor() { 
-    this.messageCounter = 0
+  constructor() {
+    this.messageCounter = 0;
   }
 
-  private messageCounter: number
+  private messageCounter: number;
 
-  private pendingMessages: {[id:number]: NativeRobosatsPromise} = {}
+  private pendingMessages: { [id: number]: NativeRobosatsPromise } = {};
 
-  public onMessageResolve: (messageId: number, response?: object) => void = (messageId, response = {}) =>{
+  public onMessageResolve: (messageId: number, response?: object) => void = (
+    messageId,
+    response = {},
+  ) => {
     if (this.pendingMessages[messageId]) {
-      this.pendingMessages[messageId].resolve(response)
-      delete this.pendingMessages[messageId]
+      this.pendingMessages[messageId].resolve(response);
+      delete this.pendingMessages[messageId];
     }
-  }
+  };
 
-  public onMessageReject: (messageId: number, response?: object) => void = (messageId, response = {}) =>{
+  public onMessageReject: (messageId: number, response?: object) => void = (
+    messageId,
+    response = {},
+  ) => {
     if (this.pendingMessages[messageId]) {
-      this.pendingMessages[messageId].reject(response)
-      delete this.pendingMessages[messageId]
+      this.pendingMessages[messageId].reject(response);
+      delete this.pendingMessages[messageId];
     }
-  }
+  };
 
-  public postMessage: (message: NativeWebViewMessage) => Promise<{[key: string]: any}> = (message) => {
-    this.messageCounter += 1
-    message.id = this.messageCounter
-    const json = JSON.stringify(message)
-    window.ReactNativeWebView?.postMessage(json)
+  public postMessage: (message: NativeWebViewMessage) => Promise<{ [key: string]: any }> = (
+    message,
+  ) => {
+    this.messageCounter += 1;
+    message.id = this.messageCounter;
+    const json = JSON.stringify(message);
+    window.ReactNativeWebView?.postMessage(json);
 
     return new Promise<object>(async (resolve, reject) => {
       if (message.id) {
         this.pendingMessages[message.id] = {
           resolve: resolve,
-          reject: reject
-        }
+          reject: reject,
+        };
       }
-    })
-  }
+    });
+  };
 }
 
-export default NativeRobosats
+export default NativeRobosats;
diff --git a/frontend/src/services/api/ApiNativeClient/index.ts b/frontend/src/services/api/ApiNativeClient/index.ts
index 9fc7fc7b..5e128db1 100644
--- a/frontend/src/services/api/ApiNativeClient/index.ts
+++ b/frontend/src/services/api/ApiNativeClient/index.ts
@@ -4,17 +4,17 @@ import NativeRobosats from '../../Native';
 
 class ApiNativeClient implements ApiClient {
   constructor() {
-    window.NativeRobosats = new NativeRobosats()
+    window.NativeRobosats = new NativeRobosats();
   }
 
-  private assetsCache : {[path:string]: string} = {}
+  private assetsCache: { [path: string]: string } = {};
 
   private readonly getHeaders: () => HeadersInit = () => {
     return { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') || '' };
   };
 
   public put: (path: string, body: object) => Promise<object | undefined> = async (path, body) => {
-    return new Promise((res, _rej) => res({}))
+    return new Promise((res, _rej) => res({}));
   };
 
   public delete: (path: string) => Promise<object | undefined> = async (path) => {
@@ -22,8 +22,8 @@ class ApiNativeClient implements ApiClient {
       category: 'http',
       type: 'delete',
       path,
-      headers: this.getHeaders()
-    })
+      headers: this.getHeaders(),
+    });
   };
 
   public post: (path: string, body: object) => Promise<object | undefined> = async (path, body) => {
@@ -32,16 +32,16 @@ class ApiNativeClient implements ApiClient {
       type: 'post',
       path,
       body,
-      headers: this.getHeaders()
-    })
+      headers: this.getHeaders(),
+    });
   };
 
   public get: (path: string) => Promise<object | undefined> = async (path) => {
     return window.NativeRobosats?.postMessage({
       category: 'http',
       type: 'get',
-      path
-    })
+      path,
+    });
   };
 
   public fileImageUrl: (path: string) => Promise<string | undefined> = async (path) => {
@@ -50,18 +50,18 @@ class ApiNativeClient implements ApiClient {
     }
 
     if (this.assetsCache[path]) {
-      return this.assetsCache[path]
+      return this.assetsCache[path];
     }
 
     const fileB64 = await window.NativeRobosats?.postMessage({
       category: 'http',
       type: 'xhr',
-      path
-    })
+      path,
+    });
 
-    this.assetsCache[path] = `data:image/png;base64,${fileB64?.b64Data}`
+    this.assetsCache[path] = `data:image/png;base64,${fileB64?.b64Data}`;
 
-    return this.assetsCache[path]
+    return this.assetsCache[path];
   };
 }
 
diff --git a/frontend/src/services/api/ApiWebClient/index.ts b/frontend/src/services/api/ApiWebClient/index.ts
index 8e5c65a5..db11d52f 100644
--- a/frontend/src/services/api/ApiWebClient/index.ts
+++ b/frontend/src/services/api/ApiWebClient/index.ts
@@ -40,8 +40,8 @@ class ApiWebClient implements ApiClient {
     if (!path) {
       return '';
     }
-    
-    return window.location.origin + path
+
+    return window.location.origin + path;
   };
 }
 
diff --git a/frontend/src/services/api/index.ts b/frontend/src/services/api/index.ts
index 96aa1b45..367dcf8b 100644
--- a/frontend/src/services/api/index.ts
+++ b/frontend/src/services/api/index.ts
@@ -9,4 +9,6 @@ export interface ApiClient {
   fileImageUrl: (path: string) => Promise<string | undefined>;
 }
 
-export const apiClient: ApiClient = window.ReactNativeWebView ? new ApiNativeClient() : new ApiWebClient();
+export const apiClient: ApiClient = window.ReactNativeWebView
+  ? new ApiNativeClient()
+  : new ApiWebClient();
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 350a46d3..a78de030 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -169,7 +169,7 @@ input[type='number'] {
   width: auto !important;
 }
 
-@media (max-height: 725px) {
+@media (max-height: 725px) and (max-width: 925px) {
   .appCenter:has(> div.MuiGrid-root:first-child, > div.MuiBox-root:first-child) {
     overflow-y: auto;
     margin-top: 1em;
diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
index 85113774..0b77755c 100644
--- a/frontend/webpack.config.ts
+++ b/frontend/webpack.config.ts
@@ -19,7 +19,7 @@ const config: Configuration = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
-  }
+  },
 };
 
 const configWeb: Configuration = {
@@ -43,9 +43,9 @@ const configMobile: Configuration = {
           condition: 'if-replacement-exists',
           replacement: path.resolve(__dirname, 'src/components/i18n.Native.js'),
           async: true,
-        }
-      }
-    ]
+        },
+      },
+    ],
   },
   output: {
     path: path.resolve(__dirname, '../mobile/html/Web.bundle/js'),