diff --git a/src/main/index.js b/src/main/index.js
index b16e9f3..0f2b97a 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -191,7 +191,7 @@ function createWindow() {
       process.platform === 'darwin'
         ? path.join(__static, 'icon--macos.png')
         : path.join(__static, 'icon.png'),
-    resizable: false,
+    resizable: true,
     useContentSize: true,
     width: 360,
     height: 478,
@@ -201,6 +201,7 @@ function createWindow() {
       enableRemoteModule: true
     }
   })
+  mainWindow.setAspectRatio(360 / 478)
 
   mainWindow.loadURL(winURL)
 
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index a4ccf9a..1baa3f8 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -60,6 +60,9 @@ export default {
 </script>
 
 <style lang="scss">
+:root {
+  font-size: 5vw;
+}
 #app {
   animation: fade-in 0.5s ease forwards;
   position: relative;
diff --git a/src/renderer/assets/stylesheets/_base.scss b/src/renderer/assets/stylesheets/_base.scss
index 169d717..b997ea6 100644
--- a/src/renderer/assets/stylesheets/_base.scss
+++ b/src/renderer/assets/stylesheets/_base.scss
@@ -14,13 +14,13 @@ p {
 }
 
 .Container {
-  padding: 0 18px;
+  padding: 0 5vw;
 }
 
 .Drawer-heading {
-  font-size: 14px;
+  font-size: 0.7rem;
   letter-spacing: 0.05rem;
-  padding-top: 10px;
+  padding-top: 2.8vw;
   text-align: center;
 }
 
@@ -34,20 +34,20 @@ p {
   align-items: center;
   display: flex;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 5.5vw;
+  height: 5.5vw;
 }
 
 .Icon-wrapper--double--right {
-  padding: 18px 18px 18px 9px;
+  padding: 5vw 5vw 5vw 2.5vw;
 }
 
 .Icon-wrapper--double--left {
-  padding: 18px 9px 18px 18px;
+  padding: 5vw 2.5vw 5vw 5vw;
 }
 
 .Icon-wrapper--single {
-  padding: 18px;
+  padding: 5vw;
 }
 
 .Icon {
@@ -56,9 +56,9 @@ p {
 
 .TextButton {
   color: var(--color-foreground-darker);
-  font-size: 14px;
-  letter-spacing: 0.05em;
-  margin-top: 12px;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
+  margin-top: 3.3vw;
   transition: $transitionDefault;
   &:hover {
     color: var(--color-accent);
diff --git a/src/renderer/assets/stylesheets/_slider.scss b/src/renderer/assets/stylesheets/_slider.scss
index 8f61e59..9d66429 100644
--- a/src/renderer/assets/stylesheets/_slider.scss
+++ b/src/renderer/assets/stylesheets/_slider.scss
@@ -16,15 +16,15 @@
   &::-webkit-slider-runnable-track {
     background-color: var(--color-background);
     width: 100%;
-    height: 3px;
+    height: 0.83vw;
   }
   &::-webkit-slider-thumb {
     background-color: var(--color-background-lightest);
     border: 2px solid var(--color-background-lightest);
     border-radius: 100%;
-    margin-top: -8px;
-    width: 18px;
-    height: 18px;
+    margin-top: -2.2vw;
+    width: 5vw;
+    height: 5vw;
     -webkit-appearance: none;
     -webkit-app-region: no-drag;
   }
@@ -56,8 +56,8 @@
 
 .Slider-bar {
   position: absolute;
-  top: calc(50% + 3px);
-  height: 3px;
+  top: calc(50% + 0.83vw);
+  height: 0.83vw;
 }
 
 .Slider-bar--blue {
diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
index 7301a62..489506c 100644
--- a/src/renderer/components/Titlebar.vue
+++ b/src/renderer/components/Titlebar.vue
@@ -18,7 +18,7 @@
     <div class="Icon-group" style="position: absolute; top: 0; right: 0;">
       <div
         class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--double--left"
-        style="padding-left: 18px"
+        style="padding-left: 5vw"
         @click="winMinimize"
       >
         <!-- minimize -->
@@ -32,8 +32,8 @@
           y="0px"
           viewBox="0 0 14 2"
           xml:space="preserve"
-          width="15px"
-          height="20px"
+          width="4.2vw"
+          height="5.5vw"
           class="Icon Icon--minimize"
         >
           <line
@@ -51,7 +51,7 @@
       </div>
       <div
         class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--double--right"
-        style="padding-right: 18px"
+        style="padding-right: 5vw"
         @click="winClose"
       >
         <!-- close -->
@@ -65,7 +65,7 @@
           y="0px"
           viewBox="0 0 12.6 12.6"
           xml:space="preserve"
-          height="15px"
+          height="4.2vw"
           class="Icon Icon--close"
         >
           <line
@@ -145,10 +145,10 @@ export default {
   background-color: var(--color-background-lightest);
   display: inline-block;
   transition: $transitionDefault;
-  width: 20px;
-  height: 2px;
+  width: 5.5vw;
+  height: 0.5vw;
   &:last-child {
-    width: 10px;
+    width: 2.8vw;
   }
 }
 
@@ -160,11 +160,11 @@ export default {
   &.is-collapsed {
     & .Menu-line:first-child {
       transform: rotate(-45deg);
-      width: 12px;
+      width: 3.3vw;
     }
     & .Menu-line:last-child {
       transform: rotate(45deg);
-      width: 12px;
+      width: 3.3vw;
     }
   }
 }
@@ -173,15 +173,15 @@ export default {
   color: var(--color-short-round);
   font-size: 1rem;
   font-weight: 200;
-  padding-top: 18px;
+  padding-top: 5vw;
 }
 
 .Titlebar {
   letter-spacing: 0.05em;
-  margin-bottom: 18px;
+  margin-bottom: 5vw;
   position: relative;
   text-align: center;
-  height: 50px;
+  height: 13.9vw;
   -webkit-app-region: drag;
 }
 
diff --git a/src/renderer/components/drawer/Drawer-about.vue b/src/renderer/components/drawer/Drawer-about.vue
index 78ba184..be682b6 100644
--- a/src/renderer/components/drawer/Drawer-about.vue
+++ b/src/renderer/components/drawer/Drawer-about.vue
@@ -10,8 +10,8 @@
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"
         y="0px"
-        width="72px"
-        height="72px"
+        width="20vw"
+        height="20vw"
         viewBox="0 0 256 256"
         xml:space="preserve"
       >
@@ -74,21 +74,22 @@ export default {
 h2 {
   color: var(--color-short-round);
   font-weight: 400;
-  letter-spacing: 0.05em;
-  margin: 0.5em 0;
+  letter-spacing: 0.05rem;
+  margin: 0.5rem 0;
+  font-size: 1.5rem;
 }
 
 section {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-top: 2em;
+  padding-top: 2rem;
   height: 100%;
 }
 
 .label {
-  font-size: 14px;
-  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
   line-height: 2;
   & .link,
   &.link {
diff --git a/src/renderer/components/drawer/Drawer-menu.vue b/src/renderer/components/drawer/Drawer-menu.vue
index 8b12f88..e4f7423 100644
--- a/src/renderer/components/drawer/Drawer-menu.vue
+++ b/src/renderer/components/drawer/Drawer-menu.vue
@@ -18,7 +18,7 @@
             x="0px"
             y="0px"
             viewBox="0 0 20 20"
-            width="18"
+            width="5vw"
             xml:space="preserve"
           >
             <g>
@@ -53,7 +53,7 @@
           x="0px"
           y="0px"
           viewBox="0 0 19.5 20"
-          width="18"
+          width="5vw"
           xml:space="preserve"
         >
           <path
@@ -80,7 +80,7 @@
             xmlns="http://www.w3.org/2000/svg"
             height="24"
             viewBox="0 0 24 24"
-            width="24"
+            width="6.6vw"
             id="theme-icon"
             class="Icon"
           >
@@ -105,8 +105,8 @@
             xmlns="http://www.w3.org/2000/svg"
             id="about-icon"
             class="Icon"
-            width="24"
-            height="24"
+            width="6.6vw"
+            height="6.6vw"
             viewBox="0 0 24 24"
           >
             <path fill="none" d="M0 0h24v24H0V0z" />
@@ -151,7 +151,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 36px;
+  height: 10vw;
 }
 
 .Drawer-menu-wrapper {
@@ -175,7 +175,7 @@ export default {
     left: 0;
     transition: $transitionSnappy;
     width: 0;
-    height: 2px;
+    height: 0.5vw;
   }
   &.is-active::after {
     width: 33%;
@@ -186,10 +186,10 @@ export default {
   align-items: center;
   display: flex;
   justify-content: center;
-  width: 45px;
+  width: 12.5vw;
   height: 100%;
   &.is-active {
-    border-bottom: 4px solid var(--color-accent);
+    border-bottom: 1.1vw solid var(--color-accent);
   }
 }
 </style>
diff --git a/src/renderer/components/drawer/Drawer-settings.vue b/src/renderer/components/drawer/Drawer-settings.vue
index 536fa2c..f2948ec 100644
--- a/src/renderer/components/drawer/Drawer-settings.vue
+++ b/src/renderer/components/drawer/Drawer-settings.vue
@@ -255,12 +255,12 @@ export default {
 <style lang="scss" scoped>
 .Checkbox {
   background-color: var(--color-background);
-  border: 2px solid var(--color-background-lightest);
+  border: 0.56vw solid var(--color-background-lightest);
   border-radius: 100%;
   display: inline-block;
   transition: $transitionDefault;
-  width: 16px;
-  height: 16px;
+  width: 4.4vw;
+  height: 4.4vw;
   &:hover {
     border-color: var(--color-accent);
   }
@@ -275,22 +275,22 @@ export default {
 }
 
 .Container {
-  max-height: calc(100% - 36px);
+  max-height: calc(100% - 10vw);
   overflow-y: auto;
 }
 
 .Setting-wrapper {
   background-color: var(--color-background);
-  border-radius: 4px;
+  border-radius: 1.1vw;
   display: flex;
   justify-content: space-between;
-  margin: 12px 0;
-  padding: 12px;
+  margin: 3.3vw 0;
+  padding: 3.3vw;
 }
 
 .Setting-title {
   color: var(--color-foreground-darker);
-  font-size: 14px;
+  font-size: 0.7rem;
   letter-spacing: 0.05em;
 }
 </style>
diff --git a/src/renderer/components/drawer/Drawer-theme.vue b/src/renderer/components/drawer/Drawer-theme.vue
index f529885..e28b399 100644
--- a/src/renderer/components/drawer/Drawer-theme.vue
+++ b/src/renderer/components/drawer/Drawer-theme.vue
@@ -28,9 +28,9 @@
         <svg
           v-if="theme === themer.getThemeName(t)"
           xmlns="http://www.w3.org/2000/svg"
-          height="24"
+          width="6.6vw"
+          height="6.6vw"
           viewBox="0 0 24 24"
-          width="24"
         >
           <path d="M0 0h24v24H0z" fill="none" />
           <path
@@ -73,23 +73,23 @@ export default {
 
 <style lang="scss" scoped>
 .Container {
-  max-height: calc(100% - 36px);
+  max-height: calc(100% - 10vw);
   overflow-y: auto;
 }
 
 .Setting-wrapper {
   align-items: center;
-  border-left: 3px solid;
-  border-radius: 0 4px 4px 0;
+  border-left: 0.83vw solid;
+  border-radius: 0 1.1vw 1.1vw 0;
   display: flex;
   justify-content: space-between;
-  margin: 12px 0;
-  min-height: 48px;
-  padding: 0 12px;
+  margin: 3.3vw 0;
+  min-height: 13.3vw;
+  padding: 0 3.3vw;
 }
 
 .Setting-title {
-  font-size: 14px;
-  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
 }
 </style>
diff --git a/src/renderer/components/drawer/Drawer-timer.vue b/src/renderer/components/drawer/Drawer-timer.vue
index 735b983..63f1de6 100644
--- a/src/renderer/components/drawer/Drawer-timer.vue
+++ b/src/renderer/components/drawer/Drawer-timer.vue
@@ -201,24 +201,24 @@ export default {
 
 <style lang="scss" scoped>
 .Setting-wrapper {
-  margin: 10px 0;
+  margin: 2.8vw 0;
   text-align: center;
 }
 
 .Setting-title {
   color: var(--color-foreground-darkest);
-  font-size: 14px;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
+  margin-bottom: 2.2vw;
 }
 
 .Setting-value {
   background-color: var(--color-background);
-  border-radius: 4px;
+  border-radius: 1.1vw;
   display: inline-block;
   font-family: 'RobotoMono', monospace;
-  font-size: 12px;
-  padding: 2px 6px;
+  font-size: 3.3vw;
+  padding: 0.56vw 1.6vw;
 }
 
 .TextButton {
diff --git a/src/renderer/components/drawer/Drawer.vue b/src/renderer/components/drawer/Drawer.vue
index c7e66a0..89551ea 100644
--- a/src/renderer/components/drawer/Drawer.vue
+++ b/src/renderer/components/drawer/Drawer.vue
@@ -38,7 +38,7 @@ export default {
   background-color: var(--color-background-light);
   position: relative;
   width: 100%;
-  height: calc(100% - 68px);
+  height: calc(100% - 18.89vw);
   z-index: 1;
   -webkit-app-region: no-drag;
 }
diff --git a/src/renderer/components/timer/Timer-dial.vue b/src/renderer/components/timer/Timer-dial.vue
index 87c4b0f..0251360 100644
--- a/src/renderer/components/timer/Timer-dial.vue
+++ b/src/renderer/components/timer/Timer-dial.vue
@@ -12,8 +12,8 @@
       y="0px"
       viewBox="0 0 230 230"
       xml:space="preserve"
-      width="220"
-      height="220"
+      width="60vw"
+      height="60vw"
       class="Dial-fill"
       :class="dialClass"
     >
@@ -35,8 +35,8 @@
       y="0px"
       viewBox="0 0 230 230"
       xml:space="preserve"
-      width="220"
-      height="220"
+      width="60vw"
+      height="60vw"
       class="Dial-bg"
     >
       <path
@@ -204,7 +204,7 @@ export default {
 .Dial-wrapper {
   display: flex;
   justify-content: center;
-  margin-top: 35px;
+  margin-top: 10vw;
   position: relative;
 }
 
@@ -213,6 +213,7 @@ export default {
   position: absolute;
   top: 66%;
   text-transform: uppercase;
+  font-size: 4vw;
 }
 
 .Dial-bg {
diff --git a/src/renderer/components/timer/Timer-footer.vue b/src/renderer/components/timer/Timer-footer.vue
index b829559..e7342aa 100644
--- a/src/renderer/components/timer/Timer-footer.vue
+++ b/src/renderer/components/timer/Timer-footer.vue
@@ -10,7 +10,7 @@
           >({{ totalWorkRounds }})</span
         >
       </p>
-      <p class="TextButton" title="Reset current round" @click="callForReset">
+      <p class="TextButton" title="Reset current round" @click="callForReset" style="font-size: 0.7rem;">
         Reset
       </p>
     </div>
@@ -31,7 +31,7 @@
           y="0px"
           viewBox="0 0 8 12"
           xml:space="preserve"
-          height="15px"
+          height="4vw"
           class="Icon--skip"
         >
           <polygon
@@ -65,7 +65,7 @@
             y="0px"
             viewBox="0 0 12.3 12"
             xml:space="preserve"
-            height="15px"
+            height="4vw"
             class="Icon--mute"
             v-if="localVolume > 0"
           >
@@ -85,7 +85,7 @@
             viewBox="-467 269 24 24"
             style="enable-background:new -467 269 24 24;"
             xml:space="preserve"
-            height="20px"
+            height="5vw"
             class="Icon--muted"
             v-else
           >
@@ -264,10 +264,10 @@ export default {
 }
 
 .Slider-wrapper {
-  padding: 8px;
+  padding: 2vw;
   position: absolute;
-  top: -61px;
-  right: -29px;
+  top: -17vw;
+  right: -8vw;
 }
 
 .Slider {
@@ -275,7 +275,7 @@ export default {
     background-color: var(--color-background-lightest);
   }
   &::-webkit-slider-thumb {
-    margin-top: -7px;
+    margin-top: -2vw;
     transition: $transitionDefault;
     &:hover {
       background-color: var(--color-accent);
diff --git a/src/renderer/components/timer/Timer.vue b/src/renderer/components/timer/Timer.vue
index 8e714a8..e3353c3 100644
--- a/src/renderer/components/timer/Timer.vue
+++ b/src/renderer/components/timer/Timer.vue
@@ -30,7 +30,7 @@
               y="0px"
               viewBox="0 0 7.6 15"
               xml:space="preserve"
-              height="15px"
+              height="4vw"
               class="Icon--start"
             >
               <polygon
@@ -57,7 +57,7 @@
               y="0px"
               viewBox="0 0 7.6 15"
               xml:space="preserve"
-              height="15px"
+              height="4vw"
             >
               <polygon
                 fill="var(--color-foreground)"
@@ -83,7 +83,7 @@
               y="0px"
               viewBox="0 0 10.9 18"
               xml:space="preserve"
-              height="15px"
+              height="4vw"
               class="Icon--pause"
             >
               <line
@@ -381,8 +381,8 @@ export default {
   display: flex;
   justify-content: center;
   transition: $transitionDefault;
-  width: 50px;
-  height: 50px;
+  width: 13.8vw;
+  height: 13.8vw;
   -webkit-app-region: no-drag;
   &:hover {
     background-color: var(--color-background-light);
@@ -398,7 +398,7 @@ export default {
 .Button-wrapper {
   display: flex;
   justify-content: center;
-  margin: 20px 0 10px 0;
+  margin: 5.5vw 0;
 }
 
 .Button-icon-wrapper {
@@ -409,7 +409,7 @@ export default {
 
 .Dial-time {
   font-family: 'RobotoMono', monospace;
-  font-size: 46px;
+  font-size: 12.7vw;
   margin: 0;
   position: absolute;
   top: 32%;