diff --git a/apps/schoolCalendar/schoolCalendar.js b/apps/schoolCalendar/schoolCalendar.js
index 588d11b0e..29de1aec4 100644
--- a/apps/schoolCalendar/schoolCalendar.js
+++ b/apps/schoolCalendar/schoolCalendar.js
@@ -1,27 +1,86 @@
 require("Font8x12").add(Graphics);
-require("Font7x11Numeric7Seg").add(Graphics);
+require("Font7x11Numeric7Seg", 2).add(Graphics);
 
-function getBackgroundImage() {return require("heatshrink").decompress(atob("gMwyEgBAsAgQBCgcAggBCgsAgwBCg8AhABChMAhQBChcAhgBChsAhwBCh8AiEAiIBCiUAiYBCikAioBCi0Ai4BCjEAjIBCjUAjYBCjkAjoBCj0Aj4BBA"));}
+let nIntervId;
 
-function getUpArrow() {return require("heatshrink").decompress(atob("hkOyANKmv9AIIjRCoYZRlvdAI8U3YVK3oBJC4Mc7YVRC4sc7gVCzoBNC4oZDGowXGR58lvoBFC9FcAIoXongBFC58dngBFC6EcAIoPHA"));}
+function redrawScreen() {
+  layout.render(layout.background);
+  layout.render(layout.buttons);
+  draw();
+}
 
-function getDownArrow() {return require("heatshrink").decompress(atob("hkOyALImv9AIojPmvdAIoXPlvdAIoXQ3oBFC9GdAIoXnkt9AIoPPAI8U3cc7cc7gBBDIVcAJYXFGYwXOLpU8AI4XBO5sdjgBFR54ZFBpIA=="));}
-
-function getMenuIcon() {return require("heatshrink").decompress(atob("iEQyBC/AEU+rwBEn02js17st3stvklrkljkc/cc3cUzYBBD5AdUD4oA/P/4A/P/4A/ADoA=="));}
-
-function getDotIcon() {return require("heatshrink").decompress(atob("iEQyBC/AA0t3oBBA4ndAIIPGA4gAFkt9lt9AYIHEzoBBBIwRED41cks8AYIJGA44RGP8xtGP44RJBYh1CAIIHHBJJ/KroBBPoqBFB4YRDAA8dngHHBJKdq3oBDBI4RNP4l9AIYHHBJJBJks8AIIHTAH4ABA="));}
-
-Bangle.setLCDMode("doublebuffered");
-g.clear();
-g.setFont("8x12");
-g.drawString("Loading...",115,60);
-g.flip();
-
-LIST = 1;
-INFORMATION = 2;
-currentStage = LIST;
-
-var stage = 3;
+function updateDay(ffunction,day){
+  if(ffunction == 1){
+    switch (day) {
+    case 0:
+      return "Sunday";
+    case 1:
+      day = "Monday";
+      break;
+    case 2:
+      day = "Tuesday";
+      break;
+    case 3:
+      day = "Wednesday";
+      break;
+    case 4:
+      day = "Thursday";
+      break;
+    case 5:
+      day = "Friday";
+      break;
+    case 6:
+      day = "Saturday";
+    }
+    return day;
+  }else if(ffunction == 2){
+    switch (day) {
+    case 0:
+      return "Sun";
+    case 1:
+      day = "Mon";
+      break;
+    case 2:
+      day = "Tue";
+      break;
+    case 3:
+      day = "Wed";
+      break;
+    case 4:
+      day = "Thu";
+      break;
+    case 5:
+      day = "Fri";
+      break;
+    case 6:
+      day = "Sat";
+    }
+    return day;
+  }else if(ffunction == 3){
+    switch (day) {
+    case 0:
+      return "S";
+    case 1:
+      day = "M";
+      break;
+    case 2:
+      day = "T";
+      break;
+    case 3:
+      day = "W";
+      break;
+    case 4:
+      day = "R";
+      break;
+    case 5:
+      day = "F";
+      break;
+    case 6:
+      day = "S";
+    }
+    return day;
+  }
+}
 
 function getScheduleTable() {
   let schedule = [
@@ -90,21 +149,6 @@ function getScheduleTable() {
   return schedule;
 }
 
-function splitter(str, l){
-    var strs = [];
-    while(str.length > l){
-        var pos = str.substring(0, l).lastIndexOf(' ');
-        pos = pos <= 0 ? l : pos;
-        strs.push(str.substring(0, pos));
-        var i = str.indexOf(' ', pos)+1;
-        if(i < pos || i > pos+l)
-            i = pos;
-        str = str.substring(i);
-    }
-    strs.push(str);
-    return strs;
-}
-
 function findNextScheduleIndex() {
   var schedule = getScheduleTable();
   var currentDate = new Date();
@@ -120,10 +164,41 @@ function findNextScheduleIndex() {
   return 0;
 }
 
-var currentPositionTable = 0;
-var numberOfItemsShown = 5;
 
-function logDebug(message) {console.log(message);}
+function getUpArrow() {return require("heatshrink").decompress(atob("hkOyANKmv9AIIjRCoYZRlvdAI8U3YVK3oBJC4Mc7YVRC4sc7gVCzoBNC4oZDGowXGR58lvoBFC9FcAIoXongBFC58dngBFC6EcAIoPHA"));}
+
+function getDownArrow() {return require("heatshrink").decompress(atob("hkOyALImv9AIojPmvdAIoXPlvdAIoXQ3oBFC9GdAIoXnkt9AIoPPAI8U3cc7cc7gBBDIVcAJYXFGYwXOLpU8AI4XBO5sdjgBFR54ZFBpIA=="));}
+
+function getMenuIcon() {return require("heatshrink").decompress(atob("iEQyBC/AEU+rwBEn02js17st3stvklrkljkc/cc3cUzYBBD5AdUD4oA/P/4A/P/4A/ADoA=="));}
+
+function getDotIcon() {return require("heatshrink").decompress(atob("iEQyBC/AA0t3oBBA4ndAIIPGA4gAFkt9lt9AYIHEzoBBBIwRED41cks8AYIJGA44RGP8xtGP44RJBYh1CAIIHHBJJ/KroBBPoqBFB4YRDAA8dngHHBJKdq3oBDBI4RNP4l9AIYHHBJJBJks8AIIHTAH4ABA="));}
+
+var currentPositionTable = 0;
+var numberOfItemsShown = 8;
+//Table Positions:
+var rectStart = 45;
+var rectEnd = 65;
+var rectStartX = 10;
+var rectEndX = 210;
+//Scences:
+LIST = 1;
+INFORMATION = 2;
+currentStage = LIST;
+
+function splitter(str, l){
+    var strs = [];
+    while(str.length > l){
+        var pos = str.substring(0, l).lastIndexOf(' ');
+        pos = pos <= 0 ? l : pos;
+        strs.push(str.substring(0, pos));
+        var i = str.indexOf(' ', pos)+1;
+        if(i < pos || i > pos+l)
+            i = pos;
+        str = str.substring(i);
+    }
+    strs.push(str);
+    return strs;
+}
 
 function updateMinutesToCurrentTime(currentMinuteFunction) {
   if (currentMinuteFunction<10){
@@ -134,219 +209,192 @@ function updateMinutesToCurrentTime(currentMinuteFunction) {
   return currentMinuteUpdatedFunction;
 }
 
-function updateHoursToCurrentTime(currentHourFunction) {
-  if(currentHourFunction >= 13){
-    currentHourUpdatedFunction = currentHourFunction-12;
-  }else{
-    currentHourUpdatedFunction = currentHourFunction;
-  }
-  return currentHourUpdatedFunction;
+function renderBackground(l) {
+  g.clearRect(0,0,240,20);
+  g.drawImage(getBackgroundImage(),110,130,{scale:9,rotate:0});
 }
 
-function updateDay(ffunction,day){
-  if(ffunction == 1){
-    switch (day) {
-    case 0:
-      return "Sunday";
-    case 1:
-      day = "Monday";
-      break;
-    case 2:
-      day = "Tuesday";
-      break;
-    case 3:
-      day = "Wednesday";
-      break;
-    case 4:
-      day = "Thursday";
-      break;
-    case 5:
-      day = "Friday";
-      break;
-    case 6:
-      day = "Saturday";
-    }
-    return day;
-  }else if(ffunction == 2){
-    switch (day) {
-    case 0:
-      return "Sun";
-    case 1:
-      day = "Mon";
-      break;
-    case 2:
-      day = "Tue";
-      break;
-    case 3:
-      day = "Wed";
-      break;
-    case 4:
-      day = "Thu";
-      break;
-    case 5:
-      day = "Fri";
-      break;
-    case 6:
-      day = "Sat";
-    }
-    return day;
-  }
-}
-
-function minimalDraw(mode) {
-  var foundSchedule = getScheduleTable();
-  var foundNumber = findNextScheduleIndex();
-  if(mode == 1){
-    if(currentStage == LIST){
-      for(var x = 0;x<=numberOfItemsShown;x++){
-        g.setColor(255,255,255);
-        g.drawRect(10,30+(x*20),220,50+(20*x));
-        g.setColor(255,205,0);
-        g.drawRect(10,30+(2*20),220,50+(2*20));
-        g.setColor(255,0,0);
-        g.drawRect(10,30+(currentPositionTable*20),220,50+(20*currentPositionTable));
-        g.setColor(255,255,255);
-      }
-    }
-  }else if(mode == 2){
-    for(var i = 0;i<=240;i++){
-      g.drawImage(getBackgroundImage(),i,120,{scale:5,rotate:0});
-    }
-    g.drawImage(getMenuIcon(),223.5,70);
-    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].sm);
-    scheduleHourUpdatedStart = updateHoursToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].sh);
-    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].em);
-    scheduleHourUpdatedEnd = updateHoursToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].eh);
-    schduleDay = updateDay(1,foundSchedule[((foundNumber-2)+currentPositionTable)].dow);
+function renderTable(l) {
+  for(var x = 0;x<=numberOfItemsShown;x++){
     g.setColor(255,255,255);
-    g.reset();
-    g.setFont("8x12");
-    g.drawString(foundSchedule[((foundNumber-2)+currentPositionTable)].cn,13,30);
-    g.drawString(schduleDay,13,45);
-    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd,13,60);
+    g.drawRect(rectStartX,rectStart+(x*20),rectEndX,rectEnd+(20*x));
+    g.setColor(255,205,0);
+    g.drawRect(rectStartX,rectStart+(2*20),rectEndX,rectEnd+(2*20));
+    g.setColor(255,0,0);
+    g.drawRect(rectStartX,rectStart+(currentPositionTable*20),rectEndX,rectEnd+(20*currentPositionTable));
+  }
+}
+
+function renderTableText(l){
+  var foundNumber = findNextScheduleIndex();
+  var foundSchedule = getScheduleTable();
+  var scheduleHourUpdated;
+  var scheduleMinuteUpdated;
+  var beforeFoundNumber = foundNumber - 2;
+  for(var x = 0;x<=numberOfItemsShown;x++){
+    var currentNumber = beforeFoundNumber + x;
+    if (beforeFoundNumber + x < 0) {
+      currentNumber = foundSchedule.length + beforeFoundNumber + x;
+    } else if (beforeFoundNumber + x > foundSchedule.length - 1) {
+      currentNumber = beforeFoundNumber + x - foundSchedule.length;
+    }
+
+    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[currentNumber].sm);
+    scheduleHourUpdatedStart = foundSchedule[currentNumber].sh;
+    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[currentNumber].em);
+    scheduleHourUpdatedEnd = foundSchedule[currentNumber].eh;
+    scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20);
+    if(foundSchedule[currentNumber].cn.length >= 15){
+      scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20)+"...";
+    }
+    schduleDay = updateDay(3,foundSchedule[currentNumber].dow);
+    g.setFont("8x12");
+    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd+" "+schduleDay+" "+scheduleDecriptionUpdated,13,50+(x*20));
+  }
+}
+
+function buttonsF(l){
+  if(currentStage == LIST){
+    g.drawImage(getDotIcon(),223.5,115);
+  }else{
+     g.drawImage(getMenuIcon(),223.5,115);
+  }
+  g.drawImage(getUpArrow(),225,30);
+  g.drawImage(getDownArrow(),225,215);
+}
+
+function draw() {
+  var currentDate = new Date();
+  var currentDayOfWeek = currentDate.getDay();
+  var currentHour = currentDate.getHours();
+  var currentMinute = currentDate.getMinutes();
+  var currentMinuteUpdated = updateMinutesToCurrentTime(currentMinute);
+  if (layout) {
+    if(currentStage == LIST){
+      layout.time.label = currentHour+":"+currentMinuteUpdated;
+      layout.time.x = 147;
+      layout.time.y = 10;
+      layout.render(layout.table);
+      layout.render(layout.tableText);
+      logDebug("Rendered"+currentPositionTable);
+    }else{
+      layout.time.label = currentHour+":"+currentMinuteUpdated;
+      layout.time.x = 147;
+      layout.time.y = 10;
+      layout.render(layout.info);
+      logDebug("Rendered"+currentPositionTable);
+    }
+    g.clearRect(150,0,220,35);
+    layout.render(layout.time);
   }
-  g.flip();
-  displayClock();
 }
 
 function RedRectDown() {
   if(currentPositionTable > 0){
     currentPositionTable -= 1;
-    minimalDraw(1);
+    if(currentStage == INFORMATION){
+      redrawScreen();
+    }else{
+      draw();
+    }
   }
 }
 
 function RedRectUp() {
   if(currentPositionTable < numberOfItemsShown){
     currentPositionTable += 1;
-    minimalDraw(1);
+    if(currentStage == INFORMATION){
+      redrawScreen();
+    }else{
+      draw();
+    }
   }
 }
 
-function changeScene(){
-  if(currentStage == INFORMATION){
-    currentStage = LIST;
-    displayClock();
-    setInterval(displayClock,500);
-  }else if(currentStage == LIST){
-    currentStage = INFORMATION;
+function renderMiniBackground(l){
+  for(var i = 233;i<=240;i++){
+    g.drawImage(getBackgroundImage(),i,123,{scale:10,rotate:0});
   }
-  minimalDraw(2);
-  Bangle.buzz(1000,1000);
 }
 
-function displayClock() {
-  var currentDate = new Date();
-  var currentDayOfWeek = currentDate.getDay();
-  var currentHour = currentDate.getHours();
-  var currentMinute = currentDate.getMinutes();
-  var currentMinuteUpdated;
-  var currentHourUpdated;
-  currentMinuteUpdated = updateMinutesToCurrentTime(currentMinute);
-  currentHourUpdated = updateHoursToCurrentTime(currentHour);
-  g.setColor(255,255,255);
-  g.setFont("7x11Numeric7Seg",2);
+function renderLoading(l){
+  g.setFont("8x12");
+  g.drawString("Loading...",240/2-20,240/2-20);
+}
+
+function renderInformation(l){
   var foundNumber = findNextScheduleIndex();
   var foundSchedule = getScheduleTable();
-  var scheduleHourUpdated;
-  var scheduleMinuteUpdated;
-  for(var i = 0;i<=240;i++){
-    g.drawImage(getBackgroundImage(),i,120,{scale:5,rotate:0});
-  }
-  g.drawString(currentHourUpdated+":"+currentMinuteUpdated, 160, 0);
-
-  g.drawImage(getUpArrow(),225,5);
-  g.drawImage(getDownArrow(),225,140);
-  if(currentStage == LIST){
-    var beforeFoundNumber = foundNumber - 2;
-    for(var x = 0;x<=numberOfItemsShown;x++){
-      var currentNumber = beforeFoundNumber + x;
-      if (beforeFoundNumber + x < 0) {
-        currentNumber = foundSchedule.length + beforeFoundNumber + x;
-      } else if (beforeFoundNumber + x > foundSchedule.length - 1) {
-        currentNumber = beforeFoundNumber + x - foundSchedule.length;
-      }
-
-      g.drawImage(getDotIcon(),223.5,70);
-      scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[currentNumber].sm);
-      scheduleHourUpdatedStart = updateHoursToCurrentTime(foundSchedule[currentNumber].sh);
-      scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[currentNumber].em);
-      scheduleHourUpdatedEnd = updateHoursToCurrentTime(foundSchedule[currentNumber].eh);
-      scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20);
-      if(foundSchedule[currentNumber].cn.length >= 20){
-        scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20)+"...";
-      }
-      schduleDay = updateDay(2,foundSchedule[currentNumber].dow);
-      g.setColor(255,255,255);
-      g.drawRect(10,30+(x*20),220,50+(20*x));
-      g.reset();
-      g.setFont("8x12");
-      g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd+" "+schduleDay+"  "+scheduleDecriptionUpdated,13,35+(x*20));
-      g.setColor(255,205,0);
-      g.drawRect(10,30+(2*20),220,50+(2*20));
-      g.setColor(255,0,0);
-      g.drawRect(10,30+(currentPositionTable*20),220,50+(20*currentPositionTable));
-    }
-  }else if(currentStage == INFORMATION){
-    g.drawImage(getMenuIcon(),223.5,70);
-    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].sm);
-    scheduleHourUpdatedStart = updateHoursToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].sh);
-    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].em);
-    scheduleHourUpdatedEnd = updateHoursToCurrentTime(foundSchedule[((foundNumber-2)+currentPositionTable)].eh);
-    schduleDay = updateDay(1,foundSchedule[((foundNumber-2)+currentPositionTable)].dow);
-    g.setColor(255,255,255);
-    g.reset();
-    g.setFont("8x12",2);
-
-    var splitClassNames = splitter(foundSchedule[((foundNumber-2)+currentPositionTable)].cn, 15);
-    var currentY = 5;
-    for (var j=0; j < splitClassNames.length; j++) {
-      g.drawString(splitClassNames[j],13,currentY);
-      currentY = currentY + 25;
-    }
-    g.setFont("8x12");
-    g.drawString(schduleDay,13,currentY);
-    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd,13,currentY+15);
-  }
-  g.flip();
+  scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[foundNumber].sm);
+  scheduleHourUpdatedStart = foundSchedule[foundNumber].sh;
+  scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[foundNumber].em);
+  scheduleHourUpdatedEnd = foundSchedule[foundNumber].eh;
+  scheduleDay = updateDay(1,foundSchedule[((foundNumber-2)+currentPositionTable)].dow);
   g.setColor(255,255,255);
+  g.setFont("8x12",2);
+  var splitClassNames = splitter(foundSchedule[((foundNumber-2)+currentPositionTable)].cn, 15);
+  var currentY = 5;
+  for (var j=0; j < splitClassNames.length; j++) {
+    g.drawString(splitClassNames[j],13,currentY+50);
+    currentY = currentY + 25;
+  }
+  g.setFont("8x12");
+  g.drawString(schduleDay,13,currentY+50);
+  g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd,13,currentY+15+50);
 }
 
+var Layout = require("Layout");
+var layout = new Layout(
+  {type:"h", c: [
+    {type:"custom", render:renderTableText, id:"tableText"},
+    {type:"custom", render:buttonsF, id:"buttons"},
+    {type:"custom", render:renderBackground, id:"background"},
+    {type:"custom", render:renderTable, id:"table"},
+    {type:"custom", render:renderMiniBackground, id:"miniBackground"},
+    {type:"custom", render:renderLoading, id:"loading"},
+    {type:"custom", render:renderInformation, id:"info"},
+    {type:"txt", font:"7x11Numeric7Seg:2", label:"00:00", id:"time"},
+  ]},
+  {type:"v", c:[
+  ]},
+  {btns:[
+    {label:"", cb: RedRectUp()},
+    {label:"", cb: l=>print("Two")},
+    {label:"", cb: RedRectDown()}
+]});
 
 
-displayClock();
+function getBackgroundImage() {return require("heatshrink").decompress(atob("j0ZyEKIf4A4gIB6gQB6gYB6ggB6goB6gwB6g4B6hAABAYIBHBZIVLAK8IhIBXgAThhQB6hYB6hgB6hoB6hwB6h4B6iAB6iIB6iQBHiAJOB54XSiYB6igB6ioB6iwB6i4B5A="));}
+
+function logDebug(message) {console.log(message);}
+
+function changeScene(){
+  layout.render(layout.buttons);
+  if(currentStage == INFORMATION){
+    currentStage = LIST;
+    nIntervId = setInterval(redrawScreen, 100000);
+  }else if(currentStage == LIST){
+    currentStage = INFORMATION;
+    clearInterval();
+  }
+  layout.render(layout.background);
+  layout.render(layout.buttons);
+  draw();
+}
+
+// timeout used to update every minute
+var drawTimeout;
+
+setInterval(draw, 15000);
 
-var currentMinuteUpdatedFunction = "00";
-var currentHourUpdatedFunction = 11;
-var scheduleMinuteUpdatedStart = 35;
-var scheduleHourUpdatedStart = 10;
-var scheduleMinuteUpdatedEnd = currentMinuteUpdatedFunction;
-var scheduleHourUpdatedEnd = 11;
 
 setWatch(RedRectUp, BTN3, { repeat:true, edge:'rising', debounce : 50 });
 setWatch(RedRectDown, BTN1, { repeat:true, edge:'rising', debounce : 50 });
 setWatch(changeScene, BTN2, { repeat:true, edge:'rising', debounce : 50 });
 
-setInterval(displayClock, 20000);
+layout.update();
+layout.render(layout.loading);
+layout.render(layout.background);
+layout.render(layout.buttons);
 
-setTimeout(displayClock,500);
+draw();