diff --git a/common/ECG/entry/src/main/js/default/pages/index/index.css b/common/ECG/entry/src/main/js/default/pages/index/index.css
index a2173296961686425ea8d224a03c5b14f7c7e414..6d63fdd27fb9ecfae0b92665827553a35eb36b97 100644
--- a/common/ECG/entry/src/main/js/default/pages/index/index.css
+++ b/common/ECG/entry/src/main/js/default/pages/index/index.css
@@ -12,42 +12,79 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.stackMain {
+.main {
     width: 100%;
     height: 100%;
     flex-direction: column;
     background-color: black;
 }
-.chart_t_l {
+
+.div_top {
+    width: 100%;
+    height: 20%;
+    top: 0px;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat_t_l {
     width: 110px;
     height: 110px;
-    object-fit: cover;
-    top: 8%;
-    left: 10px;
+    object-fit: contain;
+    display: flex;
+    flex-shrink: 1;
+    flex-basis: 110px;
 }
+
 .numberImg {
     width: 32px;
     height: 66px;
-    top: 10%;
+    object-fit: scale-down;
+    display: flex;
+    flex-shrink: 1;
 }
 .hundredImg {
-    left: 140px;
+    left: 80px;
+    object-fit: scale-down;
+    display: flex;
+    flex-shrink: 1;
 }
 .chart_t_r {
     width: 80px;
     height: 40px;
-    top: 12%;
     color: #a6a6a6;
 }
-.chartBg {
+.stack_main {
     width: 100%;
-    height: 50%;
-    top: 20%;
+    height: 60%;
+    flex-direction: column;
+    justify-content: center;
 }
-.chartTime {
+.chart_bg {
     width: 100%;
-    top: 70%;
-    font-size: 38px;
+    height: 100%;
+}
+.chart {
+    width: 100%;
+    height: 171px;
+}
+.chart_time {
     text-align: center;
     color: white;
-}
\ No newline at end of file
+}
+font_size {
+    font-size: 38px;
+}
+.div_bottom {
+    width: 100%;
+    height: 20%;
+    align-items: center;
+    justify-content: center;
+}
+
+@media screen and (device-type: phone) and (orientation: landscape) {
+    .font_size {
+        font-size: 28px;
+    }
+}
+
diff --git a/common/ECG/entry/src/main/js/default/pages/index/index.hml b/common/ECG/entry/src/main/js/default/pages/index/index.hml
index 2d7fb723bdc948af1cd2ab056c659a49e98e566f..458d99130317f36e3a216da2a74063409899bb27 100644
--- a/common/ECG/entry/src/main/js/default/pages/index/index.hml
+++ b/common/ECG/entry/src/main/js/default/pages/index/index.hml
@@ -12,17 +12,23 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
-<stack class="stackMain">
-    <image src="{{ chartHeartImg }}" class="chart_t_l"></image>
-    <image src="{{ hundredImg }}" class="numberImg hundredImg" style="display: {{ hundredDisplay }};" ></image>
-    <image src="{{ tensImg }}" class="numberImg" style="left: {{ tensLeft }};" ></image>
-    <image src="{{ onesImg }}" class="numberImg" style="left: {{ onesLeft }};" ></image>
-    <image src="/common/A054_048.png" class="chartBg"></image>
-    <chart ref='chart' type="line" style="top:35%; width:100%; height: 171px;" datasets="{{ datasets }}" options="{{ options }}"></chart>
-    <text class="chart_t_r" style="letter-spacing: {{ $t('css.letter_spacing') }}; font-family: {{ $t('css.fontFamily')}}; left: {{ chartUnit }};">
-        {{ $t('strings.times_minute') }}
-    </text>
-    <text class="chartTime" style="font-family: {{ $t('css.fontFamily') }};">
-        {{ chartTime }}{{ $t('strings.count_down') }}
-    </text>
-</stack>
+<div class="main">
+   <div class="div_top">
+       <image src="{{ chartHeartImg }}" class="chart_t_l"></image>
+       <image src="{{ hundredImg }}" class="numberImg hundredImg" style="display: {{ hundredDisplay }};" ></image>
+       <image src="{{ tensImg }}" class="numberImg" style="left: {{ tensLeft }};" ></image>
+       <image src="{{ onesImg }}" class="numberImg" style="left: {{ onesLeft }};" ></image>
+       <text class="chart_t_r" style="letter-spacing: {{ $t('css.letter_spacing') }}; font-family: {{ $t('css.fontFamily')}}; left: {{ chartUnit }};">
+           {{ $t('strings.times_minute') }}
+       </text>
+   </div>
+    <stack class="stack_main">
+        <image src="/common/A054_048.png" class="chartBg"></image>
+        <chart ref='chart' type="line" class="chart"  datasets="{{ datasets }}" options="{{ options }}"></chart>
+    </stack>
+    <div class="div_bottom">
+        <text class="chart_time font_size" style="font-family: {{ $t('css.fontFamily') }};">
+            {{ chartTime }}{{ $t('strings.count_down') }}
+        </text>
+    </div>
+</div>
\ No newline at end of file