diff --git a/src/app/components/Button/Button.tsx b/src/app/components/Button/Button.tsx
index 451d484c..3729399c 100644
--- a/src/app/components/Button/Button.tsx
+++ b/src/app/components/Button/Button.tsx
@@ -7,7 +7,7 @@ const buttonVariants = cva(
variants: {
variant: {
main: "bg-brown-50 text-white hover:bg-brown-60",
- empty: "bg-white text-gray-50 border-2 border-gray-40",
+ empty: "bg-white text-brown-40 border-2 border-brown-40",
none: "text-white",
gray: "text-gray-80 font-[500] border-2",
ivory: "bg-ivory-40 text-brown-50",
diff --git a/src/app/components/MainSelectionCard/MainSelectionCard.tsx b/src/app/components/MainSelectionCard/MainSelectionCard.tsx
new file mode 100644
index 00000000..02fe2c4c
--- /dev/null
+++ b/src/app/components/MainSelectionCard/MainSelectionCard.tsx
@@ -0,0 +1,86 @@
+import RecordComponent from "@/assets/img/record.svg";
+import QuestionComponent from "@/assets/img/question.svg";
+import EvaluationComponent from "@/assets/img/evalutaion.svg";
+import clsx from "clsx";
+
+type MainSelectionCardType = {
+ isMain: boolean;
+ type:
+ | "record"
+ | "question"
+ | "evaluation"
+ | "smallerRecord"
+ | "smallerQuestion"
+ | "smallerEvaluation";
+ rounded: boolean;
+};
+
+const obj = {
+ record: {
+ color: "#C08CF8",
+ file: