diff --git a/CoInvestorStyle.css b/CoInvestorStyle.css
new file mode 100644
index 0000000..86dae8e
--- /dev/null
+++ b/CoInvestorStyle.css
@@ -0,0 +1,33 @@
+
+@font-face{
+  font-family: 'OpenSans';
+  src: url('https://fonts.googleapis.com/css?family=Open+Sans');
+}
+
+body {
+    text-align: center;
+    background-color:#ffffff;
+    line-height: 1em;
+    padding-top: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+    font-size: 14px;
+    color: #454545;
+}
+
+img {
+    object-fit: contain;
+}
+
+table, th, td {
+    margin: 0px auto;
+    border: 1px solid black;
+    border-collapse: collapse;
+    table-layout: auto;
+    padding: 15px;
+
+}
+
+.head{
+  font-size: 16px;
+}
diff --git a/UserStory.txt b/UserStory.txt
new file mode 100644
index 0000000..6dd4946
--- /dev/null
+++ b/UserStory.txt
@@ -0,0 +1,5 @@
+As a user
+
+I want to be able to see all the relevant info for each company
+
+So that I can quickly access the needed information without having to search databases
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0192794
--- /dev/null
+++ b/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> CoInvestor Fund Manager Display </title>
+    <link rel="stylesheet" href="CoInvestorStyle.css">
+    <meta name="author" content="May Ottway">
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script>
+    $(document).ready(function(){
+        getData(1); //Sends intial page to the form
+        $.get('https://api.coinvestor.co.uk/v2/company/sponsor?op=pages',function(data,status){
+				for (var i = 1; i < data["meta"].pagination.total_pages+1; i++){ //Get total page number
+				  $("#buttons").append('<button onclick="updatePage('+i+')">'+i+'</button>'); //And make that many buttons
+				}
+			});
+    });
+    function updatePage(i){
+      $("tr").not(".head").remove(); //Clears out old data from the form when page updates
+      getData(i);
+    }
+
+    function getData(i){
+      var url = "https://api.coinvestor.co.uk/v2/company/sponsor?include=communications,latestLogo,primarySponsorType&sort=name";
+        $.get(url,{op: "retrieve",page: i},function(data,status){
+          var tr;
+          var limit = data["meta"].pagination.count; //Gets the limit to avoid an error with it constantly trying to get the IDs
+          for (var i = 0; i < data["data"].length; i++){
+            if(i != limit){
+              var communicationID = data["data"][i].relationships.communications.data[0].id; //Get all the relationship IDs for I
+              var logoID = data["data"][i].relationships.latestLogo.data.id;
+              var sponsorTypeID = data["data"][i].relationships.primarySponsorType.data.id;
+            }
+            tr=$('<tr/>');
+            tr.append("<td>" + data["data"][i].attributes.name + "</td>");
+            for(var j=0; j < data["included"].length; j++){ //Manages the relationship between data and communication
+              if(data["included"][j].id == communicationID && data["included"][j].type == "company_communication"){ //Is it the correct ID and the correct type?
+                if(data["included"][j].attributes.email == ""){  //If data is Null
+                  tr.append("<td>No Email Given</td>");
+                } else {
+                  tr.append("<td>"+data["included"][j].attributes.email+"</td>"); //Else get the email
+                }
+                if(data["included"][j].attributes.website == "http://"){ //Same with website address
+                  tr.append("<td> Undisclosed </td>");
+                } else {
+                  tr.append("<td>" + data["included"][j].attributes.website + "</td>");
+                }
+              }
+            }
+            for(var j=0; j < data["included"].length; j++){ //Same as above
+              if(data["included"][j].id == logoID && data["included"][j].type == "file_manager"){
+                tr.append("<td> <img src=" + data["included"][j].attributes.path + " alt="+ data["data"][i].attributes.name +" height='300' width ='300' </td>"); //Only difference is alt text adding as well as the force height attributes
+              }
+            }
+            for(var j=0; j < data["included"].length; j++){
+              if(data["included"][j].id == sponsorTypeID && data["included"][j].type == "sponsor_type"){
+                tr.append("<td>"+ data["included"][j].attributes.value + "</td>"); 
+              }
+            }
+            $('table').append(tr);
+          }
+        });
+      }
+    </script>
+  </head>
+  <body>
+    <h2> CoInvestor Fund Manager Display </h2>
+    <div id = "buttons">
+			<p> Pages: </p>
+		</div>
+		<br></br>
+    <table id = "table">
+      <tr class = "head">
+        <th> Name </th>
+        <th> Address </th>
+        <th> Website </th>
+        <th> Logo </th>
+        <th> Sponser Types </th>
+      </tr>
+      <tr>
+      </tr>
+    </table>
+  </body>
+</html>
