diff --git a/src/constants/color.ts b/src/constants/color.ts
index deb6592..2ee34a6 100644
--- a/src/constants/color.ts
+++ b/src/constants/color.ts
@@ -1,7 +1,6 @@
 export const THEME_COLOR = {
   WHITE: "white",
   BLACK: "black",
-  GRAY_09: "gray-09",
   GRAY_08: "gray-08",
   GRAY_07: "gray-07",
   GRAY_06: "gray-06",
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e094821..2ea4323 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,7 +1,6 @@
 export const ColorOptions = [
   "white",
   "black",
-  "gray-09",
   "gray-08",
   "gray-07",
   "gray-06",
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
index 4e8e454..5af837a 100644
--- a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -2,7 +2,6 @@ import { Meta } from "@storybook/react";
 import { useState } from "react";
 
 import DatePickerCalendar from "@/core/components/Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "./constants";
 import { PeriodDates } from "./types/DatePickerCalendarProps";
 
 const meta = {
@@ -26,7 +25,7 @@ export const SingleDatePicker = () => {
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
         cutoffDate = "2023-12-08"
-        variants = {DATE_PICKER_TYPE["SINGLE"]}
+        variants = "single"
         label = {["해지 신청일"]}
         initialDate = "2024-02-05"
         periodDates = {periodDates}
@@ -49,7 +48,7 @@ export const PeriodDatesPicker = () => {
   return (
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
-        variants = {DATE_PICKER_TYPE["PERIOD"]}
+        variants = "period"
         cutoffDate = "2024-01-23"
         periodDates = {periodDates}
         onDateClick = {onDateClick}
diff --git a/src/core/components/Calendar/DatePickerCalendar/constants/index.ts b/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
index 0a53cd4..96eab2e 100644
--- a/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
+++ b/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
@@ -1,4 +1,5 @@
+
 export const DATE_PICKER_TYPE = {
-  SINGLE: "single",
+  SINGGLE: "single",
   PERIOD: "period",
 } as const;
diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
index 19054b2..aa50f0b 100644
--- a/src/core/components/Calendar/DatePickerCalendar/index.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -6,7 +6,6 @@ import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar
 import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
 import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
 import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import { DATE_PICKER_TYPE } from "./constants";
 import { CalendarComponentDaySubText } from "./subs/CalendarComponentDaySubText";
 import { CalendarComponentDayText } from "./subs/CalendarComponentDayText";
 import { DatePickerCalendarProps, DatePickerType, PeriodDates } from "./types/DatePickerCalendarProps";
@@ -40,7 +39,7 @@ export const useDatePickerCalendar = (): UseDatePickerCalendarResponse => {
       return;
     }
 
-    if (variants === DATE_PICKER_TYPE["PERIOD"] && periodDates.startDate) {
+    if (variants === "period" && periodDates.startDate) {
       if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
         newPeriodDates.endDate = currentDate;
       } else {
@@ -83,7 +82,7 @@ export const useDatePickerCalendar = (): UseDatePickerCalendarResponse => {
 };
 
 const DatePickerCalendar = ({
-  variants = DATE_PICKER_TYPE["SINGLE"],
+  variants = "single",
   label = ["사용일"],
   initialDate,
   periodDates,
diff --git a/src/core/components/Demo/Demo.stories.tsx b/src/core/components/Demo/Demo.stories.tsx
new file mode 100644
index 0000000..6ec41a9
--- /dev/null
+++ b/src/core/components/Demo/Demo.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+import Demo from "./index";
+
+const meta = {
+  title: "core/Demo",
+  component: Demo,
+  argTypes: {},
+} satisfies Meta<typeof Demo>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+};
diff --git a/src/core/components/Demo/index.tsx b/src/core/components/Demo/index.tsx
new file mode 100644
index 0000000..76154dd
--- /dev/null
+++ b/src/core/components/Demo/index.tsx
@@ -0,0 +1,7 @@
+const Demo = () => {
+  return (
+    <div className = "text-[50px]">데모</div>
+  );
+};
+
+export default Demo;
diff --git a/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx b/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
index e99ae00..9a17ddd 100644
--- a/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
@@ -13,13 +13,10 @@ const DropdownTrigger = forwardRef((
     }: DropdownTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-  const { isToggle, readOnly, disabled, setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
-  const content = typeof children === "function" ? children({ isToggle, readOnly, disabled }) : children;
-  const isDisabled = readOnly || disabled;
+  const { isToggle, setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
+  const content = typeof children === "function" ? children({ isToggle }) : children;
 
   const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if(isDisabled) return;
-
     setIsToggle(v => !v);
     onClick?.(e);
   };
@@ -29,11 +26,9 @@ const DropdownTrigger = forwardRef((
       ref = {ref}
       type = "button"
       onClick = {onClickHandler}
-      className = {clsx("whitespace-nowrap cursor-pointer", isDisabled && "!cursor-not-allowed bg-gray-09", className)}
+      className = {clsx("whitespace-nowrap cursor-pointer", className)}
       aria-haspopup = "listbox"
       aria-expanded = {isToggle}
-      aria-disabled = {disabled}
-      aria-readonly = {readOnly}
       {...props}
     >
       {content}
diff --git a/src/core/components/Dropdown/DropdownBase/index.tsx b/src/core/components/Dropdown/DropdownBase/index.tsx
index 4ac1f6f..a5e6cab 100644
--- a/src/core/components/Dropdown/DropdownBase/index.tsx
+++ b/src/core/components/Dropdown/DropdownBase/index.tsx
@@ -10,16 +10,15 @@ import { DropdownContextValue, DropdownProps, ReturnType } from "./types";
 export const DropdownContext = createContext<DropdownContextValue | undefined>(undefined);
 DropdownContext.displayName = "DropdownContext";
 
-const DropdownBase = ({ className, readOnly = false, disabled = false, trigger, content }: DropdownProps) => {
+const DropdownBase = ({ className, trigger, content }: DropdownProps) => {
   const [ isToggle, setIsToggle ] = useState(false);
   const { contentRef } = useClickOutside<HTMLDivElement>(() => setIsToggle(false));
-  const isVisibleContent = !readOnly && !disabled && isToggle;
 
   return (
-    <DropdownContext.Provider value = {{ isToggle, setIsToggle, readOnly, disabled }}>
+    <DropdownContext.Provider value = {{ isToggle, setIsToggle }}>
       <div ref = {contentRef} className = {clsx(className, "relative")}>
         {trigger}
-        {isVisibleContent && content}
+        {isToggle && content}
       </div>
     </DropdownContext.Provider>
   );
diff --git a/src/core/components/Dropdown/DropdownBase/types/index.ts b/src/core/components/Dropdown/DropdownBase/types/index.ts
index 2b3a4ca..41be6e0 100644
--- a/src/core/components/Dropdown/DropdownBase/types/index.ts
+++ b/src/core/components/Dropdown/DropdownBase/types/index.ts
@@ -4,17 +4,15 @@ import DropdownItems from "../DropdownItems";
 import DropdownTrigger from "../DropdownTrigger";
 
 export interface DropdownProps {
-  className?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  trigger: React.ReactNode;
-  content: React.ReactNode;
+  className?: string,
+  trigger: React.ReactNode,
+  content: React.ReactNode,
 }
 
-export interface DropdownContextValue extends Pick<DropdownProps, "readOnly" | "disabled"> {
+export type DropdownContextValue = {
   isToggle: boolean;
   setIsToggle: Dispatch<SetStateAction<boolean>>;
-}
+};
 
 export interface DropdownItemProps extends HTMLAttributes<HTMLLIElement> {}
 
@@ -24,7 +22,7 @@ export interface DropdownItemsProps extends HTMLAttributes<HTMLUListElement>{
 
 export interface DropdownTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  children: React.ReactNode | ((props: Pick<DropdownContextValue, "isToggle" | "readOnly" | "disabled">) => React.ReactNode);
+  children: React.ReactNode | ((props: { isToggle: boolean }) => React.ReactNode);
 }
 
 type Dropdown = (props: DropdownProps) => React.ReactElement;
diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
index 93f77e4..74ec89c 100644
--- a/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
@@ -18,17 +18,12 @@ const DropdownSelectTrigger = forwardRef((
 
   return (
     <DropdownBase.Trigger ref = {ref} className = {clsx("flex items-center justify-between w-full h-[3.75rem] p-3 gap-x-2 border border-gray-03 rounded-xl overflow-hidden", className)} {...rest}>
-      {({ isToggle, disabled, readOnly }) => {
-        const isDisabled = readOnly || disabled;
-        const isVisibleContent = !readOnly && !disabled && isToggle;
-
-        return (
-          <>
-            <Typography theme = "subhead-02-regular" className = {clsx(isDisabled && "mr-[1.75rem]")} color = {(!isDisabled && !showPlaceholder) ? "gray-08" : "gray-05"} text = {currentValue ? currentValue : (placeholder ?? "")}/>
-            {!isDisabled ? <CaretDown size = "28" className = {clsx("text-gray-06", isVisibleContent ? "rotate-180" : "rotate-0")} weight = "fill"/> : null}
-          </>
-        );
-      }}
+      {({ isToggle }) => (
+        <>
+          <Typography theme = "subhead-02-regular" color = "gray-08" className = {clsx(showPlaceholder && "!text-gray-05")} text = {currentValue ? currentValue : (placeholder ?? "")}/>
+          <CaretDown size = "28" className = {clsx("text-gray-06", isToggle ? "rotate-180" : "rotate-0")} weight = "fill"/>
+        </>
+      )}
     </DropdownBase.Trigger>
   );
 });
diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
index a9bda83..11e3a95 100644
--- a/src/core/components/Input/InputBase/index.tsx
+++ b/src/core/components/Input/InputBase/index.tsx
@@ -9,29 +9,26 @@ import { InputBaseProps } from "./types";
 const InputBase = forwardRef(
   <T extends React.ElementType>(
     {
-      label,
       inputId,
-      rootClassName,
       element: Element,
+      rootClassName,
       inputRootClassName,
+      label,
       startComponent,
       inputComponent,
       endComponent,
       labelColor,
-      feedback,
       borderColor = "gray-03",
-      feedbackColor = "error",
       error = false,
-      disabled = false,
-      readOnly = false,
-      required = false,
+      required,
+      readOnly,
+      feedback,
+      feedbackColor = "error",
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
   ) => {
   const Component: React.ElementType = Element || "div";
-  const isDisabled = readOnly || disabled;
-  const isVisibleEndComponent = !isDisabled && endComponent;
 
   return (
     <Component ref = {ref} className = {clsx(label && "flex-v-stack", rootClassName)} {...props}>
@@ -42,16 +39,15 @@ const InputBase = forwardRef(
       }
       <div
         className = {cn(
-          `flex items-center px-3 py-4 text-subhead-02-regular bg-white rounded-xl overflow-hidden border border-${borderColor}`,
+          `flex items-center px-3 py-4 text-subhead-02-regular bg-transparent rounded-xl overflow-hidden border border-${borderColor}`,
+          error && "border-error",
           feedback && "mb-1",
           inputRootClassName,
-          isDisabled && "bg-gray-09",
-          error && "border-error",
         )}
       >
         {startComponent && startComponent}
         {inputComponent && inputComponent}
-        {isVisibleEndComponent && endComponent}
+        {!readOnly && endComponent && endComponent}
       </div>
       {feedback ? <Typography theme = "body-03-regular" color = {feedbackColor} text = {feedback} /> : null}
     </Component>
diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
index ce7c07e..0f81196 100644
--- a/src/core/components/Input/InputBase/types/index.ts
+++ b/src/core/components/Input/InputBase/types/index.ts
@@ -15,7 +15,6 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   borderColor?: ThemeColors;
   error?: boolean
   readOnly?: boolean;
-  disabled?: boolean;
   feedback?: React.ReactNode;
   feedbackColor?: ThemeColors;
 }
diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
index 045c4cd..2cfa4c1 100644
--- a/src/core/components/Input/InputDatePicker/DatePicker.tsx
+++ b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -2,7 +2,6 @@ import { useEffect, useId, useState } from "react";
 
 import Button from "../../Button";
 import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
 import Divider from "../../Divider";
 import ModalPopUp from "../../Modal/ModalPopUp";
@@ -11,7 +10,7 @@ import Typography from "../../Typography";
 import { DatePickerProps } from "./types";
 
 const DatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = "period",
   cutoffDate,
   cutoffAfterDate,
   isOpen,
diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
index 791f3b1..769cdfb 100644
--- a/src/core/components/Input/InputDatePicker/index.tsx
+++ b/src/core/components/Input/InputDatePicker/index.tsx
@@ -3,14 +3,13 @@ import clsx from "clsx";
 import dayjs from "dayjs";
 import { HTMLAttributes, useEffect, useId, useState } from "react";
 
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
 import InputBase from "../InputBase";
 import DatePicker from "./DatePicker";
 import { InputDatePickerProps } from "./types";
 
 const InputDatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = "period",
   cutoffDate,
   cutoffAfterDate,
   overlay,
@@ -21,7 +20,6 @@ const InputDatePicker = ({
   useTab = false,
   useHoliday = false,
   disabled = false,
-  readOnly = false,
   required = false,
   className,
   inputClassName,
@@ -32,7 +30,7 @@ const InputDatePicker = ({
   placeholder,
   feedback,
   feedbackColor,
-}: InputDatePickerProps & Omit<HTMLAttributes<HTMLInputElement>, "disabled" | "readOnly">) => {
+}: InputDatePickerProps & HTMLAttributes<HTMLInputElement>) => {
   const id = useId();
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
     startDate: "",
@@ -40,14 +38,13 @@ const InputDatePicker = ({
   });
   const startDate = dayjs(periodDates.startDate).format("YYYY. MM. DD");
   const endDate = dayjs(periodDates.endDate).format("YYYY. MM. DD");
-  const isDisabled = readOnly || disabled;
 
   const onDatePickerClick = (): Promise<PeriodDates> => {
     return new Promise(resolve => {
       overlay.open(({ isOpen, close }) => (
         <DatePicker
           variants = {variants}
-          disabled = {isDisabled}
+          disabled = {disabled}
           isOpen = {isOpen}
           close = {(periodDates: PeriodDates, isAfterAllDate?: boolean) => {
             resolve(periodDates);
@@ -69,8 +66,7 @@ const InputDatePicker = ({
   };
 
   const handleDatePicker = async () => {
-    if (isDisabled) return;
-
+    if (disabled) return;
     const periodDates = await onDatePickerClick();
     setPeriodDates(periodDates);
   };
@@ -87,29 +83,24 @@ const InputDatePicker = ({
     <InputBase
       inputId = {id}
       inputRootClassName = {clsx("h-[3.75rem] cursor-pointer relative", {
-        "cursor-not-allowed": isDisabled,
+        "cursor-not-allowed bg-gray-01": disabled,
       }, className)}
       onClick = {handleDatePicker}
       label = {label}
       required = {required}
       feedback = {feedback}
       feedbackColor = {feedbackColor}
-      disabled = {disabled}
-      readOnly = {readOnly}
       inputComponent = {
         <input
           type = "text"
           placeholder = {placeholder || "날짜를 입력해주세요"}
-          className = {clsx("bbodek-field pointer-events-none", inputClassName)}
+          className = {clsx("flex-1 focus-visible:outline-0 cursor-pointer pointer-events-none disabled:bg-gray-01", inputClassName)}
           value = {periodDates.startDate && (!afterAllDate ? `${startDate}${periodDates.endDate && ` - ${endDate}`}` : `${startDate} ~`)}
           onKeyDown = {() => false}
           onFocus = {(e: React.FocusEvent<HTMLInputElement>) => e.target.blur()}
           onChange = {() => {}}
           onInvalid = {handleOnInvalid}
           disabled = {disabled}
-          readOnly = {readOnly}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           required = {required}
         />
       }
diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
index edd5ee3..5353a2e 100644
--- a/src/core/components/Input/InputDatePicker/types/index.ts
+++ b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -24,7 +24,7 @@ export interface ExternalDates {
 
 export interface InputDatePickerProps extends
   Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
-  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor" | "disabled" | "readOnly"> {
+  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor"> {
     required?: boolean;
     inputClassName?: string;
     label?: string;
diff --git a/src/core/components/Input/InputPassword/index.tsx b/src/core/components/Input/InputPassword/index.tsx
index 5e43955..f5c4986 100644
--- a/src/core/components/Input/InputPassword/index.tsx
+++ b/src/core/components/Input/InputPassword/index.tsx
@@ -18,7 +18,7 @@ const InputPassword = forwardRef((
   ) => {
   const id = useId();
   const [ showPassword, setShowPassword ] = useState(false);
-  const { readOnly = false, disabled = false, rootClassName, className, required = false, value, onChange, autoComplete = "off", error = false, name, ...rest } = props;
+  const { readOnly, rootClassName, className, required, value, onChange, autoComplete = "off", error, name, ...rest } = props;
   const { inputValue, onChangeHandler } = useInput({ value, regCallback, onChange, name });
   const ShowPasswordIcon = <Eye size = {"100%"} weight = "fill" fill = "#C6CEDE"/>;
   const HidePasswordIcon = <EyeSlash size = {"100%"} weight = "fill" fill = "#C6CEDE"/>;
@@ -33,7 +33,6 @@ const InputPassword = forwardRef((
       inputRootClassName = "h-[3.75rem]"
       error = {error}
       readOnly = {readOnly}
-      disabled = {disabled}
       required = {required}
       feedback = {feedback}
       labelColor = {labelColor}
@@ -45,12 +44,8 @@ const InputPassword = forwardRef((
           type = {showPassword ? "text" : "password"}
           required = {required}
           value = {inputValue}
-          readOnly = {readOnly}
-          disabled = {disabled}
           onChange = {onChangeHandler}
           autoComplete = {autoComplete}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           placeholder = {"********"}
           name = {name}
           {...rest}
diff --git a/src/core/components/Input/InputPassword/types/index.ts b/src/core/components/Input/InputPassword/types/index.ts
index 724ea21..691d929 100644
--- a/src/core/components/Input/InputPassword/types/index.ts
+++ b/src/core/components/Input/InputPassword/types/index.ts
@@ -2,6 +2,6 @@ import { InputBaseProps } from "../../InputBase/types";
 import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputPasswordProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "error" | "labelColor" | "readOnly" | "disabled">,
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "error" | "labelColor">,
             Pick<UseInputProps, "regCallback"> {}
diff --git a/src/core/components/Input/InputSearch/InputSearch.stories.tsx b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
index f87a0d4..0eb20f7 100644
--- a/src/core/components/Input/InputSearch/InputSearch.stories.tsx
+++ b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
@@ -13,14 +13,6 @@ const meta = {
     regCallback: {
       description: "Input RegEx",
     },
-    readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Input disabled",
-    },
   },
 } satisfies Meta<typeof InputSearch>;
 
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
index b96eef4..a36b041 100644
--- a/src/core/components/Input/InputSearch/index.tsx
+++ b/src/core/components/Input/InputSearch/index.tsx
@@ -17,7 +17,7 @@ const InputSearch = forwardRef((
   ) => {
   const id = useId();
   const formRef = useRef<HTMLFormElement | null>(null);
-  const { readOnly = false, disabled = false, rootClassName, className, value, onChange, autoComplete = "off", error = false, name, ...rest } = props;
+  const { rootClassName, className, value, onChange, autoComplete = "off", error, name, ...rest } = props;
   const { inputValue, onChangeHandler, onResetInputValue } = useInput({ value, regCallback, onChange, name });
   const SearchIcon = <MagnifyingGlass size = "100%" fill = "#A9B2C7"/>;
 
@@ -38,8 +38,6 @@ const InputSearch = forwardRef((
       ref = {formRef}
       error = {error}
       feedback = {feedback}
-      readOnly = {readOnly}
-      disabled = {disabled}
       rootClassName = {rootClassName}
       inputRootClassName = {"flex items-center px-6 py-2 text-body-02-medium bg-white rounded-full overflow-hidden border border-gray-02"}
       onSubmit = {onSubmitHandler}
@@ -52,10 +50,6 @@ const InputSearch = forwardRef((
           value = {inputValue}
           onChange = {onChangeHandler}
           autoComplete = {autoComplete}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           name = {name}
           required
           {...rest}
diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
index ccb325c..6f99313 100644
--- a/src/core/components/Input/InputSearch/types/index.ts
+++ b/src/core/components/Input/InputSearch/types/index.ts
@@ -2,8 +2,8 @@ import { InputBaseProps } from "../../InputBase/types";
 import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputSearchProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">,
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "error">,
             Pick<UseInputProps, "regCallback"> {
             formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
            }
diff --git a/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx b/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
index c1dfdc6..0077000 100644
--- a/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
+++ b/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
@@ -25,14 +25,6 @@ const meta = {
     regCallback: {
       description: "Input RegEx",
     },
-    readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Input disabled",
-    },
   },
 } satisfies Meta<typeof InputTextArea>;
 
diff --git a/src/core/components/Input/InputTextArea/index.tsx b/src/core/components/Input/InputTextArea/index.tsx
index 739d750..4d3162b 100644
--- a/src/core/components/Input/InputTextArea/index.tsx
+++ b/src/core/components/Input/InputTextArea/index.tsx
@@ -20,7 +20,7 @@ const InputTextArea = forwardRef((
     ref: React.Ref<HTMLTextAreaElement>,
   ) => {
   const id = useId();
-  const { readOnly = false, disabled = false, rootClassName, className, required = false, value, onChange, autoComplete = "off", maxLength = 150, error = false, name, ...rest } = props;
+  const { rootClassName, className, required, value, onChange, autoComplete = "off", maxLength = 150, error, name, ...rest } = props;
   const { inputValue, onChangeHandler } = useInput({ value, regCallback, onChange, name });
   const currentInputValueLength = (inputValue as string)?.length || 0;
 
@@ -38,8 +38,6 @@ const InputTextArea = forwardRef((
       inputRootClassName = {clsx("flex-v-stack", TEXT_AREA_HEIGHT[textAreaHeight])}
       feedback = {feedback}
       error = {error}
-      readOnly = {readOnly}
-      disabled = {disabled}
       inputComponent = {
         <textarea
           ref = {ref}
@@ -49,10 +47,6 @@ const InputTextArea = forwardRef((
           required = {required}
           value = {inputValue}
           maxLength = {maxLength}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           name = {name}
           {...rest}
         />
diff --git a/src/core/components/Input/InputTextArea/types/index.ts b/src/core/components/Input/InputTextArea/types/index.ts
index cf83d26..58bb0d7 100644
--- a/src/core/components/Input/InputTextArea/types/index.ts
+++ b/src/core/components/Input/InputTextArea/types/index.ts
@@ -5,8 +5,8 @@ import { SIZE } from "../constants";
 export type TextAreaSizeType = typeof SIZE[keyof typeof SIZE];
 
 export interface InputTextAreaProps
-    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled" | "readOnly">,
-           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor"| "error" | "readOnly" | "disabled">,
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor"| "error">,
            Pick<UseInputProps, "regCallback"> {
             textAreaHeight: TextAreaSizeType;
             maxLength: React.TextareaHTMLAttributes<HTMLTextAreaElement>["maxLength"];
diff --git a/src/core/components/Input/InputTextField/InputTextField.stories.tsx b/src/core/components/Input/InputTextField/InputTextField.stories.tsx
index 7ff3f32..9b1f4c8 100644
--- a/src/core/components/Input/InputTextField/InputTextField.stories.tsx
+++ b/src/core/components/Input/InputTextField/InputTextField.stories.tsx
@@ -25,14 +25,6 @@ const meta = {
       defaultValue: "gray-03",
       description: "Bbodek DesignSystem Colors",
     },
-    disabled: {
-      control: "boolean",
-      description: "Input disabled",
-    },
-    readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
-    },
     regCallback: {
       description: "Input RegEx",
     },
diff --git a/src/core/components/Input/InputTextField/index.tsx b/src/core/components/Input/InputTextField/index.tsx
index 9fffc43..73641a7 100644
--- a/src/core/components/Input/InputTextField/index.tsx
+++ b/src/core/components/Input/InputTextField/index.tsx
@@ -18,7 +18,7 @@ const InputTextField = forwardRef((
     ref: React.ComponentPropsWithRef<"input">["ref"],
   ) => {
   const id = useId();
-  const { rootClassName, className, required, value, onChange, autoComplete = "off", readOnly = false, error = false, name, disabled = false, ...rest } = props;
+  const { rootClassName, className, required, value, onChange, autoComplete = "off", readOnly, error, name, ...rest } = props;
   const { inputValue, onChangeHandler, onResetInputValue } = useInput({ value, regCallback, onChange, name });
   const ResetIcon = <XCircle size = "100%" weight = "fill" fill = "#A9B2C7"/>;
 
@@ -29,7 +29,6 @@ const InputTextField = forwardRef((
       rootClassName = {rootClassName}
       inputRootClassName = "h-[3.75rem]"
       readOnly = {readOnly}
-      disabled = {disabled}
       feedback = {feedback}
       error = {error}
       inputComponent = {
@@ -43,9 +42,6 @@ const InputTextField = forwardRef((
           onChange = {onChangeHandler}
           autoComplete = {autoComplete}
           readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           name = {name}
           {...rest}
         />
diff --git a/src/core/components/Input/InputTextField/types/index.ts b/src/core/components/Input/InputTextField/types/index.ts
index b4a79c7..bc3f116 100644
--- a/src/core/components/Input/InputTextField/types/index.ts
+++ b/src/core/components/Input/InputTextField/types/index.ts
@@ -2,6 +2,6 @@ import { InputBaseProps } from "../../InputBase/types";
 import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputTextFieldProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor" | "error" | "readOnly" | "disabled">,
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor" | "error">,
            Pick<UseInputProps, "regCallback"> {}
diff --git a/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx b/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx
new file mode 100644
index 0000000..c368513
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx
@@ -0,0 +1,41 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+
+import SelectBubble from "./index";
+
+const meta = {
+  title: "core/Select/SelectBubble/SelectBubble",
+  component: SelectBubble,
+  argTypes: {},
+} satisfies Meta<typeof SelectBubble>;
+
+export default meta;
+
+export const Default = () => {
+  const [ currentValue, setCurrentValue ] = useState("A");
+  const data = [
+    { key: "A", label: "A반" },
+    { key: "B", label: "B반" },
+    { key: "C", label: "C반" },
+  ];
+
+  const items = data.map(item => (
+    <SelectBubble.Item
+      label = {item.label}
+      name = {"class"}
+      checked = {item.key === currentValue}
+      value = {item.key}
+      onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+
+        setCurrentValue(value);
+      }}
+    />
+  ));
+
+  return (
+    <div className = "w-[60rem]">
+      <SelectBubble label = "품목 선택" labelSubText = "반별로 품목과 수량을 각각 선택해주세요." items = {items} required/>
+    </div>
+  );
+};
diff --git a/src/core/components/Select/SelectBubble/SelectBubble/index.tsx b/src/core/components/Select/SelectBubble/SelectBubble/index.tsx
new file mode 100644
index 0000000..450f29f
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubble/index.tsx
@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+
+import { FormLabel } from "@/index";
+import clsx from "clsx";
+import SelectBubbleItem from "../SelectBubbleItem";
+import { ReturnType, SelectBubbleProps } from "./types";
+
+const SelectBubble = forwardRef((
+    {
+      items,
+      label,
+      labelColor,
+      required,
+      labelSubText,
+      ...props
+    }: SelectBubbleProps,
+    ref: React.Ref<HTMLUListElement>,
+  ) => {
+  const { className, ...rest } = props;
+
+  return (
+    <div className = {clsx("flex-v-stack gap-y-3", className)}>
+      <FormLabel label = {label} labelColor = {labelColor} required = {required} labelSubText = {labelSubText}/>
+      <ul ref = {ref} className = {"flex gap-x-3"} {...rest}>
+        {items}
+      </ul>
+    </div>
+  );
+}) as unknown as ReturnType;
+
+export default SelectBubble;
+
+SelectBubble.displayName = "SelectBubble";
+SelectBubble.Item = SelectBubbleItem;
diff --git a/src/core/components/Select/SelectBubble/SelectBubble/types/index.ts b/src/core/components/Select/SelectBubble/SelectBubble/types/index.ts
new file mode 100644
index 0000000..f3d7a28
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubble/types/index.ts
@@ -0,0 +1,13 @@
+import { FormLabelProps } from "@/core/components/FormLabel/types";
+import SelectBubbleItem from "../../SelectBubbleItem";
+
+export interface SelectBubbleProps extends React.HTMLAttributes<HTMLUListElement>, FormLabelProps {
+  items: React.ReactNode[]
+}
+
+type TableTabComponent = (props: SelectBubbleProps) => React.ReactElement;
+
+export type ReturnType = TableTabComponent & {
+  displayName: string;
+  Item: typeof SelectBubbleItem;
+};
diff --git a/src/core/components/Select/SelectBubble/SelectBubbleItem/SelectBubbleItem.stories.tsx b/src/core/components/Select/SelectBubble/SelectBubbleItem/SelectBubbleItem.stories.tsx
new file mode 100644
index 0000000..848ca61
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubbleItem/SelectBubbleItem.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta } from "@storybook/react";
+
+import SelectBubble from "../SelectBubble";
+import SelectBubbleItem from "./index";
+import { SelectButtonItemProps } from "./types";
+
+const meta = {
+  title: "core/Select/SelectBubble/SelectBubbleItem",
+  component: SelectBubbleItem,
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Bubble Label",
+    },
+  },
+} satisfies Meta<typeof SelectBubbleItem>;
+
+export default meta;
+
+export const Default = (props: SelectButtonItemProps) => {
+  const { label, ...rest } = props;
+
+  return (
+    <ul>
+      <SelectBubble.Item label = {label ?? "A반"} {...rest} />
+    </ul>
+  );
+};
diff --git a/src/core/components/Select/SelectBubble/SelectBubbleItem/index.tsx b/src/core/components/Select/SelectBubble/SelectBubbleItem/index.tsx
new file mode 100644
index 0000000..76e21b7
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubbleItem/index.tsx
@@ -0,0 +1,38 @@
+import { forwardRef, useId } from "react";
+
+import { Typography } from "@/index";
+import { SelectButtonItemProps } from "./types";
+
+const SelectBubbleItem = forwardRef((
+    {
+      label,
+      ...props
+    }: Omit<SelectButtonItemProps, "ref">,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+  const id = useId();
+
+  return (
+    <li>
+      <label className = "flex" htmlFor = {id}>
+        <input
+          ref = {ref}
+          id = {id}
+          type = "radio"
+          className = {"hidden peer"}
+          {...props}
+        />
+        <Typography
+          className = "p-2.5 border border-gray-04 peer-checked:bg-primary-00 peer-checked:border-primary-00 peer-checked:text-primary-03 cursor-pointer rounded-default"
+          theme = "subhead-02-bold"
+          color = "gray-05"
+          text = {label}
+        />
+      </label>
+    </li>
+  );
+});
+
+export default SelectBubbleItem;
+
+SelectBubbleItem.displayName = "SelectBubbleItem";
diff --git a/src/core/components/Select/SelectBubble/SelectBubbleItem/types/index.ts b/src/core/components/Select/SelectBubble/SelectBubbleItem/types/index.ts
new file mode 100644
index 0000000..c072aab
--- /dev/null
+++ b/src/core/components/Select/SelectBubble/SelectBubbleItem/types/index.ts
@@ -0,0 +1,6 @@
+import { TypographyProps } from "@/core/components/Typography/types";
+import { InputHTMLAttributes } from "react";
+
+export interface SelectButtonItemProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: TypographyProps<"span">["text"]
+}
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx b/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx
new file mode 100644
index 0000000..133a96f
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/SelectOnset.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta } from "@storybook/react";
+import { ChangeEvent, useState } from "react";
+
+import { SelectOnsetOptions } from "./constants";
+import SelectOnset from "./index";
+
+const meta = {
+  title: "core/Select/SelectOnset/SelectOnset",
+  component: SelectOnset,
+  argTypes: {
+    variants: {
+      control: "select",
+      options: SelectOnsetOptions,
+      description: "SelectOnset Variants",
+    },
+  },
+} satisfies Meta<typeof SelectOnset>;
+
+export default meta;
+
+export const Vertical = () => {
+  const [ currentOnset, setCurrentOnset ] = useState("ㄱ");
+
+  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => setCurrentOnset(e.target.value);
+
+  return (
+    <SelectOnset
+      onChange = {onChangeHandler}
+      currentOnset = {currentOnset}
+      variants = {"vertical"}
+    />
+  );
+};
+
+export const Horizontal = () => {
+  const [ currentOnset, setCurrentOnset ] = useState("ㄱ");
+
+  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => setCurrentOnset(e.target.value);
+
+  return (
+    <SelectOnset
+      onChange = {onChangeHandler}
+      currentOnset = {currentOnset}
+      variants = {"horizontal"}
+    />
+  );
+};
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts b/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts
new file mode 100644
index 0000000..424e8c3
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/constants/index.ts
@@ -0,0 +1,20 @@
+import { VariantsType } from "../types";
+
+export const ONSETS = [ "ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ", "ㅂ", "ㅅ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ" ];
+
+export const VARIANTS = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal",
+} as const;
+
+export const ONSETS_CONTAINER_VARIANTS: Record<VariantsType, string> = {
+  [VARIANTS.VERTICAL]: "flex-v-stack",
+  [VARIANTS.HORIZONTAL]: "flex-h-stack items-center",
+};
+
+export const ONSETS_VARIANTS: Record<VariantsType, string> = {
+  [VARIANTS.VERTICAL]: "gap-x-2",
+  [VARIANTS.HORIZONTAL]: "gap-x-3",
+};
+
+export const SelectOnsetOptions = Object.keys(VARIANTS).map(variants => VARIANTS[variants as keyof typeof VARIANTS]);
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/index.tsx b/src/core/components/Select/SelectOnset/SelectOnset/index.tsx
new file mode 100644
index 0000000..4d532bc
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/index.tsx
@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import Typography from "../../../Typography";
+import SelectOnsetItem from "../SelectOnsetItem";
+import { ONSETS, ONSETS_CONTAINER_VARIANTS, ONSETS_VARIANTS } from "./constants";
+import { SelectOnsetProps } from "./types";
+
+const SelectOnset = forwardRef((
+    {
+      variants,
+      currentOnset,
+      onChange,
+      className,
+    }: SelectOnsetProps,
+    ref: React.Ref<HTMLUListElement>,
+  ) => {
+  const items = ONSETS.map(onset => (
+    <SelectOnsetItem key = {onset} onset = {onset} onChange = {onChange} checked = {currentOnset === onset}/>
+  ));
+
+  return (
+    <div className = {clsx(`${ONSETS_CONTAINER_VARIANTS[variants]} flex gap-3`, className)}>
+      <Typography theme = "body-02-regular" color = "gray-07" text = "초성으로 원아 찾기"/>
+      <ul ref = {ref} className = {`flex items-center ${ONSETS_VARIANTS[variants]}`}>
+        {items}
+      </ul>
+    </div>
+  );
+});
+
+export default SelectOnset;
+
+SelectOnset.displayName = "SelectOnset";
+
diff --git a/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts b/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts
new file mode 100644
index 0000000..1743bbb
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnset/types/index.ts
@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from "react";
+
+import { ONSETS, VARIANTS } from "../constants";
+
+export type VariantsType = typeof VARIANTS[keyof typeof VARIANTS];
+
+export type OnsetType = typeof ONSETS[number];
+
+export interface SelectOnsetProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  variants: VariantsType;
+  currentOnset: string;
+  className?: HTMLElement["className"];
+}
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx b/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx
new file mode 100644
index 0000000..a11b68c
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/SelectOnsetItem.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/react";
+
+import { ONSETS } from "../SelectOnset/constants";
+import SelectOnsetItem from "./index";
+import { OnsetItemProps } from "./types";
+
+const meta = {
+  title: "core/Select/SelectOnset/SelectOnsetItem",
+  component: SelectOnsetItem,
+  argTypes: {
+    onset: {
+      control: "select",
+      options: ONSETS,
+      description: "onset",
+    },
+  },
+} satisfies Meta<typeof SelectOnsetItem>;
+
+export default meta;
+
+export const Default = (props: OnsetItemProps) => {
+  return (
+    <ul>
+      <SelectOnsetItem
+        onset = {"ㄱ"}
+        checked = {"ㄱ" === props.onset}
+      />
+    </ul>
+  );
+};
+
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx b/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx
new file mode 100644
index 0000000..1fc33ee
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/index.tsx
@@ -0,0 +1,40 @@
+import { forwardRef, useId } from "react";
+
+import { Typography } from "@/index";
+import { OnsetItemProps } from "./types";
+
+const SelectOnsetItem = forwardRef((
+    {
+      onset,
+      ...props
+    }: OnsetItemProps,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+  const id = useId();
+
+  return (
+    <li>
+      <label>
+        <input
+          ref = {ref}
+          id = {id}
+          type = "radio"
+          className = {"hidden peer"}
+          name = "onset"
+          value = {onset}
+          {...props}
+        />
+        <Typography
+          className = "flex items-center justify-center w-[1.875rem] h-[1.875rem] border border-gray-03 peer-checked:text-primary-03 peer-checked:bg-primary-00 peer-checked:border-primary-00 rounded cursor-pointer"
+          theme = "body-02-regular"
+          color = "gray-06"
+          text = {onset}
+        />
+      </label>
+    </li>
+  );
+});
+
+export default SelectOnsetItem;
+
+SelectOnsetItem.displayName = "SelectOnsetItem";
diff --git a/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts b/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts
new file mode 100644
index 0000000..59e63f8
--- /dev/null
+++ b/src/core/components/Select/SelectOnset/SelectOnsetItem/types/index.ts
@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+
+import { OnsetType } from "../../SelectOnset/types";
+
+export interface OnsetItemProps extends InputHTMLAttributes<HTMLInputElement>{
+  onset: OnsetType
+}
diff --git a/src/core/components/Typography/Typography.stories.tsx b/src/core/components/Typography/Typography.stories.tsx
index b4e3cb2..e5b5ba4 100644
--- a/src/core/components/Typography/Typography.stories.tsx
+++ b/src/core/components/Typography/Typography.stories.tsx
@@ -1,8 +1,8 @@
+
 import { ColorOptions } from "@/constants/color";
 import { TypographyOptions } from "@/constants/typography";
 import { Meta } from "@storybook/react";
-import Typography from "./index";
-import { TypographyProps } from "./types";
+import Typography, { TypographyProps } from "./index";
 
 const meta = {
   title: "core/Typography",
diff --git a/src/index.ts b/src/index.ts
index f8b59c2..3612ce4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ export { default as BasicCalendar } from "@/core/components/Calendar/BasicCalend
 export { default as DatePickerCalendar } from "@/core/components/Calendar/DatePickerCalendar";
 export { default as ScheduleCalendar } from "@/core/components/Calendar/ScheduleCalendar";
 export { default as Checkbox } from "@/core/components/Checkbox";
+export { default as Demo } from "@/core/components/Demo";
 export { default as Divider } from "@/core/components/Divider";
 export { default as Drawer } from "@/core/components/Drawer";
 export { default as DropdownBase } from "@/core/components/Dropdown/DropdownBase";
@@ -31,6 +32,9 @@ export { default as ModalPopUp } from "@/core/components/Modal/ModalPopUp";
 export { default as ModalPortal } from "@/core/components/Modal/ModalPortal";
 export { default as Radio } from "@/core/components/Radio";
 export { default as Section } from "@/core/components/Section";
+export { default as SelectBubble } from "@/core/components/Select/SelectBubble/SelectBubble";
+export { default as SelectBubbleItem } from "@/core/components/Select/SelectBubble/SelectBubbleItem";
+export { default as SelectOnset } from "@/core/components/Select/SelectOnset/SelectOnset";
 export { default as GeneralTab } from "@/core/components/Tab/GeneralTab/GeneralTab";
 export { default as GeneralTabItem } from "@/core/components/Tab/GeneralTab/GeneralTabItem";
 export { default as TableTab } from "@/core/components/Tab/TableTab/TableTab";
diff --git a/src/styles/bbodek-theme.css b/src/styles/bbodek-theme.css
index c4dd9a7..741ad51 100644
--- a/src/styles/bbodek-theme.css
+++ b/src/styles/bbodek-theme.css
@@ -12,7 +12,7 @@
   }
 
   .bbodek-field {
-    @apply flex-1 text-gray-08 placeholder:text-gray-05 disabled:text-gray-05 read-only:text-gray-05 bg-transparent outline-none;
+    @apply flex-1 text-gray-08 placeholder:text-gray-05 bg-white outline-none;
   }
 }
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 9523896..81dd45d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
 export type ThemeColors =
-  "white" | "black" | "gray-09" | "gray-08" |
+  "white" | "black" | "gray-08" |
   "gray-07" | "gray-06" | "gray-05" |
   "gray-04" | "gray-03" | "gray-02" |
   "gray-01" | "gray-00" | "primary-06" |
diff --git a/tailwind.config.js b/tailwind.config.js
index a9af4f5..eb14286 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,6 @@ export default {
       colors: {
         white: "#fff",
         black: "#101828",
-        "gray-09": "#F5F5F5",
         "gray-08": "#1C273E",
         "gray-07": "#333D52",
         "gray-06": "#7C8497",