diff --git a/css/beer.css b/css/beer.css
index 5a672ef..d232382 100644
--- a/css/beer.css
+++ b/css/beer.css
@@ -5,37 +5,12 @@
     margin-left: 150px;
     margin-right: 150px;
 }
-#leftSide {
-    /*position: relative;*/
-    float: left;
-    margin-bottom: 20px;
-}
 span {
     width: 300px;
 }
-#payButton {
-    float: left;
-    width: 64px;
-    height: 40px;
-    background-color: white;
-    border: 5px solid white;
-    border-radius: 5px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-left: 30px;
-}
-
-
-input.search {
-    height: 20px;
-    margin-top: 10px;
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-#add{
-    background-color: #FFF;
-    border: 0;
-}
 #cost p {
     font-weight: bold;
 }
+#icon {
+    cursor: pointer;
+}
diff --git a/css/beer80s.css b/css/beer80s.css
new file mode 100644
index 0000000..7bfd43e
--- /dev/null
+++ b/css/beer80s.css
@@ -0,0 +1,54 @@
+#beerContainer {
+    position: relative;
+    height: 600px;
+    margin-top: 200px;
+    margin-left: 150px;
+    margin-right: 150px;
+}
+#leftSide {
+    /*position: relative;*/
+    float: left;
+    margin-bottom: 20px;
+}
+span {
+    width: 300px;
+}
+#payButton {
+    float: left;
+    width: 64px;
+    height: 40px;
+    background-color: white;
+    border: 5px solid white;
+    border-radius: 5px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-left: 45px;
+}
+button.typeButton {
+    cursor: pointer;
+    background-color: white;
+    border: 3px solid white;
+}
+button.typeButton:hover {
+    font-weight: bold;
+    background-color: #26C6B0;
+    color: #D76DA9;
+    border: 3px solid #639BF1;
+}
+input.search {
+    height: 20px;
+    width: 150px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+#add{
+    background-color: #FFF;
+    border: 0;
+}
+#cost p {
+    font-weight: bold;
+}
+#icon {
+    cursor: pointer;
+}
diff --git a/css/index.css b/css/index.css
index 1faca69..0eeeff2 100644
--- a/css/index.css
+++ b/css/index.css
@@ -42,17 +42,23 @@ img.icon_language {
 }*/
 
 #username-wrapper {
-    margin-left: 62px;
+    margin-left: 32px;
     margin-top: 45px;
     align-items: center;
 }
 
 #password-wrapper {
-  margin-left: 63px;
+  margin-left: 32px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+#login-btn{
+    display:inline;
+    margin: auto;
+    margin-left: 50px;
+}
+
 /*#password-wrapper {
   margin-left: 30px;
   margin-top: 10px;
diff --git a/css/paypage.css b/css/paypage.css
index 31ec933..982eee6 100644
--- a/css/paypage.css
+++ b/css/paypage.css
@@ -1,41 +1,35 @@
-
-
-#leftBox {
-    position: fixed;
-    width: 500px;
-    background-color: #FFFFFF;
+#container {
+    position: relative;
+    width: 2000px;
+    background-color:  #222930;
     border-radius: 8px;
-    margin-top:10px;
-    margin-left: 100px;
+    margin-top: 20px;
     overflow: auto;
-    min-height: 350px;
+
+    min-height: 420px;
+
 }
-/*rightBox is in start.css*/
 #paymentButton{
     width: 200px;
     height: 20px;
     padding: 25px;
-    border-radius: 3px;
     line-height: 1px;
-    background-color: green;
-    /*text style*/
+    background-color: mediumseagreen;
     text-align:center;
-    color: white;
     font-style: italic;
-
-    /*hover*/
-    position: fixed;
+    position: absolute;
     display: inline-block;
     margin-left: 280px;
     margin-top: 280px;
+    opacity: 1;
 }
+
 #cancel{
-    font-family:"Verdana", Verdana, sans-serif ;
-    color: #000000;
-    text-decoration: underline;
-    position: fixed;
-    margin-left:40px;
-    margin-top: 310px;
+  color: #000000;
+  position: absolute;
+  margin-left: 27px;
+  margin-top: 289px;
+  background: salmon;
 }
 
 
@@ -50,14 +44,6 @@
     margin-left: 150px;
 
 }
-/*#part0 {
-    border: 2px solid #a1a1a1;
-    padding: 10px 40px;
-    width: 300px;
-    border-radius: 25px;
-    position: absolute;
-}
-*/
 #credit{
     font-size: 26px;
     line-height: 300%;
@@ -72,7 +58,6 @@
     margin-top: 10px ;
 }
 
-/*common with setting*/
 div#black_wrapper{
 	background-color: rgba(0, 0, 0, 0.7);
 	width: 100%;
@@ -96,6 +81,18 @@ div#confirm_editer{
     box-shadow: 10px 10px 5px black;
 }
 
+#confirm_btn{
+	float: left;
+	margin-left: 50px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+#cancel_btn{
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
 .hidden{
 	visibility: hidden;
 	display: none;
diff --git a/css/settings.css b/css/settings.css
index fb43007..2334d49 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -27,7 +27,7 @@
     margin: 200px 150px 0px;
 	*/
 	position: relative;
-	float: left;
+	/*float: left;*/
 	margin-bottom: 20px;
 }
 /*
@@ -49,13 +49,6 @@ span {
 	width: 300px;
 }
 
-input.search {
-	height: 20px;
-	margin-top: 10px;
-	margin-left: 10px;
-	margin-bottom: 20px;
-}
-
 div#black_wrapper{
 	background-color: rgba(0, 0, 0, 0.7);
 	width: 100%;
@@ -70,19 +63,20 @@ div#item_editer{
 	left: 25%;
 	padding: 10px;
 	width: 500px;
-	min-height: 450px;
+	/*min-height: 450px;*/
 	text-align: center;
 	background-color: #4EB1BA;
     overflow: auto;
     border: 5px solid #4EB1BA;
     border-radius: 5px;
     box-shadow: 10px 10px 5px black;
+    padding-bottom: 30px;
 }
 
-#user_btn, #stock_btn{
+/*#user_btn, #stock_btn{
 	background-color: #FFF;
  	   border: 0;
-}
+}*/
 
 .hidden{
 	visibility: hidden;
@@ -99,8 +93,8 @@ div#item_editer{
 }
 
 #rightSide{
-	margin-top: 0px;
 	height: 400px;
+    color: black;
 }
 #rightSide table{
 	margin-left: 10px;
@@ -109,5 +103,4 @@ div#item_editer{
 #confirm_button{
 	float: left;	
 }
-}
 
diff --git a/css/start.css b/css/start.css
index 21a6737..32f1cdd 100644
--- a/css/start.css
+++ b/css/start.css
@@ -38,24 +38,44 @@ header{
     font-family: "Old English";
     color: #FFFFFF;
     font-weight: bold;
-    background-color: #222930;
+    background-color: #639BF1;
     border: 5px solid black;
     border-radius: 8px;
-    background-color: #192156;
-    color: white;
+    color: black;
 }
 #container {
     position: relative;
     width: 2000px;
-    /**background: url('../img/wood1.jpg')no-repeat 0px 0px fixed;**/
     background-color: #222930;
     border: 5px solid black;
     border-radius: 8px;
     margin-top: 20px;
     overflow: auto;
-
     min-height: 420px;
-    /*opacity: 0.6;*/
+}
+#settingsIconMenu {
+    margin-top: 5px;
+    margin-right: 35px;
+    width: 70px;
+    float: right;
+    border-right: 3px solid black;
+}
+#beerIconMenu {
+    margin-top: 5px;
+    margin-right: 10px;
+    width: 50px;
+    float: right;
+}
+#leftBox {
+    position: absolute;
+    width: 500px;
+    background-color: #D1E0FF;
+    border: 5px solid#639BF1;
+    border-radius: 8px;
+    margin-top:10px;
+    margin-left: 25px;
+    overflow: auto;
+    min-height: 350px;
 }
 #left {
     width: 140px;
@@ -75,6 +95,15 @@ header{
     margin-top: 100px;
     position: absolute;
 }
+
+#left:hover {
+    background-color: #639BF1;
+    border-color: #639BF1;
+}
+#right:hover {
+    background-color: #639BF1;
+    border-color: #639BF1;
+}
 #beerImg {
     width: 140px;
     height: 130px;
@@ -94,7 +123,8 @@ a:active {
 }
 body{
     min-height: 100%;
-    background: url('../img/pints-of-beer.jpg') no-repeat 0px 0px fixed;
+    background-color: black;
+    /*background-image: url("../img/thumb1.jpg");*/
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
@@ -104,7 +134,8 @@ body{
 
 .button {
     cursor: pointer;   
-    position:relative;
+    position: relative;
+    float: left;
     width:200px;
     color:#000;
     display:block;
@@ -123,7 +154,7 @@ body{
     -webkit-box-shadow: 0px 3px 0px #261319;
     -moz-box-shadow: 0px 3px 0px #261319;
     box-shadow: 0px 3px 0px #261319;
-    background-color: #FFF;
+    background-color: #C8C8C8;
     border: 0;
 }
 .button:active{
@@ -152,10 +183,10 @@ li.listItem{
     */
 }
 .listItem:hover {
-    background-color: #4EB1BA;
+    font-weight: bold;
 }
 #add{
-    background-color: #FFF;
+    background-color: #C8C8C8;
     border: 0;
 }
 #rightList > li {
@@ -174,7 +205,7 @@ li.listItem{
 }
 
 #rightList > li > button {
-    background-color: #2C2C33;
+    background-color: white;
     width: 60px;
     height: 60px;
     /*margin: 50px auto;*/
@@ -189,38 +220,54 @@ li.listItem{
 #rightList > li > button:hover {
     color: #639BF1;
 }
+#leftSide {
+    float: left;
+    margin-bottom: 20px;
+}
 #rightSide {
     margin-top: 10px;
     width: 330px;
     height: 300px;
     margin-left: 650px;
-    background-color: #4EB1BA;
+    background-color: #D1E0FF;
     overflow: auto;
-    border: 5px solid #4EB1BA;
+    border: 5px solid #639BF1;
+    padding: 5px;
     border-radius: 5px;
+
 }
 #cost {
-    position: fixed;
     margin-left: 650px;
-    margin-top: 340px;
-    position: fixed;
+    margin-top: 20px;
     width: 330px;
     height: 40px;
-    background-color: #4EB1BA;
-    overflow: auto;
-    border: 5px solid #4EB1BA;
+    background-color: #D1E0FF;
+    border: 5px solid #639BF1;
+    padding: 5px;
     border-radius: 5px;
+    color: #000000;
+}
+#payButton {
+    float: left;
+    width: 64px;
+    height: 40px;
+    background-color: #C8C8C8;
+    border: 5px solid #C8C8C8;
+    border-radius: 5px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-left: 45px;
 }
 #undoButton {
     float: left;
     width: 40px;
     height: 40px;
-    background-color: white;
-    border: 5px solid white;
+    background-color: #C8C8C8;
+    border: 5px solid #C8C8C8;
     border-radius: 5px;
     font-weight: bold;
     margin-bottom: 10px;
-    margin-left: 30px;
+    margin-left: 45px;
     background-image:url("../img/Undo-icon.png");
     background-position: center;
 }
@@ -228,17 +275,35 @@ li.listItem{
     float: left;
     width: 40px;
     height: 40px;
-    background-color: white;
-    border: 5px solid white;
+    background-color: #C8C8C8;
+    border: 5px solid #C8C8C8;
     border-radius: 5px;
     font-weight: bold;
     margin-bottom: 10px;
-    margin-left: 30px;
+    margin-left: 45px;
     background-image:url("../img/Redo-icon.png");
     background-position: center;
 }
-
-
+input.search {
+    height: 25px;
+    width: 150px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+button.typeButton {
+    height: 30px;
+    min-width: 60px;
+    cursor: pointer;
+    background-color: white;
+    border: 3px solid white;
+}
+button.typeButton:hover {
+    font-weight: bold;
+    background-color: #639BF1;
+    color: black;
+    border: 3px solid #639BF1;
+}
 article#user_info{
     position : fixed !important;
     left:50%;
@@ -246,7 +311,7 @@ article#user_info{
     width: 2000px;
     margin-top: -100px;
     background-color: #639BF1;
-    opacity: 0.5;
+    opacity: 1;
     height: 50px;
     border: 5px solid black;
     border-radius: 8px;
@@ -270,6 +335,7 @@ article#user_info:hover{
 
 #logout > .button{
     width: 150px;
+    float: left;
 }
 
 #icon>#trans_container{
@@ -285,14 +351,31 @@ article#user_info:hover{
     margin-top: 5px;
     margin-left: 5px;
     margin-right: 10px;
+    cursor: pointer;
+}
+#backArrow {
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 #icon>#logout{
-    float: right;
+
     margin-top: 5px;
+    margin-left: 5px;
+    margin-right: 10px;
+    float: left;
+}
+
+#changeTheme{
+    width: auto;
+    margin-top: 5px;
+    margin-left: 5px;
     margin-right: 10px;
     float: right;
 
 }
+
+
 .anim {
     width: 50px;
     height: 50px;
@@ -305,7 +388,6 @@ article#user_info:hover{
     -webkit-animation-timing-function: linear;
     -webkit-animation-delay: 2s;
     -webkit-animation-iteration-count: infinite;
-    -webkit-animation-direction: alternate;
     -webkit-animation-play-state: running;
     /* Standard syntax */
     animation-name: myfirst;
@@ -313,21 +395,20 @@ article#user_info:hover{
     animation-timing-function: linear;
     animation-delay: 2s;
     animation-iteration-count: infinite;
-    animation-direction: alternate;
     animation-play-state: running;
 }
 /* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
-    0%   {left:480px; top:0px;}
-    50%  {left:-480px; top:0px;}
-    100% {left:480px; top:0px;}
+    0% {left: 480px;}
+    50% {left: 0px;}
+    100% {left: -480px;}
 }
 
 /* Standard syntax */
 @keyframes myfirst {
-    0%   {left:480px; top:0px;}
-    50%  {left:-480px; top:0px;}
-    100% {left:480px; top:0px;}
+    0% {left: 480px;}
+    50% {left: 0px;}
+    100% {left: -480px;}
 }
 
 #user_info > .profil {
diff --git a/css/start80s.css b/css/start80s.css
index b824c76..0a69f40 100644
--- a/css/start80s.css
+++ b/css/start80s.css
@@ -46,7 +46,6 @@ header{
 #container {
     position: relative;
     width: 2000px;
-    /**background: url('../img/wood1.jpg')no-repeat 0px 0px fixed;**/
     background-color: #222930;
     border: 5px solid #610A3B;
     border-radius: 8px;
@@ -54,7 +53,31 @@ header{
     overflow: auto;
 
     min-height: 420px;
-    /*opacity: 0.6;*/
+}
+#settingsIconMenu {
+    margin-top: 5px;
+    margin-right: 35px;
+    width: 70px;
+    float: right;
+    border-right: 3px solid black;
+}
+#beerIconMenu {
+    margin-top: 5px;
+    margin-right: 10px;
+    width: 50px;
+    float: right;
+}
+#leftBox {
+    position: absolute;
+    width: 500px;
+    background-color: #4EB1BA;
+    border: 5px solid #4EB1BA;
+    border-radius: 8px;
+    margin-top:10px;
+    margin-left: 25px;
+    overflow: auto;
+    min-height: 350px;
+    box-shadow: 10px 10px 5px black;
 }
 #left {
     width: 140px;
@@ -74,6 +97,14 @@ header{
     margin-top: 100px;
     position: absolute;
 }
+#left:hover {
+    background-color: #26C6B0;
+    border-color: #26C6B0;
+}
+#right:hover {
+    background-color: #26C6B0;
+    border-color: #26C6B0;
+}
 #beerImg {
     width: 140px;
     height: 130px;
@@ -189,21 +220,26 @@ li.listItem{
 #rightList > li > button:hover {
     color: #26C6B0;
 }
+#leftSide {
+    float: left;
+    margin-bottom: 20px;
+}
 #rightSide {
     margin-top: 10px;
     width: 330px;
-    height: 320px;
+    height: 300px;
     margin-left: 650px;
     background-color: #4EB1BA;
     overflow: auto;
     border: 5px solid #4EB1BA;
     border-radius: 5px;
     box-shadow: 10px 10px 5px black;
+    padding: 5px;
 }
 #cost {
     position: fixed;
     margin-left: 650px;
-    margin-top: 360px;
+    margin-top: 20px;
     position: fixed;
     width: 330px;
     height: 40px;
@@ -212,6 +248,18 @@ li.listItem{
     border: 5px solid #4EB1BA;
     border-radius: 5px;
     box-shadow: 10px 10px 5px black;
+    padding: 5px;
+}
+#payButton {
+    float: left;
+    width: 64px;
+    height: 40px;
+    background-color: white;
+    border: 5px solid white;
+    border-radius: 5px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-left: 45px;
 }
 #undoButton {
     float: left;
@@ -222,7 +270,7 @@ li.listItem{
     border-radius: 5px;
     font-weight: bold;
     margin-bottom: 10px;
-    margin-left: 30px;
+    margin-left: 45px;
     background-image:url("../img/Undo-icon.png");
     background-position: center;
 }
@@ -235,21 +283,40 @@ li.listItem{
     border-radius: 5px;
     font-weight: bold;
     margin-bottom: 10px;
-    margin-left: 30px;
+    margin-left: 45px;
     background-image:url("../img/Redo-icon.png");
     background-position: center;
 }
-
+input.search {
+    height: 25px;
+    width: 150px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+button.typeButton {
+    height: 30px;
+    min-width: 60px;
+    cursor: pointer;
+    background-color: white;
+    border: 3px solid white;
+}
+button.typeButton:hover {
+    font-weight: bold;
+    background-color: #26C6B0;
+    color: black;
+    border: 3px solid #26C6B0;
+}
 article#user_info{
     position : fixed !important;
     left:50%;
     margin-left: -517px;
     width: 2000px;
     margin-top: -100px;
-    background-color: #639BF1;
-    opacity: 0.5;
+    background-color: #4EB1BA;
+    opacity: 1;
     height: 50px;
-    border: 5px solid black;
+    border: 5px solid #610A3B;
     border-radius: 8px;
     z-index: 10;
 }
@@ -260,10 +327,9 @@ article#user_info:hover{
     margin-left: -517px;
     width: 2000px;
     margin-top: -100px;
-    background-color: #639BF1;
     opacity: 1;
     height: 50px;
-    border: 5px solid black;
+    border: 5px solid #610A3B;
     border-radius: 8px;
     z-index: 10;
 }
@@ -286,10 +352,25 @@ article#user_info:hover{
     margin-top: 5px;
     margin-left: 5px;
     margin-right: 10px;
+    cursor: pointer;
+}
+#backArrow {
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 #icon>#logout{
-    float: right;
+
     margin-top: 5px;
+    margin-left: 5px;
+    margin-right: 10px;
+    float: left;
+}
+
+#changeTheme{
+    width: auto;
+    margin-top: 5px;
+    margin-left: 5px;
     margin-right: 10px;
     float: right;
 
@@ -306,7 +387,6 @@ article#user_info:hover{
     -webkit-animation-timing-function: linear;
     -webkit-animation-delay: 2s;
     -webkit-animation-iteration-count: infinite;
-    -webkit-animation-direction: alternate;
     -webkit-animation-play-state: running;
     /* Standard syntax */
     animation-name: myfirst;
@@ -314,21 +394,20 @@ article#user_info:hover{
     animation-timing-function: linear;
     animation-delay: 2s;
     animation-iteration-count: infinite;
-    animation-direction: alternate;
     animation-play-state: running;
 }
 /* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
-    0%   {left:480px; top:0px;}
-    50%  {left:-480px; top:0px;}
-    100% {left:480px; top:0px;}
+    0% {left: 480px;}
+    50% {left: 0px;}
+    100% {left: -480px;}
 }
 
 /* Standard syntax */
 @keyframes myfirst {
-    0%   {left:480px; top:0px;}
-    50%  {left:-480px; top:0px;}
-    100% {left:480px; top:0px;}
+    0% {left: 480px;}
+    50% {left: 0px;}
+    100% {left: -480px;}
 }
 
 #user_info > .profil {
diff --git a/html/beer.html b/html/beer.html
index fb10919..ad280f1 100644
--- a/html/beer.html
+++ b/html/beer.html
@@ -3,13 +3,15 @@
 <head>
     <link id="mainStyle" rel="stylesheet" type="text/css" href="../css/start.css">
     <link rel="stylesheet" type="text/css" href="../css/beer.css">
-    <meta http-equiv="content-type" content="text/html/JavaScript" charset="ISO-8859-1" />
+
 </head>
 <body>
-
     <article id="user_info" class="center"><label style="float:right" onclick="logout()"></label>
         <div id="icon">
-
+            <a href="index2.html" title="Go back"><img id="backArrow" src="../img/back-arrow.png" width="50" height="50"></a>
+            <div id="logout">
+                <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+            </div>
             <div id='trans_container'>
                 <div id='click_flag' ></div>
                 <div class="translation_menu">
@@ -17,26 +19,30 @@
                     <img class="icon_language" draggable='true' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
                 </div>
             </div>
-            <div id="logout">
-                <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+            <div id="change-theme">
+                <button class="button" id="changeTheme" data-i18n="changeTheme">Change theme</button>
+            </div>
+            <div id="settingsIconMenu">
+                <a href="settings.html"><img src="../img/cogwheels.png" width="40" height="35" title="Settings"></a>
+            </div>
+            <div id="beerIconMenu">
+                <a href="beer.html"><img src="../img/beer.png" width="40" height="35" title="Beer and wine"></a>
             </div>
         </div>
     </article>
     <header class="center">THE FLYING DUTCHMAN: BLACK SAILS</header>
-
-
     <div id="container" class="center">
         <div id="leftSide">
            <input class="search" placeholder="Search..." type="search" data-i18n="[placeholder]search.search_input"/>
-           <button id="changeTheme">Change theme</button>
-           <button id="showBeer">Beer</button>
-           <button id="showWine">Wine</button>
+           <button class="typeButton" id="showAll">All</button>
+           <button class="typeButton" id="showBeer">Beer</button>
+           <button class="typeButton" id="showWine">Wine</button>
             <ul id="leftList">
             </ul>
         </div>
         <div id="rightSide" ondrop="dnd.drop(event)" ondragover="dnd.allow(event)">
             <button title="undo" class="button" id="undoButton"></button>
-            <a href="paypage.html">
+            <a>
                 <button class="button" id="payButton" data-i18n="button.pay">PAY</button>
             </a>
             <button title="redo" class="button" id="redoButton"></button>
diff --git a/html/index.html b/html/index.html
index c5895dc..ac533de 100644
--- a/html/index.html
+++ b/html/index.html
@@ -3,6 +3,7 @@
 <head>
     <link id="mainStyle" rel="stylesheet" type="text/css" href="../css/start.css">
     <link rel="stylesheet" type="text/css" href="../css/index.css">
+    <meta charset="utf-8" >
 </head>
 <body>
     <article id="user_info" class="center"><label style="float:right" onclick="logout()"></label>
@@ -18,7 +19,7 @@
     </article>
 
     <header class='center'>
-        <img src="../img/ff.png" class="anim">
+        <img src="../img/ship.png" class="anim">
         <p>
         THE FLYING DUTCHMAN: BLACK SAILS</p></header>
     <div id='container' class="center">
@@ -37,7 +38,9 @@
      <script src="../js/login.js"></script>
     <script src="../js/i18next-1.7.7.js"></script>
     <script src="../js/i18next-1.7.7.min.js"></script>
+
     <script src="../js/translation.js"></script>
     <script src="../js/drag_and_drop.js"></script>
+
 </body>
 </html>
diff --git a/html/index2.html b/html/index2.html
index 1f3e21b..14466b1 100644
--- a/html/index2.html
+++ b/html/index2.html
@@ -1,43 +1,51 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="../css/start.css">
+    <link id="mainStyle" rel="stylesheet" type="text/css" href="../css/start.css">
+    <meta charset="utf-8" >
 </head>
 <body>
     <article id="user_info" class="center"><label style="float:right" onclick="logout()"></label>
     <div id="icon">
-
+        <div id="logout">
+            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        </div>
         <div id='trans_container'>
-            <div id='click_flag'></div>
+            <div id='click_flag' ></div>
             <div class="translation_menu">
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
+                <img class="icon_language" draggable='true' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
+                <img class="icon_language" draggable='true' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
             </div>
         </div>
-        <div id="logout">
-            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        <div id="change-theme">
+            <button class="button" id="changeTheme" data-i18n="changeTheme">Change theme</button>
         </div>
     </div>
     </article>
 
-    <header class="center">THE FLYING DUTCHMAN: BLACK SAILS</header>
+
+    <header class="center">
+        <p>THE FLYING DUTCHMAN: BLACK SAILS</p></header>
     <div id="container" class="center">
         <a href="beer.html">
-            <div id="left">
+            <div id="left" title="Beer and wine">
                 <img id="beerImg" src="../img/beer.png">
             </div>
         </a>
         <a href="settings.html">
-            <div id="right">
+            <div id="right" title="Settings">
                 <img id="beerImg" src="../img/cogwheels.png">
             </div>
         </a>
     </div>
     <div id="footer"></div>
+
     <script src="../js/jquery.js"></script>
     <script src="../js/start.js"></script>
+    <script src="../js/order.js"></script>
     <script src="../js/i18next-1.7.7.js"></script>
     <script src="../js/i18next-1.7.7.min.js"></script>
     <script src="../js/translation.js"></script>
+
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/html/paypage.html b/html/paypage.html
index 1e2a949..a504c68 100644
--- a/html/paypage.html
+++ b/html/paypage.html
@@ -4,34 +4,44 @@
 <head>
     <link id="mainStyle" rel="stylesheet" type="text/css" href="../css/start.css">
     <link rel="stylesheet" type="text/css" href="../css/paypage.css">
+
 </head>
 <body>
 <article id="user_info" class="center"><label style="float:right" onclick="logout()"></label>
     <div id="icon">
-
+        <a href="beer.html" title="Go back"><img id="backArrow" src="../img/back-arrow.png" width="50" height="50"></a>
+        <div id="logout">
+            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        </div>
         <div id='trans_container'>
-            <div id='click_flag'></div>
+            <div id='click_flag' ></div>
             <div class="translation_menu">
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
+                <img class="icon_language" draggable='true' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
+                <img class="icon_language" draggable='true' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
             </div>
         </div>
-        <div id="logout">
-            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        <div id="change-theme">
+            <button class="button" id="changeTheme" data-i18n="changeTheme">Change theme</button>
+        </div>
+        <div id="settingsIconMenu">
+            <a href="settings.html"><img src="../img/cogwheels.png" width="40" height="35" title="Settings"></a>
+        </div>
+        <div id="beerIconMenu">
+            <a href="beer.html"><img src="../img/beer.png" width="40" height="35" title="Beer and wine"></a>
         </div>
     </div>
 </article>
 
-<header class="center">THE FLYING DUTCHMAN: BLACK SAILS</header>
+<header class="center">
+    <p>THE FLYING DUTCHMAN: BLACK SAILS</p></header>
 <!-- the gray box background-->
 <div id="container" class="center">
 
     <div id="leftBox">
-        <button id ="paymentButton" data-i18n="button.pay">PAY NOW</button>
-        <a href="beer.html" id="cancel"  data-i18n="href.cancel">cancel</a>
+        <button id ="paymentButton" data-i18n="button.pay" class="button">Pay Now</button>
+        <a href="beer.html" id="cancel"  data-i18n="href.cancel" class="button">cancel</a>
         <div id="finalCost" data-i18n="finalCost">Total:</div>
         <div id="credit" data-i18n="credit">Credit:</div>
-        <p id="cancel" data-i18n="href.cancel" action="cancelFunction()">Cancel</p>
     </div>
     <div id="rightSide" ondrop="drop(event)" ondragover="allowDrop(event)">
         <button title="undo" class="button" id="undoButton"></button>
@@ -41,9 +51,10 @@
     </div>
     <div id="black_wrapper" class="hidden"></div>
     <div id="confirm_editer" class="hidden">
-        <p id='confirm_text' data-i18n='confirm_text.confirm'>Confirmation</p>
+        <p id='confirm_text' data-i18n='confirm_text.confirm'>Confirm Purcase?</p>
     	<button id='confirm_btn' class='button'>Yes</button>
     	<button id='cancel_btn' class='button'>Cancel</button>
+    	<div class="hidden" id="success" data-i18n="success.message">Successful purchase!</div>
     </div>
 </div>
 <div id="footer"></div>
diff --git a/html/settings.html b/html/settings.html
index 85ac449..c52eeec 100644
--- a/html/settings.html
+++ b/html/settings.html
@@ -2,41 +2,56 @@
 <html>
 <head>
 	<title>setting</title>
-	<link rel="stylesheet" type="text/css" href="../css/start.css">
+	<link id="mainStyle" rel="stylesheet" type="text/css" href="../css/start.css">
 	<link rel="stylesheet" type="text/css" href="../css/settings.css">
+    <meta charset=utf-8">
 </head>
 
 <body>
 <article id="user_info" class="center"><label style="float:right" onclick="logout()"></label>
     <div id="icon">
-
+        <a href="index2.html" title="Go back"><img id="backArrow" src="../img/back-arrow.png" width="50" height="50"></a>
+        <div id="logout">
+            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        </div>
         <div id='trans_container'>
-            <div id='click_flag'></div>
+            <div id='click_flag' ></div>
             <div class="translation_menu">
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
-                <img class="icon_language" draggable='true' ondragstart='drag(event)' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
+                <img class="icon_language" draggable='true' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
+                <img class="icon_language" draggable='true' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
             </div>
         </div>
-        <div id="logout">
-            <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+        <div id="change-theme">
+            <button class="button" id="changeTheme" data-i18n="changeTheme">Change theme</button>
+        </div>
+        <div id="settingsIconMenu">
+            <a href="settings.html"><img src="../img/cogwheels.png" width="40" height="35" title="Settings"></a>
+        </div>
+        <div id="beerIconMenu">
+            <a href="beer.html"><img src="../img/beer.png" width="40" height="35" title="Beer and wine"></a>
         </div>
     </div>
 </article>
 
-	<header class="center">THE FLYING DUTCHMAN: BLACK SAILS</header>
+	<header class="center">
+        <p>THE FLYING DUTCHMAN: BLACK SAILS</p></header>
 	<div class= "center" id = "container" >
-		<input class="search" placeholder="Search..." type="search" data-i18n="[placeholder]search.search_input"/>
-		<div id="menu"> 
-			<li><a href="#">
-				<button class="button" id="stock_btn" data-i18n="button.stock">Stock</button>
-			</a></li>
-			<li><a href="#">
-				<button class="button" id="user_btn" data-i18n="button.user">User</button>
-			</a></li>
-		</div>
-		<div class = "object" id = "stock_container"></div>
-		<div class = "object" id = "user_container"></div>
-	   <div id="rightSide">Click on the dink for more info</div>
+        <div id="leftSide">
+            <input class="search" placeholder="Search..." data-i18n="[placeholder]search.search_input"/>
+            <button class="typeButton" id="stock_btn" data-i18n="button.stock">Stock</button>
+            <button class="typeButton" id="user_btn" data-i18n="button.user">User</button>
+            <!--<div id="menu"> 
+                <li><a href="#">
+                    <button class="typeButton" id="stock_btn" data-i18n="button.stock">Stock</button>
+                </a></li>
+                <li><a href="#">
+                    <button class="typeButton" id="user_btn" data-i18n="button.user">User</button>
+                </a></li>
+            </div>-->
+            <div class = "object" id = "stock_container"></div>
+            <div class = "object" id = "user_container"></div>
+        </div>
+	   <div id="rightSide">Click on the list item for more info.</div>
     </div>
     <div id="black_wrapper" class="hidden"></div>
     <div id="item_editer" class="hidden">
@@ -48,8 +63,8 @@
     <script src="../js/i18next-1.7.7.min.js"></script>
     <script src="../js/translation.js"></script>
     <script src="../js/mustache.js"></script>
-    <script src="../js/settings.js"></script>
     <script src="../js/start.js"></script>
+    <script src="../js/settings.js"></script>
 </body>
 
 </html>
diff --git a/html/user_info.html b/html/user_info.html
new file mode 100644
index 0000000..2d849d7
--- /dev/null
+++ b/html/user_info.html
@@ -0,0 +1,16 @@
+<div id="icon">
+    <div id='trans_container'>
+        <div id='click_flag' ></div>
+        <div class="translation_menu">
+            <img class="icon_language" draggable='true' id='en' onclick='changeE();' src='../img/drapeau_anglais.jpg'/>
+            <img class="icon_language" draggable='true' id='sw' onclick='changeS();' src='../img/drapeau_suedois.jpg'/>
+        </div>
+    </div>
+    <div id="change-theme">
+        <button class="button" id="changeTheme" data-i18n="changeTheme">Change theme</button>
+    </div>
+    <img id="backArrow" src="../img/back-arrow.png" width="50" height="50">
+    <div id="logout">
+        <button class="button" onclick="logout()" id= "logout-btn" data-i18n="button.logout">Logout</button>
+    </div>
+</div>
diff --git a/img/back-arrow.png b/img/back-arrow.png
new file mode 100644
index 0000000..ecdbde8
Binary files /dev/null and b/img/back-arrow.png differ
diff --git a/img/beer.png b/img/beer.png
index e8f7b1f..98e17ce 100644
Binary files a/img/beer.png and b/img/beer.png differ
diff --git a/img/beverages/1120801.png b/img/beverages/1120801.png
new file mode 100644
index 0000000..218f581
Binary files /dev/null and b/img/beverages/1120801.png differ
diff --git a/img/beverages/1125001.png b/img/beverages/1125001.png
new file mode 100644
index 0000000..2910273
Binary files /dev/null and b/img/beverages/1125001.png differ
diff --git a/img/beverages/1125303.png b/img/beverages/1125303.png
new file mode 100644
index 0000000..6bad799
Binary files /dev/null and b/img/beverages/1125303.png differ
diff --git a/img/beverages/1127103.png b/img/beverages/1127103.png
new file mode 100644
index 0000000..654118f
Binary files /dev/null and b/img/beverages/1127103.png differ
diff --git a/img/beverages/1129801.png b/img/beverages/1129801.png
new file mode 100644
index 0000000..5c16ace
Binary files /dev/null and b/img/beverages/1129801.png differ
diff --git a/img/beverages/1134803.png b/img/beverages/1134803.png
new file mode 100644
index 0000000..5042948
Binary files /dev/null and b/img/beverages/1134803.png differ
diff --git a/img/beverages/1137903.png b/img/beverages/1137903.png
new file mode 100644
index 0000000..130e4fd
Binary files /dev/null and b/img/beverages/1137903.png differ
diff --git a/img/beverages/1140501.png b/img/beverages/1140501.png
new file mode 100644
index 0000000..8abe4f1
Binary files /dev/null and b/img/beverages/1140501.png differ
diff --git a/img/beverages/1144703.png b/img/beverages/1144703.png
new file mode 100644
index 0000000..1a5629d
Binary files /dev/null and b/img/beverages/1144703.png differ
diff --git a/img/beverages/1146001.png b/img/beverages/1146001.png
new file mode 100644
index 0000000..c3a00fd
Binary files /dev/null and b/img/beverages/1146001.png differ
diff --git a/img/beverages/1148901.png b/img/beverages/1148901.png
new file mode 100644
index 0000000..6be741a
Binary files /dev/null and b/img/beverages/1148901.png differ
diff --git a/img/beverages/1151503.png b/img/beverages/1151503.png
new file mode 100644
index 0000000..6b37587
Binary files /dev/null and b/img/beverages/1151503.png differ
diff --git a/img/beverages/1158103.png b/img/beverages/1158103.png
new file mode 100644
index 0000000..1e70582
Binary files /dev/null and b/img/beverages/1158103.png differ
diff --git a/img/beverages/1159903.png b/img/beverages/1159903.png
new file mode 100644
index 0000000..c83a111
Binary files /dev/null and b/img/beverages/1159903.png differ
diff --git a/img/beverages/1162503.png b/img/beverages/1162503.png
new file mode 100644
index 0000000..8bfae20
Binary files /dev/null and b/img/beverages/1162503.png differ
diff --git a/img/beverages/1163903.png b/img/beverages/1163903.png
new file mode 100644
index 0000000..2d8f79a
Binary files /dev/null and b/img/beverages/1163903.png differ
diff --git a/img/beverages/1191303.png b/img/beverages/1191303.png
new file mode 100644
index 0000000..473bf0d
Binary files /dev/null and b/img/beverages/1191303.png differ
diff --git a/img/beverages/1210502.png b/img/beverages/1210502.png
new file mode 100644
index 0000000..abfce0b
Binary files /dev/null and b/img/beverages/1210502.png differ
diff --git a/img/beverages/123103.png b/img/beverages/123103.png
new file mode 100644
index 0000000..9e949f1
Binary files /dev/null and b/img/beverages/123103.png differ
diff --git a/img/beverages/133603.png b/img/beverages/133603.png
new file mode 100644
index 0000000..3d607fe
Binary files /dev/null and b/img/beverages/133603.png differ
diff --git a/img/beverages/135601.png b/img/beverages/135601.png
new file mode 100644
index 0000000..afedc6d
Binary files /dev/null and b/img/beverages/135601.png differ
diff --git a/img/beverages/135603.png b/img/beverages/135603.png
new file mode 100644
index 0000000..afedc6d
Binary files /dev/null and b/img/beverages/135603.png differ
diff --git a/img/beverages/137901.png b/img/beverages/137901.png
new file mode 100644
index 0000000..a3fda44
Binary files /dev/null and b/img/beverages/137901.png differ
diff --git a/img/beverages/140003.png b/img/beverages/140003.png
new file mode 100644
index 0000000..1975442
Binary files /dev/null and b/img/beverages/140003.png differ
diff --git a/img/beverages/141001.png b/img/beverages/141001.png
new file mode 100644
index 0000000..8b168f1
Binary files /dev/null and b/img/beverages/141001.png differ
diff --git a/img/beverages/141503.png b/img/beverages/141503.png
new file mode 100644
index 0000000..4cdb5f0
Binary files /dev/null and b/img/beverages/141503.png differ
diff --git a/img/beverages/142003.png b/img/beverages/142003.png
new file mode 100644
index 0000000..cd7b54e
Binary files /dev/null and b/img/beverages/142003.png differ
diff --git a/img/beverages/144203.png b/img/beverages/144203.png
new file mode 100644
index 0000000..30ed4da
Binary files /dev/null and b/img/beverages/144203.png differ
diff --git a/img/beverages/144612.png b/img/beverages/144612.png
new file mode 100644
index 0000000..decad80
Binary files /dev/null and b/img/beverages/144612.png differ
diff --git a/img/beverages/145414.png b/img/beverages/145414.png
new file mode 100644
index 0000000..f8ba556
Binary files /dev/null and b/img/beverages/145414.png differ
diff --git a/img/beverages/146403.png b/img/beverages/146403.png
new file mode 100644
index 0000000..e7ddb7f
Binary files /dev/null and b/img/beverages/146403.png differ
diff --git a/img/beverages/148001.png b/img/beverages/148001.png
new file mode 100644
index 0000000..f96a4f9
Binary files /dev/null and b/img/beverages/148001.png differ
diff --git a/img/beverages/149003.png b/img/beverages/149003.png
new file mode 100644
index 0000000..953ea87
Binary files /dev/null and b/img/beverages/149003.png differ
diff --git a/img/beverages/150103.png b/img/beverages/150103.png
new file mode 100644
index 0000000..a7be2be
Binary files /dev/null and b/img/beverages/150103.png differ
diff --git a/img/beverages/150401.png b/img/beverages/150401.png
new file mode 100644
index 0000000..345630e
Binary files /dev/null and b/img/beverages/150401.png differ
diff --git a/img/beverages/150603.png b/img/beverages/150603.png
new file mode 100644
index 0000000..ec78bb5
Binary files /dev/null and b/img/beverages/150603.png differ
diff --git a/img/beverages/151001.png b/img/beverages/151001.png
new file mode 100644
index 0000000..e2d926f
Binary files /dev/null and b/img/beverages/151001.png differ
diff --git a/img/beverages/151503.png b/img/beverages/151503.png
new file mode 100644
index 0000000..782d4e5
Binary files /dev/null and b/img/beverages/151503.png differ
diff --git a/img/beverages/152601.png b/img/beverages/152601.png
new file mode 100644
index 0000000..e2d722f
Binary files /dev/null and b/img/beverages/152601.png differ
diff --git a/img/beverages/152901.png b/img/beverages/152901.png
new file mode 100644
index 0000000..1619bbf
Binary files /dev/null and b/img/beverages/152901.png differ
diff --git a/img/beverages/153001.png b/img/beverages/153001.png
new file mode 100644
index 0000000..712fe02
Binary files /dev/null and b/img/beverages/153001.png differ
diff --git a/img/beverages/153503.png b/img/beverages/153503.png
new file mode 100644
index 0000000..ba7435c
Binary files /dev/null and b/img/beverages/153503.png differ
diff --git a/img/beverages/153803.png b/img/beverages/153803.png
new file mode 100644
index 0000000..495c0ed
Binary files /dev/null and b/img/beverages/153803.png differ
diff --git a/img/beverages/153915.png b/img/beverages/153915.png
new file mode 100644
index 0000000..0b746c4
Binary files /dev/null and b/img/beverages/153915.png differ
diff --git a/img/beverages/154603.png b/img/beverages/154603.png
new file mode 100644
index 0000000..9cad69c
Binary files /dev/null and b/img/beverages/154603.png differ
diff --git a/img/beverages/154803.png b/img/beverages/154803.png
new file mode 100644
index 0000000..6d89750
Binary files /dev/null and b/img/beverages/154803.png differ
diff --git a/img/beverages/154903.png b/img/beverages/154903.png
new file mode 100644
index 0000000..ecd3f12
Binary files /dev/null and b/img/beverages/154903.png differ
diff --git a/img/beverages/155103.png b/img/beverages/155103.png
new file mode 100644
index 0000000..63f3463
Binary files /dev/null and b/img/beverages/155103.png differ
diff --git a/img/beverages/155701.png b/img/beverages/155701.png
new file mode 100644
index 0000000..cf15f2e
Binary files /dev/null and b/img/beverages/155701.png differ
diff --git a/img/beverages/156103.png b/img/beverages/156103.png
new file mode 100644
index 0000000..27f85a6
Binary files /dev/null and b/img/beverages/156103.png differ
diff --git a/img/beverages/156303.png b/img/beverages/156303.png
new file mode 100644
index 0000000..193bc24
Binary files /dev/null and b/img/beverages/156303.png differ
diff --git a/img/beverages/156503.png b/img/beverages/156503.png
new file mode 100644
index 0000000..ea94af2
Binary files /dev/null and b/img/beverages/156503.png differ
diff --git a/img/beverages/156603.png b/img/beverages/156603.png
new file mode 100644
index 0000000..17b6d47
Binary files /dev/null and b/img/beverages/156603.png differ
diff --git a/img/beverages/157503.png b/img/beverages/157503.png
new file mode 100644
index 0000000..fbb1112
Binary files /dev/null and b/img/beverages/157503.png differ
diff --git a/img/beverages/157803.png b/img/beverages/157803.png
new file mode 100644
index 0000000..ab2f4df
Binary files /dev/null and b/img/beverages/157803.png differ
diff --git a/img/beverages/157903.png b/img/beverages/157903.png
new file mode 100644
index 0000000..3252d16
Binary files /dev/null and b/img/beverages/157903.png differ
diff --git a/img/beverages/158201.png b/img/beverages/158201.png
new file mode 100644
index 0000000..3e48968
Binary files /dev/null and b/img/beverages/158201.png differ
diff --git a/img/beverages/159412.png b/img/beverages/159412.png
new file mode 100644
index 0000000..a46e2a1
Binary files /dev/null and b/img/beverages/159412.png differ
diff --git a/img/beverages/160601.png b/img/beverages/160601.png
new file mode 100644
index 0000000..c8a485a
Binary files /dev/null and b/img/beverages/160601.png differ
diff --git a/img/beverages/161503.png b/img/beverages/161503.png
new file mode 100644
index 0000000..57ba66a
Binary files /dev/null and b/img/beverages/161503.png differ
diff --git a/img/beverages/162003.png b/img/beverages/162003.png
new file mode 100644
index 0000000..1ec3201
Binary files /dev/null and b/img/beverages/162003.png differ
diff --git a/img/beverages/162601.png b/img/beverages/162601.png
new file mode 100644
index 0000000..680df7c
Binary files /dev/null and b/img/beverages/162601.png differ
diff --git a/img/beverages/162703.png b/img/beverages/162703.png
new file mode 100644
index 0000000..e38691a
Binary files /dev/null and b/img/beverages/162703.png differ
diff --git a/img/beverages/164903.png b/img/beverages/164903.png
new file mode 100644
index 0000000..52e805a
Binary files /dev/null and b/img/beverages/164903.png differ
diff --git a/img/beverages/165103.png b/img/beverages/165103.png
new file mode 100644
index 0000000..fcea55a
Binary files /dev/null and b/img/beverages/165103.png differ
diff --git a/img/beverages/165403.png b/img/beverages/165403.png
new file mode 100644
index 0000000..0f5c449
Binary files /dev/null and b/img/beverages/165403.png differ
diff --git a/img/beverages/165903.png b/img/beverages/165903.png
new file mode 100644
index 0000000..ac08426
Binary files /dev/null and b/img/beverages/165903.png differ
diff --git a/img/beverages/166703.png b/img/beverages/166703.png
new file mode 100644
index 0000000..3d3ba39
Binary files /dev/null and b/img/beverages/166703.png differ
diff --git a/img/beverages/168103.png b/img/beverages/168103.png
new file mode 100644
index 0000000..a54d9da
Binary files /dev/null and b/img/beverages/168103.png differ
diff --git a/img/beverages/168701.png b/img/beverages/168701.png
new file mode 100644
index 0000000..d1d8d22
Binary files /dev/null and b/img/beverages/168701.png differ
diff --git a/img/beverages/168803.png b/img/beverages/168803.png
new file mode 100644
index 0000000..3f379ae
Binary files /dev/null and b/img/beverages/168803.png differ
diff --git a/img/beverages/169301.png b/img/beverages/169301.png
new file mode 100644
index 0000000..be467ce
Binary files /dev/null and b/img/beverages/169301.png differ
diff --git a/img/beverages/171903.png b/img/beverages/171903.png
new file mode 100644
index 0000000..d7b8658
Binary files /dev/null and b/img/beverages/171903.png differ
diff --git a/img/beverages/178503.png b/img/beverages/178503.png
new file mode 100644
index 0000000..42752be
Binary files /dev/null and b/img/beverages/178503.png differ
diff --git a/img/beverages/180202.png b/img/beverages/180202.png
new file mode 100644
index 0000000..8401172
Binary files /dev/null and b/img/beverages/180202.png differ
diff --git a/img/beverages/181803.png b/img/beverages/181803.png
new file mode 100644
index 0000000..52558c5
Binary files /dev/null and b/img/beverages/181803.png differ
diff --git a/img/beverages/181902.png b/img/beverages/181902.png
new file mode 100644
index 0000000..232640c
Binary files /dev/null and b/img/beverages/181902.png differ
diff --git a/img/beverages/181903.png b/img/beverages/181903.png
new file mode 100644
index 0000000..232640c
Binary files /dev/null and b/img/beverages/181903.png differ
diff --git a/img/beverages/182603.png b/img/beverages/182603.png
new file mode 100644
index 0000000..c3ea95b
Binary files /dev/null and b/img/beverages/182603.png differ
diff --git a/img/beverages/183203.png b/img/beverages/183203.png
new file mode 100644
index 0000000..320e586
Binary files /dev/null and b/img/beverages/183203.png differ
diff --git a/img/beverages/186602.png b/img/beverages/186602.png
new file mode 100644
index 0000000..22d1eff
Binary files /dev/null and b/img/beverages/186602.png differ
diff --git a/img/beverages/187702.png b/img/beverages/187702.png
new file mode 100644
index 0000000..c331cb6
Binary files /dev/null and b/img/beverages/187702.png differ
diff --git a/img/beverages/190002.png b/img/beverages/190002.png
new file mode 100644
index 0000000..1e2fe08
Binary files /dev/null and b/img/beverages/190002.png differ
diff --git a/img/beverages/191402.png b/img/beverages/191402.png
new file mode 100644
index 0000000..92e23fd
Binary files /dev/null and b/img/beverages/191402.png differ
diff --git a/img/beverages/192003.png b/img/beverages/192003.png
new file mode 100644
index 0000000..ee6760a
Binary files /dev/null and b/img/beverages/192003.png differ
diff --git a/img/beverages/192201.png b/img/beverages/192201.png
new file mode 100644
index 0000000..e2d722f
Binary files /dev/null and b/img/beverages/192201.png differ
diff --git a/img/beverages/193002.png b/img/beverages/193002.png
new file mode 100644
index 0000000..4d04d8d
Binary files /dev/null and b/img/beverages/193002.png differ
diff --git a/img/beverages/194203.png b/img/beverages/194203.png
new file mode 100644
index 0000000..c4c2536
Binary files /dev/null and b/img/beverages/194203.png differ
diff --git a/img/beverages/194703.png b/img/beverages/194703.png
new file mode 100644
index 0000000..dec9bd2
Binary files /dev/null and b/img/beverages/194703.png differ
diff --git a/img/beverages/196303.png b/img/beverages/196303.png
new file mode 100644
index 0000000..07185d2
Binary files /dev/null and b/img/beverages/196303.png differ
diff --git a/img/beverages/197302.png b/img/beverages/197302.png
new file mode 100644
index 0000000..edcc367
Binary files /dev/null and b/img/beverages/197302.png differ
diff --git a/img/beverages/198902.png b/img/beverages/198902.png
new file mode 100644
index 0000000..2516517
Binary files /dev/null and b/img/beverages/198902.png differ
diff --git a/img/beverages/202801.png b/img/beverages/202801.png
new file mode 100644
index 0000000..1f5dfee
Binary files /dev/null and b/img/beverages/202801.png differ
diff --git a/img/beverages/207504.png b/img/beverages/207504.png
new file mode 100644
index 0000000..907eb74
Binary files /dev/null and b/img/beverages/207504.png differ
diff --git a/img/beverages/209702.png b/img/beverages/209702.png
new file mode 100644
index 0000000..d8de170
Binary files /dev/null and b/img/beverages/209702.png differ
diff --git a/img/beverages/212002.png b/img/beverages/212002.png
new file mode 100644
index 0000000..c0d302d
Binary files /dev/null and b/img/beverages/212002.png differ
diff --git a/img/beverages/214401.png b/img/beverages/214401.png
new file mode 100644
index 0000000..d7d13ea
Binary files /dev/null and b/img/beverages/214401.png differ
diff --git a/img/beverages/218002.png b/img/beverages/218002.png
new file mode 100644
index 0000000..4df761b
Binary files /dev/null and b/img/beverages/218002.png differ
diff --git a/img/beverages/223301.png b/img/beverages/223301.png
new file mode 100644
index 0000000..ae13cd5
Binary files /dev/null and b/img/beverages/223301.png differ
diff --git a/img/beverages/2280301.png b/img/beverages/2280301.png
new file mode 100644
index 0000000..0f9709a
Binary files /dev/null and b/img/beverages/2280301.png differ
diff --git a/img/beverages/232202.png b/img/beverages/232202.png
new file mode 100644
index 0000000..b1d7c28
Binary files /dev/null and b/img/beverages/232202.png differ
diff --git a/img/beverages/266201.png b/img/beverages/266201.png
new file mode 100644
index 0000000..93114ae
Binary files /dev/null and b/img/beverages/266201.png differ
diff --git a/img/beverages/277301.png b/img/beverages/277301.png
new file mode 100644
index 0000000..d8344fb
Binary files /dev/null and b/img/beverages/277301.png differ
diff --git a/img/beverages/278002.png b/img/beverages/278002.png
new file mode 100644
index 0000000..5ec7fdd
Binary files /dev/null and b/img/beverages/278002.png differ
diff --git a/img/beverages/591401.png b/img/beverages/591401.png
new file mode 100644
index 0000000..a2533b8
Binary files /dev/null and b/img/beverages/591401.png differ
diff --git a/img/beverages/601202.png b/img/beverages/601202.png
new file mode 100644
index 0000000..ae22a1e
Binary files /dev/null and b/img/beverages/601202.png differ
diff --git a/img/beverages/604504.png b/img/beverages/604504.png
new file mode 100644
index 0000000..e7d5948
Binary files /dev/null and b/img/beverages/604504.png differ
diff --git a/img/beverages/614601.png b/img/beverages/614601.png
new file mode 100644
index 0000000..030375d
Binary files /dev/null and b/img/beverages/614601.png differ
diff --git a/img/beverages/645901.png b/img/beverages/645901.png
new file mode 100644
index 0000000..3fcd1d5
Binary files /dev/null and b/img/beverages/645901.png differ
diff --git a/img/beverages/649801.png b/img/beverages/649801.png
new file mode 100644
index 0000000..fad9caf
Binary files /dev/null and b/img/beverages/649801.png differ
diff --git a/img/beverages/651201.png b/img/beverages/651201.png
new file mode 100644
index 0000000..b28ce9a
Binary files /dev/null and b/img/beverages/651201.png differ
diff --git a/img/beverages/658102.png b/img/beverages/658102.png
new file mode 100644
index 0000000..c4d683c
Binary files /dev/null and b/img/beverages/658102.png differ
diff --git a/img/beverages/667102.png b/img/beverages/667102.png
new file mode 100644
index 0000000..a9b22cc
Binary files /dev/null and b/img/beverages/667102.png differ
diff --git a/img/beverages/669702.png b/img/beverages/669702.png
new file mode 100644
index 0000000..8dd0eb0
Binary files /dev/null and b/img/beverages/669702.png differ
diff --git a/img/beverages/693502.png b/img/beverages/693502.png
new file mode 100644
index 0000000..47f367d
Binary files /dev/null and b/img/beverages/693502.png differ
diff --git a/img/beverages/721801.png b/img/beverages/721801.png
new file mode 100644
index 0000000..574da2e
Binary files /dev/null and b/img/beverages/721801.png differ
diff --git a/img/beverages/746902.png b/img/beverages/746902.png
new file mode 100644
index 0000000..6cda2f6
Binary files /dev/null and b/img/beverages/746902.png differ
diff --git a/img/beverages/8916315.png b/img/beverages/8916315.png
new file mode 100644
index 0000000..2ccfbae
Binary files /dev/null and b/img/beverages/8916315.png differ
diff --git a/img/beverages/8953903.png b/img/beverages/8953903.png
new file mode 100644
index 0000000..ded3814
Binary files /dev/null and b/img/beverages/8953903.png differ
diff --git a/img/beverages/8962903.png b/img/beverages/8962903.png
new file mode 100644
index 0000000..4e3c4aa
Binary files /dev/null and b/img/beverages/8962903.png differ
diff --git a/img/beverages/8966103.png b/img/beverages/8966103.png
new file mode 100644
index 0000000..521ac67
Binary files /dev/null and b/img/beverages/8966103.png differ
diff --git a/img/beverages/8967303.png b/img/beverages/8967303.png
new file mode 100644
index 0000000..694e78f
Binary files /dev/null and b/img/beverages/8967303.png differ
diff --git a/img/beverages/8968701.png b/img/beverages/8968701.png
new file mode 100644
index 0000000..e63dfa2
Binary files /dev/null and b/img/beverages/8968701.png differ
diff --git a/img/load-icon.gif b/img/load-icon.gif
new file mode 100644
index 0000000..04eb891
Binary files /dev/null and b/img/load-icon.gif differ
diff --git a/img/other-icon.png b/img/other-icon.png
new file mode 100644
index 0000000..ce51207
Binary files /dev/null and b/img/other-icon.png differ
diff --git a/img/ship.png b/img/ship.png
new file mode 100644
index 0000000..4c5c4a0
Binary files /dev/null and b/img/ship.png differ
diff --git a/js/beer.js b/js/beer.js
index 3d05882..710c549 100644
--- a/js/beer.js
+++ b/js/beer.js
@@ -8,13 +8,18 @@ $(document).ready(function() {
     jQueryBindings.undoBind();
     jQueryBindings.redoBind();
     jQueryBindings.prepareDrag();
+    jQueryBindings.showAll();
+    jQueryBindings.showBeer();
+    jQueryBindings.showWine();
 
     $(window).bind('scroll', function() {
-        var navHeight = $(window).height() - 200;
-        if ($(window).scrollTop() > navHeight) {
-            $('#rightSide').css({'position': 'fixed', 'top': '10px'});
+        var roof = 160;
+        if ($(window).scrollTop() > roof) {
+            $('#rightSide').css({'position': 'fixed', 'top': '60px'});
+            $('#cost').css({'position': 'fixed', 'top': '380px'});
         } else {
-            $('#rightSide').css('position', 'absolute');
+            $('#rightSide').css({'position': 'absolute', 'top': '0px'});
+            $('#cost').css({'position': 'absolute', 'top': '320px'});
         }
     });
 
diff --git a/js/login.js b/js/login.js
index c5d5bae..b0e5a8e 100644
--- a/js/login.js
+++ b/js/login.js
@@ -6,6 +6,7 @@ function authentification(login, pass, ref) {
     if(data.type != "error"){
       //TO DO: get id
         localStorage.setItem("user", login);
+        localStorage.setItem("password", pass);
         localStorage.setItem("user_id", data.payload[0].user_id);
         localStorage.setItem("assets", data.payload[0].assets);
         localStorage["isLoggedIn"] =  true;
diff --git a/js/mainObjects.js b/js/mainObjects.js
deleted file mode 100644
index 4eb53ab..0000000
--- a/js/mainObjects.js
+++ /dev/null
@@ -1,174 +0,0 @@
-var $leftList = $('#leftList');
-var $rightList = $('#rightList');
-var $rightSide = $('#rightSide');
-var $cost = $('#cost');
-var $finalCost = $('#finalCost');
-//HTML VARIABLES
-var leftListItem =
-    "<li id='item' class='listItem' name='{{namn}}'><span>{{namn}}" +
-    "</span><span>{{pub_price}} kr</span>" +
-    "<button id='add' data-id='{{beer_id}}' name='{{namn}}' class='button' data-i18n='button.addtocart'" +
-    "price='{{pub_price}}'>Add to cart</button></li>";
-
-var leftListItemRed = 
-    "<li style='color:red;' id='item' class='listItem' name='{{namn}}'><span>{{namn}}" +
-    "</span><span>{{pub_price}} kr</span>" +
-    "</li>";
-
-var rightListItem = 
-    "<li data-id='{{id}}'>{{name}} <span id='{{id}}'>({{amount}})</span><p><br>" +
-    "{{price}} kr</p><button class='button' data-id='{{id}}'" +
-    "id=remove price='{{price}}' name='{{name}}'>X</button></li>";
-
-var costItem = 
-    "<p cost='{{total}}'>Total: {{total}} kr</p>";
-
-//INDEPENDENT FUNCTIONS
-function partOf(value, name) {
-    index = 1;
-    valueLow = value.toLowerCase();
-    nameLow = name.toLowerCase();
-    if (nameLow.search(valueLow) == -1) {
-        return false;
-    }
-    return true;
-}
-
-//MAIN OBJECTS
-var beerList = {
-    stockCount: {}, 
-    //Methods
-    listBeer: function(beer) {
-        if (beer.namn != "") {
-            if (beer.count < 1) {
-                $leftList.append(Mustache.render(leftListItemRed, beer));
-            } else {
-                this.stockCount[beer.beer_id] = beer.count;
-                $leftList.append(Mustache.render(leftListItem, beer));
-            }
-        }
-    },
-};
-var order = {
-    orderList: {},
-    //Methods
-    load: function() {
-        $rightList.empty();
-        $.each(this.orderList, function(key, value) {
-            $rightList.append(Mustache.render(rightListItem, value));
-        });
-    },
-    addOrder: function(id, name, thisPrice) {
-        if (beerList.stockCount[id] > 0) {
-            beerList.stockCount[id] -= 1;
-            if (name.length > 18) {
-                name = name.substring(0, 15).concat("...");
-            }
-            if (this.orderList[id] != undefined) {
-                this.orderList[id]['amount'] += 1;
-            } else {
-                this.orderList[id] = {'id': id, 'name': name, 'price': thisPrice, 'amount': 1};
-            }
-            order.load();
-            priceObj.total = priceObj.total + parseInt(thisPrice);
-            priceObj.addCost();
-        } else {
-            alert('No more of this beer in stock!'); 
-        }
-    },
-    removeOrder: function(id, thisPrice) {
-        var thisOrder = this.orderList[id];
-        if (thisOrder != undefined){
-            beerList.stockCount[id] += 1;
-            if (thisOrder['amount'] == 1) {
-                delete this.orderList[id];
-                $("ul li[data-id=" + id + "]").remove();
-            } else {
-                thisOrder['amount'] -= 1;
-            }
-            order.load();
-            priceObj.total = priceObj.total-parseInt(thisPrice);
-            priceObj.addCost(priceObj);
-        };
-    },
-};
-var priceObj = {
-    total: 0,
-    //Methods
-    addCost: function() {
-        var priceObject = this;
-        $cost.html(Mustache.render(costItem, priceObject));
-        $finalCost.html(Mustache.render(costItem, priceObject));
-    }
-};
-var jQueryBindings = {
-    getAll: function() {
-        $.ajax({
-            type: 'GET',
-            url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_get',
-            success: function(object) {
-                data = object['payload'];
-                $.each(data, function(i, beer) {
-                    beerList.listBeer(beer);
-                });
-            }
-        });
-    },
-    searchBind: function() {
-        $('.search').keyup(function(e) {
-            var value = $(this).val();
-            $('li').each(function() {
-                var name = $(this).attr('name');
-                if (value == "" || name == "undefined" || partOf(value, name)) {
-                    $(this).show();
-                } else {
-                    $(this).hide();
-                }
-            });
-        });
-    },
-    addBind: function() {
-        $leftList.delegate('#add', 'click', function() {
-            var id = $(this).attr('data-id');
-            var name = $(this).attr('name');
-            var price = $(this).attr('price');
-            var command = new addToOrder(order, id, name, price);
-            undoRedoStack.push(command);
-            button.click(command);
-        });
-    },
-    removeBind: function() {
-        $rightList.delegate('#remove', 'click', function(){
-            var id = $(this).attr('data-id');
-            var name = $(this).attr('name');
-            var price = $(this).attr('price');
-            var command = new removeFromOrder(order, id, name, price);
-            undoRedoStack.push(command);
-            button.click(command);
-        });
-    },
-    undoBind: function() {
-        $rightSide.delegate('#undoButton', 'click', function(){
-            if (!undoRedoStack.isUnder()) {
-                var command = undoRedoStack.undo();
-                button.clickUndo(command);
-            }
-        });
-    },
-    redoBind: function() {
-        $rightSide.delegate('#redoButton', 'click', function(){
-            if (!undoRedoStack.isOver()) {
-                var command = undoRedoStack.redo();
-                button.clickRedo(command);
-            }
-        });
-    },
-    payBind: function() {
-        $('#payButton').on('click', function() {
-            localStorage.setItem("order", JSON.stringify(order.orderList));
-            localStorage.setItem("total", priceObj.total.toString());
-            localStorage.setItem("stockCount", JSON.stringify(beerList.stockCount));
-        });
-    },
-};
-
diff --git a/js/order.js b/js/order.js
index 4dee2fb..a033484 100644
--- a/js/order.js
+++ b/js/order.js
@@ -9,21 +9,45 @@ var leftListItem =
     "</span><span>{{price}} kr</span>" +
     "<button id='add' data-id='{{id}}' name='{{name}}' itemType='{{type}}' class='button'" +
     "data-i18n='button.addtocart'" +
-    "price='{{price}}' data-i18n='addCart'>Add to cart</button><img src='../img/{{type}}-icon.png'" +
+    "price='{{price}}' data-i18n='addCart'>{{lang}}</button><img src='../img/{{type}}-icon.png'" +
     "height='40' width='40' id='icon' draggable='true' ondragstart='dnd.drag(event)'" +
+    "dataid='{{id}}' name='{{name}}' price='{{price}}' itemType='{{type}}'></li>";
+
+var leftListItemLoad =
+    "<li id='item' class='listItem' name='{{name}}'><span>{{name}}" +
+    "</span><span>{{price}} kr</span>" +
+    "<button id='add' data-id='{{id}}' name='{{name}}' itemType='{{type}}' class='button'" +
+    "data-i18n='button.addtocart'" +
+    "price='{{price}}' data-i18n='addCart'>{{lang}}</button><img src='../img/load-icon.gif'" +
+    "height='35' width='35'" +
     "dataid='{{id}}' name='{{name}}' price='{{price}}'></li>";
 
+var leftListItemNoStock =
+    "<li id='item' class='listItem' name='{{name}}'><span>{{name}}" +
+    "</span><span>{{price}} kr</span><span>Out of stock.</span>" +
+    "<img src='../img/{{type}}-icon.png' id='icon' height='40' width='40'>" +
+    "</li>";
+
+var leftListItemNoStockLoad =
+    "<li id='item' class='listItem' name='{{name}}'><span>{{name}}" +
+    "</span><span>{{price}} kr</span><span>Out of stock.</span>" +
+    "<img src='../img/load-icon.gif' id='icon' height='35' width='35'>" +
+    "</li>";
+
 var rightListItem = 
     "<li data-id='{{id}}'>{{name}} <span id='{{id}}'>({{amount}})</span><p><br>" +
-    "{{price}} kr</p><button class='button' data-id='{{id}}'" +
+    "{{price}} kr <img src='../img/{{type}}-icon.png' height='20' width='20'></p>" +
+    "<button class='button' data-id='{{id}}' itemType='{{type}}'" +
     "id=remove price='{{price}}' name='{{name}}'>X</button></li>";
 
 var costItem = 
+    "<p>---</p><p cost='{{total}}'>Total: {{total}} kr</p>";
+
+var costItemPP = 
     "<p cost='{{total}}'>Total: {{total}} kr</p>";
 
 //INDEPENDENT FUNCTIONS
 function partOf(value, name) {
-    index = 1;
     valueLow = value.toLowerCase();
     nameLow = name.toLowerCase();
     if (nameLow.search(valueLow) == -1) {
@@ -36,52 +60,85 @@ function partOf(value, name) {
 var items = {
     stockCount: {}, 
     itemList: {},
+    typeCount: 0,
+    itemListLength: 0,
     //Methods
     listItem: function(item) {
         if (item.name != "") {
+            this.stockCount[item.id] = item.count;
             if (item.count > 0) {
-                this.stockCount[item.id] = item.count;
-                $leftList.append(Mustache.render(leftListItem, item));
+                if (item.type == "load") {
+                    $leftList.append(Mustache.render(leftListItemLoad, item));
+                } else {
+                    $leftList.append(Mustache.render(leftListItem, item));
+                }
+            } else {
+                if (item.type == "load") {
+                    $leftList.append(Mustache.render(leftListItemNoStockLoad, item));
+                } else {
+                    $leftList.append(Mustache.render(leftListItemNoStock, item));
+                }
             }
         }
     },
-    load: function() {
-        $.each(this.itemList, function(key, value) {
-            this.listItem(value);
+    load: function(type) {
+        $leftList.empty();
+        $.each(items.itemList, function(key, value) {
+            if (type == "all") {
+                items.listItem(value);
+            } else {
+                if (type == value.type) {
+                    items.listItem(value);
+                }
+            }
         }); 
     },
     getAll: function() {
         $.ajax({
             type: 'GET',
-            url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_get',
-            success: function(object1) {
-                var data1 = object1['payload'];
-                $.each(data1, function(i, item) {
+            url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=inventory_get',
+            success: function(object) {
+                var data = object['payload'];
+                items.itemListLength = Object.keys(data).length;
+                $.each(data, function(i, item) {
                     var id = item.beer_id;
                     var name = item.namn;
                     var price = item.pub_price;
                     var count = item.count;
-                    $.ajax({
-                        type: 'GET',
-                        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=beer_data_get&beer_id=' + id,
-                        success: function(object2) {
-                            var data2 = object2['payload'];
-                            if (data2[0] != undefined) {
-                                var typeDesc = data2[0]['varugrupp'];
-                                if (partOf("öl", typeDesc)) {
-                                    items.itemList[id] = {'id': id, 'name': name, 'price': price, 'count': count, 'type': 'beer'};
-                                    items.listItem(items.itemList[id]);
-                                } else if (partOf("vin", typeDesc)) {
-                                    items.itemList[id] = {'id': id, 'name': name, 'price': price, 'count': count, 'type': 'wine'};
-                                    items.listItem(items.itemList[id]);
-                                }
-                            }
-                        }
-                    });
+                    items.itemList[id] = {'id': id, 'name': name, 'price': price, 'count': count, 'type': 'load'};
+                    if (localStorage.getItem("language") == "sw") {
+                        items.itemList[id]['lang'] = 'L\xE4gg i varukorg';
+                    } else {
+                        items.itemList[id]['lang'] = 'Add to cart';
+                    }
+                    items.listItem(items.itemList[id]);
+                    items.setType(id);
                 });
             }
         });
     },
+    setType: function(id) {
+        $.when($.ajax({
+            type: 'GET',
+            url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=beer_data_get&beer_id=' + id,
+            success: function(object) {
+                var data = object['payload'];
+                if (data[0] != undefined) {
+                    var typeDesc = data[0]['varugrupp'];
+                    if (partOf("vin", typeDesc)) {
+                        items.itemList[id]['type'] = 'wine';
+                    } else {
+                        items.itemList[id]['type'] = 'beer';
+                    }
+                }
+                items.typeCount++;
+            }
+        })).then(function() {
+            if (items.typeCount == items.itemListLength) {
+                items.load("all");
+            }
+        });
+    }
 };
 var order = {
     orderList: {},
@@ -132,7 +189,7 @@ var priceObj = {
     addCost: function() {
         var priceObject = this;
         $cost.html(Mustache.render(costItem, priceObject));
-        $finalCost.html(Mustache.render(costItem, priceObject));
+        $finalCost.html(Mustache.render(costItemPP, priceObject));
     }
 };
 var jQueryBindings = {
@@ -189,9 +246,17 @@ var jQueryBindings = {
     },
     payBind: function() {
         $('#payButton').on('click', function() {
-            localStorage.setItem("order", JSON.stringify(order.orderList));
-            localStorage.setItem("total", priceObj.total.toString());
-            localStorage.setItem("stockCount", JSON.stringify(items.stockCount));
+            var assets = localStorage.getItem("assets");
+            if (Object.keys(order.orderList) == 0) {
+                alert("Please choose at least one item.");
+            } else if (assets-priceObj.total < -1000) {
+                alert("You don't have enough credit!");
+            } else {
+                localStorage.setItem("order", JSON.stringify(order.orderList));
+                localStorage.setItem("total", priceObj.total.toString());
+                localStorage.setItem("stockCount", JSON.stringify(items.stockCount));
+                window.location.href = "paypage.html";
+            }
         });
     },
     prepareDrag: function() {
@@ -202,6 +267,21 @@ var jQueryBindings = {
             dnd.type = $(this).attr('itemType');
         });
     },
+    showAll: function() {
+        $('#showAll').on('click', function() {
+            items.load("all");
+        });
+    },
+    showBeer: function() {
+        $('#showBeer').on('click', function() {
+            items.load("beer");
+        });
+    },
+    showWine: function() {
+        $('#showWine').on('click', function() {
+            items.load("wine");
+        });
+    },
 };
 var dnd = {
     id: null,
@@ -213,7 +293,7 @@ var dnd = {
         e.dataTransfer.setData("id", this.id);
         e.dataTransfer.setData("name", this.name);
         e.dataTransfer.setData("price", this.price);
-        e.dataTransfer.setData("type", this.price);
+        e.dataTransfer.setData("type", this.type);
     }, 
     allow: function(e) {
         e.preventDefault();
diff --git a/js/paypage.js b/js/paypage.js
index d2aff9b..6b8fe25 100644
--- a/js/paypage.js
+++ b/js/paypage.js
@@ -1,19 +1,14 @@
 
 $(document).ready(function() {
-    //var $rightList = $('#rightList');
-    //var rightListItem =
-    //    "<li data-id='{{id}}'>{{name}} <span id='{{id}}'>({{amount}})</span><p><br>" +
-    //    "{{price}} kr</p><button class='button' data-id='{{id}}'" +
-    //    "id=remove price='{{price}}'>X</button></li>";
     orderList = JSON.parse( localStorage.getItem("order"));
     totalPrice = JSON.parse( localStorage.getItem("total"));
     credit =  JSON.parse( localStorage.getItem("assets"));
     stockCount =  JSON.parse( localStorage.getItem("stockCount"));
     order.orderList = orderList;
     items.stockCount = stockCount;
-    order.load();
     priceObj.total = totalPrice;
     priceObj.addCost();
+    order.load();
     jQueryBindings.addBind();
     jQueryBindings.removeBind();
     jQueryBindings.undoBind();
@@ -22,39 +17,47 @@ $(document).ready(function() {
     var $credit = $('#credit');
     $credit.html("<p>Credit: " + credit +"</p>");
 
-
-$('#confirm_btn').on('click', function(){
-    $.each(orderList, function(key,value) {
-        for (var i = 0; i < value.amount; i++){
-            $.ajax({
-                type: 'POST',
-                url:'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=purchases_append&beer_id=' + key,
-
-                success: function (object) {
-                    console.log("success");
-                 //  alert("Succesful purchase!");
-                   // print("Bought drink succesfull");
-                }
-            });
-        }
-        alert("Succesful purchase!");
+    var itemCount = 0;
+    var successCount = 0;
+    $('#confirm_btn').on('click', function(){
+        $.when($.each(orderList, function(key,value) {
+            $('#confirm_editer').html('<img src="../img/load-icon.gif">');
+            for (var i=0; i < value.amount; i++){
+                itemCount++;
+                $.ajax({
+                    type: 'POST',
+                    url:'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=purchases_append&beer_id=' + key,
+                    async: false,
+                    success: function (object) {
+                        successCount++; 
+                    }
+                });            
+            }
+        })).then(function() {
+            if (successCount == itemCount) {
+                $("#success").removeClass("hidden");  
+                var tmpAssets = localStorage.getItem("assets");
+                localStorage.setItem("assets", tmpAssets-priceObj.total);
+                window.location.href = "beer.html";
+            } else {
+                alert("Error while making purchase!");
+            }
+        });
     });
-});
 
-$('#cancel_btn').on('click', function(){
-    window.location.href='beer.html';
-});
+    $('#cancel_btn').on('click', function(){
+        $("#black_wrapper, #confirm_editer").fadeOut();
+    });
 
-$("#paymentButton").on("click", function () {
-    $("#black_wrapper, #confirm_editer, #confirm_btn, #cancel_btn").fadeIn().removeClass("hidden");    
-    //$("#black_wrapper, #confirm_editer").fadeIn().addClass("showing");    
+    $("#paymentButton").on("click", function () {
+        $("#black_wrapper, #confirm_editer, #confirm_btn, #cancel_btn").fadeIn().removeClass("hidden");    
+        //$("#black_wrapper, #confirm_editer").fadeIn().addClass("showing");    
     });
 
     //On background press, fade out the background
     $("#black_wrapper").on("click", function () {
         $("#black_wrapper, #confirm_editer").fadeOut();
     });
-
 });
 
 
diff --git a/js/settings.js b/js/settings.js
index 2d8d084..12ac8a6 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -4,7 +4,7 @@ var stockItem =
     "<span id='name2'>{{namn2}} </span>" + 
     "<span id='count'>{{count}}</span>" +
     "<button class='button' data-id='{{beer_id}}' data-type='drink' name='{{namn}}' name2='{{namn2}}' count='{{count}}'" +
-    " id='add'>Edit</button>" +
+    " id='edit_btn'>Edit</button>" +
     "</li>";
 
 var userList =
@@ -14,7 +14,7 @@ var userList =
     "<span id='lname'>{{last_name}}</span>" + 
     "<span id='assets'>{{assets}}</span>" +
     "<button class='button' data-id='{{username}}' data-type='user' name='{{username}}' fname='{{first_name}}' lname='{{last_name}}'' assets='{{assets}}' " +
-    " id='add'>Edit</button>" +
+    " id='edit_btn'>Edit</button>" +
     "</li>";
 
 var $beer = $('#stock_container');
@@ -64,7 +64,6 @@ function insertItemValues (item, type) {
     };
     content += '<br/><br/><br/>';
     content += '<button class="button" id="' + type + '_save" onclick="saveItem(\'' + type + '\')">Save</button>';
-    //content += '<button class="button" id="' + type + '_save">Save</button>';
     $("#" + type + "_values").append(content);
 
 }
@@ -83,40 +82,38 @@ function saveItem (arg) {
             
             var old_value = itemInList.text();
             var id;
-            $.ajax({
+            $('#item_editer').html('<img src="../img/load-icon.gif">');
+            $.when($.ajax({
                 type: 'GET',
-                url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=' + user + '&password=' + user + '&action=iou_get',
+                url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=iou_get',
                 success: function(data) {
-                    if(data.type != "error") {
-                        print("got user_id succesfull");
-                        id = data.payload[0].user_id; 
-                        $.ajax({
-                            type: 'GET',
-                            url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=payments_append&user_id='+id+'&amount='+add,
-                            success: function(data2) {if(data2.type != "error") {print("saved user succesfull");}else{print("Error :(")};}
-                        });
-                        var new_value = parseInt(old_value) + parseInt(add);
-                        $(itemInList).text(new_value);
-                        $("#item_" + user + " button.button").attr('assets', new_value);
-                    }else{
-                        print("Error: Didn't find user_id");
-                    };                    
+                    var id = data.payload[0].user_id; 
+                    var assets = data.payload[0].assets; 
+                    $.ajax({
+                        type: 'GET',
+                        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=payments_append&user_id='+id+'&amount='+add,
+                        async: false,
+                        success: function(data2) {
+                            var newAsset = parseInt(assets)+parseInt(add);
+                            localStorage.setItem("assets", newAsset);
+                        }
+                    });
                 }
-            });
+            }),
             $.ajax({
                 type: 'GET',
                 url: "http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=user_edit&new_username=" + user + "&new_password=" + user + "&first_name=" + fname + "&last_name=" + lname + "&email=''&phone=''",
                 success: function (data) {
-                    if(data.type != "error") {
-                        $(itemInListFN).text(fname);
-                        $(itemInListLN).text(lname);
-                        print("Update names succesfull");
-                    }else{
-                        print("Error: Didn't update names");
-                    };
+                    $(itemInListFN).text(fname);
+                    $(itemInListLN).text(lname);
+                },
+                error: function(data) {
+                    print("Error: Didn't update names");
                 }
+            })).then(function() {
+                $("#black_wrapper, #item_editer").fadeOut();
+                window.location.reload();
             });
-            $("#black_wrapper, #item_editer").fadeOut();
             break;
 
         case "drink":
@@ -126,14 +123,17 @@ function saveItem (arg) {
             var old_value = itemInList.text();            
             var new_value = parseInt(old_value) + parseInt(add);
             if (new_value<0) {add = parseInt(add) + Math.abs(new_value);new_value=0;}; 
-            $.ajax({
+            $('#item_editer').html('<img src="../img/load-icon.gif">');
+            $.when($.ajax({
                 type: 'GET',
-                url: "http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_append&beer_id=" + id + "&amount=" + add + "&price=''",
-                success: function(object) {if(data.type != "error") {print("saved user succesfull");}else{print("Error :(")};}
+                url: "http://pub.jamaica-inn.net/fpdb/api.php?username="+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=inventory_append&beer_id=' + id + "&amount=" + add + "&price=''",
+                success: function(object) {
+                    print("saved drink succesfull");
+                }
+            })).then(function() {
+                $("#black_wrapper, #item_editer").fadeOut();
+                window.location.reload();
             });
-            $(itemInList).text(new_value);
-            $("#item_" + id + " button.button").attr('count', new_value);
-            $("#black_wrapper, #item_editer").fadeOut();
             break;
         
         default: 
@@ -145,10 +145,10 @@ function printInfo (id) {
     $("#rightSide").empty();
     $.ajax({
         type: 'GET',
-        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=beer_data_get&beer_id=' + id,
+        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=beer_data_get&beer_id=' + id,
         success: function (data) {
             if (data.type != "error") {
-                var content = "<table>";
+                var content = "<img src='../img/beverages/" + id + ".png'><table>";
                 $.each(data['payload'][0], function (index, value) {
                     content += "<tr><td>" + index + "</td><td>" + value + "</td></tr>";
                 });
@@ -165,7 +165,7 @@ $(document).ready(function() {
 
     $.ajax({
         type: 'GET',
-        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_get',
+        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=inventory_get',
         success: function(object) {
             data = object['payload'];
             $.each(data, function(i, beer) {
@@ -175,10 +175,13 @@ $(document).ready(function() {
     });
     $.ajax({
         type: 'GET',
-        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=iou_get_all',
+        url: 'http://pub.jamaica-inn.net/fpdb/api.php?username='+localStorage.getItem("user")+'&password='+localStorage.getItem("password")+'&action=iou_get_all',
         success: function(object) {
             data = object['payload'];
             $.each(data, function(i, user) {
+                if (localStorage.getItem("user") == user.username) {
+                    localStorage.setItem("assets", parseInt(user.assets));
+                }
                 addUser(user);
             });
         }
@@ -186,13 +189,13 @@ $(document).ready(function() {
     // function to hide and show user and stock on a click
     $user.hide();
     $("#stock_btn").on("click", function () {
-        $beer.show();
         $user.hide();
-        $("#rightSide").show().text("Click on the dink for more info");
+        $beer.show();
+        $("#rightSide").show().text("Click on the list item for more info.");
     });
     $("#user_btn").on("click", function () {
-        $user.show();
         $beer.hide();
+        $user.show();
         $("#rightSide").hide()
     });
     
@@ -210,7 +213,6 @@ $(document).ready(function() {
     
     // On button press, show the edit-divs
     $("#stock_container, #user_container").on("click", "li .button", function (item) {
-        //var itemData = "#item_" + $(this).attr("data-id");
         var itemData = $(this);
         var type;
         if ($(this).attr('data-type') == "drink") {
@@ -224,7 +226,6 @@ $(document).ready(function() {
 
 
         $("#black_wrapper, #item_editer").fadeIn().removeClass("hidden");    
-        //$("#black_wrapper, #item_editer").fadeIn().addClass("showing");    
     });
 
     //On background press, fade out the background
@@ -232,4 +233,13 @@ $(document).ready(function() {
         $("#black_wrapper, #item_editer").fadeOut();
     });
 
+    $(window).bind('scroll', function() {
+        var roof = 160;
+        if ($(window).scrollTop() > roof) {
+            $('#rightSide').css({'position': 'fixed', 'top': '60px'});
+        } else {
+            $('#rightSide').css({'position': 'absolute', 'top': '0px'});
+        }
+    });
+
 });
diff --git a/js/start.js b/js/start.js
index dfdad4e..65708d4 100644
--- a/js/start.js
+++ b/js/start.js
@@ -8,14 +8,6 @@ function logout () {
 	window.location.href = "index.html";
 
 }
-//function storeTheme() {
-//    var theme = $('#mainStyle').attr("href");
-//    if (theme == "start80s.css") {
-//        localStorage.setItem("theme", "start80s.css");
-//    } else {
-//        localStorage.setItem("theme", "start.css");
-//    }
-//}
 function setTheme() {
     var theme = localStorage.getItem("theme");
     if (theme != null) {
@@ -26,25 +18,18 @@ function setTheme() {
 $(document).ready(function() {
     
     if (localStorage["isLoggedIn"] != "true") {
-	    window.location.href='index.html';
+	    //window.location.href='index.html';
 	    //console.log("WTF");
 	    //console.log(localStorage["isLoggedIn"]);
 		
 	}
     else{
-        $("#user_info").append("<div class='profil' id='loginas' data-i18n='loginas'><b>Login as : </b>" + localStorage.getItem("user") + "</div>");
-    	$("#user_info").append("<div class='profil' id='assets' data-i18n='assets'><b>Assets : </b>" + localStorage.getItem("assets") + "</div>");
+        $("#user_info").append("<div class='profil' id='loginas' data-i18n='loginas'><b>User : </b>" + localStorage.getItem("user") + "</div>");
+    	$("#user_info").append("<div class='profil' id='assets' data-i18n='assets'><b>Credit : </b>" + localStorage.getItem("assets") + "</div>");
     };
 
-    $('#left, #right').hover(function() {
-        $(this).css('border-color', '#26C6B0');
-    }, function() {
-        $(this).css('border-color', 'black');
-    });
-
     setTheme();
     $('#changeTheme').on('click', function() {
-        console.log(localStorage.getItem("theme"));
         var $link = $('#mainStyle');
         var theme = localStorage.getItem("theme");
         if (theme == "start80s.css") {
@@ -56,5 +41,18 @@ $(document).ready(function() {
         }
     });
 
-
+    $(window).bind('scroll', function() {
+        if ($(window).scrollTop() < 20) {
+            $('#user_info').css('opacity', '1');
+        } else {
+            $('#user_info').css('opacity', '0.5');
+        }
+    });
+    $('#user_info').hover(function() {
+        $('#user_info').css('opacity', '1');
+    }, function() {
+        if ($(window).scrollTop() >= 20) {
+            $('#user_info').css('opacity', '0.5');
+        }
+    }); 
 });
diff --git a/js/translation.js b/js/translation.js
index 095c59e..55c7a42 100644
--- a/js/translation.js
+++ b/js/translation.js
@@ -14,25 +14,66 @@
                 $('.Part1').i18n();
                 $('#total').i18n();
                 $('#credit').i18n();
-                $('#drag_flag').i18n();
-                $('#click_flag').i18n();
+                $('#confirm_text').i18n();
+                $('#success').i18n();
 
                 if (options.lng == "en") {
                     $('#login-btn').text($.t('Login'));
                     $('#payButton').text($.t('PAY'));
+                    
+                    $("#add.button").text($.t('Add to cart'));
+                    $('#changeTheme').text($.t('Change Theme'));
+                    $('#showAll').text($.t('All'));
+                    $('#showBeer').text($.t('Beer'));
+                    $('#showWine').text($.t('Wine'));
+                    $("#edit_btn.button").text($.t('Edit'));
+                    
+                    $('#finalCost').html('<b>Total : </b>'+ localStorage.getItem("total"));
+                    $('#credit').html('<b>Credit : </b>'+ localStorage.getItem("assets"));
+
+                    $('#cancelButton').text($.t('Cancel'));
+                    $('#paymentButton').text($.t('Pay Now'));
+                    $('#cancel').text($.t('Cancel'));
                     $('#CancelButton').text($.t('Cancel'));
-                    $('#PaymentButton').text($.t('Pay Now'));
+                    
                     $('#stock_btn').text($.t('Stock'));
                     $('#user_btn').text($.t('User'));
+                    
+                    $('#loginas').html('<b>User : </b>'+ localStorage.getItem("user"));
+                    $('#assets').html('<b>Credit : </b>'+ localStorage.getItem("assets"));
+                    $('#logout-btn').text($.t('Logout'));
+                    $('#confirm_btn').text($.t('Ok'));
+                    $('#cancel_btn').text($.t('Cancel'));
+                    
                 }
 
                 if (options.lng == "sw") {
                     $('#login-btn').text($.t('Logga in'));
                     $('#payButton').text($.t('Betala'));
-                    $('#CancelButton').text($.t('Avboka'));
-                    $('#PaymentButton').text($.t('Betala nu'));
+
+                    $("#add.button").text($.t('L\xE4gg i varukorgen'));
+                    $('#changeTheme').text($.t('\xC4ndra tema'));
+                    $('#showAll').text($.t('Alla'));
+                    $('#showBeer').text($.t('\xD6l'));
+                    $('#showWine').text($.t('Vin'));
+                    $("#edit_btn.button").text($.t('Redigera'));
+                    
+                    $('#finalCost').html('<b>Summa : </b>'+ localStorage.getItem("total"));
+                    $('#credit').html('<b>Kredit : </b>'+ localStorage.getItem("assets"));
+                    $('#cancelButton').text($.t('Avboka'));
+                    $('#paymentButton').text($.t('Betala'));
+                    $('#cancel').text($.t('Avbryt'));
+                    $('#CancelButton').text($.t('Avbryt'));
+                    
                     $('#stock_btn').text($.t('Lager'));
-                    $('#user_btn').text($.t('Användaren'));
+                    $('#user_btn').text($.t('Anv\xE4ndare'));
+                    
+                    $('#loginas').html('<b>Anv\xE4ndare : </b>'+ localStorage.getItem("user"));
+                    $('#assets').html('<b>Kredit : </b>'+ localStorage.getItem("assets"));
+                    $('#logout-btn').text($.t('Logga ut'));
+                    $('#confirm_btn').text($.t('Ok'));
+                    $('#cancel_btn').text($.t('Avbryt'));
+                    
                 }
             });
 
@@ -41,33 +82,43 @@
     function changeE() {
           var options ={
            lng: "en",
-           resGetPath: '../locales/en/translation.json'
+           resGetPath: '../locales/__lng__/translation.json'
         };
 
         i18n.init(options, function(t) {
                    $('#username-input').i18n();
                    $('#password-input').i18n();
                    $('#login-btn').text($.t('Login'));
-                   $('#drag_flag').i18n();
-                   $('#click_flag').i18n();
                    
                    $('.search').i18n();
                    $('#payButton').text($.t('PAY'));
-                $("#add.button").text($.t('Add to cart'));
+                   $("#add.button").text($.t('Add to cart'));
+
+                   $('#changeTheme').text($.t('Change Theme'));
+                     $('#showAll').text($.t('All'));
+                   $('#showBeer').text($.t('Beer'));
+                   $('#showWine').text($.t('Wine'));
+                   $("#edit_btn.button").text($.t('Edit'));
 
 
-            $('.Part1').i18n();
-                   $('#finalCost').text($.t('Total:'));
-                   $('#credit').text($.t('Credit:'));
-                   $('#cancelButton').text($.t('Cancel'));
+                   $('.Part1').i18n();
+                   $('#finalCost').html('<b>Total : </b>'+ localStorage.getItem("total"));
+                   $('#credit').html('<b>Credit : </b>'+ localStorage.getItem("assets"));
+
+                   $('#CancelButton').text($.t('Cancel'));
                    $('#paymentButton').text($.t('Pay Now'));
+                   $('#cancel').text($.t('Cancel'));
+                   $('#confirm_text').i18n();
+                   $('#success').i18n();
                    
                    $('#stock_btn').text($.t('Stock'));
                    $('#user_btn').text($.t('User'));
 
-                    $('#loginas').html('<b>Login as : </b>'+ localStorage.getItem("user"));
-                    $('#assets').html('<b>Assets : </b>'+ localStorage.getItem("assets"));
+                    $('#loginas').html('<b>User : </b>'+ localStorage.getItem("user"));
+                    $('#assets').html('<b>Credit : </b>'+ localStorage.getItem("assets"));
                     $('#logout-btn').text($.t('Logout'));
+                    $('#confirm_btn').text($.t('Ok'));
+                    $('#cancel_btn').text($.t('Cancel'));
                    
         });
     /*Store english as a selected language*/     
@@ -79,7 +130,7 @@
     function changeS() {
           var options ={
            lng: "sw",
-           resGetPath: '../locales/sw/translation.json'
+           resGetPath: '../locales/__lng__/translation.json'
         };
 
         i18n.init(options, function(t) {
@@ -91,20 +142,31 @@
                     
                    $('.search').i18n();
                    $('#payButton').text($.t('Betala'));
-                    $("#add.button").text($.t('lagg i varukorg'));
+                    $("#add.button").text($.t('L\xE4gg i varukorg'));
+
+                   $('#changeTheme').text($.t('\xC4ndra Tema'));
+                    $('#showAll').text($.t('Alla'));
+                    $('#showBeer').text($.t('\xD6l'));
+                    $('#showWine').text($.t('Vin'));
+                    $("#edit_btn.button").text($.t('Redigera'));
 
                    $('.Part1').i18n();
-                   $('#finalCost').text($.t('Totalsumma:'));
-                   $('#credit').text($.t('Kredit:'));
+                   $('#finalCost').html('<b>Summa : </b>'+ localStorage.getItem("total"));
+                   $('#credit').html('<b>Kredit : </b>'+ localStorage.getItem("assets"));
+
                    $('#cancel').text($.t('Avbryt'));
-                   $('#paymentButton').text($.t('Betala nu'));
+                   $('#paymentButton').text($.t('Betala'));
+                   $('#confirm_text').i18n();
+                   $('#success').i18n();
                    
                    $('#stock_btn').text($.t('Lager'));
-                   $('#user_btn').text($.t('Användaren'));
+                   $('#user_btn').text($.t('Anv\xE4ndare'));
 
-                    $('#loginas').html('<b>Logga in som : </b>'+ localStorage.getItem("user"));
-                    $('#assets').html('<b>Tillgangar : </b>'+ localStorage.getItem("assets"));
-                    $('#logout-btn').text($.t('Loggar ut'));
+                    $('#loginas').html('<b>Anv\xE4ndare : </b>'+ localStorage.getItem("user"));
+                    $('#assets').html('<b>Kredit : </b>'+ localStorage.getItem("assets"));
+                    $('#logout-btn').text($.t('Logga ut'));
+                    $('#confirm_btn').text($.t('Ok'));
+                    $('#cancel_btn').text($.t('Avbryt'));
         });
     /*Store swedish as a selected language*/   
         window.localStorage.setItem("language", "sw");
diff --git a/js/undoRedo.js b/js/undoRedo.js
index a57246e..1480f12 100644
--- a/js/undoRedo.js
+++ b/js/undoRedo.js
@@ -1,3 +1,4 @@
+//Invoker
 var button = {
     //Methods
     click: function(theCommand) {
diff --git a/locales/en/translation.json b/locales/en/translation.json
index ca5ddb4..40e7566 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -18,14 +18,17 @@
     "credit" : "Credit:"
   },
 
-  "paymentbutton": {
+  "PaymentButton": {
     "button.pay": "Pay Now"
   },
   "cancel" : {
     "href.cancel" : "Cancel"
   },
-  "add": {
-    "addCart" : "Add to cart"
+  "confirm_text" : {
+    "confirm" : "Confirm Purcase?"
+  },
+  "success" : {
+    "message" : "Successful purchase!"
   }
 
 }
diff --git a/locales/sw/translation.json b/locales/sw/translation.json
index ec0db73..2256149 100644
--- a/locales/sw/translation.json
+++ b/locales/sw/translation.json
@@ -17,13 +17,17 @@
   "credit": {
     "credit" : "Kredit:"
   },
-  "paymentbutton": {
+  "PaymentButton": {
     "button.pay": "Betala nu"
   },
   "cancel" : {
     "href.cancel" : "Avbryt"
   },
-  "add": {
-    "addCart" : "Lägg till varukorg"
+  "confirm_text" : {
+    "confirm" : "Bekräfta Köp?"
+  },
+  "success" : {
+    "message" : "Lyckat köp!"
   }
+  
 }