diff --git a/app/assets/index.html b/app/assets/index.html
index 57f8f9a..ce28172 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -30,9 +30,6 @@ body,html{
   height: 100%
 }
 
-.monthview:hover{
-  box-shadow: 0 0 20px blue;
-}
 .monthview {
   background-color:rgba(255,255,255,0.5);
   border:2px solid rgba(0,0,0,0.5);
@@ -45,19 +42,37 @@ body,html{
   transition: all 0s ease-in-out;
 }
 
+.weekview {
+  background-color:rgba(255,255,255,0.5);
+  border:2px solid rgba(0,0,0,0.5);
+  border-radius: 10%;
+  margin:5px;
+  min-height: 20vw;
+  /*margin:5px;*/
+/*  scroll-snap-align: center;*/
+  overflow:hidden;
+  transition: all 0s ease-in-out;
+}
+
 .label{
   background-color:#a44;
   color:#fff;
-  font-size:10vw;
+  font-size:1cm;
   text-align:center;
 }
 
-.days{
+.monthview > .days{
   display: grid;
   width: 100%;
   grid-template-columns: repeat(7, 1fr);
 }
 
+.weekview > .days{
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+}
+
 .days div {
   text-align:center;
   height: 2cm; 
@@ -70,7 +85,8 @@ body,html{
 }
 
 #weeksDiv{
-  background: linear-gradient(white,#aaf);
+  /*background: linear-gradient(white,#aaf);*/
+  background-color: #aaf;
   position: absolute;
   top:0;
   left:100vw;
@@ -109,6 +125,16 @@ box-shadow: 0 0 10px grey;
     </div>
    
 <script>
+
+//firstMon = new Date(Date.UTC(2017,0,4)); firstMon.setUTCDate(firstMon.getUTCDate()-((firstMon.getUTCDay()+6)%7));
+Date.prototype.getWeekNumber = function(){
+  var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
+  var dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
+  return Math.ceil((((d - yearStart) / 86400000) + 1)/7)
+};
+
 window.addEventListener("load",()=>{
 
   var locale = window.navigator.userLanguage || window.navigator.language || "en";
@@ -123,10 +149,46 @@ window.addEventListener("load",()=>{
     var daysDiv = document.createElement("div");
     daysDiv.className="days";
     monthviewDiv.appendChild(daysDiv);
-    monthviewDiv.scrollIntoView();
     var day = new Date(date);
     day.setDate(1);
     while(day.getMonth() == date.getMonth()){
+      var dayDiv = document.createElement("div");
+      dayDiv.className = "day";
+      var column = day.getDay() || 7;
+      column = column == 0 ? 7: column;
+      if(column>=6){
+        dayDiv.classList.add("weekend");
+      }
+      dayDiv.style.gridColumn = column;
+      dayDiv.textContent = day.getDate();
+      daysDiv.appendChild(dayDiv);
+      day.setDate(day.getDate()+1);
+    }
+    return monthviewDiv;
+  }
+
+  function createMonthViewItem(index){
+    var mdate = new Date();
+    mdate.setMonth(mdate.getMonth()+index);
+    var monthViewItem=createMonthView(mdate); 
+    monthViewItem.nnindex=index;
+    return monthViewItem;
+  }
+
+  function createWeekView(date = new Date()){
+    var weekviewDiv = document.createElement("div")
+    weekviewDiv.className = "weekview";
+    var labelDiv = document.createElement("div");
+    labelDiv.innerHTML = date.toLocaleString(locale,{"month":"long","year":"numeric"})+"<br>KW "+date.getWeekNumber();
+    labelDiv.className = "label"
+    weekviewDiv.appendChild(labelDiv);
+    var daysDiv = document.createElement("div");
+    daysDiv.className="days";
+    weekviewDiv.appendChild(daysDiv);
+    var day = new Date(date);
+    day.setDate(day.getDate()-(day.getDay()+6)%7);
+    for(var i=0;i<7;i++)
+    {
       var dayDiv = document.createElement("div");
       dayDiv.className = "day";
       var column = day.getDay();
@@ -134,80 +196,64 @@ window.addEventListener("load",()=>{
       if(column>=6){
         dayDiv.classList.add("weekend");
       }
-      dayDiv.style.gridColumn = column;
+      //dayDiv.style.gridColumn = column;
       dayDiv.textContent = day.getDate()
       daysDiv.appendChild(dayDiv);
       day.setDate(day.getDate()+1);
     }
-    return monthviewDiv;
+    return weekviewDiv;
+  }
+
+  function createWeekViewItem(index){
+    var mdate = new Date();
+    mdate.setDate(mdate.getDate()+7*index);
+    var weekViewItem=createWeekView(mdate); 
+    weekViewItem.nnindex=index;
+    return weekViewItem;
   }
 
 
-    function makeInfinityScroll(element){
-        element.nn=element.nn||{"position":0};
-        var mdate;
-
-        for(var i = -3; i< 3; i++){
-          mdate = new Date();
-          mdate.setMonth(mdate.getMonth()+i);
-          var nextMonth=createMonthView(mdate); 
-          nextMonth.nnindex=i;
-          element.appendChild(nextMonth);
-          nextMonth.classList.add('orig');
-        }
-
-        element.children[3].scrollIntoView({block:"center"});
-
-
-        element.addEventListener("scroll",()=>{
-            if(element.scrollUpdateSchedule!=1){
-                element.scrollUpdateSchedule=1;
-
-                requestAnimationFrame(()=>{
-                    element.scrollUpdateSchedule=0;
-                    if(element.scrollTop < 3* element.clientHeight)
-                    {
-                        var beforeind=0;
-                        if(element.firstChild.nnindex){
-                          beforeind = element.firstChild.nnindex
-                        } 
-                        mdate = new Date();
-                        mdate.setMonth(mdate.getMonth()+beforeind-1);
-                        var newBefore                        = createMonthView(mdate);
-                        newBefore.nnindex=beforeind-1;
-                        element.insertBefore(newBefore,element.firstChild); 
-
-                        while(element.scrollHeight>50*element.clientHeight){
-                            element.lastChild.remove();
-                        }
-                        
-
-                    }
-
-                    if(element.scrollTop > element.scrollHeight -  4* element.clientHeight)
-                    {
-                        var afterind=0;
-                        if(element.lastChild.nnindex){
-                          afterind = element.lastChild.nnindex
-                        } 
-                        mdate = new Date();
-                        mdate.setMonth(mdate.getMonth()+afterind+1);
-                        var newAfter = createMonthView(mdate);
-                        newAfter.nnindex=afterind+1;
-                        element.appendChild(newAfter);
-
-                        while(element.scrollHeight>50*element.clientHeight){
-                            element.firstChild.remove();
-                        }
-
-                    }
-
-                });
-            }
-        },false);
+  function makeInfinityScroll(element,createItem){
+    var item;
+    //setup initial set of items
+    for(var i = -3; i< 3; i++){
+      item = createItem(i);
+      element.appendChild(item);
     }
+    element.children[3].scrollIntoView({block:"center"});
+    // setup "infinity" scroll handling
+    element.addEventListener("scroll",()=>{
+      if(element.scrollUpdateSchedule!=1){
+        element.scrollUpdateSchedule=1;
+        requestAnimationFrame(()=>{
+          element.scrollUpdateSchedule=0;
+          if(element.scrollTop < 3* element.clientHeight)
+          {
+            var firstElementChildIndex = element.firstElementChild.nnindex || 0
+            item = createItem(firstElementChildIndex - 1); 
+            element.insertBefore(item,element.firstElementChild); 
 
-    makeInfinityScroll(document.querySelector("#monthsDiv"));
+            while(element.scrollHeight>50*element.clientHeight){
+              element.lastElementChild.remove();
+            }
+          }
+          if(element.scrollTop > element.scrollHeight -  4* element.clientHeight)
+          {
+            var lastElementChildIndex = element.lastElementChild.nnindex || 0
+            item = createItem(lastElementChildIndex + 1); 
+            element.appendChild(item)
+
+            while(element.scrollHeight>50*element.clientHeight){
+              element.firstElementChild.remove();
+            }
+          }
+        });
+      }
+    },false);
+  }
+
+  makeInfinityScroll(document.querySelector("#monthsDiv"),createMonthViewItem);
+  makeInfinityScroll(document.querySelector("#weeksDiv"),createWeekViewItem);
 //    document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
 
 },false);