diff --git a/index.html b/index.html
index 2ce03f53..f1bce433 100644
--- a/index.html
+++ b/index.html
@@ -4,31 +4,15 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script>
-      var _rollbarConfig = {
-        accessToken: "1892d9139f4a4ef6a837124fc1c71b90",
-        captureUncaught: true,
-        captureUnhandledRejections: true,
-        environment: '%MODE%',
-        payload: {
-          client: {
-            javascript: {
-              code_version: '1.0.1',
-            }
-          },
-        }
-      };
-      !function(r){var e={};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,e,n){o.o(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:n})},o.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.t=function(r,e){if(1&e&&(r=o(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var t in r)o.d(n,t,function(e){return r[e]}.bind(null,t));return n},o.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(e,"a",e),e},o.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},o.p="",o(o.s=0)}([function(r,e,o){"use strict";var n=o(1),t=o(5);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.0/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async;var a=n.setupShim(window,_rollbarConfig),l=t(_rollbarConfig);window.rollbar=n.Rollbar,a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,l)},function(r,e,o){"use strict";var n=o(2),t=o(3);function a(r){return function(){try{return r.apply(this,arguments)}catch(r){try{console.error("[Rollbar]: Internal error",r)}catch(r){}}}}var l=0;function i(r,e){this.options=r,this._rollbarOldOnError=null;var o=l++;this.shimId=function(){return o},"undefined"!=typeof window&&window._rollbarShims&&(window._rollbarShims[o]={handler:e,messages:[]})}var s=o(4),d=function(r,e){return new i(r,e)},c=function(r){return new s(d,r)};function u(r){return a((function(){var e=this,o=Array.prototype.slice.call(arguments,0),n={shim:e,method:r,args:o,ts:new Date};window._rollbarShims[this.shimId()].messages.push(n)}))}i.prototype.loadFull=function(r,e,o,n,t){var l=!1,i=e.createElement("script"),s=e.getElementsByTagName("script")[0],d=s.parentNode;i.crossOrigin="",i.src=n.rollbarJsUrl,o||(i.async=!0),i.onload=i.onreadystatechange=a((function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){i.onload=i.onreadystatechange=null;try{d.removeChild(i)}catch(r){}l=!0,function(){var e;if(void 0===r._rollbarDidLoad){e=new Error("rollbar.js did not load");for(var o,n,a,l,i=0;o=r._rollbarShims[i++];)for(o=o.messages||[];n=o.shift();)for(a=n.args||[],i=0;i<a.length;++i)if("function"==typeof(l=a[i])){l(e);break}}"function"==typeof t&&t(e)}()}})),d.insertBefore(i,s)},i.prototype.wrap=function(r,e,o){try{var n;if(n="function"==typeof e?e:function(){return e||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._rollbar_wrapped&&(r._rollbar_wrapped=function(){o&&"function"==typeof o&&o.apply(this,arguments);try{return r.apply(this,arguments)}catch(o){var e=o;throw e&&("string"==typeof e&&(e=new String(e)),e._rollbarContext=n()||{},e._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=e),e}},r._rollbar_wrapped._isWrap=!0,r.hasOwnProperty))for(var t in r)r.hasOwnProperty(t)&&(r._rollbar_wrapped[t]=r[t]);return r._rollbar_wrapped}catch(e){return r}};for(var p="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","),f=0;f<p.length;++f)i.prototype[p[f]]=u(p[f]);r.exports={setupShim:function(r,e){if(r){var o=e.globalAlias||"Rollbar";if("object"==typeof r[o])return r[o];r._rollbarShims={},r._rollbarWrappedError=null;var l=new c(e);return a((function(){e.captureUncaught&&(l._rollbarOldOnError=r.onerror,n.captureUncaughtExceptions(r,l,!0),e.wrapGlobalEventHandlers&&t(r,l,!0)),e.captureUnhandledRejections&&n.captureUnhandledRejections(r,l,!0);var a=e.autoInstrument;return!1!==e.enabled&&(void 0===a||!0===a||"object"==typeof a&&a.network)&&r.addEventListener&&(r.addEventListener("load",l.captureLoad.bind(l)),r.addEventListener("DOMContentLoaded",l.captureDomContentLoaded.bind(l))),r[o]=l,l}))()}},Rollbar:c}},function(r,e,o){"use strict";function n(r,e,o,n){r._rollbarWrappedError&&(n[4]||(n[4]=r._rollbarWrappedError),n[5]||(n[5]=r._rollbarWrappedError._rollbarContext),r._rollbarWrappedError=null);var t=e.handleUncaughtException.apply(e,n);o&&o.apply(r,n),"anonymous"===t&&(e.anonymousErrorsPending+=1)}r.exports={captureUncaughtExceptions:function(r,e,o){if(r){var t;if("function"==typeof e._rollbarOldOnError)t=e._rollbarOldOnError;else if(r.onerror){for(t=r.onerror;t._rollbarOldOnError;)t=t._rollbarOldOnError;e._rollbarOldOnError=t}e.handleAnonymousErrors();var a=function(){var o=Array.prototype.slice.call(arguments,0);n(r,e,t,o)};o&&(a._rollbarOldOnError=t),r.onerror=a}},captureUnhandledRejections:function(r,e,o){if(r){"function"==typeof r._rollbarURH&&r._rollbarURH.belongsToShim&&r.removeEventListener("unhandledrejection",r._rollbarURH);var n=function(r){var o,n,t;try{o=r.reason}catch(r){o=void 0}try{n=r.promise}catch(r){n="[unhandledrejection] error getting `promise` from event"}try{t=r.detail,!o&&t&&(o=t.reason,n=t.promise)}catch(r){}o||(o="[unhandledrejection] error getting `reason` from event"),e&&e.handleUnhandledRejection&&e.handleUnhandledRejection(o,n)};n.belongsToShim=o,r._rollbarURH=n,r.addEventListener("unhandledrejection",n)}}}},function(r,e,o){"use strict";function n(r,e,o){if(e.hasOwnProperty&&e.hasOwnProperty("addEventListener")){for(var n=e.addEventListener;n._rollbarOldAdd&&n.belongsToShim;)n=n._rollbarOldAdd;var t=function(e,o,t){n.call(this,e,r.wrap(o),t)};t._rollbarOldAdd=n,t.belongsToShim=o,e.addEventListener=t;for(var a=e.removeEventListener;a._rollbarOldRemove&&a.belongsToShim;)a=a._rollbarOldRemove;var l=function(r,e,o){a.call(this,r,e&&e._rollbar_wrapped||e,o)};l._rollbarOldRemove=a,l.belongsToShim=o,e.removeEventListener=l}}r.exports=function(r,e,o){if(r){var t,a,l="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(t=0;t<l.length;++t)r[a=l[t]]&&r[a].prototype&&n(e,r[a].prototype,o)}}},function(r,e,o){"use strict";function n(r,e){this.impl=r(e,this),this.options=e,function(r){for(var e=function(r){return function(){var e=Array.prototype.slice.call(arguments,0);if(this.impl[r])return this.impl[r].apply(this.impl,e)}},o="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad".split(","),n=0;n<o.length;n++)r[o[n]]=e(o[n])}(n.prototype)}n.prototype._swapAndProcessMessages=function(r,e){var o,n,t;for(this.impl=r(this.options);o=e.shift();)n=o.method,t=o.args,this[n]&&"function"==typeof this[n]&&("captureDomContentLoaded"===n||"captureLoad"===n?this[n].apply(this,[t[0],o.ts]):this[n].apply(this,t));return this},r.exports=n},function(r,e,o){"use strict";r.exports=function(r){return function(e){if(!e&&!window._rollbarInitialized){for(var o,n,t=(r=r||{}).globalAlias||"Rollbar",a=window.rollbar,l=function(r){return new a(r)},i=0;o=window._rollbarShims[i++];)n||(n=o.handler),o.handler._swapAndProcessMessages(l,o.messages);window[t]=n,window._rollbarInitialized=!0}}}}]);
-    </script>
+    <title>MemoCard</title>
   </head>
   <script src="https://telegram.org/js/telegram-web-app.js"></script>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-<!--  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>-->
-<!--  <script>-->
-<!--    eruda.init();-->
-<!--  </script>-->
+  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+  <script>
+    eruda.init();
+  </script>
 </html>
diff --git a/package.json b/package.json
index 198ff02b..a6ea9ab3 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev:frontend:start": "vite",
     "dev:api:start": "npx wrangler pages dev /functions --compatibility-date=2023-09-22",
     "dev:tunnel": "../ngrok http --domain=causal-magpie-closing.ngrok-free.app 5173",
-    "build": "vite build",
+    "build": "cp index.build.html index.html && vite build",
     "typecheck": "npx tsc",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "test:api": "npx vitest --dir functions/",
diff --git a/src/lib/keyboard/useMacTabNavigationFix.tsx b/src/lib/keyboard/useMacTabNavigationFix.tsx
new file mode 100644
index 00000000..56a0057d
--- /dev/null
+++ b/src/lib/keyboard/useMacTabNavigationFix.tsx
@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+
+const isMacOS = /Mac OS X/i.test(navigator.userAgent);
+
+// Custom hook for handling tab navigation in Safari on macOS
+// It's either a bug of Telegram for Mac or some issues with Safari WebView
+export const useMacTabNavigationFix = () => {
+  useEffect(() => {
+    if (!isMacOS) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+
+        const inputs = Array.from(document.querySelectorAll("input, textarea"));
+        const activeElement = document.activeElement;
+        // @ts-expect-error
+        const currentIndex = inputs.indexOf(activeElement);
+        if (currentIndex === -1) {
+          // No input is currently focused, focus the first input
+          if (inputs.length > 0) {
+            // @ts-expect-error
+            inputs[0].focus();
+          }
+        } else {
+          if (event.shiftKey && currentIndex > 0) {
+            // Shift + Tab was pressed
+            // @ts-expect-error
+            inputs[currentIndex - 1].focus();
+          } else if (
+            !event.shiftKey &&
+            currentIndex >= 0 &&
+            currentIndex < inputs.length - 1
+          ) {
+            // Only Tab was pressed
+            // @ts-expect-error
+            inputs[currentIndex + 1].focus();
+          }
+        }
+      }
+    };
+
+    // Only keyup works here, events like keydown and keypress don't
+    document.addEventListener("keyup", handleKeyDown);
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, []);
+};
diff --git a/src/screens/app.tsx b/src/screens/app.tsx
index b918e1e3..2dd285eb 100644
--- a/src/screens/app.tsx
+++ b/src/screens/app.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 import { MainScreen } from "./deck-list/main-screen.tsx";
 import { DeckScreen } from "./deck-review/deck-screen.tsx";
 import { ReviewStoreProvider } from "../store/review-store-context.tsx";
-import { Screen, screenStore } from "../store/screen-store.ts";
+import { screenStore } from "../store/screen-store.ts";
 import { DeckFormScreen } from "./deck-form/deck-form-screen.tsx";
 import { DeckFormStoreProvider } from "../store/deck-form-store-context.tsx";
 import { QuickAddCardForm } from "./deck-form/quick-add-card-form.tsx";
@@ -15,19 +15,19 @@ export const App = observer(() => {
   return (
     <div>
       <VersionWarning />
-      {screenStore.screen === Screen.Main && <MainScreen />}
+      {screenStore.screen.type === "main" && <MainScreen />}
       {screenStore.isDeckPreviewScreen && (
         <ReviewStoreProvider>
           <DeckScreen />
         </ReviewStoreProvider>
       )}
-      {screenStore.screen === Screen.DeckForm && (
+      {screenStore.screen.type === "deckForm" && (
         <DeckFormStoreProvider>
           <DeckFormScreen />
         </DeckFormStoreProvider>
       )}
-      {screenStore.screen === Screen.CardQuickAddForm && <QuickAddCardForm />}
-      {screenStore.screen === Screen.UserSettings && (
+      {screenStore.screen.type === "cardQuickAddForm" && <QuickAddCardForm />}
+      {screenStore.screen.type === "userSettings" && (
         <UserSettingsStoreProvider>
           <UserSettingsMain />
         </UserSettingsStoreProvider>
diff --git a/src/screens/deck-form/card-form-view.tsx b/src/screens/deck-form/card-form-view.tsx
index d1447b1f..ff1ef0c1 100644
--- a/src/screens/deck-form/card-form-view.tsx
+++ b/src/screens/deck-form/card-form-view.tsx
@@ -24,15 +24,15 @@ export const CardFormView = observer((props: Props) => {
     >
       <h3 className={css({ textAlign: "center" })}>Add card</h3>
       <Label text={"Front"} isRequired>
-        <Input {...cardForm.front.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.front} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Back"} isRequired>
-        <Input {...cardForm.back.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.back} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Example / Note"}>
-        <Input {...cardForm.example.props} rows={3} type={"textarea"} />
+        <Input field={cardForm.example} rows={3} type={"textarea"} />
       </Label>
     </div>
   );
diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
index 401fea78..a32c90f0 100644
--- a/src/screens/deck-form/deck-form.tsx
+++ b/src/screens/deck-form/deck-form.tsx
@@ -11,9 +11,13 @@ import { screenStore } from "../../store/screen-store.ts";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
+import { assert } from "../../lib/typescript/assert.ts";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
+  const screen = screenStore.screen;
+  assert(screen.type === "deckForm");
 
   useMount(() => {
     deckFormStore.loadForm();
@@ -25,6 +29,7 @@ export const DeckForm = observer(() => {
     deckFormStore.onDeckBack();
   });
   useTelegramProgress(() => deckFormStore.isSending);
+  useMacTabNavigationFix();
 
   if (!deckFormStore.form) {
     return null;
@@ -41,15 +46,15 @@ export const DeckForm = observer(() => {
       })}
     >
       <h3 className={css({ textAlign: "center" })}>
-        {screenStore.deckFormId ? "Edit deck" : "Add deck"}
+        {screen.deckId ? "Edit deck" : "Add deck"}
       </h3>
       <Label text={"Title"} isRequired>
-        <Input {...deckFormStore.form.title.props} />
+        <Input field={deckFormStore.form.title} />
       </Label>
 
       <Label text={"Description"}>
         <Input
-          {...deckFormStore.form.description.props}
+          field={deckFormStore.form.description}
           rows={5}
           type={"textarea"}
         />
diff --git a/src/screens/deck-form/quick-add-card-form.tsx b/src/screens/deck-form/quick-add-card-form.tsx
index a62d9d46..e7fbabcc 100644
--- a/src/screens/deck-form/quick-add-card-form.tsx
+++ b/src/screens/deck-form/quick-add-card-form.tsx
@@ -5,6 +5,7 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { QuickAddCardFormStore } from "../../store/quick-add-card-form-store.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const QuickAddCardForm = observer(() => {
   const [quickAddCardStore] = useState(() => new QuickAddCardFormStore());
@@ -16,6 +17,7 @@ export const QuickAddCardForm = observer(() => {
     quickAddCardStore.onBack();
   });
   useTelegramProgress(() => quickAddCardStore.isSending);
+  useMacTabNavigationFix();
 
   return <CardFormView cardForm={quickAddCardStore.form} />;
 });
diff --git a/src/screens/deck-list/deck-loading.tsx b/src/screens/deck-list/deck-loading.tsx
index 8f68607d..7a8ef98a 100644
--- a/src/screens/deck-list/deck-loading.tsx
+++ b/src/screens/deck-list/deck-loading.tsx
@@ -12,7 +12,7 @@ export const DeckLoading = () => {
         cursor: "pointer",
         gap: 4,
         borderRadius: theme.borderRadius,
-        padding: "13px 12px",
+        padding: "14px 12px",
         background: theme.secondaryBgColor,
       })}
     >
diff --git a/src/screens/deck-list/main-screen.tsx b/src/screens/deck-list/main-screen.tsx
index 7383754e..aff268b1 100644
--- a/src/screens/deck-list/main-screen.tsx
+++ b/src/screens/deck-list/main-screen.tsx
@@ -74,7 +74,7 @@ export const MainScreen = observer(() => {
                   color: theme.linkColor,
                 })}
                 onClick={() => {
-                  screenStore.navigateToDeckForm();
+                  screenStore.go({ type: "deckForm" });
                 }}
               >
                 create one
@@ -88,7 +88,7 @@ export const MainScreen = observer(() => {
             <Button
               icon={"mdi-plus"}
               onClick={() => {
-                screenStore.navigateToDeckForm();
+                screenStore.go({ type: "deckForm" });
               }}
             >
               Add deck
@@ -157,7 +157,7 @@ export const MainScreen = observer(() => {
               icon={"mdi-cog"}
               disabled={deckListStore.myInfo?.state !== "fulfilled"}
               onClick={() => {
-                screenStore.navigateToUserSettings();
+                screenStore.go({ type: "userSettings" });
               }}
             >
               Settings
diff --git a/src/screens/deck-list/my-deck.tsx b/src/screens/deck-list/my-deck.tsx
index 56ff77d6..4e95e44c 100644
--- a/src/screens/deck-list/my-deck.tsx
+++ b/src/screens/deck-list/my-deck.tsx
@@ -16,7 +16,7 @@ export const MyDeck = observer((props: Props) => {
     <motion.div
       whileTap={whileTap}
       onClick={() => {
-        screenStore.navigateToMineDeck(deck.id);
+        screenStore.go({ type: "deckMine", deckId: deck.id });
       }}
       className={css({
         display: "flex",
diff --git a/src/screens/deck-list/public-deck.tsx b/src/screens/deck-list/public-deck.tsx
index da71c76b..30cdfd80 100644
--- a/src/screens/deck-list/public-deck.tsx
+++ b/src/screens/deck-list/public-deck.tsx
@@ -26,7 +26,7 @@ export const PublicDeck = observer((props: Props) => {
         background: theme.secondaryBgColor,
       })}
       onClick={() => {
-        screenStore.navigateToPublicDeck(deck.id);
+        screenStore.go({ type: "deckPublic", deckId: deck.id });
       }}
     >
       <div
diff --git a/src/screens/deck-review/deck-finished.tsx b/src/screens/deck-review/deck-finished.tsx
index 4c45eada..bdd5d6e5 100644
--- a/src/screens/deck-review/deck-finished.tsx
+++ b/src/screens/deck-review/deck-finished.tsx
@@ -36,7 +36,7 @@ export const DeckFinished = observer(() => {
     reviewStore.submitFinished();
   });
   useMainButton("Go back", () => {
-    screenStore.navigateToMain();
+    screenStore.go({ type: "main" });
   });
   useTelegramProgress(() => reviewStore.isReviewSending);
 
diff --git a/src/screens/deck-review/deck-preview.tsx b/src/screens/deck-review/deck-preview.tsx
index 61f52cf5..12e27e53 100644
--- a/src/screens/deck-review/deck-preview.tsx
+++ b/src/screens/deck-review/deck-preview.tsx
@@ -1,6 +1,5 @@
 import { observer } from "mobx-react-lite";
 import { deckListStore } from "../../store/deck-list-store.ts";
-import { assert } from "../../lib/typescript/assert.ts";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 import React from "react";
@@ -14,11 +13,9 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 
 export const DeckPreview = observer(() => {
   const reviewStore = useReviewStore();
-  const deck = deckListStore.selectedDeck;
-  assert(deck, "Deck should not be empty before preview");
 
   useBackButton(() => {
-    screenStore.navigateToMain();
+    screenStore.go({ type: "main" });
   });
 
   useMainButton(
@@ -29,6 +26,11 @@ export const DeckPreview = observer(() => {
     () => deckListStore.canReview,
   );
 
+  const deck = deckListStore.selectedDeck;
+  if (!deck) {
+    return null;
+  }
+
   return (
     <div
       className={css({
@@ -36,6 +38,7 @@ export const DeckPreview = observer(() => {
         flexDirection: "column",
         gap: 16,
         paddingTop: 12,
+        paddingBottom: 12,
       })}
     >
       <div
@@ -90,7 +93,10 @@ export const DeckPreview = observer(() => {
               noPseudoClasses
               outline
               onClick={() => {
-                screenStore.navigateToQuickCardAdd(deck.id);
+                screenStore.go({
+                  type: "cardQuickAddForm",
+                  deckId: deck.id,
+                });
               }}
             >
               Add card
@@ -103,7 +109,7 @@ export const DeckPreview = observer(() => {
               noPseudoClasses
               outline
               onClick={() => {
-                screenStore.navigateToDeckForm(deck.id);
+                screenStore.go({ type: "deckForm", deckId: deck.id });
               }}
             >
               Edit
diff --git a/src/screens/shared/version-warning.tsx b/src/screens/shared/version-warning.tsx
index ca6dd4f6..3501fb3c 100644
--- a/src/screens/shared/version-warning.tsx
+++ b/src/screens/shared/version-warning.tsx
@@ -3,7 +3,7 @@ import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 
 export const VersionWarning = () => {
-  if (WebApp.version !== "6.0") {
+  if (WebApp.isVersionAtLeast("6.1")) {
     return null;
   }
 
@@ -28,7 +28,7 @@ export const VersionWarning = () => {
           fontSize: 12,
         })}
       >
-        Please update your Telegram to ensure stable functioning of this bot.
+        Please update your Telegram to ensure stable functioning of this app.
       </div>
     </div>
   );
diff --git a/src/screens/user-settings/settings-row.tsx b/src/screens/user-settings/settings-row.tsx
index a7d8eb08..268d30c5 100644
--- a/src/screens/user-settings/settings-row.tsx
+++ b/src/screens/user-settings/settings-row.tsx
@@ -12,8 +12,9 @@ export const SettingsRow = observer((props: Props) => {
       className={css({
         backgroundColor: theme.secondaryBgColor,
         borderRadius: theme.borderRadius,
-        height: 40,
-        padding: "0px 12px",
+        height: 48,
+        boxSizing: "border-box",
+        padding: 12,
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",
diff --git a/src/screens/user-settings/user-review-notification-settings.tsx b/src/screens/user-settings/user-review-notification-settings.tsx
deleted file mode 100644
index 6dc51ea1..00000000
--- a/src/screens/user-settings/user-review-notification-settings.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
-import { ListHeader } from "../../ui/list-header.tsx";
-import { Hint } from "../../ui/hint.tsx";
-import React from "react";
-import { useUserSettingsStore } from "../../store/user-settings-store-context.tsx";
-import { css } from "@emotion/css";
-import { theme } from "../../ui/theme.tsx";
-import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
-import { Select } from "../../ui/select.tsx";
-import { SettingsRow } from "./settings-row.tsx";
-import { generateTimeRange } from "./generate-time-range.tsx";
-import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
-import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
-
-export const timeRanges = generateTimeRange();
-
-export const UserReviewNotificationSettings = observer(() => {
-  const userSettingsStore = useUserSettingsStore();
-
-  useBackButton(() => {
-    userSettingsStore.goToMain();
-  });
-
-  useMainButton(
-    "Save",
-    () => userSettingsStore.submit(),
-    () => userSettingsStore.isSaveVisible,
-  );
-
-  useTelegramProgress(() => userSettingsStore.isSending);
-
-  if (!userSettingsStore.form) {
-    return null;
-  }
-
-  const { isRemindNotifyEnabled, time } = userSettingsStore.form;
-
-  return (
-    <div>
-      <ListHeader text={"Review notification settings"} />
-
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: 8,
-        })}
-      >
-        <SettingsRow>
-          <span>Notifications</span>
-          <span
-            className={css({
-              transform: "translateY(3px)",
-              position: "relative",
-            })}
-          >
-            <RadioSwitcher
-              isOn={isRemindNotifyEnabled.value}
-              onToggle={isRemindNotifyEnabled.toggle}
-            />
-          </span>
-        </SettingsRow>
-        {isRemindNotifyEnabled.value && (
-          <SettingsRow>
-            <span>Time</span>
-            <div className={css({ color: theme.linkColor })}>
-              <Select
-                value={time.value.toString()}
-                onChange={(value) => {
-                  time.onChange(value);
-                }}
-                options={timeRanges.map((range) => ({
-                  value: range,
-                  label: range,
-                }))}
-              />
-            </div>
-          </SettingsRow>
-        )}
-
-        <Hint>
-          ⭐ Daily reminders help you keep up with your reviews, making it
-          easier for you to remember the information
-        </Hint>
-      </div>
-    </div>
-  );
-});
diff --git a/src/screens/user-settings/user-settings-main.tsx b/src/screens/user-settings/user-settings-main.tsx
index 6f5342e3..26c94be8 100644
--- a/src/screens/user-settings/user-settings-main.tsx
+++ b/src/screens/user-settings/user-settings-main.tsx
@@ -1,26 +1,95 @@
 import { observer } from "mobx-react-lite";
 import { useUserSettingsStore } from "../../store/user-settings-store-context.tsx";
 import { deckListStore } from "../../store/deck-list-store.ts";
-import { UserSettingsScreen } from "../../store/user-settings-store.tsx";
-import { UserReviewNotificationSettings } from "./user-review-notification-settings.tsx";
 import React from "react";
-import { UserSettings } from "./user-settings.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
+import { generateTimeRange } from "./generate-time-range.tsx";
+import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
+import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
+import { ListHeader } from "../../ui/list-header.tsx";
+import { SettingsRow } from "./settings-row.tsx";
+import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
+import { theme } from "../../ui/theme.tsx";
+import { Select } from "../../ui/select.tsx";
+import { Hint } from "../../ui/hint.tsx";
+import { css } from "@emotion/css";
+import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
+import { screenStore } from "../../store/screen-store.ts";
+
+export const timeRanges = generateTimeRange();
 
 export const UserSettingsMain = observer(() => {
   const userSettingsStore = useUserSettingsStore();
-
   useMount(() => {
     userSettingsStore.load();
   });
 
+  useMainButton(
+    "Save",
+    () => userSettingsStore.submit(),
+    () => userSettingsStore.isSaveVisible,
+  );
+
+  useBackButton(() => {
+    screenStore.go({ type: "main" });
+  });
+  useTelegramProgress(() => userSettingsStore.isSending);
+
   if (deckListStore.myInfo?.state !== "fulfilled") {
     return null;
   }
 
-  if (userSettingsStore.screen === UserSettingsScreen.UserReviewSettings) {
-    return <UserReviewNotificationSettings />;
+  if (!userSettingsStore.form) {
+    return null;
   }
 
-  return <UserSettings />;
+  const { isRemindNotifyEnabled, time } = userSettingsStore.form;
+
+  return (
+    <div>
+      <ListHeader text={"Review notification settings"} />
+
+      <div
+        className={css({
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+        })}
+      >
+        <SettingsRow>
+          <span>Notifications</span>
+          <span
+            className={css({
+              transform: "translateY(3px)",
+              position: "relative",
+            })}
+          >
+            <RadioSwitcher
+              isOn={isRemindNotifyEnabled.value}
+              onToggle={isRemindNotifyEnabled.toggle}
+            />
+          </span>
+        </SettingsRow>
+        {isRemindNotifyEnabled.value && (
+          <SettingsRow>
+            <span>Time</span>
+            <div className={css({ color: theme.linkColor })}>
+              <Select
+                value={time.value.toString()}
+                onChange={(value) => {
+                  time.onChange(value);
+                }}
+                options={timeRanges.map((range) => ({
+                  value: range,
+                  label: range,
+                }))}
+              />
+            </div>
+          </SettingsRow>
+        )}
+
+        <Hint>⭐ Daily reminders will help you remember to repeat cards</Hint>
+      </div>
+    </div>
+  );
 });
diff --git a/src/screens/user-settings/user-settings.tsx b/src/screens/user-settings/user-settings.tsx
deleted file mode 100644
index e63dde6f..00000000
--- a/src/screens/user-settings/user-settings.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
-import { screenStore } from "../../store/screen-store.ts";
-import { ListHeader } from "../../ui/list-header.tsx";
-import { css } from "@emotion/css";
-import { theme } from "../../ui/theme.tsx";
-import { useUserSettingsStore } from "../../store/user-settings-store-context.tsx";
-
-export const UserSettings = observer(() => {
-  const userSettingsStore = useUserSettingsStore();
-
-  useBackButton(() => {
-    screenStore.navigateToMain();
-  });
-
-  return (
-    <div>
-      <ListHeader text={"Settings"} />
-      <div
-        className={css({
-          backgroundColor: theme.secondaryBgColor,
-          borderRadius: theme.borderRadius,
-          padding: "8px 12px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          cursor: "pointer",
-        })}
-        onClick={() => {
-          userSettingsStore.goToUserReviewSettings();
-        }}
-      >
-        <span>Review notification</span>
-        <span className={css({ color: theme.linkColor })}>
-          {userSettingsStore.notifyTimePreview}
-        </span>
-      </div>
-    </div>
-  );
-});
diff --git a/src/store/deck-form-store.test.ts b/src/store/deck-form-store.test.ts
index 6f9da070..753f7f51 100644
--- a/src/store/deck-form-store.test.ts
+++ b/src/store/deck-form-store.test.ts
@@ -7,7 +7,10 @@ import { assert } from "../lib/typescript/assert.ts";
 vi.mock("./screen-store", () => {
   return {
     screenStore: {
-      deckFormId: 1,
+      screen: {
+        type: "deckForm",
+        deckId: 1,
+      },
     },
   };
 });
diff --git a/src/store/deck-form-store.ts b/src/store/deck-form-store.ts
index 3af57e13..d9ef84d2 100644
--- a/src/store/deck-form-store.ts
+++ b/src/store/deck-form-store.ts
@@ -34,7 +34,7 @@ export const createDeckTitleField = (value: string) => {
   );
 };
 
-const createCardSideField = (value: string) => {
+export const createCardSideField = (value: string) => {
   return new TextField(value, validators.required());
 };
 
@@ -53,9 +53,12 @@ export class DeckFormStore {
       return;
     }
 
-    if (screenStore.deckFormId) {
+    const screen = screenStore.screen;
+    assert(screen.type === "deckForm");
+
+    if (screen.deckId) {
       const deck = deckListStore.myDecks.find(
-        (myDeck) => myDeck.id === screenStore.deckFormId,
+        (myDeck) => myDeck.id === screen.deckId,
       );
       assert(deck, "Deck not found in deckListStore");
       this.form = {
@@ -123,13 +126,13 @@ export class DeckFormStore {
   async onDeckBack() {
     assert(this.form, "onDeckBack: form is empty");
     if (isFormEmpty(this.form) || !isFormTouched(this.form)) {
-      screenStore.navigateToMain();
+      screenStore.back();
       return;
     }
 
     const confirmed = await showConfirm("Stop adding deck and quit?");
     if (confirmed) {
-      screenStore.navigateToMain();
+      screenStore.back();
     }
   }
 
@@ -147,8 +150,11 @@ export class DeckFormStore {
     }
     this.isSending = true;
 
+    const screen = screenStore.screen;
+    assert(screen.type === "deckForm");
+
     return upsertDeckRequest({
-      id: screenStore.deckFormId,
+      id: screen.deckId,
       title: this.form.title.value,
       description: this.form.description.value,
       cards: this.form.cards.map((card) => ({
@@ -159,7 +165,7 @@ export class DeckFormStore {
       })),
     })
       .then(() => {
-        screenStore.navigateToMain();
+        screenStore.go({ type: "main" });
       })
       .finally(
         action(() => {
diff --git a/src/store/deck-list-store.ts b/src/store/deck-list-store.ts
index ab9eeb77..e73503a5 100644
--- a/src/store/deck-list-store.ts
+++ b/src/store/deck-list-store.ts
@@ -7,7 +7,7 @@ import {
 } from "../api/api.ts";
 import { MyInfoResponse } from "../../functions/my-info.ts";
 import { DeckWithCardsDbType } from "../../functions/db/deck/decks-with-cards-schema.ts";
-import { Screen, screenStore } from "./screen-store.ts";
+import { screenStore } from "./screen-store.ts";
 import { CardToReviewDbType } from "../../functions/db/deck/get-cards-to-review-db.ts";
 import { assert } from "../lib/typescript/assert.ts";
 import { ReviewStore } from "./review-store.ts";
@@ -58,7 +58,7 @@ export class DeckListStore {
               (myDeck) => myDeck.id === sharedDeck.deck.id,
             )
           ) {
-            screenStore.navigateToMineDeck(sharedDeck.deck.id);
+            screenStore.go({ type: "deckMine", deckId: sharedDeck.deck.id });
             return;
           }
 
@@ -67,12 +67,12 @@ export class DeckListStore {
               (publicDeck) => publicDeck.id === sharedDeck.deck.id,
             )
           ) {
-            screenStore.navigateToPublicDeck(sharedDeck.deck.id);
+            screenStore.go({ type: "deckPublic", deckId: sharedDeck.deck.id });
             return;
           }
 
           this.myInfo.value.publicDecks.push(sharedDeck.deck);
-          screenStore.navigateToPublicDeck(sharedDeck.deck.id);
+          screenStore.go({ type: "deckPublic", deckId: sharedDeck.deck.id });
         }),
       )
       .catch((e) => {
@@ -93,7 +93,7 @@ export class DeckListStore {
     assert(deck, "canReview requires a deck to be selected");
 
     return (
-      deck.cardsToReview.length > 0 || screenStore.screen === Screen.DeckPublic
+      deck.cardsToReview.length > 0 || screenStore.screen.type === "deckPublic"
     );
   }
 
@@ -103,11 +103,14 @@ export class DeckListStore {
     }
 
     assert(deckListStore.selectedDeck, "No selected deck for review");
-    if (screenStore.screen === Screen.DeckPublic) {
+    if (screenStore.screen.type === "deckPublic") {
       deckListStore.addDeckToMine(deckListStore.selectedDeck.id);
     }
 
-    reviewStore.startDeckReview(deckListStore.selectedDeck.cardsToReview, deckListStore.selectedDeck.name);
+    reviewStore.startDeckReview(
+      deckListStore.selectedDeck.cardsToReview,
+      deckListStore.selectedDeck.name,
+    );
   }
 
   addDeckToMine(deckId: number) {
@@ -132,19 +135,20 @@ export class DeckListStore {
   }
 
   get selectedDeck(): DeckWithCardsWithReviewType | null {
-    if (!screenStore.deckId || this.myInfo?.state !== "fulfilled") {
+    const screen = screenStore.screen;
+    assert(screen.type === "deckPublic" || screen.type === "deckMine");
+    if (!screen.deckId || this.myInfo?.state !== "fulfilled") {
       return null;
     }
 
     const decksToSearch = this.myInfo.value.myDecks.concat(this.publicDecks);
-
-    const deck = decksToSearch.find((deck) => deck.id === screenStore.deckId);
+    const deck = decksToSearch.find((deck) => deck.id === screen.deckId);
     if (!deck) {
       return null;
     }
 
     const cardsToReview =
-      screenStore.screen === Screen.DeckPublic
+      screen.type === "deckPublic"
         ? deck.deck_card
         : getCardsToReview(deck, this.myInfo.value.cardsToReview);
 
@@ -183,8 +187,10 @@ export class DeckListStore {
     );
   }
 
-  updateSettings(body: Pick<UserDbType, 'is_remind_enabled' | 'last_reminded_date'>) {
-    assert(this.myInfo?.state === 'fulfilled');
+  optimisticUpdateSettings(
+    body: Pick<UserDbType, "is_remind_enabled" | "last_reminded_date">,
+  ) {
+    assert(this.myInfo?.state === "fulfilled");
     Object.assign(this.myInfo.value.user, body);
   }
 }
diff --git a/src/store/quick-add-card-form-store.ts b/src/store/quick-add-card-form-store.ts
index 804e1401..6bff3fb9 100644
--- a/src/store/quick-add-card-form-store.ts
+++ b/src/store/quick-add-card-form-store.ts
@@ -1,4 +1,4 @@
-import { CardFormType, createDeckTitleField } from "./deck-form-store.ts";
+import { CardFormType, createCardSideField } from "./deck-form-store.ts";
 import { action, makeAutoObservable } from "mobx";
 import {
   formTouchAll,
@@ -11,11 +11,13 @@ import { showConfirm } from "../lib/telegram/show-confirm.ts";
 import { addCardRequest } from "../api/api.ts";
 import { assert } from "../lib/typescript/assert.ts";
 import { TextField } from "../lib/mobx-form/mobx-form.ts";
+import { AddCardRequest } from "../../functions/add-card.ts";
+import { deckListStore } from "./deck-list-store.ts";
 
 export class QuickAddCardFormStore {
   form: CardFormType = {
-    back: createDeckTitleField(""),
-    front: createDeckTitleField(""),
+    back: createCardSideField(""),
+    front: createCardSideField(""),
     example: new TextField(""),
   };
   isSending = false;
@@ -30,23 +32,24 @@ export class QuickAddCardFormStore {
       return;
     }
 
-    assert(
-      screenStore.cardQuickAddDeckId,
-      "cardQuickAddDeckId should not be empty",
-    );
+    const screen = screenStore.screen;
+    assert(screen.type === "cardQuickAddForm");
 
     this.isSending = true;
 
-    return addCardRequest({
-      deckId: screenStore.cardQuickAddDeckId,
+    const body: AddCardRequest = {
+      deckId: screen.deckId,
       card: {
         back: this.form.back.value,
         front: this.form.front.value,
         example: this.form.example.value,
       },
-    })
+    };
+
+    return addCardRequest(body)
       .then(() => {
-        screenStore.navigateToMain();
+        screenStore.back();
+        deckListStore.load();
       })
       .finally(
         action(() => {
@@ -57,13 +60,13 @@ export class QuickAddCardFormStore {
 
   async onBack() {
     if (isFormEmpty(this.form) || !isFormTouched(this.form)) {
-      screenStore.navigateToMain();
+      screenStore.back();
       return;
     }
 
     const confirmed = await showConfirm("Quit editing card without saving?");
     if (confirmed) {
-      screenStore.navigateToMain();
+      screenStore.back();
     }
   }
 }
diff --git a/src/store/review-store.test.ts b/src/store/review-store.test.ts
index 3f2a693c..40b786a5 100644
--- a/src/store/review-store.test.ts
+++ b/src/store/review-store.test.ts
@@ -52,7 +52,7 @@ describe("card form store", () => {
 
   it("basic", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckCardsMock, '');
+    reviewStore.startDeckReview(deckCardsMock, "");
     expect(reviewStore.isFinished).toBeFalsy();
     expect(reviewStore.cardsToReview).toMatchInlineSnapshot(`
       [
@@ -157,7 +157,7 @@ describe("card form store", () => {
 
   it("current next", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckCardsMock, '');
+    reviewStore.startDeckReview(deckCardsMock, "");
     expect(reviewStore.isFinished).toBeFalsy();
 
     expect(reviewStore.currentCard?.id).toEqual(3);
@@ -196,7 +196,7 @@ describe("card form store", () => {
 
   it("hit wrong many times", () => {
     const reviewStore = new ReviewStore();
-    reviewStore.startDeckReview(deckCardsMock, '');
+    reviewStore.startDeckReview(deckCardsMock, "");
     expect(reviewStore.isFinished).toBeFalsy();
 
     reviewStore.open();
diff --git a/src/store/review-store.ts b/src/store/review-store.ts
index 811883d6..2ee2c56d 100644
--- a/src/store/review-store.ts
+++ b/src/store/review-store.ts
@@ -120,7 +120,7 @@ export class ReviewStore {
   }
 
   submitUnfinished() {
-    screenStore.navigateToMain();
+    screenStore.go({ type: "main" });
 
     if (!this.hasResult) {
       return;
@@ -144,7 +144,7 @@ export class ReviewStore {
 
   async submitFinished() {
     if (!this.hasResult) {
-      screenStore.navigateToMain();
+      screenStore.go({ type: "main" });
       return;
     }
 
diff --git a/src/store/screen-store.ts b/src/store/screen-store.ts
index 4df60dfc..28898c91 100644
--- a/src/store/screen-store.ts
+++ b/src/store/screen-store.ts
@@ -1,54 +1,36 @@
 import { makeAutoObservable } from "mobx";
 
-export enum Screen {
-  Main = "main",
-  DeckMine = "deckMine",
-  DeckPublic = "deckPublic",
-  DeckForm = "deckForm",
-  CardQuickAddForm = "cardQuickAddForm",
-  UserSettings = "userSettings",
-}
+type Route =
+  | { type: "main" }
+  | { type: "deckMine"; deckId: number }
+  | { type: "deckPublic"; deckId: number }
+  | { type: "deckForm"; deckId?: number }
+  | { type: "cardQuickAddForm"; deckId: number }
+  | { type: "userSettings" };
 
 export class ScreenStore {
-  screen = Screen.Main;
-  deckId?: number;
-  deckFormId?: number;
-  cardQuickAddDeckId?: number;
+  history: Route[] = [{ type: "main" }];
 
   constructor() {
     makeAutoObservable(this, {}, { autoBind: true });
   }
 
-  navigateToMain() {
-    this.screen = Screen.Main;
-  }
-
-  navigateToMineDeck(deckId: number) {
-    this.deckId = deckId;
-    this.screen = Screen.DeckMine;
-  }
-
-  navigateToPublicDeck(deckId: number) {
-    this.deckId = deckId;
-    this.screen = Screen.DeckPublic;
-  }
-
-  navigateToDeckForm(deckFormId?: number) {
-    this.screen = Screen.DeckForm;
-    this.deckFormId = deckFormId;
+  go(historyData: Route) {
+    this.history.push(historyData);
   }
 
-  navigateToQuickCardAdd(deckId: number) {
-    this.screen = Screen.CardQuickAddForm;
-    this.cardQuickAddDeckId = deckId;
+  back() {
+    if (this.history.length > 1) {
+      this.history.pop();
+    }
   }
 
-  navigateToUserSettings() {
-    this.screen = Screen.UserSettings;
+  get screen(): Route {
+    return this.history[this.history.length - 1];
   }
 
   get isDeckPreviewScreen() {
-    return this.screen === Screen.DeckPublic || this.screen === Screen.DeckMine;
+    return this.screen.type === "deckPublic" || this.screen.type === "deckMine";
   }
 }
 
diff --git a/src/store/user-settings-store.tsx b/src/store/user-settings-store.tsx
index 8fe5fca7..592ecc42 100644
--- a/src/store/user-settings-store.tsx
+++ b/src/store/user-settings-store.tsx
@@ -6,15 +6,11 @@ import { DateTime } from "luxon";
 import { formatTime } from "../screens/user-settings/generate-time-range.tsx";
 import { isFormTouched } from "../lib/mobx-form/form-has-error.ts";
 import { userSettingsRequest } from "../api/api.ts";
-
-export enum UserSettingsScreen {
-  UserReviewSettings = "userReviewSettings",
-}
+import { screenStore } from "./screen-store.ts";
 
 const DEFAULT_TIME = "12:00";
 
 export class UserSettingsStore {
-  screen?: UserSettingsScreen;
   form?: {
     isRemindNotifyEnabled: BooleanField;
     time: TextField<string>;
@@ -43,30 +39,10 @@ export class UserSettingsStore {
     };
   }
 
-  goToUserReviewSettings() {
-    this.screen = UserSettingsScreen.UserReviewSettings;
-  }
-
-  goToMain() {
-    this.screen = undefined;
-  }
-
   get isSaveVisible() {
     return !!this.form && isFormTouched(this.form);
   }
 
-  get notifyTimePreview() {
-    if (!this.form) {
-      return null;
-    }
-
-    if (!this.form.isRemindNotifyEnabled.value) {
-      return "Off";
-    }
-
-    return this.form?.time?.value || "Not set";
-  }
-
   submit() {
     this.isSending = true;
     assert(this.form);
@@ -87,11 +63,11 @@ export class UserSettingsStore {
 
     userSettingsRequest(body)
       .then(() => {
-        deckListStore.updateSettings({
+        deckListStore.optimisticUpdateSettings({
           is_remind_enabled: body.isRemindNotifyEnabled,
           last_reminded_date: body.remindNotificationTime,
         });
-        this.goToMain();
+        screenStore.go({ type: "main" });
       })
       .finally(
         action(() => {
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index 07c8a6f6..e4e54ea4 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -34,7 +34,7 @@ export const Button = (props: Props) => {
         reset.button,
         css({
           display: "flex",
-          flexDirection: column ? 'column' : undefined,
+          flexDirection: column ? "column" : undefined,
           width: "100%",
           gap: column ? 0 : 8,
           justifyContent: "center",
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index 76344a64..9c679d37 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -1,21 +1,20 @@
 import { ChangeEvent } from "react";
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
+import { TextField } from "../lib/mobx-form/mobx-form.ts";
+import { observer } from "mobx-react-lite";
 
 interface Props {
-  value: string;
   placeholder?: string;
-  onChange: (value: string) => void;
   type?: "input" | "textarea";
-  isTouched?: boolean;
-  onBlur: () => void;
-  error?: string;
+  field: TextField<string>;
   rows?: number;
 }
 
-export const Input = (props: Props) => {
-  const { onChange, value, placeholder, type, rows, isTouched, error, onBlur } =
-    props;
+export const Input = observer((props: Props) => {
+  const { field, placeholder, type, rows } = props;
+  const { onChange, value, isTouched, error, onBlur } = field.props;
+
   const handleInputChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -58,4 +57,4 @@ export const Input = (props: Props) => {
       ) : null}
     </div>
   );
-};
+});
diff --git a/src/ui/radio-switcher.tsx b/src/ui/radio-switcher.tsx
index 9fc02333..92aaf8b0 100644
--- a/src/ui/radio-switcher.tsx
+++ b/src/ui/radio-switcher.tsx
@@ -5,7 +5,6 @@ import { theme } from "./theme.tsx";
 const config = {
   colors: {
     blueLight: theme.success,
-    grayLight: "#98a9bc",
     grayLightExtra: "#e8ecef",
     white: "#fff",
   },
@@ -59,7 +58,7 @@ export const RadioSwitcher = (props: Props) => {
             justifyContent: "center",
             alignItems: "center",
             position: "absolute",
-            backgroundColor: config.colors.grayLight,
+            backgroundColor: config.colors.white,
             boxShadow: "0 0 8px rgba(56, 0, 107, 0.16)",
             width: config.cursorSize,
             height: config.cursorSize,
@@ -71,7 +70,6 @@ export const RadioSwitcher = (props: Props) => {
           }),
           isOn &&
             css({
-              backgroundColor: config.colors.white,
               left: `calc(100% - ${config.cursorSize}px - 4px)`,
             }),
         )}
diff --git a/src/ui/theme.tsx b/src/ui/theme.tsx
index e7e3073c..ea31f9d0 100644
--- a/src/ui/theme.tsx
+++ b/src/ui/theme.tsx
@@ -39,7 +39,7 @@ export const theme = {
   successLight: colord("#2ecb47").alpha(0.4).toHex(),
   danger: "#fc2025",
   dangerLight: colord("#fc2025").alpha(0.4).toHex(),
-  dividerColor: '#ccc',
+  dividerColor: "#ccc",
 
   borderRadius: 12,
 };