diff --git a/package-lock.json b/package-lock.json
index 014aa23..dd28697 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8015,6 +8015,14 @@
         "side-channel": "^1.0.2"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -13442,6 +13450,16 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-sortable-hoc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
+      "integrity": "sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
diff --git a/package.json b/package.json
index 80dab34..f1df699 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-sortable-hoc": "^2.0.0",
     "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "styled-components": "^5.2.1",
diff --git a/src/components/main-app/sidebar-wrapper/colors-input.js b/src/components/main-app/sidebar-wrapper/colors-input.js
index e95ce26..d3995f8 100644
--- a/src/components/main-app/sidebar-wrapper/colors-input.js
+++ b/src/components/main-app/sidebar-wrapper/colors-input.js
@@ -1,4 +1,10 @@
 import React, { useState, Fragment } from 'react';
+import {
+  SortableContainer,
+  SortableElement,
+  arrayMove,
+} from 'react-sortable-hoc';
+// TODO: remove array-move library
 import { StringParam, useQueryParam } from 'use-query-params';
 import { URL_COLORS, URL_UPDATE_PUSH } from 'config';
 import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
@@ -9,6 +15,7 @@ const popover = {
   position: 'absolute',
   zIndex: '3',
 };
+
 const cover = {
   position: 'fixed',
   top: '0px',
@@ -25,6 +32,9 @@ const deleteColor = (key, colorsArray, onChangeColor) => {
   }
 };
 
+const SortableItem = SortableElement(({ children }) => children);
+const SortableList = SortableContainer(({ children }) => children);
+
 export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
@@ -44,6 +54,11 @@ export default function ColorsInput() {
     onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
   };
 
+  const sortColor = ({ oldIndex, newIndex }) => {
+    let tempColorsArray = arrayMove(colorsArray, oldIndex, newIndex);
+    onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
+  };
+
   return (
     <>
       <div className="color-row">
@@ -56,31 +71,39 @@ export default function ColorsInput() {
           {' '}
         </a>
       </div>
-      <div className="color-input">
-        {colorsArray.map((color, key) => (
-          <Fragment key={color + key}>
-            <div
-              className="color-input-item"
-              style={
-                itemColorStatus && itemColorStatus.key === key
-                  ? { background: color, borderColor: 'black' }
-                  : { background: color }
-              }
-            >
-              <div
-                className="color-input-item-close"
-                onClick={e => deleteColor(key, colorsArray, onChangeColor)}
-              >
-                <CloseSVG />
-              </div>
-              <div
-                className="color-input-item-overlay"
-                onClick={e => setItemColorStatus({ color, key })}
-              ></div>
-            </div>
-          </Fragment>
-        ))}
-      </div>
+
+      <SortableList axis="xy" distance={1} onSortEnd={sortColor}>
+        <div className="color-input">
+          {colorsArray.map((color, key) => (
+            <SortableItem key={`color-${key}`} index={key}>
+              <Fragment>
+                <div
+                  className="color-input-item draggable"
+                  style={{
+                    background: color,
+                    borderColor:
+                      itemColorStatus && itemColorStatus.key === key
+                        ? 'black'
+                        : 'white',
+                  }}
+                >
+                  <div
+                    className="color-input-item-close"
+                    onClick={e => deleteColor(key, colorsArray, onChangeColor)}
+                  >
+                    <CloseSVG />
+                  </div>
+                  <div
+                    className="color-input-item-overlay"
+                    onClick={e => setItemColorStatus({ color, key })}
+                  ></div>
+                </div>
+              </Fragment>
+            </SortableItem>
+          ))}
+        </div>
+      </SortableList>
+
       {itemColorStatus ? (
         <div style={popover}>
           <div
diff --git a/src/sass/_app.sass b/src/sass/_app.sass
index db06659..bfa4bfa 100644
--- a/src/sass/_app.sass
+++ b/src/sass/_app.sass
@@ -1,28 +1,28 @@
 .sidebar
-    width: 460px
-    height: 100%
-    position: fixed
-    background: white
-    top: 0
-    left: 0
-    z-index: 1
-    box-shadow: 4px 0px 15px #00000029
-    overflow-y: auto
-
-    .sidebar-wrapper
-        padding: 20px
-
-        hr 
-            margin-bottom: 30px
-
-        h1 
-            display: inline-block
-            font-weight: 700
-            margin-top: 0px
-            margin-bottom: 10px
-            span 
-                font-weight: 300
-  
+  width: 460px
+  height: 100%
+  position: fixed
+  background: white
+  top: 0
+  left: 0
+  z-index: 1
+  box-shadow: 4px 0px 15px #00000029
+  overflow-y: auto
+
+  .sidebar-wrapper
+    padding: 20px
+
+    hr
+      margin-bottom: 30px
+
+      h1
+        display: inline-block
+        font-weight: 700
+        margin-top: 0px
+        margin-bottom: 10px
+        span
+          font-weight: 300
+
 .theme-toggle
   .switch
     display: flex
@@ -82,100 +82,101 @@
   z-index: 420
 
 .input-text
-    width: -webkit-fill-available
-    width: -moz-available
-    border: 0
-    padding: 15px
-    background: #ececec
-    margin-top: 5px
+  width: -webkit-fill-available
+  width: -moz-available
+  border: 0
+  padding: 15px
+  background: #ececec
+  margin-top: 5px
 
 .input-container
-    width: -webkit-fill-available
-    width: -moz-available
-    display: flex
+  width: -webkit-fill-available
+  width: -moz-available
+  display: flex
 
 .input-text-slider
-    border: 0
-    padding: 15px
-    background: #ececec
-    margin-left: 15px
-    position: absolute
-    width: 74px
-    height: 74px
-    box-sizing: border-box
+  border: 0
+  padding: 15px
+  background: #ececec
+  margin-left: 15px
+  position: absolute
+  width: 74px
+  height: 74px
+  box-sizing: border-box
 
 .range-slider
-    width: 100%
+  width: 100%
 
 .slider-container
-    position: relative
-    width: 72%
-    display: flex
-    align-items: center
-    height: 74px
+  position: relative
+  width: 72%
+  display: flex
+  align-items: center
+  height: 74px
 
-.color-row 
-    display: flex
-    flex-direction: row
-    flex-wrap: wrap
-    justify-content: space-between
-    align-items: baseline
+.color-row
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: baseline
 
 .color-input
-    width: -webkit-fill-available
-    width: -moz-available
-    margin-top: 20px
-
-    .color-input-item
-        width: 27%
-        border: 5px solid #eee
-        margin: 5px
-        height: 40px
-        display: inline-block
-        cursor: pointer
-        position: relative
-
-        .color-input-item-overlay
-            width: 100%
-            height: 40px
-            background: transparent
-            position: absolute
-            top: 0
-            left: 0
-
-        .color-input-item-close
-            top: -15px
-            right: -10px
-            position: absolute
-            z-index: 2
-            background: white
-            border-radius: 50%
-            width: 18px
-            height: 18px
-            display: flex
-            align-items: center
-            justify-content: center
-            box-shadow: 0px 2px 4px #0000004f
-
-            svg
-                width: 10px
+  width: -moz-available
+  width: -webkit-fill-available
+  margin-top: 20px
+
+.color-input-item.draggable
+  width: 27%
+  border: 5px solid #eee
+  margin: 5px
+  height: 40px
+  display: inline-block
+  cursor: pointer
+  position: relative
+  z-index: 2
 
-.fa.iconButton
-    width: 30px
+  .color-input-item-overlay
+    width: 100%
+    height: 40px
+    background: transparent
+    position: absolute
+    top: 0
+    left: 0
+
+  .color-input-item-close
+    top: -15px
+    right: -10px
+    position: absolute
+    z-index: 3
+    background: white
+    border-radius: 50%
+    width: 18px
     height: 18px
-    color: #FFF
-    background-color: #000
-    padding: 6px 0px
     display: flex
     align-items: center
     justify-content: center
-    font-size: 15px
-    border-radius: 6px
+    box-shadow: 0px 2px 4px #0000004f
+
+    svg
+      width: 10px
+
+.fa.iconButton
+  width: 30px
+  height: 18px
+  color: #FFF
+  background-color: #000
+  padding: 6px 0px
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 15px
+  border-radius: 6px
 
 #json-pretty > pre
-    height: 13rem
-    padding: 0.5rem
-    overflow: auto
+  height: 13rem
+  padding: 0.5rem
+  overflow: auto
 
 #json-pretty > pre::-webkit-scrollbar
   width: 9px
@@ -204,25 +205,25 @@
   width: 4rem
 
 .copy-btn:active
-    opacity: 0.5    
+  opacity: 0.5
 
 .copy-btn:hover
-    cursor: pointer  
+  cursor: pointer
 
-.theme-switch-wrapper 
+.theme-switch-wrapper
   display: inline
   float: right
   align-items: center
   margin-top: 2%
 
 @media only screen and (max-width: 1440px)
-    .sidebar
-        width: 400px
+  .sidebar
+    width: 400px
 
 @media only screen and (max-width: 1366px)
-    .sidebar
-        width: 380px
+  .sidebar
+    width: 380px
 
 @media only screen and (max-width: 1280px)
-    .sidebar
-        width: 360px
\ No newline at end of file
+  .sidebar
+    width: 360px