diff --git a/client/src/data/chartTables.tsx b/client/src/data/chartTables.tsx
deleted file mode 100644
index ee38c89..0000000
--- a/client/src/data/chartTables.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-export const chart1 = {
-    data: [
-        {
-            label: '5',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '6',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '7',
-            value: [
-                'H','H','H','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '8',
-            value: [
-                'H','H','H','H','H','S','H','H','H'
-            ]
-        },
-        {
-            label: '9',
-            value: [
-                'H','H','S','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '10',
-            value: [
-                'H','H','S','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '11',
-            value: [
-                'H','H','H','H','H','H','H','S','H'
-            ]
-        },
-        {
-            label: '12',
-            value: [
-                'H','H','H','H','H','S','S','H','H'
-            ]
-        },
-        {
-            label: '13',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '14',
-            value: [
-                'S','H','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '15',
-            value: [
-                'H','H','H','H','H','H','S','S','S'
-            ]
-        },
-        {
-            label: '16',
-            value: [
-                'H','H','S','S','S','H','H','H','H'
-            ]
-        },
-        {
-            label: '17',
-            value: [
-                'H','S','H','S','H','H','H','H','H'
-            ]
-        }
-        
-    ],
-    data2: [
-        {
-            label: 'A/2',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/3',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/4',
-            value: [
-                'H','H','H','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/5',
-            value: [
-                'H','H','H','H','H','S','H','H','H'
-            ]
-        },
-        {
-            label: 'A/6',
-            value: [
-                'H','H','S','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/7',
-            value: [
-                'H','H','S','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/8',
-            value: [
-                'H','H','H','H','H','H','H','S','H'
-            ]
-        },
-        {
-            label: 'A/9',
-            value: [
-                'H','H','H','H','H','S','S','H','H'
-            ]
-        }
-        
-    ]
-}
-
-export const chart2 = {
-    data: [
-        {
-            label: '5',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: '6',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '7',
-            value: [
-                'H','H','H','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '8',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: '9',
-            value: [
-                'H','H','S','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '10',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: '11',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: '12',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: '13',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '14',
-            value: [
-                'S','H','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: '15',
-            value: [
-                'H','H','H','H','H','H','S','S','S'
-            ]
-        },
-        {
-            label: '16',
-            value: [
-                'H','H','S','S','S','H','H','H','H'
-            ]
-        },
-        {
-            label: '17',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        }
-        
-    ],
-    data2: [
-        {
-            label: 'A/2',
-            value: [
-                'H','S','H','H','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/3',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: 'A/4',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: 'A/5',
-            value: [
-                'H','H','H','H','H','S','H','H','H'
-            ]
-        },
-        {
-            label: 'A/6',
-            value: [
-                'H','H','S','S','H','H','H','H','H'
-            ]
-        },
-        {
-            label: 'A/7',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: 'A/8',
-            value: [
-                'S','S','S','S','S','S','S','S','S'
-            ]
-        },
-        {
-            label: 'A/9',
-            value: [
-                'H','H','H','H','H','S','S','H','H'
-            ]
-        }
-        
-    ]
-}
-
-export const dealerRow = [2,3,4,5,6,7,8,9,10];
\ No newline at end of file
diff --git a/client/src/data/charts.json b/client/src/data/charts.json
new file mode 100644
index 0000000..db8db5b
--- /dev/null
+++ b/client/src/data/charts.json
@@ -0,0 +1,183 @@
+{
+  "chart1": {
+    "data": [
+      {
+        "label": "5",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "6",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "7",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "8",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "9",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "10",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "11",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "12",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "13",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "14",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "15",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "16",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "17",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      }
+    ],
+    "data2": [
+      {
+        "label": "A/2",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/3",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/4",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/5",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/6",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/7",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/8",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/9",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      }
+    ]
+  },
+  "chart2": {
+    "data": [
+      {
+        "label": "5",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "6",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "7",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "8",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "9",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "10",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "11",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "12",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "13",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "14",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "15",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "16",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      },
+      {
+        "label": "17",
+        "value": ["S", "S", "S", "S", "S", "S", "S", "S", "S"]
+      }
+    ],
+    "data2": [
+      {
+        "label": "A/2",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/3",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/4",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/5",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/6",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/7",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/8",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      },
+      {
+        "label": "A/9",
+        "value": ["H", "S", "H", "H", "H", "H", "H", "H", "H"]
+      }
+    ]
+  },
+  "dealerRow": [2, 3, 4, 5, 6, 7, 8, 9, 10]
+}
diff --git a/client/src/views/Charts/index.tsx b/client/src/views/Charts/index.tsx
index 78f40fc..437b728 100644
--- a/client/src/views/Charts/index.tsx
+++ b/client/src/views/Charts/index.tsx
@@ -1,60 +1,82 @@
-import './Charts.css';
-import {useState} from 'react';
-import {chart1, chart2, dealerRow} from '../../data/chartTables';
+import "./Charts.css";
+import { useState } from "react";
+import jsonData from "../../data/charts.json";
 
 const Charts = () => {
+  const chart1 = JSON.parse(JSON.stringify(jsonData.chart1));
+  console.log(chart1.data);
+  const chart2 = JSON.parse(JSON.stringify(jsonData.chart2));
+  console.log(chart2);
+  const dealerRow = JSON.parse(JSON.stringify(jsonData.dealerRow));
+  console.log(dealerRow);
 
-    const [chart,setChart] = useState(chart1);
+  const [chart, setChart] = useState(chart1);
 
-    const handleClick = () => {
-        setChart(chart2);
-    }
+  const handleClick = () => {
+    setChart(chart2);
+  };
 
-    return (
-        <div className='table-container'>
-            <table>
-                <tr>
-                    <th>{`Dealer's Card\nYour Hand`}</th>
-                    {dealerRow.map((data, i) => {
-                        return <th key={i}>{data}</th>
-                    })}
-                </tr>
-                {chart.data.map((data, i) => {
-                    return (
-                        <tr key={i}>
-                            <th>{data.label}</th>
-                            {data.value.map((value) => {
-                                return <td style={{
-                                    backgroundColor: value == 'H' ? 'green' : 'red'
-                                }}>{value}</td>
-                            })}
-                        </tr>
-                    )
+  return (
+    <div className="table-container">
+      <table>
+        <tr>
+          <th>{`Dealer's Card\nYour Hand`}</th>
+          {dealerRow.map((data: number, i: number) => {
+            return <th key={i}>{data}</th>;
+          })}
+        </tr>
+        {chart.data.map(
+          (data: { label: string; value: string[] }, i: number) => {
+            return (
+              <tr key={i}>
+                <th>{data.label}</th>
+                {data.value.map((value) => {
+                  return (
+                    <td
+                      style={{
+                        backgroundColor: value == "H" ? "green" : "red",
+                      }}
+                    >
+                      {value}
+                    </td>
+                  );
                 })}
-            </table>
-            <table>
-                <tr>
-                    <th>Your Hand\Dealer's Card</th>
-                    {dealerRow.map((data, i) => {
-                        return <th key={i}>{data}</th>
-                    })}
-                </tr>
-                {chart.data2.map((data, i) => {
-                    return (
-                        <tr key={i}>
-                            <th>{data.label}</th>
-                            {data.value.map((value) => {
-                                return <td style={{
-                                    backgroundColor: value == 'H' ? 'green' : 'red'
-                                }}>{value}</td>
-                            })}
-                        </tr>
-                    )
+              </tr>
+            );
+          }
+        )}
+      </table>
+      <table>
+        <tr>
+          <th>Your Hand\Dealer's Card</th>
+          {dealerRow.map((data: number, i: number) => {
+            return <th key={i}>{data}</th>;
+          })}
+        </tr>
+        {chart.data2.map(
+          (data: { label: string; value: string[] }, i: number) => {
+            return (
+              <tr key={i}>
+                <th>{data.label}</th>
+                {data.value.map((value) => {
+                  return (
+                    <td
+                      style={{
+                        backgroundColor: value == "H" ? "green" : "red",
+                      }}
+                    >
+                      {value}
+                    </td>
+                  );
                 })}
-            </table>
-            <button onClick={handleClick}>Switch Charts</button>
-        </div>
-    )
-}
+              </tr>
+            );
+          }
+        )}
+      </table>
+      <button onClick={handleClick}>Switch Charts</button>
+    </div>
+  );
+};
 
-export default Charts;
\ No newline at end of file
+export default Charts;
diff --git a/client/src/views/Game/styles/Card.module.css b/client/src/views/Game/styles/Card.module.css
index 68179ac..011baa4 100644
--- a/client/src/views/Game/styles/Card.module.css
+++ b/client/src/views/Game/styles/Card.module.css
@@ -10,8 +10,8 @@
   }
   
   .hiddenCard {
-    width: 90px;
-    height: 195px;
+    width: 85px;
+    height: 185px;
     margin: 10px;
     padding: 0.5em 1.5em;
     background-image: linear-gradient(176deg, #ffffff 8.33%, #ff0000 8.33%, #ff0000 50%, #ffffff 50%, #ffffff 58.33%, #ff0000 58.33%, #ff0000 100%);
diff --git a/client/src/views/Game/styles/Game.module.css b/client/src/views/Game/styles/Game.module.css
index dbfd112..f08717d 100644
--- a/client/src/views/Game/styles/Game.module.css
+++ b/client/src/views/Game/styles/Game.module.css
@@ -1,4 +1,4 @@
 .gameBackground {
     background-color: green;
-    height: 900px;
+    height: 750px;
 }
\ No newline at end of file
diff --git a/client/src/views/Game/styles/Hand.module.css b/client/src/views/Game/styles/Hand.module.css
index 0815412..89ea3b6 100644
--- a/client/src/views/Game/styles/Hand.module.css
+++ b/client/src/views/Game/styles/Hand.module.css
@@ -14,6 +14,8 @@
   
   .title {
     text-align: center;
+    margin-bottom: 0;
+    margin-top: 5px;
   }
   
   @media screen and (max-width: 600px) {
diff --git a/client/src/views/Game/styles/Status.module.css b/client/src/views/Game/styles/Status.module.css
index 4e9accd..5833b43 100644
--- a/client/src/views/Game/styles/Status.module.css
+++ b/client/src/views/Game/styles/Status.module.css
@@ -10,6 +10,7 @@
     margin: 0.5em 0.5em 0.5em 1em;
     padding: 1em;
     width: 40%;
+    height: 50px;
     background: black;
     border: 5px solid white;
     border-radius: 15px;
@@ -23,6 +24,7 @@
     margin: 0.5em 1em 0.5em 0.5em;
     padding: 1em;
     width: 20%;
+    height: 50px;
     background: black;
     border: 5px solid white;
     border-radius: 15px;