diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js
index 6528e05..1b2643c 100644
--- a/src/components/main-app/ol-init.js
+++ b/src/components/main-app/ol-init.js
@@ -5,7 +5,7 @@ import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCompass } from '@fortawesome/free-solid-svg-icons';
+import { faCompass, faBars } from '@fortawesome/free-solid-svg-icons';
 import { handleLocationButton } from 'utils';
 import { setSource } from '../../api/map-data';
 
@@ -56,6 +56,16 @@ export default function OlInit() {
               <FontAwesomeIcon icon={faCompass} />
             </button>
           </div>
+          <div className="ol-control max-btn-container">
+            <button
+              className="maximize-btn"
+              onClick={() => {
+                document.querySelector('.sidebar').style.display = 'block';
+              }}
+            >
+              <FontAwesomeIcon icon={faBars} />
+            </button>
+          </div>
         </div>
       </div>
     </>
diff --git a/src/components/main-app/sidebar-wrapper/alpha-input.js b/src/components/main-app/sidebar-wrapper/alpha-input.js
index adb7b58..6027164 100644
--- a/src/components/main-app/sidebar-wrapper/alpha-input.js
+++ b/src/components/main-app/sidebar-wrapper/alpha-input.js
@@ -1,20 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_OPACITY, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { Collapse } from 'utils';
 
 export default function AlphaInput() {
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   return (
     <>
-      <p>Alpha Value (0-1)</p>
-      <input
-        type="number"
-        value={opacity}
-        className="input-text"
-        placeholder="Alpha Input"
-        onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+      <Collapse
+        title="Alpha Value (0-1)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="number"
+          value={opacity}
+          className="input-text"
+          placeholder="Alpha Input"
+          onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar-wrapper/colors-input.js b/src/components/main-app/sidebar-wrapper/colors-input.js
index 35cbd43..9c5cdf6 100644
--- a/src/components/main-app/sidebar-wrapper/colors-input.js
+++ b/src/components/main-app/sidebar-wrapper/colors-input.js
@@ -4,6 +4,7 @@ import { URL_COLORS, URL_UPDATE_PUSH } from 'config';
 import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
 import { getColorsArray, getColorsString } from 'utils';
 import { ChromePicker } from 'react-color';
+import { Collapse } from 'utils';
 
 const popover = {
   position: 'absolute',
@@ -29,6 +30,7 @@ export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
   const colorsArray = getColorsArray(colors);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   const changeItemColor = color => {
     setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
@@ -47,54 +49,68 @@ export default function ColorsInput() {
   return (
     <>
       <div className="color-row">
-        <p>Colors Palette</p>{' '}
-        <a
-          href="#add"
-          onClick={() => addColor()}
-          class="iconButton fa fa-lg fa-plus"
-        >
-          {' '}
-        </a>
+        <Collapse
+          title="Colors Palette"
+          toggleCollapse={toggleCollapse}
+          setToggleCollapse={setToggleCollapse}
+        />{' '}
+        {toggleCollapse ? (
+          true
+        ) : (
+          <a
+            href="#add"
+            onClick={() => addColor()}
+            class="iconButton fa fa-lg fa-plus"
+          >
+            {' '}
+          </a>
+        )}
       </div>
-      <div className="color-input">
-        {colorsArray.map((color, key) => (
-          <>
-            <div
-              className="color-input-item"
-              style={
-                itemColorStatus && itemColorStatus.key === key
-                  ? { background: color, borderColor: 'black' }
-                  : { background: color }
-              }
-            >
+      {toggleCollapse ? (
+        true
+      ) : (
+        <>
+          <div className="color-input">
+            {colorsArray.map((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>
+              </>
+            ))}
+          </div>
+          {itemColorStatus ? (
+            <div style={popover}>
               <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>
+                style={cover}
+                onClick={() => {
+                  setItemColorStatus(false);
+                }}
+              />
+              <ChromePicker
+                color={itemColorStatus.color}
+                onChange={changeItemColor}
+              />
             </div>
-          </>
-        ))}
-      </div>
-      {itemColorStatus ? (
-        <div style={popover}>
-          <div
-            style={cover}
-            onClick={() => {
-              setItemColorStatus(false);
-            }}
-          />
-          <ChromePicker
-            color={itemColorStatus.color}
-            onChange={changeItemColor}
-          />
-        </div>
-      ) : null}
+          ) : null}
+        </>
+      )}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar-wrapper/colors-output.js b/src/components/main-app/sidebar-wrapper/colors-output.js
new file mode 100644
index 0000000..e986e1b
--- /dev/null
+++ b/src/components/main-app/sidebar-wrapper/colors-output.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import JSONPretty from 'react-json-pretty';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import * as JSONPrettyMon from 'react-json-pretty/dist/acai';
+import { Collapse } from 'utils';
+
+export default function ColorsOutput({ text, setColorFormat }) {
+  const [toggleCollapse, setToggleCollapse] = useState(true);
+
+  const handleColorFormatChange = event => {
+    setColorFormat(event.target.value);
+  };
+
+  return (
+    <>
+      <Collapse
+        title="Colors Output Box"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
+      />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <>
+          <div className="color-output-btns">
+            <select
+              id="color-format"
+              defaultValue="rgba"
+              onChange={event => handleColorFormatChange(event)}
+            >
+              <option value="hex">HEX</option>
+              <option value="rgba">RGBA</option>
+              <option value="hsla">HSLA</option>
+            </select>
+            <CopyToClipboard text={text}>
+              <button className="copy-btn">Copy</button>
+            </CopyToClipboard>
+          </div>
+          <JSONPretty
+            id="json-pretty"
+            data={text}
+            theme={JSONPrettyMon}
+          ></JSONPretty>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/components/main-app/sidebar-wrapper/index.js b/src/components/main-app/sidebar-wrapper/index.js
index 85523ca..7ef9dc0 100644
--- a/src/components/main-app/sidebar-wrapper/index.js
+++ b/src/components/main-app/sidebar-wrapper/index.js
@@ -2,3 +2,4 @@ export { default as TilesInput } from './tiles-input';
 export { default as ShapeInput } from './shape-input';
 export { default as ColorsInput } from './colors-input';
 export { default as AlphaInput } from './alpha-input';
+export { default as ColorsOutput } from './colors-output';
diff --git a/src/components/main-app/sidebar-wrapper/shape-input.js b/src/components/main-app/sidebar-wrapper/shape-input.js
index 348a43b..75550be 100644
--- a/src/components/main-app/sidebar-wrapper/shape-input.js
+++ b/src/components/main-app/sidebar-wrapper/shape-input.js
@@ -1,20 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_SHAPE, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { Collapse } from 'utils';
 
 export default function ShapeInput() {
   const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   return (
     <>
-      <p>Shape URL (Only Topo JSON)</p>
-      <input
-        type="text"
-        value={shape}
-        className="input-text"
-        placeholder="Shape URL"
-        onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+      <Collapse
+        title="Shape URL (Only Topo JSON)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="text"
+          value={shape}
+          className="input-text"
+          placeholder="Shape URL"
+          onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar-wrapper/tiles-input.js b/src/components/main-app/sidebar-wrapper/tiles-input.js
index 9da0d05..5ce3a33 100644
--- a/src/components/main-app/sidebar-wrapper/tiles-input.js
+++ b/src/components/main-app/sidebar-wrapper/tiles-input.js
@@ -1,20 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_TILES, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { Collapse } from 'utils';
 
 export default function TilesInput() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   return (
     <>
-      <p>Tiles URL (XYZ Format)</p>
-      <input
-        type="text"
-        value={tiles}
-        className="input-text"
-        placeholder="Tiles URL"
-        onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+      <Collapse
+        title="Tiles URL (XYZ Format)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="text"
+          value={tiles}
+          className="input-text"
+          placeholder="Tiles URL"
+          onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js
index f7821c7..2cecab1 100644
--- a/src/components/main-app/sidebar.js
+++ b/src/components/main-app/sidebar.js
@@ -6,15 +6,14 @@ import {
   TilesInput,
   ShapeInput,
   ColorsInput,
+  ColorsOutput,
   AlphaInput,
 } from './sidebar-wrapper';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyles } from './themes/global-styles';
 import { lightTheme, darkTheme } from './themes/themes';
-import '../../sass/index.sass';
-import JSONPretty from 'react-json-pretty';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import * as JSONPrettyMon from 'react-json-pretty/dist/acai';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 
 export default function Sidebar({ setTheme, theme }) {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
@@ -29,15 +28,19 @@ export default function Sidebar({ setTheme, theme }) {
     );
   }, [colors, opacity, colorFormat]);
 
-  const handleColorFormatChange = event => {
-    setColorFormat(event.target.value);
-  };
-
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyles />
       <div className="sidebar">
         <div className="sidebar-wrapper">
+          <button
+            className="minimize-btn"
+            onClick={() => {
+              document.querySelector('.sidebar').style.display = 'none';
+            }}
+          >
+            <FontAwesomeIcon size="xs" icon={faWindowMinimize} />
+          </button>
           <h1 className="logo">
             Raster<span>Playground</span>
           </h1>
@@ -65,27 +68,11 @@ export default function Sidebar({ setTheme, theme }) {
           <br />
           <ColorsInput />
           <br />
-          <AlphaInput />
           <br />
+          <AlphaInput />
           <br />
-          <select
-            id="color-format"
-            defaultValue="rgba"
-            onChange={event => handleColorFormatChange(event)}
-          >
-            <option value="hex">HEX</option>
-            <option value="rgba">RGBA</option>
-            <option value="hsla">HSLA</option>
-          </select>
-          <CopyToClipboard text={text}>
-            <button className="copy-btn">Copy</button>
-          </CopyToClipboard>
           <br />
-          <JSONPretty
-            id="json-pretty"
-            data={text}
-            theme={JSONPrettyMon}
-          ></JSONPretty>
+          <ColorsOutput text={text} setColorFormat={setColorFormat} />
         </div>
       </div>
     </ThemeProvider>
diff --git a/src/components/main-app/themes/global-styles.js b/src/components/main-app/themes/global-styles.js
index 3acc370..e5fb953 100644
--- a/src/components/main-app/themes/global-styles.js
+++ b/src/components/main-app/themes/global-styles.js
@@ -7,9 +7,13 @@ export const GlobalStyles = createGlobalStyle`
     transition: all 0.5s linear;
   }
 
+  .sidebar::-webkit-scrollbar-thumb{
+    background-color: ${({ theme }) => theme.btnBgColor};
+  }
+
   #json-pretty > pre::-webkit-scrollbar-thumb{
     background-color: ${({ theme }) => theme.scroll};
-  }
+  }  
 
   #json-pretty > pre{
     background-color: ${({ theme }) => theme.background} !important;
@@ -33,7 +37,7 @@ export const GlobalStyles = createGlobalStyle`
     color: ${({ theme }) => theme.text};
   }
 
-  .fa.iconButton, #color-format, .copy-btn{
+  .fa.iconButton, #color-format, .copy-btn, .minimize-btn{
     background-color: ${({ theme }) => theme.btnBgColor};
     color: ${({ theme }) => theme.btnColor};
   }  
diff --git a/src/sass/_app.sass b/src/sass/_app.sass
index 988356b..9ec3ca3 100644
--- a/src/sass/_app.sass
+++ b/src/sass/_app.sass
@@ -22,7 +22,14 @@
             margin-bottom: 10px
             span 
                 font-weight: 300
-  
+
+.sidebar::-webkit-scrollbar
+  width: 9px
+
+.sidebar::-webkit-scrollbar-thumb
+  border-radius: 10px
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)
+
 .theme-toggle
   .switch
     display: flex
@@ -159,6 +166,9 @@
   border-radius: 10px
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)
 
+.color-output-btns
+  margin-top: 0.6rem
+
 #color-format
   border: none
   border-radius: 6px
@@ -190,6 +200,31 @@
   align-items: center
   margin-top: 2%
 
+.collapsible-title
+  cursor: pointer
+
+.minimize-btn
+  border: none
+  border-radius: 2px
+  position: absolute
+  top: 0.5rem
+  left: 0.5rem
+  text-align: center
+  line-height: 0.4rem
+
+.minimize-btn:active
+    opacity: 0.5
+
+.max-btn-container
+  z-index: 1
+  top: 1rem
+  left: 1rem
+
+.maximize-btn
+  border: none
+  height: 1.5rem
+  width: 3rem
+
 @media only screen and (max-width: 1440px)
     .sidebar
         width: 400px
diff --git a/src/utils/collapsible.js b/src/utils/collapsible.js
new file mode 100644
index 0000000..677c00e
--- /dev/null
+++ b/src/utils/collapsible.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function Collapse({ title, toggleCollapse, setToggleCollapse }) {
+  return (
+    <>
+      <p
+        className="collapsible-title"
+        onClick={() => {
+          setToggleCollapse(!toggleCollapse);
+          console.log(toggleCollapse);
+        }}
+      >
+        {title}
+      </p>
+    </>
+  );
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 3cfb176..7a65ef5 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -5,3 +5,4 @@ export { default as copyColor } from './copy-color';
 export { setMap, handleLocationButton } from './current-location';
 export { default as addSearchControl } from './add-search-control';
 export { default as themeToggler } from './theme-toggler';
+export { default as Collapse } from './collapsible';