diff --git a/src/persistance/SiteUrl.ts b/src/persistance/SiteUrl.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css
index c70f680..bec684f 100644
--- a/src/ui/components/Controls.css
+++ b/src/ui/components/Controls.css
@@ -46,3 +46,40 @@
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 }
+
+@media (orientation: portrait) {
+  .controls-box {
+    padding: 0;
+  }
+
+  .controls {
+    background: var(--color-bg-block);
+    padding: 1.5rem 0;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  .controls__button {
+    margin: 0.8vw;
+    padding: 0.5rem;
+    font-size: 3rem;
+    text-align: center;
+    width: 12.8vw;
+    height: 12.8vw;
+    border-radius: 5px;
+  }
+
+  .controls__button--next {
+    width: 23vw;
+  }
+
+  .flip__button {
+    margin: 0.8vw;
+    padding: 0.5rem;
+    font-size: 3rem;
+    text-align: center;
+    border-radius: 5px;
+    width: 12.8vw;
+    height: 12.8vw;
+  }
+}
diff --git a/src/ui/components/Controls.tsx b/src/ui/components/Controls.tsx
index 9df8510..d145e20 100644
--- a/src/ui/components/Controls.tsx
+++ b/src/ui/components/Controls.tsx
@@ -31,7 +31,7 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
         </Show>
       </button>
       <button
-        class="controls__button"
+        class="controls__button controls__button--next"
         onClick={props.handlers.next}
         title="NEXT"
       >