diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..34665590
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 1613a3b0..0f6a6fb2 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This weeks assignment was to dig dipper into API and create a GitHub tracer for our Technigo projects.
 
 ## 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?
+I have to say this week was harder then expected because of Java Script, i have relied on my team more then before. If i had more time would have focused more on html/css and styling it more then i had time to do.
 
 ## 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.
+https://a1eksa-githubtracker.netlify.app/
diff --git a/code/GitHub1.png b/code/GitHub1.png
new file mode 100644
index 00000000..182a1a3f
Binary files /dev/null and b/code/GitHub1.png differ
diff --git a/code/background.jpeg b/code/background.jpeg
new file mode 100644
index 00000000..8e569c69
Binary files /dev/null and b/code/background.jpeg differ
diff --git a/code/background1.jpeg b/code/background1.jpeg
new file mode 100644
index 00000000..e66aa715
Binary files /dev/null and b/code/background1.jpeg differ
diff --git a/code/chart.js b/code/chart.js
index 92e85a30..67630d8e 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -1,4 +1,61 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+// //DOM-selector for the canvas 👇
+// const ctx = document.getElementById('chart').getContext('2d');
 
-//"Draw" the chart here 👇
+// //Doughnut chart for projects
+// const drawChart = (amount) => {
+//   const config = {
+//     type: 'doughnut',
+//     data: {
+//       labels: ['Finished', 'Not Finished'],
+//       datasets: [
+//         {
+//           label: 'My First Dataset',
+//           data: [amount, 20 - amount],
+//           backgroundColor: ['rgb(87, 166, 255)', 'rgb(128, 128, 128)'],
+//           hoverOffset: 2,
+//           borderWidth: 0,
+//         },
+//       ],
+//     },
+//   };
+//   const myChart = new Chart(ctx, config);
+// };
+
+//DOM-selector for the canvas
+const ctx = document.getElementById('chart').getContext('2d');
+
+//Draw the chart here
+const drawChart = (amount) => {
+  const config = {
+    type: 'bar',
+    data: {
+      labels: ['Finished projects', 'Projects left'],
+      datasets: [
+        {
+          label: 'Technigo Bootcamp Projects',
+          data: [amount, 20 - amount],
+          barPercentage: 20,
+          barThickness: 100,
+          maxBarThickness: 100,
+          borderRadius: 2,
+
+          backgroundColor: [
+            'rgba(255, 98, 132, 0.3)',
+            'rgba(255, 169, 63, 0.3)',
+          ],
+          borderColor: ['rgb(255, 98, 132)', 'rgb(255, 169, 63)'],
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: {
+          position: 'bottom',
+        },
+      },
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/favicon.png b/code/favicon.png
new file mode 100644
index 00000000..b2b044cc
Binary files /dev/null and b/code/favicon.png differ
diff --git a/code/git.png b/code/git.png
new file mode 100644
index 00000000..f96afb1e
Binary files /dev/null and b/code/git.png differ
diff --git a/code/github.png b/code/github.png
new file mode 100644
index 00000000..0fc3157d
Binary files /dev/null and b/code/github.png differ
diff --git a/code/github2.png b/code/github2.png
new file mode 100644
index 00000000..acd5d242
Binary files /dev/null and b/code/github2.png differ
diff --git a/code/images.jpeg b/code/images.jpeg
new file mode 100644
index 00000000..2f55c0c8
Binary files /dev/null and b/code/images.jpeg differ
diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..b8daaf6f 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,21 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <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>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap"
+      rel="stylesheet"
+    />
+    <title>Project GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="shortcut icon" type="image/jpg" href="./github2.png" />
+  </head>
+  <body>
+    <div class="bg"></div>
+    <div class="bg bg2"></div>
+    <div class="bg bg3"></div>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <header class="header-container">
+      <image class="octocat" src="./github2.png"></image>
+      <h1>GitHub Tracker</h1>
+    </header>
+    <div class="media">
+      <div class="left-content">
+        <div id="userInfo" class="user-info"></div>
+        <div class="chart">
+          <canvas id="chart"></canvas>
+        </div>
+      </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
\ No newline at end of file
+      <main id="projects" class="project-container"></main>
+    </div>
+
+    <!-- This will be used to draw the chart 👇 -->
+
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
index e69de29b..c10c0b7c 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,89 @@
+let username = 'A1eksa';
+
+const userPicture = `https://api.github.com/users/${username}`;
+const REPOS_URL = `https://api.github.com/users/${username}/repos`;
+
+const getUserPicture = () => {
+  fetch(userPicture)
+    .then((res) => res.json())
+    .then((data) => {
+      const picture = data.avatar_url;
+      const location = data.location;
+      const userBio = data.bio;
+      const url = data.followers_url;
+
+      userInfo.innerHTML += `
+         
+         <img class="user-info_picture" src="${picture}" alt="Picture of gitHub user"/>
+         <div class="user-info_username">${username}</div>
+         <div class="user-whole_name"> Aleksandra Safranko</div>
+         <div class="user-info_location">Location: ${location} 🇸🇪 </div>
+         <div class="user-info_bio">${userBio} 🐒</div>
+        `;
+    });
+};
+getUserPicture();
+
+const projectsContainer = document.getElementById('projects');
+
+const fetchRepo = () => {
+  fetch(REPOS_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      const technigoRepo = data.filter(
+        (repo) => repo.name.includes('project-') && repo.fork
+      );
+
+      technigoRepo.forEach((repo) => {
+        projectsContainer.innerHTML += `
+            
+             <div class="repo-card">
+              <div class="link">
+                <a href="${repo.html_url}" class="repo-name">${repo.name}</a>
+              </div>  
+              <div class="branch">
+                <p class="default-branch">Default branch:${
+                  repo.default_branch
+                }</p>
+              </div> 
+              <div class="push"> 
+                <h4>Recent push:${new Date(repo.pushed_at).toDateString()}</h4>
+              </div>  
+              <p class="commits" id="commit-${repo.name}">Number of commits:</p>
+            `;
+      });
+      fetchPull(technigoRepo);
+      drawChart(technigoRepo.length);
+    });
+};
+
+const fetchPull = (allRepo) => {
+  allRepo.forEach((repo) => {
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
+      .then((res) => res.json())
+      .then((data) => {
+        const myPullRequests = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        console.log('My Pull requests', myPullRequests);
+
+        if (myPullRequests) {
+          fetchCommits(myPullRequests.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML +=
+            'No pull request';
+        }
+      });
+  });
+};
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log('My commits', data);
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+fetchRepo();
diff --git a/code/style.css b/code/style.css
index 7c8ad447..462b1496 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,3 +1,252 @@
+html {
+  box-sizing: border-box;
+}
+
 body {
-  background: #FFECE9;
-}
\ No newline at end of file
+  /* background: #111313; */
+  background-color: rgb(16, 20, 25);
+  font-family: 'Roboto';
+  height: 100vh;
+}
+
+.content {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.25em;
+
+  box-sizing: border-box;
+  left: 50%;
+  padding: 10vmin;
+  position: fixed;
+  text-align: center;
+  top: 50%;
+  /*transform: translate(-50%, -50%);*/
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  height: 90px;
+  width: 100vw;
+  color: white;
+  border-bottom: #bebbbb solid 1px;
+  font-family: 'Roboto';
+}
+
+.project-container {
+  padding: 30px;
+  padding-left: 20px;
+
+  width: 80%;
+  display: grid;
+  gap: 1rem;
+  margin: 15px 15px 5px 15px;
+  border: 30px;
+  align-items: center;
+}
+.user-whole_name {
+  font-size: 21px;
+}
+
+.user-info_username {
+  font-size: 27px;
+  color: rgb(87, 165, 253);
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+a {
+  color: rgb(87, 165, 253);
+  font-weight: 800;
+}
+
+.link {
+  padding-top: 8px;
+  font-size: large;
+  padding-left: 10px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+h1 {
+  color: rgb(87, 165, 253);
+  padding-left: 20px;
+  font-size: 2rem;
+  padding-top: 12px;
+  padding-bottom: 5px;
+  font-family: 'Roboto';
+}
+
+h4 {
+  font-size: 1rem;
+  padding-left: 10px;
+  color: #bebbbb;
+}
+
+p {
+  font-size: 14px;
+  padding-left: 10px;
+  font-weight: 100;
+}
+
+.repo-card {
+  border-radius: 12px;
+  height: 150px;
+  width: 90%;
+  padding-top: 0;
+  align-items: center;
+  background: linear-gradient(-45deg, #681f23, #884a62, #040e11, #884a62);
+  background-size: 400%;
+  animation: gradient 15s ease infinite;
+  opacity: 0.75;
+  line-height: 15px;
+}
+
+.default-branch {
+  color: #bebbbb;
+}
+
+.chart {
+  padding-top: 20px;
+  width: 80%;
+  height: 38%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  border-radius: 10%;
+}
+
+.user-info_picture {
+  border-radius: 50%;
+  width: 50%;
+  height: 40%;
+  margin-top: 20px;
+}
+
+.user-info {
+  font-size: 15px;
+  color: rgb(212, 206, 218);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 20px;
+  font-size: 18 px;
+  margin-top: 10px;
+  line-height: 37px;
+}
+
+.commits {
+  color: #bebbbb;
+}
+
+.octocat {
+  height: 60px;
+  padding-left: 10px;
+  padding-top: 12px;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@media (min-width: 768px) and(max-width: 991px) {
+  .project-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1 fr 1 fr));
+
+    column-gap: 20px;
+  }
+  .repo-card {
+    max-width: 200px;
+  }
+}
+@media (min-width: 991px) {
+  .default-branch {
+    padding-top: 20px;
+  }
+  .repo-name {
+    padding-top: 20px 0 20px 0;
+    font-size: 23px;
+    color: rgb(87, 165, 253);
+  }
+  .media {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .link {
+    padding-top: 23px;
+    font-size: large;
+    padding-left: 10px;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .project-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 30px;
+    max-width: 650px;
+    margin-top: 30px;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 500px;
+    max-height: 500px;
+    line-height: 43px;
+  }
+  .user-info_picture {
+    width: 70%;
+
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
+  .chart {
+    display: flex;
+    align-items: center;
+    width: 230px;
+    margin-top: 40px;
+  }
+
+  .repo-card {
+    border-radius: 12px;
+    height: 200px;
+    width: 300px;
+    padding: 10px;
+  }
+
+  h1 {
+    font-family: 'Roboto';
+    color: rgb(87, 165, 253);
+    padding-left: 50px;
+    font-size: 3rem;
+    padding-bottom: 20px;
+  }
+  .octocat {
+    height: 70px;
+    padding-left: 40px;
+    padding-top: 30px;
+    /* animation: pulse 3s linear infinite; */
+  }
+  .header-container {
+    display: flex;
+    flex-direction: row;
+    height: 120px;
+    width: 100vw;
+    color: white;
+    border-bottom: #bebbbb solid 1px;
+    font-family: 'Roboto';
+  }
+}