diff --git a/index.html b/index.html
index 4e22b50..263237d 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8">
 
-    <title>Our superheroes</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+    <title>TootKomm</title>
   </head>
 
   <body>
@@ -15,39 +12,103 @@
 
       </header>
 
-      <section>
+      <main id="comments">
+	<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=Oswald:wght@200;300;600&display=swap" rel="stylesheet"> 
+	<link rel="stylesheet" href="style.css">
 
-      </section>
+      </main>
 
-    <script>
+      <footer>
+	
+      </footer>
 
-    async function populate() {
+      <script>
 
-      const requestURL = 'https://social.tchncs.de/api/v1/statuses/107735248507147283';
-      const request = new Request(requestURL);
+	function buildCommentTree(statusID){
+	    const target = document.querySelector('#comments');
+	    buildArticle(target, statusID);
+       	    buildDescendants(target, statusID);
+	}
 
-      const response = await fetch(request);
-      const mastopost = await response.json();
+	async function getJSONObject(url){
+	    const requestURL = url;
+	    const request = new Request(requestURL);
+	    const response = await fetch(request);
+	    return await response.json();
+	}
+	    
+	
+	async function buildArticle(target, statusID) {
+	    const url = buildStatusURL(statusID);
+	    const mastopost = await getJSONObject(url);
+	    const article = document.createElement('article');
 
-      populateHeader(mastopost);
-//      populateHeroes(mastopost);
+	    populateHeader(article, mastopost);
+	    populateSection(article, mastopost);      
+	    populateAside(article, mastopost);
+	    populateFooter(article, mastopost);
+	
+	    target.appendChild(article);
 
+	}
+
+	async function buildDescendants(target, statusID){
+	    const url = buildStatusURL(statusID);
+	    const contextURL = url+'/context';	    
+	    const context = await getJSONObject(contextURL);
+	    
+	    for (const descendant of context.descendants) {
+		buildArticle(target, descendant.id);
+	    }
+
+	}
+      
+      
+      function populateHeader(item, obj) {
+
+	  const myHeader = document.createElement('header');
+	  const myCW = document.createElement('summary');
+	 
+	  myCW.textContent = obj.spoiler_text;
+	  myHeader.appendChild(myCW);
+	  item.appendChild(myHeader);
+	  
     }
 
-    function populateHeader(obj) {
-      const header = document.querySelector('header');
-      const myH1 = document.createElement('h1');
-	myH1.textContent = obj['account']['display_name'];
-      header.appendChild(myH1);
+      function populateSection(item, obj){
+	  const mySection = document.createElement('section');
+	  mySection.innerHTML = `${obj['content']}`;
+	  item.appendChild(mySection);
+      }
 
-      const myPara = document.createElement('article');
-      myPara.innerHTML = `${obj['content']}`;
-      header.appendChild(myPara);
-    }
+      function populateAside(item, obj){
+	  const aside = document.createElement('aside');
+	  const myImg = document.createElement('img');
+	  myImg.src = obj['account']['avatar'];
+	  aside.appendChild(myImg);
+	  const myP = document.createElement('hgroup');
+	  myP.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2>`;
+	  aside.appendChild(myP);
+	  item.appendChild(aside);
+	  
+      }
 
-   
+      function populateFooter(item, obj){
+	  const footer = document.createElement('footer');
+	  const stats = document.createElement('dl');
+	  stats.innerHTML = `<dt class="replies-icon"></dt><dd class="replies">${obj.replies_count}</dd><dt class="favs-icon"></dt><dd class="favs">${obj.favourites_count}</dd><dt class="boosts-icon"></dt><dd class="boosts">${obj.reblogs_count}</dd>`;
+	  footer.appendChild(stats);
+	  item.appendChild(footer);
+      }
 
-    populate();
+	function buildStatusURL(statusID) {
+	    const apiURL = 'https://social.tchncs.de/api/v1/statuses/';
+	    return apiURL + statusID;
+	}
+
+	buildCommentTree("107735248507147283");
 
     </script>
   </body>
diff --git a/style.css b/style.css
index cb7a892..84da7c4 100644
--- a/style.css
+++ b/style.css
@@ -1,48 +1,105 @@
 /* || general styles */
 
 html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+    font-family: 'Oswald',  sans-serif;
+    font-weight: 200;
 }
 
-body {
-  width: 800px;
-  margin: 0 auto;
+article  {
+    font-family: 'Oswald',  sans-serif;
+    color: #fff;
+    background:#313543;
+    display: grid;
+    grid-template-areas:
+	"profile header "
+	"profile content"
+	"footer footer";
+    grid-template-columns: 1fr 3fr;
+    gap: 0.5em;
+    width: 30em;
+    padding: 1em 0.25em 0em 0.25em;
+
 }
 
-h1, h2 {
-  font-family: 'Faster One', cursive;
+article a {
+    color: #4d9fdb;
 }
 
-/* header styles */
 
-h1 {
-  font-size: 4rem;
-  text-align: center;
+article header {
+    width:100%;
+    grid-area: header;
 }
 
-header p {
-  font-size: 1.3rem;
-  font-weight: bold;
-  text-align: center;
+article header summary {
+    font-weight: 300;
+    width:100%;
+
 }
 
-/* section styles */
-
-section article {
-  width: 33%;
-  float: left;
+article aside {
+    grid-area: profile;
+    text-align:center;
 }
 
-section p {
-  margin: 5px 0;
+article aside h1 {
+    font-size: 1.2em;
+    font-weight: 300;
+    padding:0; margin-bottom:0;
 }
 
-section ul {
-  margin-top: 0;
+article aside h2  {
+    font-size: 1.0em;
+    font-weight: 200;
+    padding:0; margin:0;
 }
 
-h2 {
-  font-size: 2.5rem;
-  letter-spacing: -5px;
-  margin-bottom: 10px;
+article aside img {
+    max-width: 100px;
 }
+
+article section {
+    grid-area: content;
+}
+
+article footer {
+    grid-area: footer;
+    background: #282c37;    
+}
+
+
+article footer dl {
+    width: 100%;
+
+    display: grid;
+    grid-template-areas:
+	"replies-icon replies  favs-icon favs boosts-icon boosts";
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    gap:0em;    
+}
+
+article footer dl > .replies {
+    grid-area: replies;
+}
+
+article footer dl > .favs {
+    grid-area: favs;
+}
+
+article footer dl > . boosts {
+    grid-area: boosts;
+}
+
+
+
+
+strong, b {
+    font-weight: 300;
+}
+
+.hashtag {
+    text-decoration:none;
+}
+
+
+
