diff --git a/apps/web/Components/Calculation/Form/index.jsx b/apps/web/Components/Calculation/Form/index.jsx
index 5448eee..74bcb9d 100644
--- a/apps/web/Components/Calculation/Form/index.jsx
+++ b/apps/web/Components/Calculation/Form/index.jsx
@@ -46,11 +46,11 @@ const ComponentWrapper = styled.div`
 
 function Form({ prune }) {
   return (
-    <Wrapper>
+    <Wrapper id="form">
       <Tabs type="card" tabBarGutter="5px">
         {formTabs
           .filter((tab) => !prune?.includes(tab.id))
-          .map(({ id, title, Component }) => (
+          .map(({ Component, id, title }) => (
             <Tabs.TabPane tab={title} key={id}>
               <ComponentWrapper>
                 <Component />
diff --git a/apps/web/Components/Calculation/Settings/index.jsx b/apps/web/Components/Calculation/Settings/index.jsx
index 7c140bd..e0bf70c 100644
--- a/apps/web/Components/Calculation/Settings/index.jsx
+++ b/apps/web/Components/Calculation/Settings/index.jsx
@@ -28,7 +28,7 @@ export default function Settings() {
     : renderFormRows(config.paramsRows);
 
   return (
-    <Wrapper>
+    <Wrapper id="settings">
       {mainRows}
       {paramsRows}
     </Wrapper>
diff --git a/apps/web/Components/Layout/Page.jsx b/apps/web/Components/Layout/Page.jsx
index 33f641e..9c52f82 100644
--- a/apps/web/Components/Layout/Page.jsx
+++ b/apps/web/Components/Layout/Page.jsx
@@ -1,13 +1,31 @@
-import { min } from '@/styles/mq';
-import styled from 'styled-components';
+import { max, min } from '@/styles/mq';
+import styled, { css } from 'styled-components';
 import { Box } from 'ui/grid';
 
+const order = css`
+  ${max('laptop-m')} {
+    #settings {
+      order: 1;
+    }
+
+    #form {
+      order: 2;
+    }
+
+    #output {
+      order: 3;
+    }
+  }
+`;
+
 export const Grid = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 10px;
 
-  ${min('laptop')} {
+  ${order}
+
+  ${min('laptop-m')} {
     display: grid;
     align-items: flex-start;
     grid-template-columns: 2fr 1fr;
diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx
index c39734d..f8c2f9b 100644
--- a/apps/web/Components/Output/index.jsx
+++ b/apps/web/Components/Output/index.jsx
@@ -58,7 +58,7 @@ const Output = observer(() => {
   }, [$results.payments.length, hasErrors]);
 
   return (
-    <Wrapper>
+    <Wrapper id="output">
       <Tabs
         items={items}
         activeKey={activeKey}
diff --git a/apps/web/config/ui.js b/apps/web/config/ui.js
index 57d7c1a..0f2f862 100644
--- a/apps/web/config/ui.js
+++ b/apps/web/config/ui.js
@@ -1,5 +1,5 @@
 /* eslint-disable canonical/sort-keys */
-const threshold = 0;
+const threshold = 1;
 
 const screens = {
   tablet: 768,
diff --git a/apps/web/styles/mq.ts b/apps/web/styles/mq.ts
index 708af78..751354f 100644
--- a/apps/web/styles/mq.ts
+++ b/apps/web/styles/mq.ts
@@ -1,8 +1,8 @@
 import { screens, threshold } from '@/config/ui';
 
 export function min(breakpoint: keyof typeof screens) {
-  return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
+  return `@media (min-width: calc(${screens[breakpoint]}px))`;
 }
 export function max(breakpoint: keyof typeof screens) {
-  return `@media (max-width: calc(${screens[breakpoint]}px))`;
+  return `@media (max-width: calc(${screens[breakpoint]}px - ${threshold}px))`;
 }