diff --git a/main.js b/main.js
index c0fa858..3368eee 100755
--- a/main.js
+++ b/main.js
@@ -4,19 +4,22 @@ console.log('=================================================================')
 // exec conversion.js
 
 const express = require('express');
+const pug = require('pug');
 const app = express();
 var fs = require('fs');
 var listenPort = 8088;
 var jsonParsedLikes, jsonParsedOutbox;
 // const min_length = 1050; // filter only long toots
 const min_length = 1; // filter only long toots
+const max_toots = 20; // filter only long toots
 const TemplateVars = {
   pageTitle       : 'Mastodon export converter to HTML',
   likes           : jsonParsedLikes,
   outbox          : jsonParsedOutbox,
   outboxStatistics: {},
   outbox_all      : jsonParsedOutbox,
-  min_length      : min_length,
+  min_length      ,
+  max_toots      ,
 };
 // read file likes
 fs.readFile('source_data/likes.json',
@@ -27,7 +30,7 @@ fs.readFile('source_data/likes.json',
     // access elements
     const lengthOfLikes = jsonParsedLikes.orderedItems.length;
     console.log('likes length', lengthOfLikes);
-    const example = jsonParsedLikes.orderedItems[0];
+    const example = jsonParsedLikes.orderedItems[10];
 
     console.log('example', example);
 
@@ -42,7 +45,10 @@ fs.readFile('source_data/outbox.json',
     // access elements
     console.log('outbox toots length', jsonParsedOutbox.orderedItems.length);
 
-    const minchartoots = jsonParsedOutbox.orderedItems.filter(item => {
+    TemplateVars.outboxTotalLength = jsonParsedOutbox.orderedItems.length;
+    const slice = jsonParsedOutbox.orderedItems.slice(0, max_toots);
+
+    const minchartoots = slice.filter(item => {
       return item['object'].content && item['object'].content.length > min_length;
     });
     console.log('min_chars', min_length);
@@ -50,6 +56,7 @@ fs.readFile('source_data/outbox.json',
     TemplateVars.outbox = minchartoots;
 
     const example = minchartoots[1];
+
     // make statistics on who do we talk to, based on the cc field
     minchartoots.forEach(elem => {
       if (elem['object'].cc) {
@@ -58,9 +65,11 @@ fs.readFile('source_data/outbox.json',
             TemplateVars.outboxStatistics[copyFolk] = {
               name   : copyFolk,
               counter: 0,
+              counterContentLength: 0,
             };
           }
           TemplateVars.outboxStatistics[copyFolk].counter += 1;
+          TemplateVars.outboxStatistics[copyFolk].counterContentLength += elem['object'].content.length;
         });
       }
     });
@@ -74,18 +83,33 @@ fs.readFile('source_data/outbox.json',
     });
     arrayToSort.sort( (a,b)=>{
       return b.counter - a.counter
-    })
-    console.log('arrayToSort', arrayToSort)
+    });
     TemplateVars.outboxStatistics = arrayToSort;
 
     console.log('TemplateVars.outbox.length', TemplateVars.outbox.length, TemplateVars.outbox[5]['object'].content.length);
     TemplateVars.example = example;
-    // console.log('example', example);
+
+    fs.writeFile('output/statistics.json',  JSON.stringify(TemplateVars.outboxStatistics), errfileHandler );
   });
+
+const errfileHandler = (err) => {
+  if (err)
+    console.log(err);
+  else {
+    console.log("File statistics written successfully\n");
+  }
+}
+
+
 app.use(express.static('public'));
 app.set('view engine', 'pug');
 
 app.get('/', (req, res) => {
+
+  const html = pug.render('index.pug', TemplateVars);
+
+  fs.writeFile('output/my_toots.html',  html, errfileHandler );
+
   res.render('index.pug', TemplateVars);
 
 });
diff --git a/package.json b/package.json
index 2647598..903f8b9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,9 @@
 {
+  "scripts": {
+    "start": "node main.js"
+  },
   "dependencies": {
+    "bulma": "^0.9.0",
     "express": "^4.17.1",
     "nodemon": "^2.0.4",
     "pug": "^3.0.0"
diff --git a/views/index.pug b/views/index.pug
index bb94ded..02f6646 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -2,7 +2,7 @@ doctype html
 html(lang="en")
   head
     title= pageTitle
-    link(rel='stylesheet', href='https://mastodon.cipherbliss.com/packs/css/common-f88705a5.css', type='text/css')
+    link(rel='stylesheet', href='//mastodon.cipherbliss.com/packs/css/common-f88705a5.css', type='text/css')
     link(rel='stylesheet', href='stylesheets/main.css', type='text/css')
   body
     h1=pageTitle
@@ -13,14 +13,14 @@ html(lang="en")
         .name
          a(href=someone.name)=someone.name
         .counter=someone.counter
-    h2 #{outbox.length} Messages in your outbox. Filtered by a minimal length of #{min_length}
+    h2 #{outbox.length} of Messages #{outboxTotalLength} in your outbox.First #{max_toots} toots, filtered by a minimal length of #{min_length} characters of content.
     .columns-area__panels__main
       div.column
         div.item-list
         each oredredItem in outbox
           article
             div.status.status-public
-              a(href=oredredItem.object.url)="see"
-                div.published=oredredItem.object.published
-              blockquote.published(unescaped!=oredredItem.object.content)
+              a(href=oredredItem['object'].url)="see"
+                div.published=oredredItem['object'].published
+              blockquote.published(unescaped!=oredredItem['object'].content)
 
diff --git a/yarn.lock b/yarn.lock
index ef09491..cae907b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -166,6 +166,11 @@ braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+bulma@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.0.tgz#948c5445a49e9d7546f0826cb3820d17178a814f"
+  integrity sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==
+
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"