diff --git a/public/FriendsGraph.html b/public/FriendsGraph.html
index 6423e3e..2e67ac3 100644
--- a/public/FriendsGraph.html
+++ b/public/FriendsGraph.html
@@ -1,4 +1,4 @@
-<!doctype html>
+﻿<!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
@@ -7,19 +7,6 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css" />
-
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-        }
-        /*#myGraph {*/
-            /*!*width: 100%;*!*/
-            /*!*height: 800px;*!*/
-            /*!*border: 1px solid lightgray;*!*/
-            /*background-color:#333333;*/
-        /*}*/
-    </style>
-
     <script
             src="https://code.jquery.com/jquery-3.3.1.min.js"
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
diff --git a/public/about.html b/public/about.html
index cd4600f..cfcaea9 100644
--- a/public/about.html
+++ b/public/about.html
@@ -36,7 +36,7 @@
             </li>
         </ul>
     </div>
-    <div id="main">
+    <div>
         <div id="content" class="container">
             <div id="content-title">
                 <h1 class="big-title text-center">What is this?</h1>
diff --git a/public/index.html b/public/index.html
index 324001c..472de73 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,9 +35,20 @@
             </li>
         </ul>
     </div>
-    <div class="main">
-        <div id="content" class="container">
-
+    <div class="main container">
+        <div class="row">
+            <div class="side-txt">
+                <div class="text-title text-center" style="padding-top: 15px;">
+                    <h1 class="m-title">How to get started:</h1>
+                </div>
+                <div class="text-content">
+                    <p style="position: relative; padding-left: 10px; padding-right: 10px;">
+                        Head over to the 'Generate graphs' page and enter the username of the user you want to generate your graph around.
+                    </p>
+                </div>
+            </div>
+            <img class="side-img img-fluid" src="./img/graphExample.png" />
         </div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 8e0192f..630de8f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -51,6 +51,16 @@
     font-weight: normal;
     font-size: 150%;
 }
+.text-title {
+    height: 60px;
+    background-color: rgb(208, 208, 208);
+    border-radius: 20px 0px 0px 0px;
+}
+.text-content {
+    height: 335px;
+    background-color: rgb(242, 242, 242);
+    border-radius: 0px 0px 0px 20px;
+}
 .nav-sep {
     position: relative;
     left: 10px;
@@ -71,6 +81,21 @@
     color: rgb(250, 152, 33);
     text-decoration: none;
 }
+.side-img {
+    display: grid;
+    position: relative;
+    width: 50%;
+    border-radius: 0px 20px 20px 0px;
+}
+.side-txt {
+    display: grid;
+    position: relative;
+    width: 50%;
+}
+.main {
+    position: relative;
+    top: 20px;
+}
 body {
     background-color: #232323;
 }
\ No newline at end of file
