diff --git a/fortuneRoundtable.sublime-workspace b/fortuneRoundtable.sublime-workspace
index c03765c..8161590 100644
--- a/fortuneRoundtable.sublime-workspace
+++ b/fortuneRoundtable.sublime-workspace
@@ -3,6 +3,10 @@
 	{
 		"selected_items":
 		[
+			[
+				"baseRo",
+				"baseRotateB"
+			],
 			[
 				"groupb",
 				"groupBName"
@@ -23,7 +27,7 @@
 			"file": "src/index.html",
 			"settings":
 			{
-				"buffer_size": 3466,
+				"buffer_size": 3555,
 				"encoding": "UTF-8",
 				"line_ending": "Windows"
 			}
@@ -32,7 +36,7 @@
 			"file": "src/script/script.js",
 			"settings":
 			{
-				"buffer_size": 5149,
+				"buffer_size": 6140,
 				"encoding": "UTF-8",
 				"line_ending": "Windows"
 			}
@@ -41,7 +45,7 @@
 			"file": "src/style/style.scss",
 			"settings":
 			{
-				"buffer_size": 1519,
+				"buffer_size": 2227,
 				"encoding": "UTF-8",
 				"line_ending": "Windows"
 			}
@@ -79,10 +83,7 @@
 	},
 	"expanded_folders":
 	[
-		"/H/Munkák/FortuneRoundtable",
-		"/H/Munkák/FortuneRoundtable/src",
-		"/H/Munkák/FortuneRoundtable/src/script",
-		"/H/Munkák/FortuneRoundtable/src/style"
+		"/home/gergo/Documents/FortuneRoundtable"
 	],
 	"file_history":
 	[
@@ -91,7 +92,7 @@
 	],
 	"find":
 	{
-		"height": 40.0
+		"height": 27.0
 	},
 	"find_in_files":
 	{
@@ -136,23 +137,25 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 3466,
+						"buffer_size": 3555,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								2746,
-								2746
+								3555,
+								3555
 							]
 						],
 						"settings":
 						{
-							"syntax": "Packages/HTML/HTML.sublime-syntax"
+							"syntax": "Packages/HTML/HTML.sublime-syntax",
+							"tab_size": 4,
+							"translate_tabs_to_spaces": true
 						},
 						"translation.x": 0.0,
-						"translation.y": 134.0,
+						"translation.y": 674.0,
 						"zoom_level": 1.0
 					},
 					"stack_index": 2,
@@ -164,23 +167,26 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 5149,
+						"buffer_size": 6140,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								4819,
-								4819
+								6070,
+								6070
 							]
 						],
 						"settings":
 						{
-							"syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
+							"syntax": "Packages/JavaScript/JavaScript.sublime-syntax",
+							"tab_size": 4,
+							"translate_tabs_to_spaces": true,
+							"word_wrap": true
 						},
 						"translation.x": 0.0,
-						"translation.y": 1954.0,
+						"translation.y": 2866.0,
 						"zoom_level": 1.0
 					},
 					"stack_index": 1,
@@ -192,24 +198,26 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 1519,
+						"buffer_size": 2227,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								274,
-								274
+								232,
+								232
 							]
 						],
 						"settings":
 						{
 							"auto_name": "",
-							"syntax": "Packages/CSS/CSS.sublime-syntax"
+							"syntax": "Packages/CSS/CSS.sublime-syntax",
+							"tab_size": 4,
+							"translate_tabs_to_spaces": true
 						},
 						"translation.x": 0.0,
-						"translation.y": 0.0,
+						"translation.y": 648.0,
 						"zoom_level": 1.0
 					},
 					"stack_index": 0,
@@ -220,7 +228,7 @@
 	],
 	"incremental_find":
 	{
-		"height": 24.0
+		"height": 27.0
 	},
 	"input":
 	{
@@ -257,7 +265,7 @@
 	"project": "fortuneRoundtable.sublime-project",
 	"replace":
 	{
-		"height": 44.0
+		"height": 50.0
 	},
 	"save_all_on_build": true,
 	"select_file":
diff --git a/src/index.html b/src/index.html
index 027e0eb..2026b68 100644
--- a/src/index.html
+++ b/src/index.html
@@ -57,6 +57,7 @@
                     </div>
                 </div>
             </div>
+            <button type="button" class="roller__button" onclick="roll()">Roll!</button>
         </div>
         <div id="results" style="display: none">
             <table>
diff --git a/src/script/script.js b/src/script/script.js
index bffdee0..417963a 100644
--- a/src/script/script.js
+++ b/src/script/script.js
@@ -143,11 +143,17 @@ function updateOptions(){
 
 
 /* actual rolling */
+var baseRotateA=0;
+var baseRotateB=0;
+var countA=0;
+var countB=0;
+var degA=0;
+var degB=0;
 function setupRoll(){
     //set up roller A
     $("#rollerA").html("");
-    var countA=dataStore.groupA.length;
-    var degA=360/countA;
+    countA=dataStore.groupA.length;
+    degA=360/countA;
     var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
     $.each(dataA, (i, val) => {
         var rotSlicer=i*degA;
@@ -158,16 +164,43 @@ function setupRoll(){
 
     //set up roller B
     $("#rollerB").html("");
-    var countB=dataStore.groupB.length;
-    var degB=360/countB;
+    countB=dataStore.groupB.length;
+    degB=360/countB;
     var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
     $.each(dataB, (i, val) => {
         var rotSlicer=i*degB;
         var rotLabel=((i-1)*degB)+(degB/2);
-        $("<div class=\"roller__slicer\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
-        $("<div class=\"roller__label\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerB");
-    })
+        $("<div class=\"roller__slicer roller__slicer__flip\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
+        $("<div class=\"roller__label roller__label__flip\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerB");
+    });
+
+    if(countA%2!==0){
+        baseRotateA=-degA/2;
+    }
+    if(countB%2!==0){
+        baseRotateB=degB/2;
+    }
+
+    $("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
+    $("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");
 
     $("#editor").slideUp();
     $("#roller").slideDown();
+}
+
+function roll(){
+    var randA=Math.floor(Math.random()*countA);
+    var randB=Math.floor(Math.random()*countB);
+
+    var rotA=(360*10)+baseRotateA+(randA*degA)+(degA/2);
+    var rotB=(360*10)+baseRotateB+(randB*degB)+(degB/2);
+
+    $("#rollerA").removeClass("roller__rotate");
+    $("#rollerB").removeClass("roller__rotate");
+    $("#rollerA").css("transform", "rotate("+rotA.toString()+"deg)");
+    $("#rollerB").css("transform", "rotate("+rotB.toString()+"deg)");
+    $("#rollerA").addClass("roller__rotate");
+    $("#rollerB").addClass("roller__rotate");
+
+    console.log(randA, randB, rotA, rotB);
 }
\ No newline at end of file
diff --git a/src/style/style.css b/src/style/style.css
index 07feced..021dcf1 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -16,7 +16,9 @@ ul {
   left: 0;
   right: 0;
   bottom: 0;
-  animation: rotate 2s linear infinite;
+}
+.roller__rotate {
+  animation: rotate 10s;
 }
 .roller__base {
   display: grid;
@@ -45,34 +47,60 @@ ul {
 }
 .roller__slicer {
   position: absolute;
-  top: 49%;
+  top: 49.75%;
   left: 50%;
   right: 0;
-  height: 2%;
+  height: 0.5%;
   background: black;
   transform-origin: left center;
   z-index: 3;
 }
+.roller__slicer__flip {
+  top: 49.75%;
+  left: 0;
+  right: 50%;
+  transform-origin: right center;
+}
 .roller__label {
   position: absolute;
-  top: 45%;
-  left: 70%;
-  right: 10%;
-  height: 10%;
+  top: 48%;
+  left: 75%;
+  right: 5%;
+  height: 4%;
+  font-size: 1.5em;
   background: grey;
   border: 1px solid darkgrey;
   border-radius: 1em;
   color: white;
   text-align: center;
-  transform-origin: -100% center;
+  transform-origin: -125% center;
+}
+.roller__label__flip {
+  top: 48%;
+  left: 5%;
+  right: 75%;
+  transform-origin: 225% center;
+}
+.roller__button {
+  margin-left: 5%;
+  margin-right: 5%;
+  width: 89%;
+  font-size: 3em;
+  background: repeating-linear-gradient(46deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
+  border: 2px solid darkgreen;
+  border-radius: 2rem;
+  background-size: 200% 200%;
+  animation: barberpole 10s linear infinite;
 }
 
+@keyframes barberpole {
+  100% {
+    background-position: 100% 100%;
+  }
+}
 @keyframes rotate {
   0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
+    transform: rotate(0deg);
   }
 }
 
diff --git a/src/style/style.css.map b/src/style/style.css.map
index 9d32aaf..eddab03 100644
--- a/src/style/style.css.map
+++ b/src/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;IACI;;EAEJ;IACI","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI","file":"style.css"}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index fd5ea88..f9bfcd8 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -17,7 +17,10 @@ ul{
     left: 0;
     right: 0;
     bottom: 0;
-    animation: rotate 2s linear infinite;
+
+    &__rotate{
+        animation: rotate 10s;
+    }
 
     &__base{
         display: grid;
@@ -47,34 +50,61 @@ ul{
 
     &__slicer{
         position: absolute;
-        top: 49%;
+        top: 49.75%;
         left: 50%;
         right: 0;
-        height: 2%;
+        height: 0.5%;
         background: black;
         transform-origin: left center;
         z-index: 3;
     }
+    &__slicer__flip{
+        top: 49.75%;
+        left: 0;
+        right: 50%;
+        transform-origin: right center;
+    }
 
     &__label{
         position: absolute;
-        top: 45%;
-        left: 70%;
-        right: 10%;
-        height: 10%;
+        top: 48%;
+        left: 75%;
+        right: 5%;
+        height: 4%;
+        font-size: 1.5em;
         background: grey;
         border: 1px solid darkgrey;
         border-radius: 1em;
         color: white;
         text-align: center;
-        transform-origin: -100% center;
+        transform-origin: -125% center;
+    }
+    &__label__flip{
+        top: 48%;
+        left: 5%;
+        right: 75%;
+        transform-origin: 225% center;        
+    }
+
+    &__button{
+        margin-left: 5%;
+        margin-right: 5%;
+        width: 89%;
+        font-size: 3em;
+        background: repeating-linear-gradient(46deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
+        border: 2px solid darkgreen;
+        border-radius: 2rem;
+        background-size: 200% 200%;
+        animation: barberpole 10s linear infinite;
+    }
+}
+@keyframes barberpole{
+    100%{
+        background-position: 100% 100%;
     }
 }
 @keyframes rotate{
     0%{
-        transform: rotate(0);
-    }
-    100%{
-        transform: rotate(360deg);
+        transform: rotate(0deg);
     }
 }
\ No newline at end of file