diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index c78a388..8602d08 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -967,7 +967,7 @@ svg {
     position:relative;
     width:40px;
     height:40px;
-    background:color(menu, background);
+    background-color:color(base, background);
     border:none;
     
     path {
diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js
index d4addcc..9a0d1d1 100644
--- a/js/_getCursorPosition.js
+++ b/js/_getCursorPosition.js
@@ -6,8 +6,6 @@ function getCursorPosition(e) {
     if (e.pageX != undefined && e.pageY != undefined) {
         x = e.pageX;
         y = e.pageY;
-
-        console.log("passato di qui");
     }
     else {
         x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js
index 16cf7be..a1eed54 100644
--- a/js/_resizeCanvas.js
+++ b/js/_resizeCanvas.js
@@ -2,6 +2,23 @@ let resizeCanvasContainer = document.getElementById("resize-canvas");
 
 function openResizeCanvasWindow() {
     showDialogue('resize-canvas');
+    console.log("aperta");
+    initButtons();
+}
+
+function initButtons() {
+    let buttons = document.getElementsByClassName("pivot-button");
+
+    console.log("length: " + buttons.length);
+
+    for (let i=0; i<buttons.length; i++) {
+        buttons[i].addEventListener("click", changePivot);
+    }
+}
+
+function changePivot(event) {
+    console.log("sas");
+    console.log(event.target);
 }
 
 // Use a dialogue
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 533ff8f..fcf555d 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -256,15 +256,15 @@
 
             <!--PIVOTS-->
             <span id = "pivot-menu">
-                <button>{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/top.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/topright.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/left.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/middle.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/right.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
-                <button>{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
             </span>
             <!--BORDERS-->
             <span id = "borders-menu">