diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 453484f3..1ebf3e12 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -44,7 +44,7 @@ function Layout() {
   }, [isMobile, isSidebarOpen]);
 
   return (
-    <div style={{ display: 'flex', position: 'relative', minHeight: '100vh' }}>
+    <div style={{ display: 'flex', position: 'relative', minHeight: 'calc(var(--vh, 1vh) * 100)' }}>
       <Header
         isRoot={isRoot}
         onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
diff --git a/frontend/src/components/Sidebar.module.css b/frontend/src/components/Sidebar.module.css
index e8043df3..f2ee65db 100644
--- a/frontend/src/components/Sidebar.module.css
+++ b/frontend/src/components/Sidebar.module.css
@@ -4,7 +4,8 @@
   top: 0;
   left: 0;
   width: 100vw;
-  height: calc(100 * var(--vh));
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: transparent;
   z-index: 999;
   display: block;
@@ -23,6 +24,7 @@
   left: 0;
   width: 264px;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   padding-top: 110px;
   padding-left: 32px;
   padding-right: 32px;
@@ -76,6 +78,7 @@
   .homeSidebarMenu {
     top: 90px;
     height: calc(100vh - 90px);
+    height: calc(var(--vh, 1vh) * 100 - 90px);
     padding-top: 20px;
     transform: translateX(0);
   }
@@ -362,6 +365,7 @@
   padding: 24px 24px 18px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
   max-height: calc(100vh - 40px);
+  max-height: calc(var(--vh, 1vh) * 100 - 40px);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -475,6 +479,7 @@
     width: min(540px, calc(100vw - 24px));
     padding: 20px 16px 14px;
     max-height: calc(100vh - 24px);
+    max-height: calc(var(--vh, 1vh) * 100 - 24px);
   }
 
   .feedbackModalHeader h2 {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f8b63ede..276f675c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -51,7 +51,8 @@ html {
 }
 
 #root {
-  height: calc(100 * var(--vh));
+  min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   margin: 0;
   padding: 0;
   position: relative;
diff --git a/frontend/src/pages/AdminDashboard.module.css b/frontend/src/pages/AdminDashboard.module.css
index 6585dc6b..2b05661f 100644
--- a/frontend/src/pages/AdminDashboard.module.css
+++ b/frontend/src/pages/AdminDashboard.module.css
@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   background: #f9fafb;
 }
 
diff --git a/frontend/src/pages/AdminHome.module.css b/frontend/src/pages/AdminHome.module.css
index 0af90322..7a387f80 100644
--- a/frontend/src/pages/AdminHome.module.css
+++ b/frontend/src/pages/AdminHome.module.css
@@ -2,6 +2,7 @@
 	display: flex;
 	width: 100%;
 	min-height: 100vh;
+	min-height: calc(var(--vh, 1vh) * 100);
 	background: #f9fafb;
 }
 
diff --git a/frontend/src/pages/Board.module.css b/frontend/src/pages/Board.module.css
index 0fd1456f..3ddb0fea 100644
--- a/frontend/src/pages/Board.module.css
+++ b/frontend/src/pages/Board.module.css
@@ -15,7 +15,7 @@
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: rgba(255, 255, 255, 1);
   z-index: -1;
   pointer-events: none;
diff --git a/frontend/src/pages/Home.module.css b/frontend/src/pages/Home.module.css
index 59fc32df..03de8d83 100644
--- a/frontend/src/pages/Home.module.css
+++ b/frontend/src/pages/Home.module.css
@@ -1,6 +1,7 @@
 .container {
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
   position: relative;
 }
diff --git a/frontend/src/pages/LoginAndSignUp.module.css b/frontend/src/pages/LoginAndSignUp.module.css
index fd44a259..342fce05 100644
--- a/frontend/src/pages/LoginAndSignUp.module.css
+++ b/frontend/src/pages/LoginAndSignUp.module.css
@@ -4,5 +4,6 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: #fff;
 }
diff --git a/frontend/src/pages/external/External.module.css b/frontend/src/pages/external/External.module.css
index fe449279..aa429fbd 100644
--- a/frontend/src/pages/external/External.module.css
+++ b/frontend/src/pages/external/External.module.css
@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
   background-color: #ffffff;
@@ -60,6 +61,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
   animation: fadeIn 0.3s ease;
@@ -80,6 +82,7 @@
   left: 0;
   width: 280px;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: transparent;
   backdrop-filter: blur(20px);
   z-index: 1000;