diff --git a/src/App.tsx b/src/App.tsx
index cfeb68f..5d77047 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,7 +28,7 @@ const AppRoot = () => {
         className="pointer-events-none fixed inset-0 z-20 bg-black"
         style={{ opacity }}
       />
-      <main className="h-screen w-screen overflow-hidden bg-[url(/wallpaper.webp)] bg-cover bg-center">
+      <main className="h-[100svh] w-screen overflow-hidden bg-[url(/wallpaper.webp)] bg-cover bg-center">
         {state === "login" ? (
           <Sddm />
         ) : (
diff --git a/src/components/Boot.tsx b/src/components/Boot.tsx
index ae0c6cb..7645458 100644
--- a/src/components/Boot.tsx
+++ b/src/components/Boot.tsx
@@ -32,7 +32,7 @@ export const Boot = () => {
   }, [setState, line]);
 
   return (
-    <main className="h-screen w-screen bg-black text-white">
+    <main className="h-[100svh] w-screen bg-black text-white">
       {LINES.filter((_, i) => i <= line).map((line, i) => (
         <p key={i}>{line}</p>
       ))}
diff --git a/src/components/Off.tsx b/src/components/Off.tsx
index 3a5ef4f..4e0f84c 100644
--- a/src/components/Off.tsx
+++ b/src/components/Off.tsx
@@ -20,7 +20,7 @@ export const Off = () => {
   }, [state, setState, booting]);
 
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center bg-black">
+    <div className="flex h-[100svh] w-screen flex-col items-center justify-center bg-black">
       <button
         className={`drop-shadow-white cursor-pointer transition-all ${
           booting ? "animate-disappear" : "animate-breathing"