diff --git a/package-lock.json b/package-lock.json
index 2456b2a1..7ed267f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2752,15 +2752,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@tanstack/query-core": {
       "version": "5.54.1",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.54.1.tgz",
@@ -2785,6 +2776,15 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/src/app/components/BoxSelect/BoxSelect.tsx b/src/app/components/BoxSelect/BoxSelect.tsx
new file mode 100644
index 00000000..12f26f0f
--- /dev/null
+++ b/src/app/components/BoxSelect/BoxSelect.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { ChangeEvent, useState } from 'react';
+
+/**
+ * BoxSelect component
+ * @param {string} title - 제목
+ *  @param {string} subTitle - 부제목
+ */
+
+interface BoxSelectProps {
+  title: string;
+  subTitle: string;
+}
+
+const BoxSelect = ({ title = '', subTitle = '' }: BoxSelectProps) => {
+  const [selectStatus, setSelectStatus] = useState<boolean>(false);
+
+  const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelectStatus(event.target.checked);
+  };
+
+  return (
+    <label
+      className={`flex h-76 w-full items-start gap-8 rounded-lg ${selectStatus ? 'bg-var-gray-900 text-var-white' : 'bg-var-gray-50 text-var-black'} md:h-70 lg:h-70 px-8 py-[6px] transition-colors duration-200 ease-in-out md:px-16 md:py-12 lg:px-16 lg:py-12`}
+    >
+      <input
+        id='checkbox'
+        type='checkbox'
+        className="h-24 w-24 appearance-none rounded-md bg-[url('/icons/checkbox-default.svg')] bg-center bg-no-repeat checked:bg-[url('/icons/checkbox-active.svg')] checked:bg-center checked:bg-no-repeat"
+        onChange={handleCheckboxChange}
+      />
+      <div className='flex flex-col'>
+        <div className='text-[14px] font-bold md:text-[16px] lg:text-[16px]'>
+          {title}
+        </div>
+        <div className='text-[12px] font-medium'>{subTitle}</div>
+      </div>
+    </label>
+  );
+};
+
+export default BoxSelect;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 262106f8..534a6b31 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,10 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    screens: {
+      md: { min: '768px' },
+      lg: { min: '1024px' },
+    },
     extend: {
       spacing: PX_ENTRIES,
       fontFamily: {