diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js
index 6528e05..e6449b2 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, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { handleLocationButton } from 'utils';
 import { setSource } from '../../api/map-data';
 
@@ -47,6 +47,14 @@ export default function OlInit() {
     }
   }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
 
+  //Display the search bar after click on the search icon for small screens only
+  const displaysearchbar=(e)=>
+  {
+    let div=document.getElementsByClassName('gcd-gl-control')[0];
+    div.classList.add('show-results');
+
+  }
+
   return (
     <>
       <div>
@@ -56,6 +64,13 @@ export default function OlInit() {
               <FontAwesomeIcon icon={faCompass} />
             </button>
           </div>
+          
+          {/* //Search bar icon */}
+          <div className="ol-control search">
+            <button onClick={displaysearchbar}>
+              <FontAwesomeIcon icon={faSearch} />
+            </button>
+          </div>
         </div>
       </div>
     </>
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js
index f7821c7..e1840d6 100644
--- a/src/components/main-app/sidebar.js
+++ b/src/components/main-app/sidebar.js
@@ -16,6 +16,9 @@ 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 { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
+
 export default function Sidebar({ setTheme, theme }) {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
@@ -33,6 +36,22 @@ export default function Sidebar({ setTheme, theme }) {
     setColorFormat(event.target.value);
   };
 
+  //Changes needed for hiding sidebar-input
+  const hideDiv=(e)=>{
+    document.getElementsByClassName('sidebar-input')[0].style.display='none';
+    document.getElementsByClassName('sidebar')[0].style.height='auto';
+    document.getElementsByClassName('hide')[0].style.display='none';
+    document.getElementsByClassName('show')[0].style.display='block';
+  }
+
+  //Changes needed for display sidebar-input
+  const showDiv=(e)=>{
+    document.getElementsByClassName('sidebar-input')[0].style.display='block';
+    document.getElementsByClassName('sidebar')[0].style.height='100vh';
+    document.getElementsByClassName('hide')[0].style.display='block';
+    document.getElementsByClassName('show')[0].style.display='none';
+  }
+
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyles />
@@ -56,36 +75,47 @@ export default function Sidebar({ setTheme, theme }) {
               <div class="toggle-moon">🌙</div>
             </label>
           </div>
+
+          {/* Icons to hide and show sidebar-input div */}
+          <div className='hide-show'>
+              <FontAwesomeIcon className='hide' onClick={hideDiv} icon={faMinus}/>
+              <FontAwesomeIcon className='show' onClick={showDiv} icon={faPlus}/>
+          </div>
+          
           <hr />
-          <ShapeInput />
-          <br />
-          <br />
-          <TilesInput />
-          <br />
-          <br />
-          <ColorsInput />
-          <br />
-          <AlphaInput />
-          <br />
-          <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>
+          {/* Create a new div and add class sidebar-input */}
+          <div className="sidebar-input">
+            <ShapeInput />
+            <br />
+            <br />
+            <TilesInput />
+            <br />
+            <br />
+            <ColorsInput />
+            <br />
+            <AlphaInput />
+            <br />
+            <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>
+          </div>
+          
         </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..6abf3e5 100644
--- a/src/components/main-app/themes/global-styles.js
+++ b/src/components/main-app/themes/global-styles.js
@@ -33,7 +33,7 @@ export const GlobalStyles = createGlobalStyle`
     color: ${({ theme }) => theme.text};
   }
 
-  .fa.iconButton, #color-format, .copy-btn{
+  .fa.iconButton, #color-format, .copy-btn, .hide-show{
     background-color: ${({ theme }) => theme.btnBgColor};
     color: ${({ theme }) => theme.btnColor};
   }  
diff --git a/src/sass/_app.sass b/src/sass/_app.sass
index 988356b..8195e9d 100644
--- a/src/sass/_app.sass
+++ b/src/sass/_app.sass
@@ -22,6 +22,9 @@
             margin-bottom: 10px
             span 
                 font-weight: 300
+        
+        .sidebar-game
+            display: none
   
 .theme-toggle
   .switch
@@ -190,6 +193,31 @@
   align-items: center
   margin-top: 2%
 
+//For the button to show and hide sidebar-input
+.hide-show
+    width: 30px
+    height: 15px
+    color: #FFF
+    background-color: #000
+    padding: 6px 0px
+    display: flex
+    align-items: center
+    justify-content: center
+    font-size: 15px
+    border-radius: 6px
+    margin-left: 90%
+
+    .show
+        display: none
+    
+    .show:hover
+        cursor: pointer
+          
+    .hide:hover
+        cursor: pointer     
+        
+      
+
 @media only screen and (max-width: 1440px)
     .sidebar
         width: 400px
diff --git a/src/sass/_map.sass b/src/sass/_map.sass
index db9772f..74a0067 100644
--- a/src/sass/_map.sass
+++ b/src/sass/_map.sass
@@ -8,9 +8,18 @@
     z-index: 1
     margin-top: 0.5rem
 
+//For search-icon
+.search
+    position: fixed
+    top: 6.4rem
+    right: 0.5rem
+    z-index: 1
+    margin-top: 0.5rem
+    display: none !important
+
 .gcd-gl-control.ol-control
     padding: 0
-    width: 20rem
+    width: inherit
 
 .ol-geocoder
     position: absolute
@@ -58,4 +67,22 @@
         background: #ccc
 
 .hide-results
-    display: none
+    display: none !important
+
+
+//Show block used to display search bar
+.show-results
+    display: block !important
+
+//To display search icon and hide search bar
+@media only screen and (max-width: 1000px)
+    .search
+        display: block !important
+    
+    .gcd-gl-control
+        display: none
+
+    
+
+    
+