diff --git a/.pnp.cjs b/.pnp.cjs
index b337d1d7..3342490e 100644
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -29,6 +29,7 @@ const RAW_RUNTIME_STATE =
           ["@openapitools/openapi-generator-cli", "npm:2.13.1"],\
           ["@radix-ui/react-alert-dialog", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.5"],\
           ["@radix-ui/react-avatar", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4"],\
+          ["@radix-ui/react-checkbox", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4"],\
           ["@radix-ui/react-dialog", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.5"],\
           ["@radix-ui/react-form", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:0.0.3"],\
           ["@radix-ui/react-icons", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.3.0"],\
@@ -3800,6 +3801,41 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["@radix-ui/react-checkbox", [\
+      ["npm:1.0.4", {\
+        "packageLocation": "./.yarn/cache/@radix-ui-react-checkbox-npm-1.0.4-59bb27e0bf-a4bd259a7e.zip/node_modules/@radix-ui/react-checkbox/",\
+        "packageDependencies": [\
+          ["@radix-ui/react-checkbox", "npm:1.0.4"]\
+        ],\
+        "linkType": "SOFT"\
+      }],\
+      ["virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4", {\
+        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-checkbox-virtual-9b9582352d/0/cache/@radix-ui-react-checkbox-npm-1.0.4-59bb27e0bf-a4bd259a7e.zip/node_modules/@radix-ui/react-checkbox/",\
+        "packageDependencies": [\
+          ["@radix-ui/react-checkbox", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4"],\
+          ["@babel/runtime", "npm:7.24.1"],\
+          ["@radix-ui/primitive", "npm:1.0.1"],\
+          ["@radix-ui/react-compose-refs", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.1"],\
+          ["@radix-ui/react-context", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
+          ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
+          ["@radix-ui/react-use-previous", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
+          ["@radix-ui/react-use-size", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
+          ["@types/react", "npm:18.2.73"],\
+          ["@types/react-dom", "npm:18.2.23"],\
+          ["react", "npm:18.2.0"],\
+          ["react-dom", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:18.2.0"]\
+        ],\
+        "packagePeers": [\
+          "@types/react-dom",\
+          "@types/react",\
+          "react-dom",\
+          "react"\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["@radix-ui/react-collection", [\
       ["npm:1.0.3", {\
         "packageLocation": "./.yarn/cache/@radix-ui-react-collection-npm-1.0.3-e63f97f38b-cefa56383d.zip/node_modules/@radix-ui/react-collection/",\
@@ -3898,10 +3934,10 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-focus-scope", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.4"],\
           ["@radix-ui/react-id", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
           ["@radix-ui/react-portal", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.4"],\
-          ["@radix-ui/react-presence", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
           ["@radix-ui/react-slot", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.2"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
           ["aria-hidden", "npm:1.2.4"],\
@@ -4155,10 +4191,10 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-id", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
           ["@radix-ui/react-popper", "virtual:37ef8b00e64ce15a885d05baf0fb25c6d92ec573ce783cda01ccad0381c0c7268834e8ca0e374a73f46fbe6611480d24adf5a726279815ad92cd677ca28793de#npm:1.1.3"],\
           ["@radix-ui/react-portal", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.4"],\
-          ["@radix-ui/react-presence", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
           ["@radix-ui/react-slot", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.2"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
           ["aria-hidden", "npm:1.2.4"],\
@@ -4196,7 +4232,7 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-use-callback-ref", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
           ["@radix-ui/react-use-layout-effect", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
           ["@radix-ui/react-use-rect", "virtual:5b83e2aca428af3a3a9a0b628ddf44539ac81f956b06ca9079d9d05c26ae97eabb7970470ca3a35965ae94114dd796b1f121f964f24cc4a16eff4790aa149605#npm:1.0.1"],\
-          ["@radix-ui/react-use-size", "virtual:5b83e2aca428af3a3a9a0b628ddf44539ac81f956b06ca9079d9d05c26ae97eabb7970470ca3a35965ae94114dd796b1f121f964f24cc4a16eff4790aa149605#npm:1.0.1"],\
+          ["@radix-ui/react-use-size", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/rect", "npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
@@ -4248,10 +4284,10 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
-      ["virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1", {\
-        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-presence-virtual-b3c2662503/0/cache/@radix-ui-react-presence-npm-1.0.1-2057bd46b4-90780618b2.zip/node_modules/@radix-ui/react-presence/",\
+      ["virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1", {\
+        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-presence-virtual-a4ebc405e6/0/cache/@radix-ui-react-presence-npm-1.0.1-2057bd46b4-90780618b2.zip/node_modules/@radix-ui/react-presence/",\
         "packageDependencies": [\
-          ["@radix-ui/react-presence", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@babel/runtime", "npm:7.24.1"],\
           ["@radix-ui/react-compose-refs", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.1"],\
           ["@radix-ui/react-use-layout-effect", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
@@ -4318,7 +4354,7 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-id", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
           ["@radix-ui/react-use-callback-ref", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
           ["react", "npm:18.2.0"],\
@@ -4353,10 +4389,10 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-context", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.1"],\
           ["@radix-ui/react-direction", "virtual:3affce9c11baacd608cc2c2c128122254ffffcc945d410baea812847fe4aaef34a2c0a141170303722127d3399347898f47dec512d376168b75b0712359ee431#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-use-layout-effect", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
-          ["@radix-ui/react-use-previous", "virtual:3affce9c11baacd608cc2c2c128122254ffffcc945d410baea812847fe4aaef34a2c0a141170303722127d3399347898f47dec512d376168b75b0712359ee431#npm:1.0.1"],\
-          ["@radix-ui/react-use-size", "virtual:5b83e2aca428af3a3a9a0b628ddf44539ac81f956b06ca9079d9d05c26ae97eabb7970470ca3a35965ae94114dd796b1f121f964f24cc4a16eff4790aa149605#npm:1.0.1"],\
+          ["@radix-ui/react-use-previous", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
+          ["@radix-ui/react-use-size", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
           ["react", "npm:18.2.0"],\
@@ -4412,10 +4448,10 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-context", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.1"],\
           ["@radix-ui/react-direction", "virtual:3affce9c11baacd608cc2c2c128122254ffffcc945d410baea812847fe4aaef34a2c0a141170303722127d3399347898f47dec512d376168b75b0712359ee431#npm:1.0.1"],\
           ["@radix-ui/react-id", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
-          ["@radix-ui/react-presence", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
           ["@radix-ui/react-roving-focus", "virtual:e76e44310523946c1c5b79ff18bc44637c6cfa77b9e0d6f6524ac7f1dc8cbce6a07f2731e90215d45a4756afa23946529b91fa11dc2879a3e9a47c47c45d0253#npm:1.0.4"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
           ["react", "npm:18.2.0"],\
@@ -4450,10 +4486,10 @@ const RAW_RUNTIME_STATE =
           ["@radix-ui/react-id", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
           ["@radix-ui/react-popper", "virtual:37ef8b00e64ce15a885d05baf0fb25c6d92ec573ce783cda01ccad0381c0c7268834e8ca0e374a73f46fbe6611480d24adf5a726279815ad92cd677ca28793de#npm:1.1.3"],\
           ["@radix-ui/react-portal", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.4"],\
-          ["@radix-ui/react-presence", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-presence", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-primitive", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.3"],\
           ["@radix-ui/react-slot", "virtual:366bdbf747c441a01352d374f46b3f7feb58e574b231460825e9ca87c1f39b8904ef1c511e21ed24128ed7bd1416eaaa4f76b8ac0a607cb68fe2ad7353abe459#npm:1.0.2"],\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@radix-ui/react-visually-hidden", "virtual:e863d0bb1cbac1bc3009462f88d73babb45b648245f8e9cc35ad15e03338317b5cc2700bd497f2ac8ed06fd028b21f54afc6c0b769118390d4e2a7d1aa70593c#npm:1.0.3"],\
           ["@types/react", "npm:18.2.73"],\
           ["@types/react-dom", "npm:18.2.23"],\
@@ -4500,10 +4536,10 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
-      ["virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1", {\
-        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-controllable-state-virtual-ac22bd0ed5/0/cache/@radix-ui-react-use-controllable-state-npm-1.0.1-cbe6fcf1d7-29b069dbf0.zip/node_modules/@radix-ui/react-use-controllable-state/",\
+      ["virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1", {\
+        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-controllable-state-virtual-93127b2098/0/cache/@radix-ui-react-use-controllable-state-npm-1.0.1-cbe6fcf1d7-29b069dbf0.zip/node_modules/@radix-ui/react-use-controllable-state/",\
         "packageDependencies": [\
-          ["@radix-ui/react-use-controllable-state", "virtual:8b36962c5c6366cfe7f4baa252af70d96dc19b8c0dd2878d5c43e663c7c6d2a415194ea3695ee428d33bd4dc9a6fadd2bbce2ba5c9534f3856734a8a82ac552c#npm:1.0.1"],\
+          ["@radix-ui/react-use-controllable-state", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@babel/runtime", "npm:7.24.1"],\
           ["@radix-ui/react-use-callback-ref", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
@@ -4571,10 +4607,10 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
-      ["virtual:3affce9c11baacd608cc2c2c128122254ffffcc945d410baea812847fe4aaef34a2c0a141170303722127d3399347898f47dec512d376168b75b0712359ee431#npm:1.0.1", {\
-        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-previous-virtual-0b06ab42f2/0/cache/@radix-ui-react-use-previous-npm-1.0.1-ec2aa9ac62-f5fbc60210.zip/node_modules/@radix-ui/react-use-previous/",\
+      ["virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1", {\
+        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-previous-virtual-c77bd12851/0/cache/@radix-ui-react-use-previous-npm-1.0.1-ec2aa9ac62-f5fbc60210.zip/node_modules/@radix-ui/react-use-previous/",\
         "packageDependencies": [\
-          ["@radix-ui/react-use-previous", "virtual:3affce9c11baacd608cc2c2c128122254ffffcc945d410baea812847fe4aaef34a2c0a141170303722127d3399347898f47dec512d376168b75b0712359ee431#npm:1.0.1"],\
+          ["@radix-ui/react-use-previous", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@babel/runtime", "npm:7.24.1"],\
           ["@types/react", "npm:18.2.73"],\
           ["react", "npm:18.2.0"]\
@@ -4618,10 +4654,10 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
-      ["virtual:5b83e2aca428af3a3a9a0b628ddf44539ac81f956b06ca9079d9d05c26ae97eabb7970470ca3a35965ae94114dd796b1f121f964f24cc4a16eff4790aa149605#npm:1.0.1", {\
-        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-size-virtual-061e46b1cd/0/cache/@radix-ui-react-use-size-npm-1.0.1-97c8358b35-b109a4b378.zip/node_modules/@radix-ui/react-use-size/",\
+      ["virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1", {\
+        "packageLocation": "./.yarn/__virtual__/@radix-ui-react-use-size-virtual-32e23d57d2/0/cache/@radix-ui-react-use-size-npm-1.0.1-97c8358b35-b109a4b378.zip/node_modules/@radix-ui/react-use-size/",\
         "packageDependencies": [\
-          ["@radix-ui/react-use-size", "virtual:5b83e2aca428af3a3a9a0b628ddf44539ac81f956b06ca9079d9d05c26ae97eabb7970470ca3a35965ae94114dd796b1f121f964f24cc4a16eff4790aa149605#npm:1.0.1"],\
+          ["@radix-ui/react-use-size", "virtual:9b9582352d84af42ab8082f1081ba474dbe9c31d936a06e11369c901c6f768a2775c30ef6dda08fa9010d90134aaca4781b8ad150ae2eff5cea7f8836ab0e9db#npm:1.0.1"],\
           ["@babel/runtime", "npm:7.24.1"],\
           ["@radix-ui/react-use-layout-effect", "virtual:dce1b6d36b4e1fb48a694bfbcda876d8745e47392cb7722a4b687f59b6609800723c642c678a64dbcf2c1d275791708b55bfb31fe3bc06d2dd65060c4bbdee36#npm:1.0.1"],\
           ["@types/react", "npm:18.2.73"],\
@@ -13538,6 +13574,7 @@ const RAW_RUNTIME_STATE =
           ["@openapitools/openapi-generator-cli", "npm:2.13.1"],\
           ["@radix-ui/react-alert-dialog", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.5"],\
           ["@radix-ui/react-avatar", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4"],\
+          ["@radix-ui/react-checkbox", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.4"],\
           ["@radix-ui/react-dialog", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.0.5"],\
           ["@radix-ui/react-form", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:0.0.3"],\
           ["@radix-ui/react-icons", "virtual:bc08f557c3848fd9a25d29fb9c539eda3c4057e5669cea847177bc7c1434287280eb689db18230d98ea61ce78cf48a1c75574b2bd256f908e118253be39fcf3a#npm:1.3.0"],\
diff --git a/.yarn/cache/@radix-ui-react-checkbox-npm-1.0.4-59bb27e0bf-a4bd259a7e.zip b/.yarn/cache/@radix-ui-react-checkbox-npm-1.0.4-59bb27e0bf-a4bd259a7e.zip
new file mode 100644
index 00000000..35f403e0
Binary files /dev/null and b/.yarn/cache/@radix-ui-react-checkbox-npm-1.0.4-59bb27e0bf-a4bd259a7e.zip differ
diff --git a/package.json b/package.json
index c88659bd..996a44fa 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@openapitools/openapi-generator-cli": "^2.9.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/src/pages/MainPage/CreateRoom/CreateRoomForm.tsx b/src/pages/MainPage/CreateRoom/CreateRoomForm.tsx
index 6f20b12c..2a55eafd 100644
--- a/src/pages/MainPage/CreateRoom/CreateRoomForm.tsx
+++ b/src/pages/MainPage/CreateRoom/CreateRoomForm.tsx
@@ -13,9 +13,9 @@ import { GameModeType } from '@/types/gameMode';
 import getRandomItem from '@/utils/getRandomItem';
 import { Toast } from '@/utils/toast';
 import {
+  CREATE_ROOM_GAME_MODE_LIST,
   CREATE_ROOM_INPUT_LIST,
   CREATE_ROOM_SELECT_LIST,
-  GAME_MODE_LIST,
 } from './constants/createRoom';
 import { DEFAULT_TITLES } from './constants/defaultTitles';
 import { SettingModeType } from './CreateRoomModal';
@@ -185,7 +185,7 @@ const CreateRoomForm = ({
         </div>
         {/* 모드 설정 버튼 */}
         <article className='flex flex-col gap-[2rem] pt-[4rem]'>
-          {GAME_MODE_LIST.map(({ value, mode }) => (
+          {CREATE_ROOM_GAME_MODE_LIST.map(({ value, mode }) => (
             <button
               type='button'
               onClick={() => {
diff --git a/src/pages/MainPage/CreateRoom/constants/createRoom.ts b/src/pages/MainPage/CreateRoom/constants/createRoom.ts
index a51b3ddf..4d7bebcb 100644
--- a/src/pages/MainPage/CreateRoom/constants/createRoom.ts
+++ b/src/pages/MainPage/CreateRoom/constants/createRoom.ts
@@ -1,4 +1,5 @@
 import { GameModeType } from '@/types/gameMode';
+import { MAPPED_GAME_MODE_LIST } from '../../constants/gameMode';
 import { I_CreateRoomInput, I_CreateRoomSelect } from '../types';
 
 export const CREATE_ROOM_INPUT_LIST: I_CreateRoomInput[] = [
@@ -64,8 +65,8 @@ interface I_GameModeList {
   mode: GameModeType;
 }
 
-export const GAME_MODE_LIST: I_GameModeList[] = [
-  { value: '문장 모드', mode: 'SENTENCE' },
-  { value: '코딩 모드', mode: 'CODE' },
-  { value: '단어 모드', mode: 'WORD' },
+export const CREATE_ROOM_GAME_MODE_LIST: I_GameModeList[] = [
+  { value: `${MAPPED_GAME_MODE_LIST['SENTENCE']} 모드`, mode: 'SENTENCE' },
+  { value: `${MAPPED_GAME_MODE_LIST['CODE']} 모드`, mode: 'CODE' },
+  { value: `${MAPPED_GAME_MODE_LIST['WORD']} 모드`, mode: 'WORD' },
 ];
diff --git a/src/pages/MainPage/GameModeCheckBox.tsx b/src/pages/MainPage/GameModeCheckBox.tsx
new file mode 100644
index 00000000..acc2ebb7
--- /dev/null
+++ b/src/pages/MainPage/GameModeCheckBox.tsx
@@ -0,0 +1,59 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { Dispatch, SetStateAction } from 'react';
+import { GAME_MODE_LIST, MAPPED_GAME_MODE_LIST } from './constants/gameMode';
+import { CheckedGameModeType, FilteredGameModeType } from './MainPage';
+
+interface GameModeCheckBoxProps {
+  setCheckedGameMode: Dispatch<SetStateAction<CheckedGameModeType>>;
+  checkedGameMode: CheckedGameModeType;
+}
+
+const GameModeCheckBox = ({
+  checkedGameMode,
+  setCheckedGameMode,
+}: GameModeCheckBoxProps) => {
+  const onCheckedChange = (mode: FilteredGameModeType) => {
+    setCheckedGameMode((prevState) => {
+      const isNewMode = !prevState[mode];
+      if (mode === 'ALL') {
+        const newState = { ...prevState };
+        let checkGameModeState: keyof CheckedGameModeType;
+        for (checkGameModeState in prevState) {
+          newState[checkGameModeState] = isNewMode;
+        }
+        return newState;
+      }
+      return { ...prevState, [mode]: isNewMode };
+    });
+  };
+  return (
+    <form className='flex gap-[3rem]'>
+      {GAME_MODE_LIST.map((mode, i) => {
+        //매 렌더링시 생성되므로 map 바깥으로 뺀다?
+        return (
+          <div
+            className='flex items-center gap-[0.5em]'
+            key={mode}>
+            <Checkbox.Root
+              checked={checkedGameMode[mode]}
+              onClick={() => onCheckedChange(mode)}
+              className='bg-white w-[3rem] h-[3rem] rounded-md flex items-center justify-center shadow-md hover:bg-gray-100/50'
+              id={`c${i}`}>
+              <Checkbox.Indicator className=''>
+                <CheckIcon className='size-[3rem]' />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            <label
+              className='cursor-pointer text-[2rem] font-bold'
+              htmlFor={`c${i}`}>
+              {MAPPED_GAME_MODE_LIST[mode]}
+            </label>
+          </div>
+        );
+      })}
+    </form>
+  );
+};
+
+export default GameModeCheckBox;
diff --git a/src/pages/MainPage/GameRoomList.tsx b/src/pages/MainPage/GameRoomList.tsx
index dcea440c..9e8d76d2 100644
--- a/src/pages/MainPage/GameRoomList.tsx
+++ b/src/pages/MainPage/GameRoomList.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useState } from 'react';
 import Divider from '@/common/Divider/Divider';
+import { GameModeType } from '@/types/gameMode';
 import GameRoomListItem from './GameRoonListItem';
-import { FilteredGameModeType } from './MainPage';
 import PrivateRoomModal from './PrivateRoomModal';
 import { I_ChangeGameRoomData } from './SseFetcher';
 
@@ -9,66 +9,61 @@ const GAME_ROOM_LIST_CATEGORY = ['방 번호', '방 제목', '게임 모드', '
 
 interface GameRoomListProps extends React.HTMLAttributes<HTMLDivElement> {
   data: I_ChangeGameRoomData[];
-  selectedGameMode: FilteredGameModeType;
+  checkedGameModeList: GameModeType[];
 }
 
-const GameRoomList = ({ data, selectedGameMode }: GameRoomListProps) => {
+const GameRoomList = ({ data, checkedGameModeList }: GameRoomListProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const filteredRoomList =
-    selectedGameMode !== 'ALL'
-      ? data.filter(({ gameMode }) => gameMode === selectedGameMode)
-      : data;
+  const filteredRoomList = checkedGameModeList.flatMap((mode) =>
+    data.filter(({ gameMode }) => gameMode === mode)
+  );
 
   return (
-    <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-2 col-start-1 col-span-2'>
-      <ul className='flex flex-col items-center px-[1.5rem]'>
-        <li className='flex w-full h-[5rem] py-[1rem] items-center'>
-          {GAME_ROOM_LIST_CATEGORY.map((category, i) => (
-            <Fragment key={i}>
-              <span
-                className={`text-center ${category === '방 제목' ? 'flex-[4_0_0]' : 'flex-1'}`}>
-                {category}
-              </span>
-              {i !== category.length && (
-                <Divider
-                  orientation='vertical'
-                  className='border-gray-200'
+    <ul className='flex flex-col items-center px-[1.5rem]'>
+      <li className='flex w-full h-[5rem] py-[1rem] items-center'>
+        {GAME_ROOM_LIST_CATEGORY.map((category, i) => (
+          <Fragment key={i}>
+            <span
+              className={`text-center ${category === '방 제목' ? 'flex-[4_0_0]' : 'flex-1'}`}>
+              {category}
+            </span>
+            {i !== category.length && (
+              <Divider
+                orientation='vertical'
+                className='border-gray-200'
+              />
+            )}
+          </Fragment>
+        ))}
+      </li>
+      <Divider className='border-gray-200' />
+      <li className='w-full'>
+        <ul className='w-full flex flex-col gap-[1.2rem] max-h-[50rem] overflow-y-auto py-[1rem]'>
+          {filteredRoomList.map((roomData) => (
+            <Fragment key={roomData.id}>
+              <GameRoomListItem
+                key={roomData.id}
+                setIsOpen={setIsOpen}
+                {...roomData}
+              />
+              {roomData.isPrivate && (
+                <PrivateRoomModal
+                  roomId={roomData.id}
+                  setIsOpen={setIsOpen}
+                  isOpen={isOpen}
                 />
               )}
             </Fragment>
           ))}
-        </li>
-        <Divider className='border-gray-200' />
-        <li className='w-full'>
-          <ul className='w-full flex flex-col gap-[1.2rem] max-h-[50rem] overflow-y-auto py-[1rem]'>
-            {filteredRoomList.map((roomData) => (
-              <Fragment key={roomData.id}>
-                <GameRoomListItem
-                  key={roomData.id}
-                  setIsOpen={setIsOpen}
-                  {...roomData}
-                />
-                {roomData.isPrivate && (
-                  <PrivateRoomModal
-                    roomId={roomData.id}
-                    setIsOpen={setIsOpen}
-                    isOpen={isOpen}
-                  />
-                )}
-              </Fragment>
-            ))}
-          </ul>
-          {!filteredRoomList.length && (
-            <span className='text-[2rem] font-bold w-full text-center block'>
-              {selectedGameMode === 'ALL'
-                ? '현재 생성된 게임이 없습니다!'
-                : '선택하신 모드의 방 목록이 없습니다!'}
-            </span>
-          )}
-        </li>
-      </ul>
-    </article>
+        </ul>
+        {!filteredRoomList.length && (
+          <span className='text-[2rem] font-bold w-full text-center block'>
+            방 목록이 존재하지 않아요 😫
+          </span>
+        )}
+      </li>
+    </ul>
   );
 };
 
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 81b5ce5c..5b210d90 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -8,6 +8,7 @@ import useRoomInfoStore from '@/store/useRoomInfoStore';
 import { GameModeType } from '@/types/gameMode';
 import CreateRoomModal from './CreateRoom/CreateRoomModal';
 import EnterRoomErrorFallback from './EnterRoomErrorFallback';
+import GameModeCheckBox from './GameModeCheckBox';
 import GameRoomList from './GameRoomList';
 import SseFallback from './SseFallback';
 import SseFetcher from './SseFetcher';
@@ -16,27 +17,33 @@ import UserList from './UserList';
 
 export type FilteredGameModeType = GameModeType | 'ALL';
 
-const gameModeList: FilteredGameModeType[] = [
-  'ALL',
-  'SENTENCE',
-  'CODE',
-  'WORD',
-];
-
-const mappedGameModeList = {
-  ALL: '전체',
-  SENTENCE: '문장',
-  CODE: '코드',
-  WORD: '단어',
+export type CheckedGameModeType = {
+  [key in FilteredGameModeType]: boolean;
 };
 
+export type EntriesType<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
 const MainPage = () => {
   const navigate = useNavigate();
   const { data: userList } = useOnlineUsers();
   const { data: userData, isPending, error } = useAuthCheck();
   const { roomInfo, setRoomInfo } = useRoomInfoStore();
-  const [selectedGameMode, setSelectedGameMode] =
-    useState<FilteredGameModeType>('ALL');
+
+  const [checkedGameMode, setCheckedGameMode] = useState<CheckedGameModeType>({
+    ALL: true,
+    SENTENCE: true,
+    CODE: true,
+    WORD: true,
+  });
+
+  const checkedGameModeList = (
+    Object.entries(checkedGameMode) as EntriesType<CheckedGameModeType>
+  )
+    .filter(([mode, state]) => mode !== 'ALL' && state)
+    .map(([mode]) => mode) as Exclude<keyof CheckedGameModeType, 'ALL'>[];
+
   const { setDidAdminStart } = useGameWaitingRoomStore();
   useEffect(() => {
     setDidAdminStart(false);
@@ -56,34 +63,37 @@ const MainPage = () => {
   return (
     <main className='flex gap-[3rem]'>
       <section className='flex flex-col gap-[3rem] w-[25rem] [&>article]:shadow-xl'>
-        <UserList
-          userList={[...userList.data.data!]}
-          myId={userData.data.data!.memberId}
-        />
+        <article className='flex flex-col gap-[1rem] p-[2rem] bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[40rem] w-full'>
+          <UserList
+            userList={[...userList.data.data!]}
+            myId={userData.data.data!.memberId}
+          />
+        </article>
         <article
           className='flex items-center justify-center bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[4.5rem] w-full cursor-pointer hover:bg-green-100 hover:text-white hover:text-[1.8rem] transition-all'
           onClick={() => navigate('/rank')}>
           <button>전체 랭킹</button>
         </article>
-        <UserCard
-          nickname={userData.data.data!.nickname}
-          isGuest={userData.data.data!.isGuest}
-          rank={userData.data.data!.rank}
-          gameCount={userData.data.data!.gameCount}
-          averageCpm={userData.data.data!.averageCpm}
-          averageAccuracy={userData.data.data!.averageAccuracy}
-        />
+        <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[18rem] w-full p-[1.2rem] group relative'>
+          <UserCard
+            nickname={userData.data.data!.nickname}
+            isGuest={userData.data.data!.isGuest}
+            rank={userData.data.data!.rank}
+            gameCount={userData.data.data!.gameCount}
+            averageCpm={userData.data.data!.averageCpm}
+            averageAccuracy={userData.data.data!.averageAccuracy}
+          />
+        </article>
       </section>
-      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
+      <section className='flex-1 grid grid-cols-[3fr_1fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
         <article className='rounded-[0.5rem] flex items-center justify-between gap-[3rem]'>
-          {gameModeList.map((el) => (
-            <span
-              className={`shadow-xl flex-1 h-full font-[Giants-Inline] text-[2rem] flex items-center justify-center cursor-pointer rounded-[0.3rem] ${selectedGameMode === el ? 'bg-green-100' : 'bg-green-70'} hover:bg-green-100 hover:scale-110 transition-all`}
-              key={el}
-              onClick={() => setSelectedGameMode(el)}>
-              {mappedGameModeList[el]}
-            </span>
-          ))}
+          <GameModeCheckBox
+            checkedGameMode={checkedGameMode}
+            setCheckedGameMode={setCheckedGameMode}
+          />
+        </article>
+        <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center shadow-xl hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
+          <button onClick={() => alert('연습모드 클릭됨!')}>연습모드!</button>
         </article>
         <CreateRoomModal>
           <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center shadow-xl hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
@@ -93,11 +103,13 @@ const MainPage = () => {
         <SseFetcher fallback={() => <SseFallback />}>
           {(data) => (
             <ErrorBoundary fallbackRender={EnterRoomErrorFallback}>
-              <GameRoomList
-                data={data}
-                selectedGameMode={selectedGameMode}
-                className='shadow-xl'
-              />
+              <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-2 col-start-1 col-span-3'>
+                <GameRoomList
+                  data={data}
+                  checkedGameModeList={checkedGameModeList}
+                  className='shadow-xl'
+                />
+              </article>
             </ErrorBoundary>
           )}
         </SseFetcher>
diff --git a/src/pages/MainPage/UserCard.tsx b/src/pages/MainPage/UserCard.tsx
index 878772ef..f369b8e4 100644
--- a/src/pages/MainPage/UserCard.tsx
+++ b/src/pages/MainPage/UserCard.tsx
@@ -26,7 +26,7 @@ const UserCard = ({
   averageAccuracy = 0,
 }: UserCardProps) => {
   return (
-    <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[18rem] w-full p-[1.2rem] group relative'>
+    <>
       {isGuest && (
         <div className='w-0 h-full z-[50] overflow-hidden p-[3rem] bg-green-100 invisible absolute top-0 left-0 transition-all group-hover:w-full  group-hover:visible group-hover:cursor-pointer'>
           <span className='text-[3rem] text-white font-bold whitespace-nowrap'>
@@ -68,7 +68,7 @@ const UserCard = ({
           <span className='bg-coral-50 w-[10rem] text-center rounded-[0.5rem] h-[2.2rem] hover:bg-coral-100'>{`완벽함 ${formatNumber(averageAccuracy)}%`}</span>
         </div>
       </div>
-    </article>
+    </>
   );
 };
 
diff --git a/src/pages/MainPage/UserList.tsx b/src/pages/MainPage/UserList.tsx
index 1a26229c..1095b479 100644
--- a/src/pages/MainPage/UserList.tsx
+++ b/src/pages/MainPage/UserList.tsx
@@ -8,7 +8,7 @@ interface UserListProps {
 
 const UserList = ({ userList, myId }: UserListProps) => {
   return (
-    <article className='flex flex-col gap-[1rem] p-[2rem] bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[40rem] w-full'>
+    <>
       <h3>현재 접속자</h3>
       <ul className='flex-1 rounded-[0.5rem] bg-green-70 p-[2rem] overflow-y-auto'>
         {userList ? (
@@ -23,7 +23,7 @@ const UserList = ({ userList, myId }: UserListProps) => {
           <span>접속중인 유저가 없습니다.</span>
         )}
       </ul>
-    </article>
+    </>
   );
 };
 
diff --git a/src/pages/MainPage/constants/gameMode.tsx b/src/pages/MainPage/constants/gameMode.tsx
new file mode 100644
index 00000000..6a4d4526
--- /dev/null
+++ b/src/pages/MainPage/constants/gameMode.tsx
@@ -0,0 +1,17 @@
+import { FilteredGameModeType } from '../MainPage';
+
+export const GAME_MODE_LIST: FilteredGameModeType[] = [
+  'ALL',
+  'SENTENCE',
+  'CODE',
+  'WORD',
+];
+
+type MappedGameModeListType = { [key in FilteredGameModeType]: string };
+
+export const MAPPED_GAME_MODE_LIST: MappedGameModeListType = {
+  ALL: '전체',
+  SENTENCE: '문장',
+  CODE: '코드',
+  WORD: '단어',
+};
diff --git a/yarn.lock b/yarn.lock
index 34680a29..593d6146 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2367,6 +2367,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-checkbox@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-checkbox@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    "@radix-ui/react-use-previous": "npm:1.0.1"
+    "@radix-ui/react-use-size": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/a4bd259a7e15ad88f72524190ddcc2db0688d439aad954e06d0adf6038b2e17397ed8ae0ea26ab09bf6981f1b9dd883904b2b7e74b307b5c6b1a3765d27fe737
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-collection@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-collection@npm:1.0.3"
@@ -10707,6 +10734,7 @@ __metadata:
     "@openapitools/openapi-generator-cli": "npm:^2.9.0"
     "@radix-ui/react-alert-dialog": "npm:^1.0.5"
     "@radix-ui/react-avatar": "npm:^1.0.4"
+    "@radix-ui/react-checkbox": "npm:^1.0.4"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-form": "npm:^0.0.3"
     "@radix-ui/react-icons": "npm:^1.3.0"