diff --git a/ui/index.html b/ui/index.html
index 1cd8380..43850b5 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -12,17 +12,31 @@
 </script> <!--Loadne Vars.js-->
 <div class="container">
     <button class="move" type="button" id="sdvx3-button"  onclick="vers=3;sdvx()">
+        <img src="sound-voltex-iii-gravity-wars-1.png" alt="">
         <h1 class="sex">SDVX3</h1>    
     </button> <!--SDVX3--> 
     <button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()">
+        <img src="maxresdefault3.jpg" alt="">
         <h1 class="sex">SDVX4</h1>  
     </button> <!--SDVX4--> 
     <button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()">
+        <img src="SDVX5scaled.jpg" alt="">
         <h1 class="sex">SDVX5</h1>  
     </button>
     <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
         <h1 class="sex">SDVX6</h1>  
     </button> <!--SDVX5--> 
+    <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
+        <h1 class="sex">GAME1</h1>  
+    </button> <!--SDVX5--> 
+    <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
+        <h1 class="sex">GAME2</h1>  
+    </button> <!--SDVX5--> 
+   
+    
 </div>
 
 
@@ -39,7 +53,8 @@
 <script>
     var i = 0;
     document.addEventListener("keydown",function(sex2){
-            if (sex2.code === "ArrowRight" && i<prvnihra.length - 1){
+            if (sex2.code === "ArrowRight"){
+            if(i>=prvnihra.length - 1) i = -1;    
             i++;
             prvnihra[i].focus();
             console.log("prava", i);
@@ -48,7 +63,8 @@
             
         })
     document.addEventListener("keydown",function(sex3){
-        if(sex3.code === "ArrowUp" && i>=1){
+        if(sex3.code === "ArrowUp"){
+            if(i<=0) i=prvnihra.length
             i--;
             prvnihra[i].focus()
             console.log("leva", i);
diff --git a/ui/style.css b/ui/style.css
index ee2e937..825bd7b 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,16 +1,17 @@
 .container{
     display: grid;
-    height: 100vw;
+    height: 85vw;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-gap: 15px;
    margin-top: 10px;
-
+   
 }
 body{
     min-height: 100vh;
-    max-width: 85vw;
+    max-width: 90vw;
     margin: 0 auto;
+    background-color: rgb(56, 55, 55, 1);
 }
 * {
     box-sizing: border-box; /* ulehci zivot */
@@ -23,62 +24,73 @@ body{
     justify-content: flex-end;
     align-items: center;
     flex-direction: column;
+    border-radius: 15px;
+    
+
 }
 
 .sex{
+    z-index: 1;
+    opacity: 0.91;
 }
-#sdvx3-button{
-position: relative;    
-    
-}
-#sdvx3-button::after{
-    content: "";
-    background-image: url(sound-voltex-iii-gravity-wars-1.png);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}
-#sdvx4-button{
-   position: relative;
-}
-#sdvx4-button::after{
-    content: "";
-    background-image: url(maxresdefault3.jpg);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}  
-#sdvx5-button{
-    position: relative;
-}
-#sdvx5-button::after{
-    content: "";
-    background-image: url(SDVX5scaled.jpg);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}  
+
 .sex:focus{
     border:10px solid red;
-}
\ No newline at end of file
+}
+#sdvx3-button{
+    position: relative;    
+    border-radius: 15px;
+    }
+    #sdvx3-button img {
+        content: "";
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 10px;
+    }
+#sdvx4-button{
+    position: relative;
+    border-radius: 15px;
+    }
+    #sdvx4-button img{
+         content: "";
+          
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 15px;
+        
+    }  
+#sdvx5-button{
+    position: relative;
+    border-radius: 15px;
+    }
+    #sdvx5-button img{
+        content: "";
+           
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 15px;
+    }  
\ No newline at end of file