diff --git a/src/components/Body.tsx b/src/components/Body.tsx
index 3a23584..6caba0c 100644
--- a/src/components/Body.tsx
+++ b/src/components/Body.tsx
@@ -28,15 +28,15 @@ const Body: React.FC = () => {
   // return statement
   return (
     <section className="w-full h-8/10 flex flex-col justify-center items-center">
-      <div className="w-full h-8/10 px-4">
+      <div className="w-full h-8/10 px-4 ip5_h-1/2 ipx_h-6/10 ipD_h-6/10 ipDP_h-7/10">
         {<ChartDisplay chartData={currentChartData} currentChart={chartNum} />}
       </div>
-      <div className="w-full h-2/10 flex justify-center items-center">
+      <div className="w-full h-2/10 flex justify-center items-center ip5_h-1/2 ipx_h-4/10 ipD_h-4/10 ipDP_h-3/10">
         <button
-          className="bg-blue-700 text-white font-bold py-4 px-8 rounded"
+          className="bg-blue-700 text-white font-bold py-4 px-8 rounded ip5_py-4 ip5_px-8 ipx_py-4 ipx_px-8 ipD_py-4 ipD_px-8 ipDP_py-4 ipDP_px-8"
           onClick={updateChart}
         >
-          Show Chart {chartNum === 1 ? 2 : 1}
+          <span className='text-md ip5_text-md ipx_text-md ipD_text-md ipDP_text-md'>Show Chart {chartNum === 1 ? 2 : 1}</span>
         </button>
       </div>
     </section>
diff --git a/src/components/ChartDisplay.tsx b/src/components/ChartDisplay.tsx
index 26fbbf3..589285a 100644
--- a/src/components/ChartDisplay.tsx
+++ b/src/components/ChartDisplay.tsx
@@ -51,46 +51,57 @@ const ChartDisplay: React.FC<ChartPropTypes> = (props) => {
         ...currentOption,
         title: {
           ...currentOption.title,
-          text: `Chart ${props.currentChart}`
+          text: `Chart ${props.currentChart}`,
+          padding: 0
         },
         legend: {
           ...currentOption.legend,
-          data: [
-            `Chart ${props.currentChart} - Line`,
-            `Chart ${props.currentChart} - Bar`,
-            `Chart ${props.currentChart} - Area`
-          ]
+          show: false
         },
         xAxis: {
           ...currentOption.xAxis,
-          data: props.chartData.horizontal
+          data: props.chartData.horizontal,
+          name: props.chartData.nameX,
+          nameGap: 10,
+          nameLocation: 'end',
+          nameTextStyle: {
+            fontSize: 20,
+            fontWeight: 'bold',
+            align: 'center'
+          }
         },
-        series: [
-          {
-            ...currentOption.series[0],
-            name: `Chart ${props.currentChart} - Line`,
-            type: 'line',
-            smooth: true,
-            areaStyle: undefined,
-            data: props.chartData.vertical
-          },
-          {
-            ...currentOption.series[0],
-            name: `Chart ${props.currentChart} - Bar`,
-            type: 'bar',
-            smooth: false,
-            areaStyle: undefined,
-            data: props.chartData.vertical
-          },
-          {
-            ...currentOption.series[0],
-            name: `Chart ${props.currentChart} - Area`,
-            type: 'line',
-            smooth: true,
-            areaStyle: { normal: {} },
-            data: props.chartData.vertical
+        yAxis: {
+          ...currentOption.yAxis,
+          name: props.chartData.nameY,
+          nameGap: 20,
+          nameLocation: 'end',
+          nameTextStyle: {
+            fontSize: 20,
+            fontWeight: 'bold',
+            align: 'center'
           }
-        ]
+        },
+        series: props.currentChart === 1
+          ? [
+              {
+                ...currentOption.series[0],
+                name: `${props.chartData.nameY} - Line`,
+                type: 'line',
+                smooth: true,
+                areaStyle: undefined,
+                data: props.chartData.vertical
+              }
+            ]
+          : [
+              {
+                ...currentOption.series[0],
+                name: `${props.chartData.nameY} - Bar`,
+                type: 'bar',
+                smooth: true,
+                areaStyle: undefined,
+                data: props.chartData.vertical
+              }
+            ]
       }
     })
   }, [props.chartData, props.currentChart])
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c7ea2a4..0c38937 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,8 +2,10 @@ import React from 'react'
 
 const Header: React.FC = () => {
   return (
-    <section className='w-full h-2/10 flex justify-center items-center'>
-      <h1 className="text-4xl text-center text-blue-500">React Data Visualizer</h1>
+    <section className="w-full h-2/10 flex justify-center items-center">
+      <h1 className="text-4xl text-center text-blue-500 ip5_text-3xl ipx_text-3xl ipD_text-5xl ipDP_text-5xl">
+        React Data Visualizer
+      </h1>
     </section>
   )
 }
diff --git a/src/index.css b/src/index.css
index 9c33937..0826b7d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -101,6 +101,11 @@ button:hover {
     color: #fff;
 }
 
+.text-md {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+
 .font-bold {
     font-weight: 700;
 }
@@ -142,4 +147,108 @@ button:hover {
     100% {
         transform: rotate(360deg);
     }
+}
+
+
+/* Media queries */
+
+
+/* iPhone 5 */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+    .ip5_h-1\/2 {
+        height: 50%;
+    }
+    .ip5_text-3xl {
+        font-size: 1.4rem;
+    }
+    .ip5_py-4 {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+    .ip5_px-8 {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .ip5_text-md {
+        font-size: 1rem;
+    }
+}
+
+
+/* iPhone X */
+
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
+    .ipx_h-6\/10 {
+        height: 60%;
+    }
+    .ipx_h-4\/10 {
+        height: 40%;
+    }
+    .ipx_text-3xl {
+        font-size: 1.6rem;
+    }
+    .ipx_py-4 {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+    .ipx_px-8 {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+    .ipx_text-md {
+        font-size: 1.2rem;
+    }
+}
+
+
+/* iPad */
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+    .ipD_h-6\/10 {
+        height: 60%;
+    }
+    .ipD_h-4\/10 {
+        height: 40%;
+    }
+    .ipD_text-5xl {
+        font-size: 3rem;
+    }
+    .ipD_py-4 {
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+    }
+    .ipD_px-8 {
+        padding-left: 3rem;
+        padding-right: 3rem;
+    }
+    .ipD_text-md {
+        font-size: 2rem;
+    }
+}
+
+
+/* iPad Pro */
+
+@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
+    .ipDP_h-7\/10 {
+        height: 70%;
+    }
+    .ipDP_h-3\/10 {
+        height: 30%;
+    }
+    .ipDP_text-5xl {
+        font-size: 5rem;
+    }
+    .ipDP_py-4 {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+    .ipDP_px-8 {
+        padding-left: 4rem;
+        padding-right: 4rem;
+    }
+    .ipDP_text-md {
+        font-size: 3rem;
+    }
 }
\ No newline at end of file
diff --git a/src/interfaces/interface.ts b/src/interfaces/interface.ts
index c4c545b..1ccfb74 100644
--- a/src/interfaces/interface.ts
+++ b/src/interfaces/interface.ts
@@ -1,6 +1,8 @@
 interface ChartDataType {
   horizontal: number[]
   vertical: number[]
+  nameX: string
+  nameY: string
 }
 
 interface SeriesType {
@@ -23,6 +25,7 @@ interface OptionType {
   legend: {
     data: string[]
     padding: number | string
+    show?: boolean
   }
   toolbox: {
     feature: {
@@ -42,12 +45,29 @@ interface OptionType {
       name?: string
       nameLocation?: 'start' | 'center' | 'middle' | 'end'
       nameGap?: number
+      nameTextStyle?: {
+        fontStyle?: 'normal' | 'italic' | 'oblique'
+        fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number
+        fontFamily?: 'sans-serif' | 'serif' | 'monospace'
+        fontSize?: number
+        align?: 'left' | 'center' | 'right'
+      }
       data: number[] | string[]
     }
   ]
   yAxis: [
     {
       type: 'value'
+      name?: string
+      nameLocation?: 'start' | 'center' | 'middle' | 'end'
+      nameGap?: number
+      nameTextStyle?: {
+        fontStyle?: 'normal' | 'italic' | 'oblique'
+        fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number
+        fontFamily?: 'sans-serif' | 'serif' | 'monospace'
+        fontSize?: number
+        align?: 'left' | 'center' | 'right'
+      }
     }
   ]
   series: SeriesType[]
diff --git a/src/static/helpers.ts b/src/static/helpers.ts
index 052ec84..c6d6fa3 100644
--- a/src/static/helpers.ts
+++ b/src/static/helpers.ts
@@ -17,7 +17,7 @@ const getChart1Data = (): ChartDataType => {
 
     return item.Ash
   })
-  return { horizontal: flavanoids, vertical: ash }
+  return { horizontal: flavanoids, vertical: ash, nameX: 'Flavanoids', nameY: 'Ash' }
 }
 
 const getChart2Data = (): ChartDataType => {
@@ -35,7 +35,7 @@ const getChart2Data = (): ChartDataType => {
 
     return item.Magnesium
   })
-  return { horizontal: alcohol, vertical: magnesium }
+  return { horizontal: alcohol, vertical: magnesium, nameX: 'Alcohol', nameY: 'Magnesium' }
 }
 
 export { getChart1Data, getChart2Data }