diff --git a/package-lock.json b/package-lock.json
index 894a75c..89128c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1947,70 +1947,6 @@
         "chalk": "^4.0.0"
       }
     },
-    "@mapbox/geojson-rewind": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
-      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
-      "requires": {
-        "get-stream": "^6.0.1",
-        "minimist": "^1.2.6"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
-        },
-        "minimist": {
-          "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-          "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
-        }
-      }
-    },
-    "@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
-    },
-    "@mapbox/mapbox-gl-language": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-language/-/mapbox-gl-language-1.0.1.tgz",
-      "integrity": "sha512-gL58ojl7gaWLfbSISoB2QJEfTK3j+NKvPH9og0r+c3bd5BNqhY19Eb4OPfDc5+dGmjW03LhtZBc4n2b7Xn8kjA=="
-    },
-    "@mapbox/mapbox-gl-supported": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
-      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
-    },
-    "@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "@mapbox/tiny-sdf": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
-      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
-    },
-    "@mapbox/unitbezier": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
-      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
-    },
-    "@mapbox/vector-tile": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
-      "requires": {
-        "@mapbox/point-geometry": "~0.1.0"
-      }
-    },
-    "@mapbox/whoots-js": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
-      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3881,14 +3817,6 @@
         "@types/node": "*"
       }
     },
-    "@types/supercluster": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
-      "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
     "@types/tapable": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -7511,11 +7439,6 @@
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
       "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
     },
-    "csscolorparser": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
-    },
     "cssdb": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@@ -10428,11 +10351,6 @@
         "rbush": "^3.0.1"
       }
     },
-    "geojson-vt": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
-      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
-    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -10491,11 +10409,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "gl-matrix": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
-    },
     "glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -10593,11 +10506,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
       "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
     },
-    "grid-index": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
-      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
-    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -12759,11 +12667,6 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
     },
-    "kdbush": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
-      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -12868,7 +12771,7 @@
     "load-script": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
-      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
     },
     "loader-runner": {
       "version": "2.4.0",
@@ -13139,35 +13042,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "mapbox-gl": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
-      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
-      "requires": {
-        "@mapbox/geojson-rewind": "^0.5.2",
-        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
-        "@mapbox/mapbox-gl-supported": "^2.0.1",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/tiny-sdf": "^2.0.6",
-        "@mapbox/unitbezier": "^0.0.1",
-        "@mapbox/vector-tile": "^1.3.1",
-        "@mapbox/whoots-js": "^3.1.0",
-        "csscolorparser": "~1.0.3",
-        "earcut": "^2.2.4",
-        "geojson-vt": "^3.2.1",
-        "gl-matrix": "^3.4.3",
-        "grid-index": "^1.1.0",
-        "kdbush": "^4.0.1",
-        "murmurhash-js": "^1.0.0",
-        "pbf": "^3.2.1",
-        "potpack": "^2.0.0",
-        "quickselect": "^2.0.0",
-        "rw": "^1.3.3",
-        "supercluster": "^8.0.0",
-        "tinyqueue": "^2.0.3",
-        "vt-pbf": "^3.1.3"
-      }
-    },
     "marker-clusterer-plus": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
@@ -13616,11 +13490,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "murmurhash-js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
-      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
-    },
     "namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
@@ -14495,15 +14364,6 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
-    "pbf": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
-      "requires": {
-        "ieee754": "^1.1.12",
-        "resolve-protobuf-schema": "^2.1.0"
-      }
-    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -20307,11 +20167,6 @@
         "uniq": "^1.0.1"
       }
     },
-    "potpack": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
-      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
-    },
     "preact": {
       "version": "10.5.14",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
@@ -20464,11 +20319,6 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
       "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
     },
-    "protocol-buffers-schema": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
-      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
-    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -21273,56 +21123,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-mapbox-gl": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz",
-      "integrity": "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw==",
-      "requires": {
-        "@turf/bbox": "4.7.3",
-        "@turf/helpers": "4.7.3",
-        "@types/supercluster": "^5.0.1",
-        "deep-equal": "1.0.1",
-        "supercluster": "^7.0.0"
-      },
-      "dependencies": {
-        "@turf/bbox": {
-          "version": "4.7.3",
-          "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz",
-          "integrity": "sha512-78lSzSQuLHq0363sVlmkX9uxBejeWGyZhQBAh7oc1ucnsYsem1m4ynjDXG8/hKP4nG/yUFWPdV9xklezKdvzKw==",
-          "requires": {
-            "@turf/meta": "^4.7.3"
-          }
-        },
-        "@turf/helpers": {
-          "version": "4.7.3",
-          "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz",
-          "integrity": "sha512-hk5ANVazb80zK6tjJYAG76oCRTWMQo6SAFu5E1dVnlb2kT3FHLoPcOB9P11duwDafMwywz24KZ+FUorB5e728w=="
-        },
-        "@turf/meta": {
-          "version": "4.7.4",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz",
-          "integrity": "sha512-cvwz4EI9BjrgRHxmJ3Z3HKxq6k/fj/V95kwNZ8uWNLncCvrb7x1jUBDkQUo1tShnYdZ8eBgA+a2bvJmAM+MJ0A=="
-        },
-        "deep-equal": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-          "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw=="
-        },
-        "kdbush": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
-          "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
-        },
-        "supercluster": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
-          "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
-          "requires": {
-            "kdbush": "^3.0.0"
-          }
-        }
-      }
-    },
     "react-onclickoutside": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
@@ -22621,14 +22421,6 @@
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
       "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
-    "resolve-protobuf-schema": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
-      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
-      "requires": {
-        "protocol-buffers-schema": "^3.3.1"
-      }
-    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -22983,11 +22775,6 @@
         "aproba": "^1.1.1"
       }
     },
-    "rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -24508,14 +24295,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
       "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
     },
-    "supercluster": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
-      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
-      "requires": {
-        "kdbush": "^4.0.2"
-      }
-    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -24900,11 +24679,6 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
-    "threebox-plugin": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/threebox-plugin/-/threebox-plugin-2.2.7.tgz",
-      "integrity": "sha512-H87Nm4w1PfisHPHzavTGXlwIoJpx2+QU57GooQYIhF51lsg+U5A0KGf3Jrv/HWsLCGOwV2BTnv7UTLfpO1EccQ=="
-    },
     "throat": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -25643,16 +25417,6 @@
       "resolved": "https://registry.npmjs.org/voc/-/voc-1.2.0.tgz",
       "integrity": "sha512-BOuDjFFYvJdZO6e/N65AlaDItXo2TgyLjeyRYcqgAPkXpp5yTJcvkL2n+syO1r9Qc5g96tfBD2tuiMhYDmaGcA=="
     },
-    "vt-pbf": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
-      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
-      "requires": {
-        "@mapbox/point-geometry": "0.1.0",
-        "@mapbox/vector-tile": "^1.3.1",
-        "pbf": "^3.2.1"
-      }
-    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 08254ec..5b76038 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -406,9 +406,9 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .tooltip-test{position:absolute;left:500px;top:500px;}
 .tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
 /* .tooltip-box div{text-align:left;font-size:13px;} */
-.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
+.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:2px;font-size:0.875rem;color:#f4f4f4}
 /* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
-.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px}
+.tooltip-txt{font-weight:400;font-size:12px;padding-top:4px;word-break: keep-all;}
 .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
 .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;}
 .tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
@@ -845,4 +845,49 @@ background-size: 75% auto;
 .box_4n div{width:50%;height:50vh;}
 
 .modal-video{display:flex;align-items: center;justify-content: center;}
-.modal-video>.modal-content{height:90vh;}
\ No newline at end of file
+.modal-video>.modal-content{height:90vh;}
+
+.modal-uam-reservation{min-width:1200px}
+.modal-uam-reservation .modal-title{width:100%;}
+.modal-uam-reservation .modal-body{padding:1.4rem}
+.modal-uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
+.modal-uam-reservation .nav-link{border:0px;background-color:#242b3d}
+.modal-uam-reservation .nav-link.active span{font-weight:500}
+.uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;}
+.uam-reservation-header h5{font-weight:500;}
+.uam-reservation-header .step{display:flex;}
+.uam-reservation-header .step li{font-size:0.875rem}
+.uam-reservation-header .step li + li{margin-left:0.5rem}
+.uam-reservation-tab-list{display:flex;}
+.uam-reservation-tab-list .list{display: flex;justify-content:center;align-items:center;flex:1;background-color:#242b3d;padding:0.5rem;font-size:0.875rem;text-align:center;border-radius: 0.357rem;cursor:pointer;}
+.uam-reservation-tab-list .list + .list{margin-left:0.5rem}
+.step-wrap{margin-top:1rem;border-radius: 0.357rem;}
+.step-box{padding:1rem;background-color:#242b3d;}
+.step-box + .step-box{margin-top:1rem}
+.step-box-ti{border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem;display:flex;align-items:center;justify-content: space-between;}
+.step-box-ti h5{font-weight:500;font-size:1rem}
+.step-box-city{display:flex;width:100%;}
+.step-box-city-list{flex:1;}
+.step-box-city-list .step-city-ti{background:#283046;border:1px solid #404656;padding:0.8rem 1.7rem;font-weight:500;text-align:center;}
+.step-box-city-list + .step-box-city-list{margin-left:1rem}
+.step-box-city-list ul li{padding:0.8rem 1.7rem;border:1px solid #404656;border-top:none;cursor: pointer;font-size:0.875rem}
+.step-box-city-list ul li:hover{background:#2a3247;transition: 0.3s ease;-webkit-transition: 0.3s ease;}
+.search-box-city{display:flex;width:100%;}
+.search-city{display:flex;flex:1;justify-content:space-between;align-items:center;background:#404656;padding:0.8rem;font-size:0.875rem;border-radius:0.357rem;}
+.search-city + .search-city{margin-left:1rem;}
+.search-city .arrow svg{width:18px;margin-top:-2px;margin-left:4px;margin-right:4px}
+.search-city .delete:hover svg{color:#ea5455;cursor: pointer;transition:0.3s ease;-webkit-transition:0.3s ease;}
+.step-wrap .calendar{display:flex;justify-content:center;}
+.step-wrap .calendar .dayContainer + .dayContainer{box-shadow:none;}
+.step-wrap .passengers ul{display:flex;}
+.step-wrap .passengers ul li{flex:1;}
+.step-wrap .passengers ul li + li{margin-left:1rem;}
+.step-wrap .passengers h6{font-size:0.875rem;font-weight:500;margin-bottom:0.5rem}
+.step-wrap .passengers .btn-icon svg{margin-top:4px;}
+.step-wrap .finish-btn{text-align:right;margin-top:1rem;}
+
+
+.active-step{color:rgba(255,255,255,0.8);font-weight:500;}
+.inactive-step{color:rgba(255,255,255,0.4);}
+.list.active {background-color: #7367f0;color:#fff;font-weight:500;}
+.finish.active{background-color: #ff9f43;color: #fff;}
diff --git a/src/views/control/setting/ControlFsm.js b/src/views/control/setting/ControlFsm.js
new file mode 100644
index 0000000..0b0c9c2
--- /dev/null
+++ b/src/views/control/setting/ControlFsm.js
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Badge,
+  Button,
+  Input,
+  InputGroup,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  Nav,
+  NavItem,
+  NavLink
+} from 'reactstrap';
+import {
+  Step1,
+  Step2,
+  Step3,
+  Step4,
+  ReserveStep1,
+  ReserveStep2,
+  ReserveStep3,
+  ReserveStep4
+} from './steps';
+
+export default function ControlReservation({ modal, handler }) {
+  const [activeTab, setActiveTab] = useState(1);
+  const [step, setStep] = useState(1);
+  const [airTraficCheck, setAirTraficCheck] = useState(1);
+  const [isChoise, setIsChoise] = useState(false);
+  const [search, setSearch] = useState(false);
+  const [reserveStep, setReserveStep] = useState(1);
+
+  return (
+    <div
+      className='vertically-centered-modal'
+      style={{ maxWidth: '95vh', height: '95vh', margin: 0 }}
+    >
+      <Modal
+        isOpen={modal}
+        toggle={handler}
+        className='modal-dialog-centered modal-lg'
+        style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
+      >
+        <ModalHeader
+          toggle={handler}
+        >
+          FSM 비행계획서 작성
+        </ModalHeader>
+        <ModalBody className='pal-modal-body'>
+          ddd
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/views/control/setting/ControlReservation.js b/src/views/control/setting/ControlReservation.js
index 7dd1d58..1af937a 100644
--- a/src/views/control/setting/ControlReservation.js
+++ b/src/views/control/setting/ControlReservation.js
@@ -30,297 +30,95 @@ export default function ControlReservation({ modal, handler }) {
   const [search, setSearch] = useState(false);
   const [reserveStep, setReserveStep] = useState(1);
 
+  function getStepColorClass(stepNumber, currentStep) {
+    return stepNumber === currentStep ? 'active-step' : 'inactive-step';
+  }
   return (
     <div
       className='vertically-centered-modal'
-      style={{ maxWidth: '95vh', height: '95vh', margin: 0 }}
     >
       <Modal
         isOpen={modal}
         toggle={handler}
-        className='modal-dialog-centered modal-lg'
-        style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
+        className='modal-dialog-centered modal-lg modal-uam-reservation'
       >
         <ModalHeader
           toggle={handler}
-          style={{ paddingLeft: search ? '1%' : '45%' }}
         >
           {search ? (
             reserveStep !== 4 ? (
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  width: '1600px'
-                }}
-              >
-                <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
-                  <ul style={{ listStyle: 'none' }}>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 1 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➀ 항공교통 조회
-                    </li>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 2 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➁ 항공교통 선택{' '}
-                    </li>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 3 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➂ 탑승정보 입력{' '}
-                    </li>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 4 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➃ 결제
-                    </li>
+              <div className='uam-reservation-header'>
+                <h5>도심항공교통(UAM) 예약</h5>
+                <div>
+                  <ul className='step'>
+                    <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
+                    <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
+                    <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
+                    <li className={getStepColorClass(4, step)}>➃ 결제</li>
                   </ul>
                 </div>
               </div>
             ) : (
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  width: '1600px'
-                }}
-              >
-                <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
-                <div style={{ fontWeight: 'bold', color: '#990033' }}>
+              <div className='uam-reservation-header'>
+                <h4>도심항공교통(UAM) 예약</h4>
+                <div>
                   결제완료
                 </div>
               </div>
             )
           ) : (
-            '도심항공교통(UAM) 예약'
+            <div className='uam-reservation-header'>
+              <h5>도심항공교통(UAM) 예약</h5>
+              <ul className='step'>
+                <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
+                <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
+                <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
+                <li className={getStepColorClass(4, step)}>➃ 결제</li>
+              </ul>
+          </div>  
           )}
         </ModalHeader>
-        <ModalBody className='pal-modal-body'>
+        <ModalBody>
           {!search ? (
-            <div
-              style={{
-                padding: '10px',
-                height: '600px'
-              }}
-            >
-              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <ul style={{ listStyle: 'none' }}>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 1 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➀ 항공교통 조회
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 2 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➁ 항공교통 선택{' '}
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 3 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➂ 탑승정보 입력{' '}
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 4 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➃ 결제
-                  </li>
-                </ul>
-              </div>
-              <div style={{ marginBottom: '20px' }}>
-                <Nav>
-                  <NavItem style={{ border: '1px solid #990033' }}>
+            <div>
+              <div>
+                <Nav justified pills>
+                  <NavItem>
                     <NavLink
                       active={activeTab === 1}
                       onClick={() => setActiveTab(1)}
-                      style={{
-                        backgroundColor: activeTab === 1 ? '#990033' : '#fff',
-                        color: activeTab === 1 ? '#fff' : '#000',
-                        padding: '5px 30px'
-                      }}
                     >
-                      <span
-                        style={{
-                          fontWeight: activeTab === 1 ? 'bold' : 'normal'
-                        }}
-                        className=''
-                      >
+                      <span>
                         왕복
                       </span>
                     </NavLink>
                   </NavItem>
-                  <NavItem style={{ border: '1px solid #990033' }}>
+                  <NavItem>
                     <NavLink
                       active={activeTab === 2}
                       onClick={() => setActiveTab(2)}
-                      style={{
-                        backgroundColor: activeTab === 2 ? '#990033' : '#fff',
-                        color: activeTab === 2 ? '#fff' : '#000',
-                        padding: '5px 30px'
-                      }}
                     >
-                      <span
-                        className=''
-                        style={{
-                          fontWeight: activeTab === 2 ? 'bold' : 'normal'
-                        }}
-                      >
+                      <span>
                         편도
                       </span>
                     </NavLink>
                   </NavItem>
                 </Nav>
               </div>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'flex-start',
-                  marginBottom: '10px'
-                }}
-              >
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 1 ? '#990033' : '#fff',
-                    color: airTraficCheck === 1 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 1 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
-                  onClick={() => {
-                    setAirTraficCheck(1);
-                  }}
-                >
+              <div className='uam-reservation-tab-list'>
+                <div className={`list ${airTraficCheck === 1 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(1);}}>
                   출발지
                 </div>
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 2 ? '#990033' : '#fff',
-                    color: airTraficCheck === 2 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 2 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
-                  onClick={() => {
-                    setAirTraficCheck(2);
-                  }}
-                >
+                <div className={`list ${airTraficCheck === 2 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(2);}}>
                   도착지
                 </div>
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 3 ? '#990033' : '#fff',
-                    color: airTraficCheck === 3 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 3 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
-                  onClick={() => {
-                    setAirTraficCheck(3);
-                  }}
-                >
+                <div className={`list ${airTraficCheck === 3 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(3);}}>
                   탑승일
                 </div>
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 4 ? '#990033' : '#fff',
-                    color: airTraficCheck === 4 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 4 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
-                  onClick={() => {
-                    setAirTraficCheck(4);
-                  }}
-                >
+                <div className={`list ${airTraficCheck === 4 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(4);}}>
                   탑승객
                 </div>
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #F2F2F2',
-                    marginRight: '57px',
-                    backgroundColor: isChoise ? '#FEFF00' : '#F2F2F2',
-                    color: isChoise ? '#000' : '#BFBFBF',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    paddingLeft: '5px',
-                    cursor: 'pointer',
-                    fontWeight: 'bold'
-                  }}
-                  onClick={() => {
-                    setSearch(true);
-                    setStep(2);
-                  }}
-                >
+                <div className={`list finish ${isChoise ? 'active' : ''}`} onClick={() => {setSearch(true); setStep(2);}}>
                   항공교통 조회
                 </div>
               </div>
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index 714afa7..28deb54 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/src/views/control/setting/ControlSetting.js
@@ -19,6 +19,7 @@ import {
   sensorClickAction
 } from '../../../modules/control/map/actions/controlMapActions';
 import ControlReservation from './ControlReservation';
+import ControlFsm from './ControlFsm';
 
 const ControlSetting = props => {
   const [modal, setModal] = useState(false);
@@ -34,8 +35,12 @@ const ControlSetting = props => {
     dispatch(areaClickAction(val));
   };
 
-  const handlerModal = () => {
-    setModal(!modal);
+  // const handlerModal = () => {
+  //   setModal(!modal);
+  // };
+
+  const handlerModal = (modalName) => {
+    setModal(modalName);
   };
 
   return (
@@ -183,17 +188,37 @@ const ControlSetting = props => {
         <div className='layer-content-box'>
           <div className='map-btn'>
             <ButtonGroup>
-              <Button color='primary' onClick={handlerModal}>
+              <Button color='primary' onClick={() => handlerModal('reservation')}>
               도심항공교통(UAM) 예약 바로가기
               </Button>
             </ButtonGroup>
           </div>
         </div>
       </div>
-      {modal ? (
+      <div className='layer-content'>
+        <div className='layer-ti'>
+          <h4>FSM 비행계획서 작성</h4>
+        </div>
+        <div className='layer-content-box'>
+          <div className='map-btn'>
+            <ButtonGroup>
+              <Button color='primary' onClick={() => handlerModal('fsm')}>
+              FSM 비행계획서 작성 바로가기 
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
+      </div>
+      {/* {modal ? (
         <ControlReservation modal={modal} handler={handlerModal} />
       ) : (
         <></>
+      )} */}
+      {modal === 'reservation' && (
+        <ControlReservation modal={true} handler={() => handlerModal(null)} />
+      )}
+      {modal === 'fsm' && (
+        <ControlFsm modal={true} handler={() => handlerModal(null)} />
       )}
     </div>
   );
diff --git a/src/views/control/setting/steps/Step1.js b/src/views/control/setting/steps/Step1.js
index b816c06..3b7ddbb 100644
--- a/src/views/control/setting/steps/Step1.js
+++ b/src/views/control/setting/steps/Step1.js
@@ -1,250 +1,66 @@
+import { XCircle, ArrowRight } from 'react-feather';
+
 export default function Step1() {
   return (
-    <div
-      style={{
-        border: '1px solid #990033',
-        padding: '25px',
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>출발지 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
-        </div>
+    <div className='step-wrap'>
+      <div className='step-box'>
+      <div className='step-box-ti'>
+        <h5>출발지 선택</h5>
       </div>
-      <div style={{ padding: '20px 15px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-around',
-            marginBottom: '20px'
-          }}
-        >
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              아라뱃길
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                height: '45px',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                borderBottom: '1px solid #990033',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              드론시험 인증센터
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              계양 신도시
+        <div className='step-box-city'>
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>아라뱃길</li>
+            <li>
+              <ul>
+                <li>드론시험 인증센터</li>
+                <li>계양 신도시</li>
+              </ul>
             </li>
           </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              한강
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              고양 킨텍스
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              김포공항
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              여의도 공원
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>한강</li>
+            <li>
+              <ul>
+                <li>고양 킨텍스</li>
+                <li>김포공항</li>
+                <li>여의도 공원</li>
+              </ul>
             </li>
           </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              탄천
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              잠실한강공원
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              수서역
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>탄천</li>
+            <li>
+              <ul>
+                <li>잠실한강공원</li>
+                <li>수서역</li>
+              </ul>
             </li>
           </ul>
         </div>
-        <div style={{ paddingLeft: '15px', paddingRight: '15px' }}>
-          <div style={{ marginBottom: '10px' }}>
-            <span style={{ fontWeight: 'bold', color: '#000' }}>
-              최근 조회하신 여정
-            </span>
+      </div>
+      <div className='step-box'>
+        <div className='step-box-ti'>
+          <h5>최근 조회하신 여정</h5>
+        </div>
+        <div className='search-box-city'>
+          <div className='search-city'>
+            <div>
+              <span>드론시험 인증센터</span>
+              <span className='arrow'><ArrowRight /></span>
+              <span>계양 신도시</span>
+            </div>
+            <div className='delete'>
+              <XCircle />
+            </div>
           </div>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between'
-            }}
-          >
-            <div
-              style={{
-                width: '47.5%',
-                backgroundColor: '#F2F2F2',
-                display: 'flex',
-                justifyContent: 'space-between',
-                padding: '15px'
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>
-                {'드론시험 인증센터 -> 계양 신도시'}
-              </span>
-              <div
-                style={{
-                  backgroundColor: '#fff',
-                  borderRadius: '50%',
-                  width: '20px',
-                  textAlign: 'center',
-                  fontWeight: 'bold'
-                }}
-              >
-                X
-              </div>
+          <div className='search-city'>
+            <div>
+              <span>드론시험 인증센터</span>
+              <span className='arrow'><ArrowRight /></span>
+              <span>계양 신도시</span>
             </div>
-            <div
-              style={{
-                width: '47.5%',
-                backgroundColor: '#F2F2F2',
-                display: 'flex',
-                justifyContent: 'space-between',
-                padding: '15px'
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>
-                {'고양 킨텍스 -> 여의도 공원'}
-              </span>
-              <div
-                style={{
-                  backgroundColor: '#fff',
-                  borderRadius: '50%',
-                  width: '20px',
-                  textAlign: 'center',
-                  fontWeight: 'bold'
-                }}
-              >
-                X
-              </div>
+            <div className='delete'>
+              <XCircle />
             </div>
           </div>
         </div>
diff --git a/src/views/control/setting/steps/Step2.js b/src/views/control/setting/steps/Step2.js
index 10a95db..d235d62 100644
--- a/src/views/control/setting/steps/Step2.js
+++ b/src/views/control/setting/steps/Step2.js
@@ -1,188 +1,37 @@
 export default function Step2() {
   return (
-    <div
-      style={{
-        border: '1px solid #990033',
-        padding: '25px',
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>도착지 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
-        </div>
+    <div className='step-wrap'>
+      <div className='step-box'>
+      <div className='step-box-ti'>
+        <h5>도착지 선택</h5>
       </div>
-      <div style={{ padding: '20px 15px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-around',
-            marginBottom: '20px'
-          }}
-        >
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              아라뱃길
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                height: '45px',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                borderBottom: '1px solid #990033',
-                padding: '10px',
-                color: 'darkgray'
-              }}
-            >
-              드론시험 인증센터
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'darkgray'
-              }}
-            >
-              계양 신도시
+        <div className='step-box-city'>
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>아라뱃길</li>
+            <li>
+              <ul>
+                <li>드론시험 인증센터</li>
+                <li>계양 신도시</li>
+              </ul>
             </li>
           </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              한강
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'darkgray'
-              }}
-            >
-              고양 킨텍스
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              김포공항
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              여의도 공원
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>한강</li>
+            <li>
+              <ul>
+                <li>고양 킨텍스</li>
+                <li>김포공항</li>
+                <li>여의도 공원</li>
+              </ul>
             </li>
           </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              탄천
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'darkgray'
-              }}
-            >
-              잠실한강공원
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'darkgray'
-              }}
-            >
-              수서역
+          <ul className='step-box-city-list'>
+            <li className='step-city-ti'>탄천</li>
+            <li>
+              <ul>
+                <li>잠실한강공원</li>
+                <li>수서역</li>
+              </ul>
             </li>
           </ul>
         </div>
diff --git a/src/views/control/setting/steps/Step3.js b/src/views/control/setting/steps/Step3.js
index c214e3f..61add00 100644
--- a/src/views/control/setting/steps/Step3.js
+++ b/src/views/control/setting/steps/Step3.js
@@ -1,57 +1,19 @@
+import '@styles/react/libs/flatpickr/flatpickr.scss';
 import Flatpickr from 'react-flatpickr';
-import 'flatpickr/dist/themes/material_green.css';
+import { Button } from 'reactstrap';
+
+
 export default function Step3() {
   return (
-    <div
-      style={{
-        border: '1px solid #990033',
-        padding: '25px',
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>탑승일 선택</h5>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <button
-            style={{
-              border: '1px solid #000',
-              padding: '0 10px',
-              fontSize: '1rem'
-            }}
-          >
-            초기화
-          </button>
-          <div
-            style={{
-              fontWeight: 'bold',
-              cursor: 'pointer',
-              fontSize: '1.5rem',
-              marginLeft: '10px'
-            }}
-          >
-            X
-          </div>
+    <div className='step-wrap'>
+      <div className='step-box'>
+        <div className='step-box-ti'>
+          <h5>탑승일 선택</h5>
+          <Button size='sm'>초기화</Button>
         </div>
-      </div>
-      <div style={{ padding: '20px 15px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-        >
+        <div className='calendar'>
           <Flatpickr
             // value={['2023-10-10', '2023-10-10']}
-
             // className='hidden-input'
             id='searchDate'
             options={{
diff --git a/src/views/control/setting/steps/Step4.js b/src/views/control/setting/steps/Step4.js
index b49e1d0..4423a74 100644
--- a/src/views/control/setting/steps/Step4.js
+++ b/src/views/control/setting/steps/Step4.js
@@ -1,185 +1,43 @@
+import NumberInput from '@components/number-input'
+import { Button, Label } from 'reactstrap'
+
 export default function Step4({ setIsChoise }) {
   return (
-    <div
-      style={{
-        border: '1px solid #990033',
-        padding: '25px 25px 5px 25px',
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>탑승객 수 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
+    <div className='step-wrap'>
+      <div className='step-box'>
+        <div className='step-box-ti'>
+          <h5>탑승객 수 선택</h5>
         </div>
-      </div>
-      <div style={{ padding: '20px 15px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            marginBottom: '30px'
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            성인<span> (만 13세 이상)</span>{' '}
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              width: '400px',
-              backgroundColor: '#f2f2f2',
-              padding: '15px',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>성인 1</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
-          </div>
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            marginBottom: '30px'
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            소아<span> (만 2세 ~ 13세 미만)</span>{' '}
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              width: '400px',
-              backgroundColor: '#f2f2f2',
-              padding: '15px',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>소아 0</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
-          </div>
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            marginBottom: '30px'
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            유아<span> (만 2세 미만)</span>{' '}
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              width: '400px',
-              backgroundColor: '#f2f2f2',
-              padding: '15px',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>유아 0</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
-          </div>
-        </div>
-        <div
-          style={{ display: 'flex', justifyContent: 'end', alignItems: 'end' }}
-        >
-          <button
-            style={{
-              border: '1px solid #7F7F7F',
-              padding: '0 10px',
-              fontSize: '1rem',
-              backgroundColor: '#7F7F7F',
-              color: '#fff',
-              padding: '10px 50px',
-              fontWeight: 'bold',
-              fontSize: '0.8rem'
-            }}
-            onClick={() => setIsChoise(true)}
-          >
-            선택 완료
-          </button>
+        <div className='passengers'>
+          <ul>
+            <li>
+              <div>
+                <h6>성인 (만 13세 이상)</h6>
+                <div>
+                  <NumberInput size='sm' id='min-max-number-input1' min={0} max={9} />
+                </div>
+              </div>
+            </li>
+            <li>
+              <div>
+                <h6>소아 (만 2세 ~ 13세 미만)</h6>
+                <div>
+                  <NumberInput size='sm' id='min-max-number-input2' min={0} max={9} />
+                </div>
+              </div>
+            </li>
+            <li>
+              <div>
+                <h6>유아 (만 2세 미만)</h6>
+                <div>
+                  <NumberInput size='sm' id='min-max-number-input3' min={0} max={9} />
+                </div>
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
+      <div className='finish-btn'><Button color='success' onClick={() => setIsChoise(true)}>선택 완료</Button></div>
     </div>
   );
 }