diff --git a/.pnp.cjs b/.pnp.cjs
index a328e47e..2f7a7d9a 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -38,7 +38,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
       ["@monorepo/chooz", ["workspace:apps/chooz"]],\
       ["@monorepo/hooks", ["workspace:packages/hooks"]],\
       ["@monorepo/jurumarble", ["workspace:apps/jurumarble"]],\
-      ["@monorepo/ui", ["workspace:packages/ui"]],\
+      ["@monorepo/ui", ["virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#workspace:packages/ui", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#workspace:packages/ui", "workspace:packages/ui"]],\
       ["monorepo", ["workspace:."]]\
     ],\
     "fallbackPool": [\
@@ -4066,7 +4066,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageDependencies": [\
             ["@monorepo/chooz", "workspace:apps/chooz"],\
             ["@monorepo/hooks", "workspace:packages/hooks"],\
-            ["@monorepo/ui", "workspace:packages/ui"],\
+            ["@monorepo/ui", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#workspace:packages/ui"],\
             ["@next/font", "npm:13.4.19"],\
             ["@svgr/cli", "npm:7.0.0"],\
             ["@svgr/webpack", "npm:6.5.1"],\
@@ -4074,20 +4074,21 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@tanstack/react-query-devtools", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:4.33.0"],\
             ["@types/node", "npm:20.5.7"],\
             ["@types/react", "npm:18.2.21"],\
+            ["@types/styled-components", "npm:5.1.26"],\
             ["axios", "npm:1.5.0"],\
-            ["babel-plugin-styled-components", "virtual:181676522bcad7654c43a90fb30f8159f9163bd43d8c35fa31c9798550dff2151dbd52caa024cd2dacd66e5a091cc8337976a371d7c47691fcbc5c87bdb3bbb4#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:2.1.4"],\
             ["babel-preset-next", "npm:1.4.0"],\
             ["css-loader", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:6.8.1"],\
             ["next", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:13.4.19"],\
             ["next-transpile-modules", "npm:10.0.1"],\
             ["react", "npm:18.2.0"],\
             ["react-device-detect", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:2.2.3"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
             ["react-slick", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:0.29.0"],\
             ["slick-carousel", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:1.8.1"],\
             ["style-loader", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:3.3.3"],\
-            ["styled-components", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:5.3.11"],\
+            ["styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11"],\
             ["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
           ],\
           "linkType": "SOFT"\
@@ -4113,6 +4114,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@monorepo/jurumarble", "workspace:apps/jurumarble"],\
             ["@emotion/is-prop-valid", "npm:1.2.1"],\
             ["@monorepo/hooks", "workspace:packages/hooks"],\
+            ["@monorepo/ui", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#workspace:packages/ui"],\
             ["@svgr/cli", "npm:8.1.0"],\
             ["@svgr/core", "npm:8.1.0"],\
             ["@svgr/plugin-jsx", "virtual:f6fc21e1196a5e36ccf7110701b6043e0b913ea4ae1d1deb9368d1ebef4cb8924deb4e8e07aafc9678d844b070003814a4413e37134a210b07db139914fa76a4#npm:8.1.0"],\
@@ -4128,7 +4130,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["lodash", "npm:4.17.21"],\
             ["next", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:13.4.12"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
             ["react-toastify", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:9.1.3"],\
             ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"],\
@@ -4139,18 +4141,75 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         }]\
       ]],\
       ["@monorepo/ui", [\
-        ["workspace:packages/ui", {\
-          "packageLocation": "./packages/ui/",\
+        ["virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#workspace:packages/ui", {\
+          "packageLocation": "./.yarn/__virtual__/@monorepo-ui-virtual-8e35c521b2/1/packages/ui/",\
           "packageDependencies": [\
-            ["@monorepo/ui", "workspace:packages/ui"],\
+            ["@monorepo/ui", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#workspace:packages/ui"],\
+            ["@monorepo/hooks", "workspace:packages/hooks"],\
+            ["@types/monorepo__hooks", null],\
+            ["@types/node", "npm:20.5.7"],\
+            ["@types/react", "npm:18.2.21"],\
+            ["@types/react-dom", "npm:18.2.7"],\
+            ["@types/react-is", null],\
+            ["@types/styled-components", "npm:5.1.26"],\
+            ["react", "npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
+            ["react-is", "npm:18.2.0"],\
+            ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"],\
+            ["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
+          ],\
+          "packagePeers": [\
+            "@monorepo/hooks",\
+            "@types/monorepo__hooks",\
+            "@types/react-dom",\
+            "@types/react-is",\
+            "@types/react",\
+            "@types/styled-components",\
+            "react-dom",\
+            "react-is",\
+            "react",\
+            "styled-components"\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#workspace:packages/ui", {\
+          "packageLocation": "./.yarn/__virtual__/@monorepo-ui-virtual-bbfb055077/1/packages/ui/",\
+          "packageDependencies": [\
+            ["@monorepo/ui", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#workspace:packages/ui"],\
             ["@monorepo/hooks", "workspace:packages/hooks"],\
+            ["@types/monorepo__hooks", null],\
             ["@types/node", "npm:20.5.7"],\
             ["@types/react", "npm:18.2.21"],\
+            ["@types/react-dom", null],\
+            ["@types/react-is", null],\
             ["@types/styled-components", "npm:5.1.26"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
-            ["styled-components", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:5.3.11"],\
+            ["styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11"],\
+            ["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
+          ],\
+          "packagePeers": [\
+            "@monorepo/hooks",\
+            "@types/monorepo__hooks",\
+            "@types/react-dom",\
+            "@types/react-is",\
+            "@types/react",\
+            "@types/styled-components",\
+            "react-dom",\
+            "react-is",\
+            "react",\
+            "styled-components"\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["workspace:packages/ui", {\
+          "packageLocation": "./packages/ui/",\
+          "packageDependencies": [\
+            ["@monorepo/ui", "workspace:packages/ui"],\
+            ["@types/node", "npm:20.5.7"],\
+            ["@types/react", "npm:18.2.21"],\
+            ["@types/styled-components", "npm:5.1.26"],\
             ["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
           ],\
           "linkType": "SOFT"\
@@ -5209,7 +5268,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react-dom", "npm:18.2.7"],\
             ["@types/react-native", null],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-native", null],\
             ["use-sync-external-store", "virtual:287fccd9feb4edd5a3f2f35798ab7b2d62efb7b695baf588a4eab1df65d34a1efa49f762a59ad574264bfc913641f9cf46841c273f01492440d0ef17469b3b2d#npm:1.2.0"]\
           ],\
@@ -5232,7 +5291,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react-dom", null],\
             ["@types/react-native", null],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-native", null],\
             ["use-sync-external-store", "virtual:287fccd9feb4edd5a3f2f35798ab7b2d62efb7b695baf588a4eab1df65d34a1efa49f762a59ad574264bfc913641f9cf46841c273f01492440d0ef17469b3b2d#npm:1.2.0"]\
           ],\
@@ -5265,7 +5324,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react-dom", "npm:18.2.7"],\
             ["@types/tanstack__react-query", null],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["superjson", "npm:1.13.1"],\
             ["use-sync-external-store", "virtual:287fccd9feb4edd5a3f2f35798ab7b2d62efb7b695baf588a4eab1df65d34a1efa49f762a59ad574264bfc913641f9cf46841c273f01492440d0ef17469b3b2d#npm:1.2.0"]\
           ],\
@@ -5289,7 +5348,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react-dom", null],\
             ["@types/tanstack__react-query", null],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["superjson", "npm:1.13.1"],\
             ["use-sync-external-store", "virtual:287fccd9feb4edd5a3f2f35798ab7b2d62efb7b695baf588a4eab1df65d34a1efa49f762a59ad574264bfc913641f9cf46841c273f01492440d0ef17469b3b2d#npm:1.2.0"]\
           ],\
@@ -5585,17 +5644,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "SOFT"\
         }],\
-        ["virtual:181676522bcad7654c43a90fb30f8159f9163bd43d8c35fa31c9798550dff2151dbd52caa024cd2dacd66e5a091cc8337976a371d7c47691fcbc5c87bdb3bbb4#npm:2.1.4", {\
-          "packageLocation": "./.yarn/__virtual__/babel-plugin-styled-components-virtual-b9739b8831/0/cache/babel-plugin-styled-components-npm-2.1.4-40cd8c2d2b-d791aed68d.zip/node_modules/babel-plugin-styled-components/",\
+        ["virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4", {\
+          "packageLocation": "./.yarn/__virtual__/babel-plugin-styled-components-virtual-a1798919fa/0/cache/babel-plugin-styled-components-npm-2.1.4-40cd8c2d2b-d791aed68d.zip/node_modules/babel-plugin-styled-components/",\
           "packageDependencies": [\
-            ["babel-plugin-styled-components", "virtual:181676522bcad7654c43a90fb30f8159f9163bd43d8c35fa31c9798550dff2151dbd52caa024cd2dacd66e5a091cc8337976a371d7c47691fcbc5c87bdb3bbb4#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4"],\
             ["@babel/helper-annotate-as-pure", "npm:7.22.5"],\
             ["@babel/helper-module-imports", "npm:7.22.5"],\
             ["@babel/plugin-syntax-jsx", "virtual:bdeeb3d8269592d017c69d49d98383e742ae5ce561bce18cf6f41ef57a9de89d093f4edd5d396157ce7f8c0e09d00ae5e547cbe55d2913482f981ed40cb3d4a3#npm:7.22.5"],\
             ["@types/styled-components", null],\
             ["lodash", "npm:4.17.21"],\
             ["picomatch", "npm:2.3.1"],\
-            ["styled-components", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:5.3.11"]\
+            ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"]\
           ],\
           "packagePeers": [\
             "@types/styled-components",\
@@ -5603,17 +5662,35 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }],\
-        ["virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4", {\
-          "packageLocation": "./.yarn/__virtual__/babel-plugin-styled-components-virtual-a1798919fa/0/cache/babel-plugin-styled-components-npm-2.1.4-40cd8c2d2b-d791aed68d.zip/node_modules/babel-plugin-styled-components/",\
+        ["virtual:68a9a33632f1040438a32da064a66a3854f8d30087e3e2e5450720afc4e95cc10f141c96d079565a457e8f841886d95682d41d35df360e516a21dcf2746c9021#npm:2.1.4", {\
+          "packageLocation": "./.yarn/__virtual__/babel-plugin-styled-components-virtual-bb02a2a66d/0/cache/babel-plugin-styled-components-npm-2.1.4-40cd8c2d2b-d791aed68d.zip/node_modules/babel-plugin-styled-components/",\
           "packageDependencies": [\
-            ["babel-plugin-styled-components", "virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:68a9a33632f1040438a32da064a66a3854f8d30087e3e2e5450720afc4e95cc10f141c96d079565a457e8f841886d95682d41d35df360e516a21dcf2746c9021#npm:2.1.4"],\
             ["@babel/helper-annotate-as-pure", "npm:7.22.5"],\
             ["@babel/helper-module-imports", "npm:7.22.5"],\
             ["@babel/plugin-syntax-jsx", "virtual:bdeeb3d8269592d017c69d49d98383e742ae5ce561bce18cf6f41ef57a9de89d093f4edd5d396157ce7f8c0e09d00ae5e547cbe55d2913482f981ed40cb3d4a3#npm:7.22.5"],\
             ["@types/styled-components", null],\
             ["lodash", "npm:4.17.21"],\
             ["picomatch", "npm:2.3.1"],\
-            ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"]\
+            ["styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11"]\
+          ],\
+          "packagePeers": [\
+            "@types/styled-components",\
+            "styled-components"\
+          ],\
+          "linkType": "HARD"\
+        }],\
+        ["virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:2.1.4", {\
+          "packageLocation": "./.yarn/__virtual__/babel-plugin-styled-components-virtual-6c38853caf/0/cache/babel-plugin-styled-components-npm-2.1.4-40cd8c2d2b-d791aed68d.zip/node_modules/babel-plugin-styled-components/",\
+          "packageDependencies": [\
+            ["babel-plugin-styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:2.1.4"],\
+            ["@babel/helper-annotate-as-pure", "npm:7.22.5"],\
+            ["@babel/helper-module-imports", "npm:7.22.5"],\
+            ["@babel/plugin-syntax-jsx", "virtual:bdeeb3d8269592d017c69d49d98383e742ae5ce561bce18cf6f41ef57a9de89d093f4edd5d396157ce7f8c0e09d00ae5e547cbe55d2913482f981ed40cb3d4a3#npm:7.22.5"],\
+            ["@types/styled-components", "npm:5.1.26"],\
+            ["lodash", "npm:4.17.21"],\
+            ["picomatch", "npm:2.3.1"],\
+            ["styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11"]\
           ],\
           "packagePeers": [\
             "@types/styled-components",\
@@ -6739,7 +6816,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["fibers", null],\
             ["postcss", "npm:8.4.14"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["sass", null],\
             ["styled-jsx", "virtual:e2c6a261950790bd3783a0504187c9c1137db68dd124b19ebbec858de182b629f0a3eca7569663c03fdc9ebf569042d983abda5d32214402ec561129d25dfad1#npm:5.1.1"],\
             ["watchpack", "npm:2.4.0"],\
@@ -6783,7 +6860,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["caniuse-lite", "npm:1.0.30001524"],\
             ["postcss", "npm:8.4.14"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["sass", null],\
             ["styled-jsx", "virtual:e2c6a261950790bd3783a0504187c9c1137db68dd124b19ebbec858de182b629f0a3eca7569663c03fdc9ebf569042d983abda5d32214402ec561129d25dfad1#npm:5.1.1"],\
             ["watchpack", "npm:2.4.0"],\
@@ -7089,7 +7166,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react", "npm:18.2.21"],\
             ["@types/react-dom", null],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["ua-parser-js", "npm:1.0.35"]\
           ],\
           "packagePeers": [\
@@ -7109,10 +7186,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "SOFT"\
         }],\
-        ["virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0", {\
-          "packageLocation": "./.yarn/__virtual__/react-dom-virtual-41ba996b32/0/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip/node_modules/react-dom/",\
+        ["virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0", {\
+          "packageLocation": "./.yarn/__virtual__/react-dom-virtual-821b435e99/0/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip/node_modules/react-dom/",\
           "packageDependencies": [\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["@types/react", "npm:18.2.21"],\
             ["loose-envify", "npm:1.4.0"],\
             ["react", "npm:18.2.0"],\
@@ -7160,7 +7237,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["json2mq", "npm:0.2.0"],\
             ["lodash.debounce", "npm:4.0.8"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["resize-observer-polyfill", "npm:1.5.1"]\
           ],\
           "packagePeers": [\
@@ -7188,7 +7265,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@types/react-dom", "npm:18.2.7"],\
             ["clsx", "npm:1.2.1"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"]\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"]\
           ],\
           "packagePeers": [\
             "@types/react-dom",\
@@ -7445,24 +7522,24 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "SOFT"\
         }],\
-        ["virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:5.3.11", {\
-          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-181676522b/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
+        ["virtual:153feba997cc61a3cf2b119c73f0a46150f4475b2449b54a9c09ded230a7e59552f9ddaa3d6273b9d60d464227c04336d4b04595bea51827334f0e7840915565#npm:5.3.11", {\
+          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-dd7a05ab7b/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
           "packageDependencies": [\
-            ["styled-components", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:5.3.11"],\
+            ["styled-components", "virtual:153feba997cc61a3cf2b119c73f0a46150f4475b2449b54a9c09ded230a7e59552f9ddaa3d6273b9d60d464227c04336d4b04595bea51827334f0e7840915565#npm:5.3.11"],\
             ["@babel/helper-module-imports", "npm:7.22.5"],\
             ["@babel/traverse", "npm:7.22.11"],\
             ["@emotion/is-prop-valid", "npm:1.2.1"],\
             ["@emotion/stylis", "npm:0.8.5"],\
             ["@emotion/unitless", "npm:0.7.5"],\
-            ["@types/react", "npm:18.2.21"],\
+            ["@types/react", null],\
             ["@types/react-dom", null],\
             ["@types/react-is", null],\
-            ["babel-plugin-styled-components", "virtual:181676522bcad7654c43a90fb30f8159f9163bd43d8c35fa31c9798550dff2151dbd52caa024cd2dacd66e5a091cc8337976a371d7c47691fcbc5c87bdb3bbb4#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:dd7a05ab7b94d6e001f7863299a30decef4594e41284c3f88bedf5e784e1a1c64ba62635b3bd2bab9f7fbe3e6b5765e85e24619c304645041e0a91c321d35b82#npm:2.1.4"],\
             ["css-to-react-native", "npm:3.2.0"],\
             ["hoist-non-react-statics", "npm:3.3.2"],\
-            ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
-            ["react-is", "npm:18.2.0"],\
+            ["react", null],\
+            ["react-dom", null],\
+            ["react-is", null],\
             ["shallowequal", "npm:1.1.0"],\
             ["supports-color", "npm:5.5.0"]\
           ],\
@@ -7476,24 +7553,24 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }],\
-        ["virtual:153feba997cc61a3cf2b119c73f0a46150f4475b2449b54a9c09ded230a7e59552f9ddaa3d6273b9d60d464227c04336d4b04595bea51827334f0e7840915565#npm:5.3.11", {\
-          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-dd7a05ab7b/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
+        ["virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11", {\
+          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-61097bbc16/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
           "packageDependencies": [\
-            ["styled-components", "virtual:153feba997cc61a3cf2b119c73f0a46150f4475b2449b54a9c09ded230a7e59552f9ddaa3d6273b9d60d464227c04336d4b04595bea51827334f0e7840915565#npm:5.3.11"],\
+            ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"],\
             ["@babel/helper-module-imports", "npm:7.22.5"],\
             ["@babel/traverse", "npm:7.22.11"],\
             ["@emotion/is-prop-valid", "npm:1.2.1"],\
             ["@emotion/stylis", "npm:0.8.5"],\
             ["@emotion/unitless", "npm:0.7.5"],\
-            ["@types/react", null],\
-            ["@types/react-dom", null],\
+            ["@types/react", "npm:18.2.21"],\
+            ["@types/react-dom", "npm:18.2.7"],\
             ["@types/react-is", null],\
-            ["babel-plugin-styled-components", "virtual:dd7a05ab7b94d6e001f7863299a30decef4594e41284c3f88bedf5e784e1a1c64ba62635b3bd2bab9f7fbe3e6b5765e85e24619c304645041e0a91c321d35b82#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4"],\
             ["css-to-react-native", "npm:3.2.0"],\
             ["hoist-non-react-statics", "npm:3.3.2"],\
-            ["react", null],\
-            ["react-dom", null],\
-            ["react-is", null],\
+            ["react", "npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
+            ["react-is", "npm:18.2.0"],\
             ["shallowequal", "npm:1.1.0"],\
             ["supports-color", "npm:5.5.0"]\
           ],\
@@ -7507,23 +7584,23 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }],\
-        ["virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11", {\
-          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-61097bbc16/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
+        ["virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11", {\
+          "packageLocation": "./.yarn/__virtual__/styled-components-virtual-68a9a33632/0/cache/styled-components-npm-5.3.11-d45616b9af-10edd4dae3.zip/node_modules/styled-components/",\
           "packageDependencies": [\
-            ["styled-components", "virtual:8ec4233c825b2c709f2ff549456a05fb98060d621f5df14748cda36fdb51190eccc2e438466f7464c85557cdad97eb73aa6580e78bca957a1149bfc58c6ddf34#npm:5.3.11"],\
+            ["styled-components", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:5.3.11"],\
             ["@babel/helper-module-imports", "npm:7.22.5"],\
             ["@babel/traverse", "npm:7.22.11"],\
             ["@emotion/is-prop-valid", "npm:1.2.1"],\
             ["@emotion/stylis", "npm:0.8.5"],\
             ["@emotion/unitless", "npm:0.7.5"],\
             ["@types/react", "npm:18.2.21"],\
-            ["@types/react-dom", "npm:18.2.7"],\
+            ["@types/react-dom", null],\
             ["@types/react-is", null],\
-            ["babel-plugin-styled-components", "virtual:61097bbc169fab4637705d09a1bd9318cc1161163d1ff4744210fb91daa0a0f3cecb38cc5fe3ba2de304e631ca8700c2c15004e37b2b5d69e0e5d170a0576161#npm:2.1.4"],\
+            ["babel-plugin-styled-components", "virtual:68a9a33632f1040438a32da064a66a3854f8d30087e3e2e5450720afc4e95cc10f141c96d079565a457e8f841886d95682d41d35df360e516a21dcf2746c9021#npm:2.1.4"],\
             ["css-to-react-native", "npm:3.2.0"],\
             ["hoist-non-react-statics", "npm:3.3.2"],\
             ["react", "npm:18.2.0"],\
-            ["react-dom", "virtual:040d27df013de8c2443d97cd34785bd6338b0d64a4a625937768b1a38353fca7b8404d53a1248b5c67570c2a031bc43d100149c15012f4485eb41e15d763240d#npm:18.2.0"],\
+            ["react-dom", "virtual:a9e685c95fc9c2c05e15b14465ecc20924383932b7a1aa62172e110ba174ebedc352c8daf5023eb54ef5f0a5595ca6cf8763ef2477e003ebd1850bfb16231d67#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
             ["shallowequal", "npm:1.1.0"],\
             ["supports-color", "npm:5.5.0"]\
diff --git a/apps/chooz/app/my/components/UserInfoContainer.tsx b/apps/chooz/app/my/components/UserInfoContainer.tsx
index 47f32b3a..e4e8c99b 100644
--- a/apps/chooz/app/my/components/UserInfoContainer.tsx
+++ b/apps/chooz/app/my/components/UserInfoContainer.tsx
@@ -10,9 +10,8 @@ import Image from "next/image";
 function UserInfoContainer() {
   const { data: userInfo } = useGetUserInfo();
 
-  if (!userInfo) return <></>;
-
-  const { gender, username, age, mbti, imageUrl } = userInfo;
+  if (!userInfo) return null;
+  const { gender, username, age, mbti, imageUrl } = userInfo!;
 
   return (
     <>
diff --git a/apps/chooz/app/my/components/VoteItemDesktop.tsx b/apps/chooz/app/my/components/VoteItemDesktop.tsx
index a0b82acb..24ce55e5 100644
--- a/apps/chooz/app/my/components/VoteItemDesktop.tsx
+++ b/apps/chooz/app/my/components/VoteItemDesktop.tsx
@@ -128,7 +128,10 @@ const Message = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 46px;
+  /**
+  * 디자인이 깨져 임시 주석처리
+  * width: 46px;
+  */
   padding: 4px 6px;
   border-radius: 4px;
   ${({ theme }) => css`
diff --git a/apps/chooz/app/my/edit/services/useEditProfileService.ts b/apps/chooz/app/my/edit/services/useEditProfileService.ts
index e09b68e7..4f24ce81 100644
--- a/apps/chooz/app/my/edit/services/useEditProfileService.ts
+++ b/apps/chooz/app/my/edit/services/useEditProfileService.ts
@@ -10,12 +10,12 @@ export default function useEditProfileService() {
 
   const { categoryList, onClickCategory } = useClickCategory();
 
-  const { userInfo, setUserInfo } = useGetUserInfo();
+  const { data: userInfo, setUserInfo } = useGetUserInfo();
 
-  const { username, mbti, imageUrl } = userInfo;
+  const { username, mbti, imageUrl } = userInfo!;
 
   const onChangeUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUserInfo((prevUserInfo) => ({ ...prevUserInfo, username: e.target.value }));
+    setUserInfo({ ...userInfo, username: e.target.value });
   };
 
   const onChangeMbti = (value: string) => {
diff --git a/apps/chooz/app/my/page.tsx b/apps/chooz/app/my/page.tsx
index da019e85..dddf01ee 100644
--- a/apps/chooz/app/my/page.tsx
+++ b/apps/chooz/app/my/page.tsx
@@ -2,7 +2,7 @@
 
 import { media } from "@monorepo/ui/styles/media";
 import { MY_PAGE_VOTE_TYPE } from "lib/constants";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import styled, { css } from "styled-components";
 import TabContainer from "./components/TabContainer";
 import VoteList from "./components/VoteList";
@@ -10,6 +10,7 @@ import CountVoteContainer from "./components/VoteCountContainer";
 import { MyVoteListType } from "types/my";
 import useInfiniteMyVoteListService from "./services/useInfiniteMyPageVoteListService";
 import UserInfoContainer from "./components/UserInfoContainer";
+import { AsyncBoundary } from "../../lib/AsyncBoundary";
 
 function MyPage() {
   const [selectedTab, setSelectedTab] = useState<MyVoteListType>("created");
@@ -26,7 +27,9 @@ function MyPage() {
   return (
     <PageWrapper>
       <PageInner>
-        <UserInfoContainer />
+        <AsyncBoundary>
+          <UserInfoContainer />
+        </AsyncBoundary>
         <CountVoteContainer />
       </PageInner>
       <TabContainerWrapper>
diff --git a/apps/chooz/hooks/useGetUserInfo.ts b/apps/chooz/hooks/useGetUserInfo.ts
index 3da5a42d..30fe7546 100644
--- a/apps/chooz/hooks/useGetUserInfo.ts
+++ b/apps/chooz/hooks/useGetUserInfo.ts
@@ -1,25 +1,20 @@
 import { reactQueryKeys } from "lib/queryKeys";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getUserInfo } from "lib/apis/user";
-import { useState } from "react";
+import { GetUserInfoResponse } from "types/user";
 
-export function useGetUserInfo() {
-  const [userInfo, setUserInfo] = useState({
-    gender: "MALE",
-    username: "",
-    age: "",
-    mbti: "",
-    imageUrl: "",
-  });
+type SetUserInfoProps = Omit<GetUserInfoResponse, "userId" | "provider" | "providerId" | "email">;
 
+export function useGetUserInfo() {
   const { data } = useQuery(reactQueryKeys.userInfo(), getUserInfo, {
-    onSuccess: (data) => {
-      /**
-       * @Todo state를 사용 안하고 할 수 있는 방법 없을까?
-       */
-      setUserInfo(data);
-    },
+    suspense: true,
   });
 
-  return { data, userInfo, setUserInfo };
+  const qc = useQueryClient();
+
+  const setUserInfo = (userInfo: SetUserInfoProps) => {
+    qc.setQueryData(reactQueryKeys.userInfo(), userInfo);
+  };
+
+  return { data, setUserInfo };
 }
diff --git a/apps/chooz/lib/AsyncBoundary.tsx b/apps/chooz/lib/AsyncBoundary.tsx
new file mode 100644
index 00000000..1ba9ae19
--- /dev/null
+++ b/apps/chooz/lib/AsyncBoundary.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren, Suspense } from "react";
+import GlobalErrorBoundary from "./ErrorBoundary";
+
+export const AsyncBoundary = ({ children }: PropsWithChildren) => {
+  return (
+    <GlobalErrorBoundary errorComponent={<></>}>
+      <Suspense fallback={<></>}>{children}</Suspense>
+    </GlobalErrorBoundary>
+  );
+};
diff --git a/apps/chooz/lib/ErrorBoundary.tsx b/apps/chooz/lib/ErrorBoundary.tsx
new file mode 100644
index 00000000..354789eb
--- /dev/null
+++ b/apps/chooz/lib/ErrorBoundary.tsx
@@ -0,0 +1,41 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+
+interface State {
+  hasError: boolean;
+}
+
+interface Props {
+  errorComponent: ReactNode;
+  children: ReactNode;
+  /**
+   * onError에서 callback으로 받은 error, errorInfo를 이용하여 에러를 수집합니다.
+   * ex) sentry, datadog 등
+   * */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+class GlobalErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return this.props.errorComponent;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default GlobalErrorBoundary;
diff --git a/apps/chooz/package.json b/apps/chooz/package.json
index ef1f2f4c..8b008237 100644
--- a/apps/chooz/package.json
+++ b/apps/chooz/package.json
@@ -35,6 +35,7 @@
     "@svgr/webpack": "^6.5.1",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
+    "@types/styled-components": "^5",
     "typescript": "4.9.3"
   }
 }
diff --git a/apps/chooz/styled-compoenets.d.ts b/apps/chooz/types/styled.d.ts
similarity index 100%
rename from apps/chooz/styled-compoenets.d.ts
rename to apps/chooz/types/styled.d.ts
diff --git a/apps/jurumarble/package.json b/apps/jurumarble/package.json
index 70cafe8c..a23384a3 100644
--- a/apps/jurumarble/package.json
+++ b/apps/jurumarble/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@monorepo/hooks": "workspace:*",
+    "@monorepo/ui": "workspace:*",
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-query-devtools": "^4.33.0",
     "axios": "^1.5.0",
diff --git a/apps/jurumarble/src/lib/styles/StyledComponents.tsx b/apps/jurumarble/src/lib/styles/StyledComponents.tsx
index 589a428e..ad61786f 100644
--- a/apps/jurumarble/src/lib/styles/StyledComponents.tsx
+++ b/apps/jurumarble/src/lib/styles/StyledComponents.tsx
@@ -2,30 +2,18 @@
 
 import StyledComponentsRegistry from "lib/registory";
 import { PropsWithChildren } from "react";
-import { StyleSheetManager, ThemeProvider } from "styled-components";
+import { ThemeProvider } from "styled-components";
 import { jurumarbleTheme } from "./theme";
-import isPropValid from "@emotion/is-prop-valid";
 import GlobalStyles from "./globalStyles";
+import { theme } from "@monorepo/ui";
 
 function StyledComponents({ children }: PropsWithChildren) {
   return (
     <StyledComponentsRegistry>
-      {/*
-         @NOTE : 참고 https://styled-components.com/docs/api#stylesheetmanagers
-         porps를 전달할 때 isPropValid를 사용하여 styled-components에서 지원하지 않는 props를 제거한다.
-      */}
-      {/* <StyleSheetManager
-        shouldForwardProp={(propName, elementToBeRendered) => {
-          return typeof elementToBeRendered === "string" ? isPropValid(propName) : true;
-        }}
-      > */}
-      <ThemeProvider theme={jurumarbleTheme}>
-        <>
-          <GlobalStyles />
-          {children}
-        </>
+      <ThemeProvider theme={{ ...jurumarbleTheme, ...theme }}>
+        <GlobalStyles />
+        {children}
       </ThemeProvider>
-      {/* </StyleSheetManager> */}
     </StyledComponentsRegistry>
   );
 }
diff --git a/apps/jurumarble/src/lib/styles/styled-components.d.ts b/apps/jurumarble/src/types/styled.d.ts
similarity index 70%
rename from apps/jurumarble/src/lib/styles/styled-components.d.ts
rename to apps/jurumarble/src/types/styled.d.ts
index d92e116c..186f12b3 100644
--- a/apps/jurumarble/src/lib/styles/styled-components.d.ts
+++ b/apps/jurumarble/src/types/styled.d.ts
@@ -1,5 +1,5 @@
 import "styled-components";
-import { ThemeColors, ThemeMedia, ThemeTypography } from "./theme";
+import { ThemeColors, ThemeMedia, ThemeTypography } from "../lib/styles/theme";
 
 declare module "styled-components" {
   export interface DefaultTheme {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 527be9d3..ee1dd356 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -6,17 +6,17 @@
   "main": "index.ts",
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "@monorepo/hooks": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "styled-components": "^5.3.6"
-  },
   "devDependencies": {
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
     "@types/styled-components": "^5",
     "typescript": "4.9.3"
+  },
+  "peerDependencies": {
+    "@monorepo/hooks": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.6"
   }
 }
diff --git a/packages/ui/styled-components.d.ts b/packages/ui/styled.d.ts
similarity index 100%
rename from packages/ui/styled-components.d.ts
rename to packages/ui/styled.d.ts
diff --git a/yarn.lock b/yarn.lock
index 1fe479fe..77007b3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1561,6 +1561,7 @@ __metadata:
     "@tanstack/react-query-devtools": ^4.20.4
     "@types/node": 20.5.7
     "@types/react": 18.2.21
+    "@types/styled-components": ^5
     axios: ^1.3.2
     babel-plugin-styled-components: ^2.0.7
     babel-preset-next: ^1.4.0
@@ -1596,6 +1597,7 @@ __metadata:
   dependencies:
     "@emotion/is-prop-valid": ^1.2.1
     "@monorepo/hooks": "workspace:*"
+    "@monorepo/ui": "workspace:*"
     "@svgr/cli": ^8.0.1
     "@svgr/core": ^8.0.0
     "@svgr/plugin-jsx": ^8.0.1
@@ -1624,15 +1626,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@monorepo/ui@workspace:packages/ui"
   dependencies:
-    "@monorepo/hooks": "workspace:*"
     "@types/node": 20.5.7
     "@types/react": 18.2.21
     "@types/styled-components": ^5
+    typescript: 4.9.3
+  peerDependencies:
+    "@monorepo/hooks": "workspace:*"
     react: ^18.2.0
     react-dom: ^18.2.0
     react-is: ^18.2.0
     styled-components: ^5.3.6
-    typescript: 4.9.3
   languageName: unknown
   linkType: soft