diff --git a/infoscreen/models.py b/infoscreen/models.py
index dd6fa07..04859f6 100644
--- a/infoscreen/models.py
+++ b/infoscreen/models.py
@@ -80,7 +80,7 @@ class ABBInfoItem(InfoItem):
     def get_create_template_url():
         return "/static/html/abb_create.html"
         
-class ApyItem(InfoItem):
+class ApyInfoItem(InfoItem):
     display_name = _("APY Item")
     def get_template_url(self):
         return "/static/html/apy.html"
diff --git a/infoscreen/static/css/apy.css b/infoscreen/static/css/apy.css
index 976fef8..6dc51c7 100644
--- a/infoscreen/static/css/apy.css
+++ b/infoscreen/static/css/apy.css
@@ -1,6 +1,42 @@
-#header {
-    height: 30%;
-    width: 100%;
-    background-color:#7c1330;
-    text-align: center;
-}
\ No newline at end of file
+.event {
+    font-size: 5vh;
+    font-family: 'Droid Sans Mono', monospace;
+}
+.event-col{
+    padding-top:1vh;
+    padding-bottom:1vh;
+}.event:nth-child(odd){
+    background-color: #d4e2fd;
+}
+
+.black {
+    color: black;
+}
+.header-row{
+    background: #d4e2fd;
+    font-size: 7vh;
+    font-family: 'Droid Sans Mono', monospace;
+    padding-bottom:20px;
+}
+
+.container {
+    width: 100vw;
+    padding: 0 0 0 0;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.repeat-item.ng-leave {
+    -webkit-transition:0.5s linear all;
+    transition:0.5s linear all;
+}
+
+.repeat-item.ng-leave.ng-leave-active {
+    opacity: 0;
+    font-size:  0vh;
+}
+
+.repeat-item.ng-leave{
+    opacity: 1;
+    font-size: 5vh;
+}
diff --git a/infoscreen/static/html/apy.html b/infoscreen/static/html/apy.html
index b645e65..4862e08 100644
--- a/infoscreen/static/html/apy.html
+++ b/infoscreen/static/html/apy.html
@@ -1,12 +1,16 @@
 <link rel="stylesheet" href="/static/css/apy.css">
 <div ng-controller="ApyController">
+
+	<div id="header-title"
+		KILTADIILIT TOP 3
+	</div>
 	<div class="header-row row">
         <div class="col-sm-9">Kilta</div>
         <div class="col-sm-3">Lehdet</div>
     </div>
-    <div class="repeat-item row event" ng-repeat="event in events">
-        <div class="col-sm-9 event-col">{{event.name}}</div>
-        <div class="col-sm-3 event-col">{{event.amount}}</div>
+    <div class="repeat-item row event" ng-repeat="item in items">
+        <div class="col-sm-9 event-col">{{item.name}}</div>
+        <div class="col-sm-3 event-col">{{item.size}}</div>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/infoscreen/static/js/infoscreen_controllers.js b/infoscreen/static/js/infoscreen_controllers.js
index a70deb9..7af5069 100644
--- a/infoscreen/static/js/infoscreen_controllers.js
+++ b/infoscreen/static/js/infoscreen_controllers.js
@@ -75,11 +75,11 @@ app.controller('SossoController', function($scope, $http) {
 });
 
 app.controller('ApyController', function($scope, $http) {
-    $scope.data = [];
-    $http.get("/infoscreen/apyjson").then(function)(response)
+    $scope.items = [];
+    $http.get("/infoscreen/apyjson").then(function(response)
     {
-        $scope.data = response.data.data
-    }
+        $scope.items = response.data.data
+    })
 });
 
 app.controller('EventController', function($scope, $http) {
diff --git a/infoscreen/views.py b/infoscreen/views.py
index e945a0d..63dd084 100644
--- a/infoscreen/views.py
+++ b/infoscreen/views.py
@@ -11,6 +11,7 @@ from infoscreen.models import EventInfoItem
 from infoscreen.models import ExternalWebsiteInfoItem
 from infoscreen.models import ImageUploadForm
 from infoscreen.models import HSLDataModel
+from infoscreen.models import ApyInfoItem
 from infoscreen.hsl_fetcher import HSLFetcher
 import sikweb.settings as settings
 import json
@@ -221,4 +222,4 @@ createHslItem = create_item_generator(HslInfoItem)
 createExternalImageInfoItem = create_item_generator(ExternalImageInfoItem)
 createExternalWebsiteItem = create_item_generator(ExternalWebsiteInfoItem)
 createEventItem = create_item_generator(EventInfoItem)
-createEventItem = create_item_generator(ApyInfoItem)
+createApyItem = create_item_generator(ApyInfoItem)