diff --git a/README.md b/README.md
index f2f09a2..e646c7a 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
     - [X] Alpha color (0 - transparent)
     - [ ] Copy color in different format - HEX, RGBA, HSLA (JSON)
     - [ ] Download color format for ASE, GIMP/Inscape color scheme
-- [ ] Mobile version 
+- [X] Mobile version 
 - [ ] Search bar to search places 
 - [ ] Go to current location
 
diff --git a/src/assets/svg/menu-icon.svg b/src/assets/svg/menu-icon.svg
new file mode 100644
index 0000000..a94bc56
--- /dev/null
+++ b/src/assets/svg/menu-icon.svg
@@ -0,0 +1 @@
+<svg id="light" enable-background="new 0 0 24 24" height="30" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg"><g><path d="m21.5 24h-19c-1.379 0-2.5-1.122-2.5-2.5v-19c0-1.378 1.121-2.5 2.5-2.5h19c1.379 0 2.5 1.122 2.5 2.5v19c0 1.378-1.121 2.5-2.5 2.5zm-19-23c-.827 0-1.5.673-1.5 1.5v19c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-19c0-.827-.673-1.5-1.5-1.5z"/></g><g><path d="m16.5 8h-9c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h9c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g><g><path d="m16.5 12.5h-9c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h9c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g><g><path d="m16.5 17h-9c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h9c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/main-app/reusable/index.js b/src/components/main-app/reusable/index.js
new file mode 100644
index 0000000..6b69dd6
--- /dev/null
+++ b/src/components/main-app/reusable/index.js
@@ -0,0 +1 @@
+export { default as ToggleSidebarData } from './toggle-sidebar-data';
diff --git a/src/components/main-app/reusable/toggle-sidebar-data.js b/src/components/main-app/reusable/toggle-sidebar-data.js
new file mode 100644
index 0000000..92fb929
--- /dev/null
+++ b/src/components/main-app/reusable/toggle-sidebar-data.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function ToggleSidebarData({
+  heading,
+  showData,
+  toggleData,
+  extraData,
+}) {
+  return (
+    <div className="color-row">
+      <p>{heading}</p>
+      {showData ? extraData : null}
+      {showData ? (
+        <a
+          href="#hideData"
+          className="fa fa-lg fa-arrow-up iconButton"
+          onClick={toggleData}
+        >
+          {' '}
+        </a>
+      ) : (
+        <a
+          href="#showData"
+          className="fa fa-lg fa-arrow-down iconButton"
+          onClick={toggleData}
+        >
+          {' '}
+        </a>
+      )}
+    </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..fdcb69b 100644
--- a/src/components/main-app/sidebar-wrapper/alpha-input.js
+++ b/src/components/main-app/sidebar-wrapper/alpha-input.js
@@ -1,20 +1,32 @@
-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 { ToggleSidebarData } from '../reusable';
 
 export default function AlphaInput() {
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   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)}
+      <ToggleSidebarData
+        heading="Alpha Value (0-1)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="number"
+          value={opacity}
+          className="input-text"
+          placeholder="Alpha Input"
+          onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar-wrapper/color-details.js b/src/components/main-app/sidebar-wrapper/color-details.js
new file mode 100644
index 0000000..f00762e
--- /dev/null
+++ b/src/components/main-app/sidebar-wrapper/color-details.js
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { ToggleSidebarData } from '../reusable';
+
+export default function ColorDetails({ text }) {
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
+  return (
+    <>
+      <ToggleSidebarData
+        heading="Color Details"
+        showData={showData}
+        toggleData={toggleData}
+      />
+      {showData ? <div>{JSON.stringify(text)}</div> : null}
+    </>
+  );
+}
diff --git a/src/components/main-app/sidebar-wrapper/colors-input.js b/src/components/main-app/sidebar-wrapper/colors-input.js
index 35cbd43..609b4ee 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 { ToggleSidebarData } from '../reusable';
 
 const popover = {
   position: 'absolute',
@@ -29,6 +30,11 @@ export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
   const colorsArray = getColorsArray(colors);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   const changeItemColor = color => {
     setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
@@ -46,41 +52,48 @@ 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>
-      </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 }
-              }
-            >
+      <ToggleSidebarData
+        heading="Colors Palette"
+        showData={showData}
+        toggleData={toggleData}
+        extraData={
+          <a
+            href="#add"
+            onClick={() => addColor()}
+            className="iconButton fa fa-lg fa-plus"
+            style={{ marginLeft: '45%' }}
+          >
+            {' '}
+          </a>
+        }
+      />
+      {showData ? (
+        <div className="color-input">
+          {colorsArray.map((color, key) => (
+            <div className="display-inline" key={key}>
               <div
-                className="color-input-item-close"
-                onClick={e => deleteColor(key, colorsArray, onChangeColor)}
+                className="color-input-item"
+                style={
+                  itemColorStatus && itemColorStatus.key === key
+                    ? { background: color, borderColor: 'black' }
+                    : { background: color }
+                }
               >
-                <CloseSVG />
+                <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
-                className="color-input-item-overlay"
-                onClick={e => setItemColorStatus({ color, key })}
-              ></div>
             </div>
-          </>
-        ))}
-      </div>
+          ))}
+        </div>
+      ) : null}
       {itemColorStatus ? (
         <div style={popover}>
           <div
diff --git a/src/components/main-app/sidebar-wrapper/index.js b/src/components/main-app/sidebar-wrapper/index.js
index 85523ca..122a123 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 ColorDetails } from './color-details';
diff --git a/src/components/main-app/sidebar-wrapper/shape-input.js b/src/components/main-app/sidebar-wrapper/shape-input.js
index 348a43b..14720dd 100644
--- a/src/components/main-app/sidebar-wrapper/shape-input.js
+++ b/src/components/main-app/sidebar-wrapper/shape-input.js
@@ -1,20 +1,32 @@
-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 { ToggleSidebarData } from '../reusable';
 
 export default function ShapeInput() {
   const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   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)}
+      <ToggleSidebarData
+        heading="Shape URL (Only Topo JSON)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="text"
+          value={shape}
+          className="input-text"
+          placeholder="Shape URL"
+          onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar-wrapper/tiles-input.js b/src/components/main-app/sidebar-wrapper/tiles-input.js
index 9da0d05..57de4a7 100644
--- a/src/components/main-app/sidebar-wrapper/tiles-input.js
+++ b/src/components/main-app/sidebar-wrapper/tiles-input.js
@@ -1,20 +1,32 @@
-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 { ToggleSidebarData } from '../reusable';
 
 export default function TilesInput() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   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)}
+      <ToggleSidebarData
+        heading="Tiles URL (XYZ Format)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="text"
+          value={tiles}
+          className="input-text"
+          placeholder="Tiles URL"
+          onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js
index 64bb6cd..99fcc66 100644
--- a/src/components/main-app/sidebar.js
+++ b/src/components/main-app/sidebar.js
@@ -2,17 +2,39 @@ import { URL_COLORS, URL_OPACITY } from 'config';
 import React, { useEffect, useState } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { copyColor, getColorsArray } from 'utils';
+import { ReactComponent as MenuIconSVG } from 'assets/svg/menu-icon.svg';
+import { AppConstants } from 'constants/index';
 import {
   TilesInput,
   ShapeInput,
   ColorsInput,
   AlphaInput,
+  ColorDetails,
 } from './sidebar-wrapper';
 
 export default function Sidebar() {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
   const [text, setText] = useState('');
+  const [showSidebarMobile, setShowSidebarMobile] = useState(false);
+
+  const tabs = (
+    <div>
+      <ShapeInput />
+      <br />
+      <br />
+      <TilesInput />
+      <br />
+      <br />
+      <ColorsInput />
+      <br />
+      <br />
+      <AlphaInput />
+      <br />
+      <br />
+      <ColorDetails text={text} />
+    </div>
+  );
 
   useEffect(() => {
     const colorArray = getColorsArray(colors);
@@ -20,25 +42,37 @@ export default function Sidebar() {
   }, [colors, opacity]);
 
   return (
-    <div className="sidebar">
-      <div className="sidebar-wrapper">
-        <h1 className="logo">
-          Raster<span>Playground</span>
-        </h1>
-        <hr />
-        <ShapeInput />
-        <br />
-        <br />
-        <TilesInput />
-        <br />
-        <br />
-        <ColorsInput />
-        <br />
-        <AlphaInput />
-        <br />
-        <br />
-        <div>{JSON.stringify(text)}</div>
-      </div>
+    <div>
+      {window.innerWidth > AppConstants.SCREEN_WIDTH_LIMIT ? (
+        <div className="sidebar">
+          <div className="sidebar-wrapper">
+            <h1 className="logo">
+              Raster<span>Playground</span>
+            </h1>
+            <hr />
+            {tabs}
+          </div>
+        </div>
+      ) : (
+        <div className="sidebar">
+          <div className="sidebar-wrapper">
+            <div
+              className="expand-sidebar-button"
+              onClick={() => {
+                setShowSidebarMobile(!showSidebarMobile);
+              }}
+            >
+              <MenuIconSVG />
+            </div>
+            <h1 className="logo">
+              Raster<span>Playground</span>
+            </h1>
+            <div className="sidebar-mobile">
+              {showSidebarMobile ? tabs : null}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/constants/app-constants.js b/src/constants/app-constants.js
new file mode 100644
index 0000000..77a1876
--- /dev/null
+++ b/src/constants/app-constants.js
@@ -0,0 +1,5 @@
+let obj = {
+  SCREEN_WIDTH_LIMIT: 769,
+};
+
+export default obj;
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 0000000..052e960
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1 @@
+export { default as AppConstants } from './app-constants';
diff --git a/src/sass/_app.sass b/src/sass/_app.sass
index 9b1e2ec..51acf9c 100644
--- a/src/sass/_app.sass
+++ b/src/sass/_app.sass
@@ -88,6 +88,8 @@
     font-size: 15px
     border-radius: 6px
 
+.display-inline
+    display: inline
 
 @media only screen and (max-width: 1440px)
     .sidebar
@@ -99,4 +101,17 @@
 
 @media only screen and (max-width: 1280px)
     .sidebar
-        width: 360px
\ No newline at end of file
+        width: 360px
+
+@media only screen and (max-width: 769px)
+    .sidebar
+        width: 100%
+        height: auto
+
+        .sidebar-wrapper
+            .expand-sidebar-button
+                float: right
+                margin-top: 7px
+
+            h1
+                font-size: 30px
\ No newline at end of file