diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css
index 47abc40d..1cdfbd22 100755
--- a/server/public/assets/css/embed.css
+++ b/server/public/assets/css/embed.css
@@ -49,6 +49,8 @@
 #pageButtons{
   text-align: center;
   padding-top:15px;
+  display: flex;
+  justify-content: space-around;
 }
 
 #pageButtons, #pageButtons a{
@@ -365,17 +367,25 @@ html {
 }
 
 .prev_page_hide, .prev_page, .first_page, .first_page_hide{
-  padding:0 10px;
-  float:left;
+    padding:0 1px;
 }
 
 .next_page_hide, .next_page, .last_page, .last_page_hide{
-  padding:0 10px;
-  float:right;
+    padding:0 0px;
+    display: flex;
+}
+
+.first_page, .first_page_hide {
+    padding: 0 0 0 10px;
+}
+
+.last_page, .last_page_hide {
+    padding: 0 10px 0 0;
 }
 
 .vote-container {
   height: 100%;
+  width: 100%;
 }
 
 .card-duration {
diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index ed77238c..9ca9fdf1 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -160,14 +160,22 @@ li.disabled span {
 }
 
 .prev_page_hide, .prev_page, .first_page, .first_page_hide{
-    padding:0 10px;
+    padding:0 1px;
 }
 
 .next_page_hide, .next_page, .last_page, .last_page_hide{
-    padding:0 10px;
+    padding:0 0px;
     display: flex;
 }
 
+.first_page, .first_page_hide {
+    padding: 0 0 0 10px;
+}
+
+.last_page, .last_page_hide {
+    padding: 0 10px 0 0;
+}
+
 .settings_embed:focus{
     border:none !important;
     box-shadow: none !important;
@@ -2334,10 +2342,10 @@ nav ul li:hover, nav ul li.active {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
-    -webkit-transition: .5s ease-in-out;
-    -moz-transition: .5s ease-in-out;
-    -o-transition: .5s ease-in-out;
-    transition: .5s ease-in-out;
+    -webkit-transition: position .5s ease-in-out;
+    -moz-transition: position .5s ease-in-out;
+    -o-transition: position .5s ease-in-out;
+    transition: position .5s ease-in-out;
     cursor: pointer;
 }
 
diff --git a/server/public/assets/html/embed.html b/server/public/assets/html/embed.html
index 7b8e81d3..e6054a7a 100755
--- a/server/public/assets/html/embed.html
+++ b/server/public/assets/html/embed.html
@@ -71,6 +71,33 @@
 							</div>
 					</div>
 				</div>
+                <div id="pageButtons" class="hide">
+                    <span class="first_page_hide btn-flat disabled">
+                        <i class="material-icons">first_page</i>
+                    </span>
+                    <a class="first_page waves-effect waves-light btn-flat">
+                        <i class="material-icons">first_page</i>
+                    </a>
+                    <span class="prev_page_hide btn-flat disabled">
+                        <i class="material-icons">navigate_before</i> prev
+                    </span>
+                    <a class="prev_page waves-effect waves-light btn-flat">
+                        <i class="material-icons">navigate_before</i> prev
+                    </a>
+                    <span id="pageNumber">1</span>
+                    <a class="next_page waves-effect waves-light btn-flat">
+                        next <i class="material-icons">navigate_next</i>
+                    </a>
+                    <span class="next_page_hide btn-flat disabled">
+                        next <i class="material-icons">navigate_next</i>
+                    </span>
+                    <a class="last_page waves-effect waves-light btn-flat">
+                        <i class="material-icons">last_page</i>
+                    </a>
+                    <span class="last_page_hide btn-flat disabled">
+                        <i class="material-icons">last_page</i>
+                    </span>
+                </div>
 			</div>
 		</div>
 	</body>
diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js
index 4e181644..f5d84095 100755
--- a/server/public/assets/js/list.js
+++ b/server/public/assets/js/list.js
@@ -135,6 +135,7 @@ var List = {
     },
 
     populate_list: function(msg, no_reset) {
+        // This math is fucked and I don't know how it works. Should be fixed sometime
         if(!Helper.mobilecheck() && !embed){
             List.can_fit = Math.round(($("#wrapper").height()) / 71)+1;
             List.element_height = (($("#wrapper").height()) / List.can_fit)-5.3;
@@ -142,14 +143,14 @@ var List = {
             List.can_fit = Math.round(($("#wrapper").height()) / 91) + 1;
             List.element_height = (($("#wrapper").height()) / List.can_fit)-4;
         } else {
-            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / 71)+1;
-            List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
+            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71)+1;
+            List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / List.can_fit)-5;
         }
         if(List.element_height < 55.2){
             List.can_fit = List.can_fit - 1;
             List.element_height = 55.2;
-            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / 71);
-            List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
+            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71);
+            List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / List.can_fit)-5;
         }
         if(list_html === undefined) list_html = $("#list-song-html").html();
         full_playlist = msg;