diff --git a/src/components/UI/Map/OpenLayerMap.tsx b/src/components/UI/Map/OpenLayerMap.tsx
index 57a1262..bf7e89a 100644
--- a/src/components/UI/Map/OpenLayerMap.tsx
+++ b/src/components/UI/Map/OpenLayerMap.tsx
@@ -222,6 +222,7 @@ const OpenLayersMap = () => {
         boxShadow: 'none',
         padding: '0 32px',
         height: '72px',
+        borderRadius: '60px',
         minHeight: '72px',
         display: 'flex',
         alignItems: 'center',
@@ -235,8 +236,8 @@ const OpenLayersMap = () => {
           display: 'flex',
           alignItems: 'center',
           gap: '8px',
-          backgroundColor: '#ffffff',
           borderRadius: '60px',
+          backgroundColor: '#ffffff',
           padding: '8px',
           boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
           border: '1px solid #e9ecef'
@@ -246,11 +247,12 @@ const OpenLayersMap = () => {
               key={item}
               style={{
                 padding: '12px 20px',
-                backgroundColor: index === 1 ? '#2c3e50' : 'transparent',
+                backgroundColor: index === 1 ? '#000000' : 'transparent',
                 color: index === 1 ? 'white' : '#495057',
                 border: 'none',
-                borderRadius: '60px',
                 fontSize: '14px',
+
+                borderRadius: '60px',
                 fontWeight: '500',
                 cursor: 'pointer',
                 transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
@@ -275,21 +277,20 @@ const OpenLayersMap = () => {
           position: 'absolute',
           top: '24px',
           left: '24px',
+          bottom: '24px',
           width: '360px',
-          height: 'calc(100vh - 120px)',
           backgroundColor: '#ffffff',
-          borderRadius: '24px',
           padding: '24px',
           overflowY: 'auto',
           overflowX: 'hidden',
-          boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
+          boxShadow: '#000000 0px 4px 12px rgba(44, 62, 80, 0.1)',
           zIndex: 100,
           border: '1px solid rgba(0,0,0,0.08)',
           transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
           transform: sidebarOpen ? 'translateX(0)' : 'translateX(-400px)'
         }}>
           {/* Sidebar toggle button */}
-          <button 
+          <button
             onClick={() => setSidebarOpen(!sidebarOpen)}
             style={{
               position: 'absolute',
@@ -299,7 +300,6 @@ const OpenLayersMap = () => {
               height: '40px',
               backgroundColor: '#ffffff',
               border: '1px solid #e9ecef',
-              borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -320,12 +320,11 @@ const OpenLayersMap = () => {
             <div style={{
               width: '8px',
               height: '32px',
-              background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
-              borderRadius: '4px'
+              background: '#000000',
             }} />
             <h3 style={{
               margin: '0',
-              color: '#2c3e50',
+              color: '#000000',
               fontSize: '20px',
               fontWeight: '600',
               letterSpacing: '-0.3px'
@@ -338,7 +337,6 @@ const OpenLayersMap = () => {
           <div className="search-container" style={{
             background: 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)',
             padding: '20px',
-            borderRadius: '16px',
             marginBottom: '24px',
             border: '1px solid #e9ecef',
             boxShadow: '0 2px 8px rgba(0,0,0,0.04)'
@@ -353,9 +351,9 @@ const OpenLayersMap = () => {
                   width: '100%',
                   padding: '14px 16px',
                   border: '1px solid #dee2e6',
-                  borderRadius: '12px',
                   marginBottom: '12px',
                   fontSize: '14px',
+                  borderRadius: '60px',
                   color: '#000000',
                   fontFamily: "'Poppins', sans-serif",
                   backgroundColor: 'white',
@@ -370,11 +368,11 @@ const OpenLayersMap = () => {
                 style={{
                   width: '100%',
                   padding: '14px',
-                  background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
+                  background: '#000000',
                   color: 'white',
                   border: 'none',
-                  borderRadius: '12px',
                   cursor: 'pointer',
+                  borderRadius: '60px',
                   fontSize: '14px',
                   fontWeight: '600',
                   fontFamily: "'Poppins', sans-serif",
@@ -382,7 +380,7 @@ const OpenLayersMap = () => {
                   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                 }}
               >
-                🔍 Search Location
+                Search
               </button>
             </form>
           </div>
@@ -397,7 +395,7 @@ const OpenLayersMap = () => {
             }}>
               <h4 style={{
                 margin: '0',
-                color: '#495057',
+                color: '#000000',
                 fontSize: '16px',
                 fontWeight: '600'
               }}>
@@ -405,10 +403,11 @@ const OpenLayersMap = () => {
               </h4>
               <span style={{
                 background: 'linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%)',
-                color: '#6c757d',
+                color: '#000000',
                 padding: '4px 8px',
-                borderRadius: '12px',
                 fontSize: '12px',
+                borderRadius: '60px',
+
                 fontWeight: '500',
                 boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
               }}>
@@ -426,8 +425,7 @@ const OpenLayersMap = () => {
                 background: layerVisibility[layer.topic]
                   ? 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)'
                   : 'white',
-                border: `1px solid ${layerVisibility[layer.topic] ? '#2c3e50' : '#e9ecef'}`,
-                borderRadius: '12px',
+                border: `1px solid ${layerVisibility[layer.topic] ? '#000000' : '#e9ecef'}`,
                 transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                 boxShadow: layerVisibility[layer.topic]
                   ? '0 4px 8px rgba(44, 62, 80, 0.1)'
@@ -436,7 +434,7 @@ const OpenLayersMap = () => {
               }}>
                 <span style={{
                   fontSize: '14px',
-                  color: '#2c3e50',
+                  color: '#000000',
                   flex: 1,
                   marginRight: '12px',
                   fontWeight: '500'
@@ -461,13 +459,13 @@ const OpenLayersMap = () => {
                       position: 'absolute',
                       cursor: 'pointer',
                       top: 0,
+                      borderRadius: '60px',
                       left: 0,
                       right: 0,
                       bottom: 0,
                       background: layerVisibility[layer.topic]
                         ? 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)'
                         : '#dee2e6',
-                      borderRadius: '26px',
                       transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                       display: 'flex',
                       alignItems: 'center',
@@ -476,12 +474,12 @@ const OpenLayersMap = () => {
                       <span style={{
                         position: 'absolute',
                         content: '',
+                        borderRadius: '60px',
                         height: '20px',
                         width: '20px',
                         left: layerVisibility[layer.topic] ? '25px' : '3px',
                         bottom: '3px',
                         backgroundColor: 'white',
-                        borderRadius: '50%',
                         transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                         boxShadow: '0 2px 6px rgba(0,0,0,0.15)'
                       }} />
@@ -494,9 +492,9 @@ const OpenLayersMap = () => {
                     fontSize: '12px',
                     color: '#adb5bd',
                     fontStyle: 'italic',
+
                     backgroundColor: '#f8f9fa',
                     padding: '4px 8px',
-                    borderRadius: '8px',
                     boxShadow: '0 1px 2px rgba(0,0,0,0.05)'
                   }}>
                     Search first
@@ -520,20 +518,18 @@ const OpenLayersMap = () => {
           <div ref={mapDivRef} style={{
             width: '100%',
             height: '100%',
-            borderRadius: '0',
             overflow: 'hidden'
           }} />
-          
+
           {/* Coordinate Display */}
           {clickedCoordinate && (
             <div className="coordinate-display" style={{
               position: 'absolute',
               bottom: '24px',
               left: '24px',
-              background: 'rgba(44, 62, 80, 0.9)',
+              background: '#000000',
               color: 'white',
               padding: '12px 16px',
-              borderRadius: '12px',
               fontSize: '13px',
               fontFamily: "'Poppins', monospace",
               fontWeight: '500',