diff --git a/app/static/css/style.css b/app/static/css/style.css
index c228c2cbcc70907d1603949e0ac023ee394a5c7a..78fd506a3e918a636457b0032045082d63ea30c3 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -46,7 +46,62 @@
     /*border: solid black 1px;*/
 }
 
+.title
+{
+    text-align: center;
+}
+.main1
+{
+    margin: auto;
+    width: 90%;
+    border: solid 1px;
+    border-radius: 6px;
+    padding: 12px;
+}
+.display
+{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+h3
+{
+    border-top: solid 0.5px;
+    border-bottom: solid 0.5px;
+}
+
+.playerName
+{
+    text-align: center;
+    margin-right: 12px;
+    margin-left: 12px;
+    border-bottom: solid 0.5px;
+}
+.marketValue
+{
+    text-align: center;
+    margin-right: 12px;
+    margin-left: 12px;
+    border-bottom: solid 0.5px;
+}
+.starValue
+{
+    text-align: center;
+    margin-right: 12px;
+    margin-left: 12px;
+    border-bottom: solid 0.5px;
+}
+.salary
+{
+    text-align: center;
+    margin-right: 12px;
+    margin-left: 12px;
+    border-bottom: solid 0.5px;
+}
+
+
+
 /* use inter font globally */
 body {
     font-family: 'Inter', sans-serif;
 }
+
diff --git a/app/templates/home.html b/app/templates/home.html
index e351c6760a5e031db1f7c55e8d63453fa8ff4ecc..d49b1f171c6327eaf584d8c5fbc8ca0e4ca99917 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -1,108 +1,51 @@
 <!DOCTYPE html>
 <html>
-
     <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link href="../static/css/style.css" rel="stylesheet" />
-        <!-- <link rel = "stylesheet" href = ""> -->
+        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="homepage.css">
     </head>
 
     <body>
-        <div class="title">
+        <div class = "title">
             <h1>Title</h1>
             <p>At some point lets figure this out plz</p>
         </div>
 
-        <div class="main1">
+        <div class = "main1">
 
             <label for="filter">Filter By</label>
             <select name="filter">
-                <option value="Star Rating">Star Rating</option>
-                <option value="Market Value">Market Value</option>
-                <option value="Games Won">Games Won</option>
-                <option value="Salary">Salary</option>
-                <option value="Start Of Contract">Start Of Contract</option>
+                <option value = "Star Rating">Star Rating</option>
+                <option value = "Market Value">Market Value</option>
+                <option value = "Salary">Salary</option>
             </select>
 
-            <!--NOTE NOTE NOTE NOTE NOTE-->
-            <p>I dont know it i agree with all of these being in the table but if we're going to filter by all then it
-                only makes sense
-            <p>
-            <div class="list">
-                <table> I dont know it i agree with all of these
-                    <tr>
-                        <th>Player Name </th>
-                        <th>Star Rating</th>
-                        <th>Market Value</th>
-                        <th>Star Rating</th>
-                        <th>Games Won</th>
-                        <th>Salary</th>
-                        <th>Start Of Contract</th>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 1</a></td>
-                        <td>$</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 2</a></td>
-                        <td>£</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 3</a></td>
-                        <td>$</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 4</a></td>
-                        <td>£</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 5</a></td>
-                        <td>$</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 6</a></td>
-                        <td>£</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 7</a></td>
-                        <td>$</td>
-                        <td>***</td>
-                    </tr>
-                    <tr>
-                        <td><a href="playerDetails.html">player 8</a></td>
-                        <td>£</td>
-                        <td>***</td>
-                    </tr>
-
-                    <tr>
-                        <td>import data</td>
-                        <td>import data</td>
-                        <td>import data</td>
-                    </tr>
-                </table>
-                <p>So this is the tabular display</p>
-                <p>Obviously we are importing data from a csv file </p>
+            <div class = "display">
+                <div class = "playerName">
+                    <h3>Player Name</h3>
+                    <p>{Import Data}</p>
+                    <p>name1</p>
+                </div>
+    
+                <div class = "marketValue">
+                    <h3>Market Value</h3>
+                    <p>{Back-Process}</p>
+                    <p>£</p>
+                </div>
+    
+                <div class = "starValue">
+                    <h3>Star Value</h3>
+                    <p>{Back-Process}</p>
+                    <p>*****</p>
+                </div>
+    
+                <div class = "salary">
+                    <h3>Salary</h3>
+                    <p>{Import Data}</p>
+                    <p>$</p>
+                </div>
             </div>
-
-
-
+            
         </div>
-        <footer>
-            <h3>notes</h3>
-            <p>1 - css formatting</p>
-            <p>2 - Need to be able to load specific columns into table </p>
-            <p>3 - </p>
-            <p>4 - </p>
-            <p>5 - </p>
-            <p>6 - </p>
-        </footer>
-
     </body>
-
-</html>
+</html>
\ No newline at end of file