diff --git a/public/TimeLineGraph.html b/public/TimeLineGraph.html
index c477f8f..12ce311 100644
--- a/public/TimeLineGraph.html
+++ b/public/TimeLineGraph.html
@@ -13,6 +13,10 @@
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous">
     </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
     <script src="js/githubAPI.js"></script>
     <script src="js/profileTimeLine.js"></script>
     <script src="js/profileGen.js"></script>
@@ -24,61 +28,61 @@
 
     <style type="text/css">
         .vis-timeline {
-            border: 2px solid blue;
-            /*font-family:  purisa, 'comic sans', cursive;*/
-            font-size: 12pt;
-            background: #E8E8E8;
+            border: none;
+            font-size: 16px;
+            color: var(--white);
+            background-color: var(--dark);
         }
         .vis-item {
-            border-color: #0B002B;
-            background-color: #88BAFF;
-            font-size: 15pt;
-            color: black;
-            box-shadow: 5px 5px 20px rgba(47,27,0, 0.5);
+            font-size: 16px;
+            color: var(--dark);
+            background-color: var(--white);
+            box-sizing: border-box;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.06);
+            border-color: transparent;
+        }
+        .vis-item.vis-box {
+            border-radius: 2px;
+            padding: 0;
+            border: none;
+        }
+        .vis-item .vis-item-content {
+            padding: 8px 10px;
+        }
+        .vis-item.vis-box.vis-selected {
+            border: 2px solid var(--primary);
         }
-        .vis-item,
         .vis-item.vis-line {
-            border-width: 3px;
+            border-width: 2px;
+            border-color: var(--primary)
         }
         .vis-item.vis-dot {
-            border-width: 10px;
-            border-radius: 10px;
+            border-color: var(--primary);
         }
         .vis-item.vis-selected {
-            border-color: #2C3E50;
-            background-color: #498FBE;
+            border-color: var(--primary);
+            background-color: var(--white);
+            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.14);
         }
         .vis-time-axis .vis-text {
-            color: #0B002B;
-            padding-top: 10px;
-            padding-left: 10px;
-        }
-        .vis-time-axis .vis-text.vis-major {
-            font-weight: bold;
+            color: var(--white);
+            padding-top: 8px;
+            padding-left: 16px;
         }
         .vis-time-axis .vis-grid.vis-minor {
             border-width: 2px;
-            border-color: #88BAFF;
+            border-color: rgba(255, 255, 255, .29);
         }
-        .vis-labelset .vis-label
-        {
-            color: black;
+        .vis-labelset .vis-label {
+            color: var(--white);
         }
         .vis-time-axis .vis-grid.vis-major {
-            border-width: 2px;
-            border-color: #0B002B;
-        }
-
-        .containerCustom {
-            width: 100%;
-            padding-right: 0px;
-            padding-left: 0px;
-            margin-right: 0px;
-            margin-left: 0px;
+            border-width: 1px;
+            border-color: rgba(255, 255, 255, .5);
         }
     </style>
 </head>
-<body>
+<body class="timeline-graph-page">
     <nav class="navbar navbar-dark bg-dark navbar-expand-md">
         <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
@@ -99,51 +103,52 @@
         </div>
     </nav>
 
-<div class="containerCustom">
-
-    <div class="row align-center" id="searchBarTop">
-        <nav class="navbar navbar-light bg-light justify-content-between">
-            <a class="navbar-brand">Create Graph</a>
-            <form class="form-inline">
-                <input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
-                <button class="btn btn-outline-success my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Look Up</button>
-            </form>
-        </nav>
-    </div>
-
-    <div class="row containerCustom">
-        <div class="col-md-10 col-12">
-            <h2 id="graphLabel"></h2>
-            <div id="myGraph" class="w-100"></div>
-            <pre id="eventSpan"></pre>
-
-            <div id="repositoryInformation" class="w-100"></div>
-        </div>
-        <div class="col-md-2 col-12 w-100">
-            <div id="profileGen"></div>
+    <div class="main">
+        <div class="container-fluid container-xl">
+            <div class="row pt-5">
+                <div class="col-lg-3 col-md-4 col-12"></div>
+                <div class="col-lg-9 col-md-8 col-12">
+                    <div class="d-flex align-items-baseline justify-content-between my-4">
+                         <div class="d-flex align-items-center">
+                              <svg class="mr-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM18 5.4C20.988 5.4 23.4 7.812 23.4 10.8C23.4 13.788 20.988 16.2 18 16.2C15.012 16.2 12.6 13.788 12.6 10.8C12.6 7.812 15.012 5.4 18 5.4ZM18 30.96C15.8613 30.96 13.7559 30.4308 11.8715 29.4194C9.98707 28.4081 8.3822 26.9462 7.2 25.164C7.254 21.582 14.4 19.62 18 19.62C21.582 19.62 28.746 21.582 28.8 25.164C27.6178 26.9462 26.0129 28.4081 24.1285 29.4194C22.2441 30.4308 20.1387 30.96 18 30.96Z" fill="white"/>
+                              </svg>
+                             <h1 class="text-white font-weight-bold">Repo timeline</h1>
+                         </div>
+                         <div>
+                             <a id="FriendsGraphLink" class="text-light" href="#">View friends graph</a>
+                         </div>
+                    </div>
+                </div>
+            </div>
+           <div class="row pb-4">
+               <div class="col-lg-3 col-md-4 col-12">
+                   <div id="profileGen"></div>
+               </div>
+               <div class="col-lg-9 col-md-8 col-12">
+                    <div class="card shadow mb-5">
+                        <h2 id="graphLoading" class="my-0"></h2>
+                        <div id="myGraph" class="w-100"></div>
+                    </div>
+                    <div id="repositoryInformation" class="w-100"></div>
+               </div>
+           </div>
         </div>
     </div>
+
 </body>
 
 <script>
-
-    function fetchUserInput()
-    {
-        const inputedName = $("#txtUsername").val();
-        createGraphs(inputedName);
-    }
-
-    function createGraphs(username)
-    {
+    function createGraphs(username) {
         createProfileTimeLine(username, "myGraph");
         profileGen(username, "profileGen");
-        $("#searchBarTop").html("");
     }
 
-    if(findGetParameter("name") !== null)
-    {
+    if (findGetParameter("name") !== null) {
         createGraphs(findGetParameter("name"))
     }
+
+    $('#FriendsGraphLink').attr("href", "FriendsGraph.html?name=" + findGetParameter("name"));
 </script>
 
 </html>
diff --git a/public/js/profileTimeLine.js b/public/js/profileTimeLine.js
index 700e8ec..9d5a9d1 100644
--- a/public/js/profileTimeLine.js
+++ b/public/js/profileTimeLine.js
@@ -41,78 +41,32 @@ function timeLineClickEvent(properties)
     {
         var item = repositoryData[properties.item];
 
-        var html = "<div class=\"card\">\n" +
-            "  <div class=\"card-header\">\n" +
-            item.name +
-            "  </div>\n" +
-            "  <div class=\"card-body\">\n";
-
-        html += "<p>" + item.description + "</p>";
-
-        console.log(item.license);
-        if(item.license === null)
-        {
+        if (item.license === null) {
             item.license = new Object();
-            item.license.name = 'none';
+            item.license.name = 'None';
         }
 
-        html += "<div class='row'><div class=\"col-6\">\n" +
-            "        <ul class=\"list-group\">\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Fork Count</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.forks +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Languages</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.language+
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Liscense</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.license.name +
-            "</div></li>";
-            if(item.homepage !== null)
-            {
-                html +=
-                "            <li class=\"row\">\n" +
-                "                <div class=\"col-md-6\"><b>Home Page</b></div>\n" +
-                "                <div class=\"col-md-6\">" +
-                "<a href='" + item.homepage + "'>" +item.homepage + "</a>" +
-                "</div>\n" +
-                "            </li>\n" +
-                "        </ul>\n";
-            }
-
-
-        html += "</div><div class=\"col-6\">\n" +
-            "        <ul class=\"list-group\">\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Repository URL</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            "<a href='" + item.html_url + "'>" +item.html_url + "</a>" +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Open Issues</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.open_issues_count +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Watchers</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.watchers +
-            "</div>\n" +
-            "            </li>\n" +
-            "        </ul>\n" +
-            "    </div></div>";
-
-        html +="  </div>\n" +
-            "</div>";
+        var html = `
+            <div class="card shadow" style="font-size: 16px">
+                <div class="card-body">
+                    <h5 class="card-title">${item.name}</h5>
+                    <p class="card-subtitle text-muted">${item.description ? item.description : 'No description'}</p>
+                    <div class="row py-3">
+                        <div class="col-12 col-md-8">
+                            ${item.homepage ? `<p class="mb-0">Homepage: <a href="${item.license.name}">${item.license.name}</a></p>` : ''}
+                            <p class="mb-0">Repository URL: <a href="${item.html_url}">${item.html_url}</a></p>
+                            <p class="mb-0">Languages: ${item.language}</p>
+                            <p class="mb-0">License: ${item.license.name}</p>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <p class="mb-0">Fork Count: ${item.forks}</p>
+                            <p class="mb-0">Open Issues: ${item.open_issues_count}</p>
+                            <p class="mb-0">Watchers: ${item.watchers}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
 
         $("#repositoryInformation").html(html);
     }
@@ -154,4 +108,4 @@ function createProfileTimeLine(username, containerName)
         timeline.setItems(items);
         timeline.on('click', timeLineClickEvent);
     });
-}
\ No newline at end of file
+}
diff --git a/public/style.css b/public/style.css
index d1f00b0..e7562dd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -71,7 +71,8 @@ body {
 }
 
 @media screen and (min-width: 768px) {
-    .friends-graph-page #profileGen {
+    .friends-graph-page #profileGen,
+    .timeline-graph-page #profileGen {
         margin-top: -84px
     }
 }
