diff --git a/README.md b/README.md
index 1613a3b0..5926e6fd 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,8 @@
 # GitHub Tracker
+The project was to create a place to keep track of the GitHub repos that I'm using at Technigo Boot Camp. For this project I continued practicing my JavaScript and API skills.
 
-Replace this readme with your own information about your project.
+# The problem
+I decided to make the site look similar to my real GitHub site. The first part of fetching my repositories and my user info was pretty straight-forward. However, there were some tricky parts and some new solutions to learn as well, for example how to get the pull requests/commit messages. During this project I also learnt about dynamic ID's and the difference between 'find' and 'filter' when fetching data. If I had more time I would have liked to dive deeper into the API and fetch more data, for example languages.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-## View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+# View it live
+https://kaliine-github-tracker.netlify.app/
diff --git a/code/README.md b/code/README.md
new file mode 100644
index 00000000..88d65484
--- /dev/null
+++ b/code/README.md
@@ -0,0 +1,13 @@
+# GitHub Tracker
+The project was to create a place to keep track of the GitHub repos that I'm using at Technigo Boot Camp. For this project I continued practicing my JavaScript and API skills.
+
+
+## The problem
+I started the project after going through all the study material. And I decided to make the site look similar to my real GitHub site. The first part of fetching my repositories and my user info was pretty straight-forward. However, there were some tricky parts and some new solutions to learn as well. The code coachers lectures for this project were very helpful and helped me solved the parts where I got stuck, for example how to get the pull requests/commit messages. From the lectures I also learned about dynamic ID's and the difference between 'find' and 'filter' when fetching data.
+If I had more time I would have liked to dive deeper into the API and fetch more data, for example languages.
+
+## View it live
+https://kaliine-github-tracker.netlify.app/
+
+
+
diff --git a/code/chart.js b/code/chart.js
index 92e85a30..4a3b38d2 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -2,3 +2,33 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+//Invoke the drawChart function to connect the two JS files
+const drawChart = (amount) => {
+
+const config = {
+    type: 'doughnut',
+    data: {
+        labels: [
+          'Projects completed',
+          'Projects left',  
+        ],
+
+        datasets: [{
+          label: 'My First Dataset',
+          data: [amount, 20-amount],
+          backgroundColor: [
+            'rgb(255, 153, 51)',
+            'rgb(65, 132, 228)'
+          ],
+          hoverOffset: 4
+        }]
+      },
+  };
+
+
+  //Present the chart in the browser
+const myChart = new Chart(ctx, config)
+}
+
+//'rgb(205, 217, 229)' white/greyish color for label text
\ No newline at end of file
diff --git a/code/github-logo.png b/code/github-logo.png
new file mode 100644
index 00000000..fd85a5b2
Binary files /dev/null and b/code/github-logo.png differ
diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..cfa405b5 100644
--- a/code/index.html
+++ b/code/index.html
@@ -4,18 +4,46 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project GitHub Tracker</title>
+  <title>GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <link rel ="icon" href="https://avatars.githubusercontent.com/u/80845418?v=4" type="image"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap" rel="stylesheet">
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header class="header">
+    <img class="github-icon" src="./github-logo.png" alt="github icon"/>
+    <h1 class="main-title">GitHub Tracker</h1>
+  </header>
 
+  <div class="line"> </div>
+
+  <section class="main-section">
+
+  <div class="userinfo">
+    <p id="profilepic"></p>
+    <div class="name-box">
+    <p class="userid" id="username"></p>
+    <p class="real-name">Karoline Mann</p>
+  </div>
+  </div>
+
+
+  <div id="projectscontainer"></div>
+
+</section>
+  
   <!-- This will be used to draw the chart 👇 -->
+  <div class="chart-section">
   <canvas id="chart"></canvas>
+  </div>
+
+
+  <footer class="footer">
+    <p class="footer-text">Made by Karoline Mann during Technigo Boot Camp, 2021</p>
+  </footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/code/script.js b/code/script.js
index e69de29b..3a15d13a 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,103 @@
+const username = document.getElementById('username')
+const profilepic = document.getElementById('profilepic')
+const projectContainer = document.getElementById('projectscontainer')
+
+
+//fetch github userinfo
+const API_USER_KALIINE = 'https://api.github.com/users/kaliine'
+fetch (API_USER_KALIINE)
+    .then((response) => {
+        return response.json()
+    })
+    .then ((json) => {
+        username.innerHTML = json.login //display username
+        profilepic.innerHTML += `<img width="150" src="https://avatars.githubusercontent.com/u/80845418?v=4" class="user-img" alt="profilepic" />` //display profile pic
+    })
+
+
+
+//fetch all repos
+const REPOS_URL = 'https://api.github.com/users/Kaliine/repos'
+
+const getRepos = () => {
+fetch (REPOS_URL)
+    .then((response) => response.json())
+    .then(data => {
+        //filter out the ones that are forked and starting with "project-"
+        const technigoProjects = data.filter(repo => repo.fork === true && repo.name.startsWith('project-')) 
+        
+        
+        //display the data in the browser  
+        technigoProjects.forEach((repo => {
+            projectContainer.innerHTML += `
+            <div class="card">
+            <a class="card-title" href="${repo.html_url}">${repo.name}</a>
+            <p class="card-info">Default branch: ${repo.default_branch}</p>
+            <p class="card-info">Latest update: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p class="card-info" id="commit-${repo.name}">Number of commit messages: </p>
+            </div>`
+        }))
+
+    //Call the drawChart function. Connect the two JS files with my number of technigo repos.
+        drawChart(technigoProjects.length)
+
+    //Call the fetchPullRequestArray function
+    fetchPullRequestsArray(technigoProjects)
+
+
+    })
+
+}
+//fetch pullRequest for each repository from Technigos main repositories
+const fetchPullRequestsArray = (allRepositories) => {
+    allRepositories.forEach(repo => {
+        fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+        .then((res) => res.json())
+        .then((data) => {
+            //Find only the PR that I made by comparing pull.user.login with repo.owner.login
+        const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login) //Use 'find' to present the data as an element instead of an array
+
+        console.log(myPullRequest)
+
+        // Detect if I have pull requests or not.
+				// If yes - call fetchCommits function
+				// If no - inform user that no pull request has been done yet
+        if (myPullRequest) {
+            fetchCommits(myPullRequest.commits_url, repo.name);
+            
+            //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument
+            /* getReview(myPullRequest.review_comments_url, repo.name); */
+
+        } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML = "No pull request yet";
+        }
+
+
+        })
+    })
+}
+
+
+//fetch number of commits
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+        document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+    })
+}
+
+
+
+
+
+//Call the getRepos function
+getRepos()
+
+
+
+  /* To do:
+    - review_comments_url
+    - A chart  */
+
+ 
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index 7c8ad447..095f27da 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,3 +1,280 @@
-body {
-  background: #FFECE9;
-}
\ No newline at end of file
+* {
+  background: #22272e; 
+  padding: 0;
+  margin: 0;
+}
+
+.header {
+background-color: #2d333b;
+display: flex;
+width: 100%;
+height: 50px;
+}
+
+.github-icon {
+max-width: 40%;
+height: auto;
+margin: 10px 15px 10px 20px;
+border-radius: 50%;
+
+}
+
+.main-title {
+display: flex; 
+align-items: center;
+background-color: #2d333b;
+color: #cdd9e5;
+font-size: 1.2rem;
+font-family: Arial, Helvetica, sans-serif;
+}
+
+.userinfo {
+  display: flex;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+.user-img {
+  border-radius: 50%;
+  margin-top: 5px;
+  margin-left: 25px;
+  }
+
+.name-box {
+  display: block;
+  padding: 10px;
+  margin-left: 10px;
+}
+
+.userid {
+  align-items: center;
+  color:#cdd9e5;
+  font-size: 1.8rem;
+  font-family: 'Inconsolata', monospace;
+  padding-top: 7px;
+}
+
+.real-name {
+  color:#cdd9e5;
+  font-size: 0.9rem;
+  font-weight: bold;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+#projectscontainer {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card {
+  border: #545d68 solid 1px;
+  border-radius: 6px;
+  margin: 3px;
+  width: 100%;
+  max-width: 350px;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.875rem;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 7px 0 7px 10px;
+}
+
+.card-title {
+  font-weight: bold;
+  margin-bottom: 2px;
+  margin-left: 3px;
+  line-height: 2;
+}
+
+.card-info {
+  margin-left: 3px;
+  color: #545d68;
+}
+
+a:link {
+  text-decoration: none;
+  cursor: pointer;
+  color: #4184e4;
+}
+
+a:visited {
+  color: #4184e4;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.chart-section {
+  width: 350px;
+  max-width: 350px;
+  margin: 30px auto 100px auto;
+}
+
+.footer {
+border-top: #545d68 solid 1px;
+width: 95%;
+height: 50px;
+margin-left: auto;
+margin-right: auto;
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+.footer-text {
+color: #4184e4;
+font-size: 0.8rem;
+font-family: Arial, Helvetica, sans-serif;
+}
+
+
+
+/* mobile */
+@media (min-width: 0px) and (max-width: 668px){
+  .user-img {
+    width: 70px;
+    }
+}
+
+/* tablet */
+@media (min-width: 669px) and (max-width: 1023px){
+
+  .line {
+    border-bottom: #545d68 solid 1px;
+    margin-top: 50px;
+    width: 100%;
+  }
+
+  .user-img {
+    width: 210px;
+    margin-left: 20px;
+    position: absolute;
+    left: 20px;
+    top: 70px;
+    z-index: 1;
+    }
+
+    .userinfo {
+      display: block;
+      }
+
+    .name-box {
+      display: block;
+      padding: 0;
+      margin-left: 40px;
+      margin-top: 180px;
+    }
+
+    .userid {
+      font-size: 1.8rem;
+      padding: 0;
+    }
+    
+    .real-name {
+      font-size: 0.9rem;
+    }
+
+    #projectscontainer {
+      display: grid;
+      justify-items: stretch;
+      grid-template-columns: 1fr 1fr;
+      column-gap: 8px;
+      grid-gap: 8px;
+      margin-top: 80px;
+      margin-right: 20px;
+      width: 90%;
+    }
+
+    .card {
+      max-width: 220px;
+      width: 100%;
+    }
+  
+    .main-section {
+      display: grid;
+      grid-template-columns: 0.8fr 1.9fr;
+    }
+
+    .chart-section {
+      width: 300px;
+      max-width: 300px;
+      margin: 40px auto 100px auto;
+    }
+}
+
+
+/* desktop */
+@media (min-width: 1024px){
+
+  .line {
+    border-bottom: #545d68 solid 1px;
+    margin-top: 50px;
+    width: 100%;
+  }
+
+  .user-img {
+  width: 260px;
+    margin-left: 20px;
+    position: absolute;
+    left: 20px;
+    top: 70px;
+    z-index: 1;
+    }
+
+.userinfo {
+  display: block;
+  }
+
+  .name-box {
+    display: block;
+    padding: 0;
+    margin-left: 50px;
+    margin-top: 240px;
+  }
+
+  .userid {
+    font-size: 1.9rem;
+    padding: 0;
+  }
+  
+  .real-name {
+    font-size: 1rem;
+  }
+
+  #projectscontainer {
+    display: grid;
+    grid-template-columns: 3fr 3fr;
+    column-gap: 8px;
+    grid-gap: 8px;
+    justify-items: stretch;
+    margin-top: 100px;
+    margin-right: auto;
+    margin-left: auto;
+    width: 100%;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  .main-section {
+    display: grid;
+    grid-template-columns: 0.8fr 1.7fr;
+    grid-gap: 8px;
+  }
+
+  .chart-section {
+    width: 300px;
+    max-width: 300px;
+    margin: 50px auto 100px auto;
+  }
+
+}
+
+