diff --git a/src/js/components/ImageEditor/FrameHandler.js b/src/js/components/ImageEditor/FrameHandler.js
index 572bf61..419f0b1 100644
--- a/src/js/components/ImageEditor/FrameHandler.js
+++ b/src/js/components/ImageEditor/FrameHandler.js
@@ -1,5 +1,7 @@
 'use strict';
 
+var config = require('../config');
+
 function FrameHandler(viewport) {
     var _frames;
     var _frameType;
@@ -18,7 +20,7 @@ function FrameHandler(viewport) {
      * Sets the 4 rectangles which are used when current canvas should be framed
      */
     function initFrames() {
-        var frame = new fabric.Rect({ fill: '#000000', stroke: '#000000', width: 1, height: 1 });
+        var frame = new fabric.Rect(config.frames.default);
 
         _frames = {
             top: frame.clone(),
@@ -90,21 +92,12 @@ function FrameHandler(viewport) {
             _frames.right.height -= (viewport.getData().ppmm * 29) * 2;
             _frames.left.height = _frames.right.height;
 
-            frameargs = {
-                fill: 'rgba(0,0,0,0.2)',
-                strokeWidth: 1,
-            };
+            frameargs = config.frames.image;
 
         } else if (frameType === 'white') {
-            frameargs = {
-                fill: '#ffffff',
-                strokeWidth: 0,
-            };
+            frameargs = config.frames.white;
         } else if (frameType === 'black') {
-            frameargs = {
-                fill: '#000000',
-                strokeWidth: 0,
-            };
+            frameargs = config.frames.black;
         }
 
         getFramesAsArray().forEach(function (o) {
diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js
index 363bdfb..d600d1f 100644
--- a/src/js/components/ImageEditor/ImageEditor.js
+++ b/src/js/components/ImageEditor/ImageEditor.js
@@ -26,12 +26,12 @@ function ImageEditor(canvasId, args) {
      */
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
-            .addItem('3D', function () {
-                self.toggle3D(true);
-            })
             .addItem('Flat', function () {
                 self.toggle3D(false);
             })
+            .addItem('3D', function () {
+                self.toggle3D(true);
+            })
             .render();
     } else {
         _canvas.getButtonMenu()
diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js
index 8d7a76d..b1c26a7 100644
--- a/src/js/components/ImageEditor/Viewport.js
+++ b/src/js/components/ImageEditor/Viewport.js
@@ -39,11 +39,10 @@ function Viewport(canvas) {
         if (canvas.__type !== 'canvas') {
             drawBeams();
         } else {
-            // drawFrames
+            self.setFrame();
         }
 
         canvas.getDragbars().apply();
-        self.setFrame();
         // Apertures sometimes overlaps the viewports bounding rect.
         // Solve this by bringing it to the front after apertures are applied.
         _rect.bringToFront();
diff --git a/src/js/components/config.js b/src/js/components/config.js
index e3d1487..2d6f751 100644
--- a/src/js/components/config.js
+++ b/src/js/components/config.js
@@ -1,6 +1,7 @@
 'use strict';
 
 module.exports = {
+    frames: require('./config/frames'),
     textButton: require('./config/text-button'),
     buttonMenu: require('./config/button-menu'),
     rulerHandle: require('./config/ruler-handle'),
diff --git a/src/js/components/config/button-menu.js b/src/js/components/config/button-menu.js
index 48e849a..aec0020 100644
--- a/src/js/components/config/button-menu.js
+++ b/src/js/components/config/button-menu.js
@@ -3,14 +3,14 @@
 module.exports = {
 
     canvas: {
-        margin: 0,
+        margin: 5,
         text: {
             fill: '#ffffff',
-            activeFill: '#000000',
+            activeFill: '#ffffff',
         },
         rect: {
-            fill: '#444444',
-            activeFill: '#ffffff',
+            fill: '#000000',
+            activeFill: '#444444',
             width: 100,
         },
     },
diff --git a/src/js/components/config/frames.js b/src/js/components/config/frames.js
new file mode 100644
index 0000000..2667838
--- /dev/null
+++ b/src/js/components/config/frames.js
@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+
+    default: {
+        fill: '#000000',
+        stroke: '#f31fb3',
+        width: 1,
+        height: 1,
+    },
+
+    image: {
+        fill: 'rgba(0,0,0,0.2)',
+        strokeWidth: 1,
+    },
+
+    black: {
+        fill: '#000000',
+        strokeWidth: 0,
+    },
+
+    white: {
+        fill: '#ffffff',
+        strokeWidth: 0,
+    },
+
+};