diff --git a/src/actions/index.js b/src/actions/index.js
index 020dcd7..52ff9a2 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -312,7 +312,7 @@ export function tryPlacePixel(
       canvasId,
     } = state.canvas;
     const selectedColor = (color === undefined || color === null)
-      ? state.gui.selectedColor
+      ? state.canvas.selectedColor
       : color;
 
     dispatch(requestPlacePixel(canvasId, coordinates, selectedColor));
diff --git a/src/components/Palette.jsx b/src/components/Palette.jsx
index 783d3c2..ddf5f9d 100644
--- a/src/components/Palette.jsx
+++ b/src/components/Palette.jsx
@@ -47,7 +47,7 @@ function getStylesByWindowSize(
     paletteCols = (windowHeight < 801) ? 2 : 1;
     flexDirection = 'column';
   }
-  const height = Math.ceil(numCal * spanSize / paletteCols);
+  const height = Math.ceil(numCal / paletteCols) * spanSize;
   const width = spanSize * paletteCols;
 
   if (!paletteOpen) {
@@ -148,8 +148,8 @@ function Palette({
 }
 
 function mapStateToProps(state: State) {
-  const { selectedColor, paletteOpen, compactPalette } = state.gui;
-  const { palette, clrIgnore } = state.canvas;
+  const { paletteOpen, compactPalette } = state.gui;
+  const { palette, clrIgnore, selectedColor } = state.canvas;
   return {
     colors: palette.colors,
     selectedColor,
diff --git a/src/components/PalselButton.jsx b/src/components/PalselButton.jsx
index ddc9981..7e1d7ef 100644
--- a/src/components/PalselButton.jsx
+++ b/src/components/PalselButton.jsx
@@ -30,8 +30,8 @@ const PalselButton = ({
 
 // TODO simplify...
 function mapStateToProps(state: State) {
-  const { selectedColor, paletteOpen } = state.gui;
-  const { palette } = state.canvas;
+  const { paletteOpen } = state.gui;
+  const { palette, selectedColor } = state.canvas;
   return { palette, selectedColor, paletteOpen };
 }
 
diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js
index 8616f67..2589cb9 100644
--- a/src/controls/PixelPainterControls.js
+++ b/src/controls/PixelPainterControls.js
@@ -121,13 +121,14 @@ export function initControls(renderer, viewport: HTMLCanvasElement, curStore) {
 
   hammertime.on('tap', ({ center }) => {
     const state = store.getState();
-    const { autoZoomIn, selectedColor } = state.gui;
+    const { autoZoomIn } = state.gui;
     const { placeAllowed } = state.user;
-
     const {
       scale,
       isHistoricalView,
+      selectedColor,
     } = state.canvas;
+
     if (isHistoricalView) return;
 
     const { x, y } = center;
diff --git a/src/reducers/canvas.js b/src/reducers/canvas.js
index 93d0478..9cba4db 100644
--- a/src/reducers/canvas.js
+++ b/src/reducers/canvas.js
@@ -2,6 +2,7 @@
 
 import type { Action } from '../actions/types';
 import type { Cell } from '../core/Cell';
+import type { ColorIndex } from '../core/Palette';
 import Palette from '../core/Palette';
 import {
   getMaxTiledZoom,
@@ -21,6 +22,7 @@ import {
 export type CanvasState = {
   canvasId: number,
   canvasIdent: string,
+  selectedColor: ColorIndex,
   is3D: boolean,
   canvasSize: number,
   canvasMaxTiledZoom: number,
@@ -133,6 +135,7 @@ function getViewFromURL(canvases: Object) {
 const initialState: CanvasState = {
   ...getViewFromURL(DEFAULT_CANVASES),
   fetchs: 0,
+  selectedColor: 3,
   isHistoricalView: false,
   historicalDate: null,
   historicalTime: null,
@@ -258,6 +261,13 @@ export default function canvasReducer(
       };
     }
 
+    case 'SELECT_COLOR': {
+      return {
+        ...state,
+        selectedColor: action.color,
+      };
+    }
+
     case 'SELECT_CANVAS': {
       let { canvasId } = action;
       const { canvases, isHistoricalView } = state;
@@ -285,6 +295,7 @@ export default function canvasReducer(
         ...state,
         canvasId,
         canvasIdent,
+        selectedColor: clrIgnore,
         canvasSize,
         is3D,
         canvasStartDate,
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 78e6258..974c51e 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -1,14 +1,12 @@
 /* @flow */
 
 import type { Action } from '../actions/types';
-import type { ColorIndex } from '../core/Palette';
 import type { Cell } from '../core/Cell';
 
 
 export type GUIState = {
   showGrid: boolean,
   showPixelNotify: boolean,
-  selectedColor: ColorIndex,
   hover: ?Cell,
   pixelsPlaced: number,
   autoZoomIn: boolean,
@@ -24,7 +22,6 @@ export type GUIState = {
 const initialState: GUIState = {
   showGrid: false,
   showPixelNotify: false,
-  selectedColor: 3,
   hover: null,
   pixelsPlaced: 0,
   autoZoomIn: false,
@@ -127,14 +124,6 @@ export default function gui(
       return {
         ...state,
         paletteOpen,
-        selectedColor: action.color,
-      };
-    }
-
-    case 'SELECT_CANVAS': {
-      return {
-        ...state,
-        selectedColor: 2,
       };
     }
 
diff --git a/src/ui/render2Delements.js b/src/ui/render2Delements.js
index 630b95d..0bde7a8 100644
--- a/src/ui/render2Delements.js
+++ b/src/ui/render2Delements.js
@@ -17,8 +17,8 @@ export function renderPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { selectedColor, hover } = state.gui;
-  const { palette } = state.canvas;
+  const { hover } = state.gui;
+  const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);
 
@@ -51,8 +51,8 @@ export function renderPotatoPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { selectedColor, hover } = state.gui;
-  const { palette } = state.canvas;
+  const { hover } = state.gui;
+  const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);