diff --git a/.changeset/fruity-aliens-crash.md b/.changeset/fruity-aliens-crash.md
new file mode 100644
index 00000000..9e5e4347
--- /dev/null
+++ b/.changeset/fruity-aliens-crash.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix select component container
diff --git a/packages/components/package.json b/packages/components/package.json
index 6c8f5ee0..6e4e1852 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -22,7 +22,8 @@
     "lint": "eslint",
     "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "package": "pnpm pack --pack-destination \"../../dist\""
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/components/src/__tests__/index.browser.test.ts b/packages/components/src/__tests__/index.browser.test.ts
index bb4d3eb7..8ffaca2b 100644
--- a/packages/components/src/__tests__/index.browser.test.ts
+++ b/packages/components/src/__tests__/index.browser.test.ts
@@ -14,8 +14,9 @@ describe('export', () => {
       StepperDecreaseButton: expect.any(Function),
       StepperIncreaseButton: expect.any(Function),
       StepperInput: expect.any(Function),
-      useSelect: expect.any(Function),
       useStepper: expect.any(Function),
+      SelectContext: expect.any(Object),
+      useSelect: expect.any(Function),
     })
   })
 })
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
index fd8dfa1a..b912030a 100644
--- a/packages/components/src/components/Select/Select.stories.tsx
+++ b/packages/components/src/components/Select/Select.stories.tsx
@@ -43,14 +43,19 @@ export const ControlledCheckboxStory: Story = {
   render: () => <ControlledCheckbox />,
 }
 
+export const SelectWithOptionsStory: Story = {
+  args: {},
+  render: () => <SelectWithOptions />,
+}
+
 export default meta
 
 function DefaultComponent(
   props: Omit<ComponentProps<typeof Select>, 'children'>,
 ) {
   return (
-    <Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
-      <SelectTrigger>Select</SelectTrigger>
+    <Select {...props} defaultValue={['Option 1']} onChange={() => {}}>
+      <SelectTrigger>Select2</SelectTrigger>
       <SelectContainer>
         <SelectOption disabled value="Option 1">
           Option 1
@@ -69,13 +74,7 @@ function DefaultComponent(
               </Flex>
             </SelectOption>
           </SelectTrigger>
-          <SelectContainer
-            className={css({
-              right: '0',
-              top: '0',
-              transform: 'translateX(100%)',
-            })}
-          >
+          <SelectContainer>
             <SelectOption value="Option 6">Option 6</SelectOption>
             <SelectOption value="Option 7">Option 7</SelectOption>
           </SelectContainer>
@@ -105,7 +104,7 @@ function ControlledCheckbox() {
   }
 
   return (
-    <Select onValueChange={handleChange} type="checkbox" value={value}>
+    <Select onChange={handleChange} type="checkbox" value={value}>
       <SelectTrigger>Select {value}</SelectTrigger>
       <SelectContainer showConfirmButton>
         <SelectOption value="Option 1">Option 1</SelectOption>
@@ -113,11 +112,7 @@ function ControlledCheckbox() {
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
         <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select
-          onValueChange={handleSubChange}
-          type="checkbox"
-          value={subValue}
-        >
+        <Select onChange={handleSubChange} type="checkbox" value={subValue}>
           <SelectTrigger asChild>
             <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -151,7 +146,7 @@ function ControlledRadio() {
     setSubValue(value)
   }
   return (
-    <Select onValueChange={handleChange} type="radio" value={value}>
+    <Select onChange={handleChange} type="radio" value={value}>
       <SelectTrigger>Select {value}</SelectTrigger>
       <SelectContainer>
         <SelectOption value="Option 1">Option 1</SelectOption>
@@ -159,7 +154,7 @@ function ControlledRadio() {
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
         <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select onValueChange={handleSubChange} type="radio" value={subValue}>
+        <Select onChange={handleSubChange} type="radio" value={subValue}>
           <SelectTrigger asChild>
             <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -200,3 +195,25 @@ function ControlledRadio() {
     </Select>
   )
 }
+
+function SelectWithOptions() {
+  return (
+    <>
+      <Select
+        options={[
+          { label: 'Option 1', value: 'Option 1' },
+          { label: 'Option 2', value: 'Option 2', disabled: true },
+          {
+            label: 'Option 3',
+            value: 'Option 3',
+            onClick: () => {
+              console.info('Option 3')
+            },
+          },
+        ]}
+      >
+        title
+      </Select>
+    </>
+  )
+}
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
index bd4dae2f..af8b0ff9 100644
--- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,120 @@
 exports[`Select > should render 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 position-0-relative--1 box-sizing-0-border-box-1137980104803605758-1  "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Select > should render with overflow screen 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+  >
+    <button
+      aria-expanded="true"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select
+        </div>
+      </div>
+    </button>
+    <div
+      aria-label="Select container"
+      class="display-0-flex--0 flex-direction-0-column--0 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 bottom-0--4px--1 box-shadow-0-0 2px 2px 0 var(--base10,light-dark(#0000001A,#FFFFFF1A))--1 height-0-fit-content--1 width-0-fit-content--1 gap-0-6px--1 min-width-0-232px--1 padding-0-10px--1 position-0-fixed--1 user-select-0-none--1 z-index-0-1--1 "
+      style="top: 10px; left: -1100px; bottom: 778px;"
+    >
+      <div
+        class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1  color-0-var(--selectDisabled,light-dark(#C4C5D1,#45464D))--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 "
+        data-value="Option 1"
+      >
+        Option 1
+      </div>
+      <div
+        class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 "
+        data-value="Option 2"
+      >
+        Option 2
+      </div>
+      <div
+        class="background-0-var(--border,light-dark(#E4E4E4,#434343))--1 height-0-1px--1 width-0-100%--1 "
+      />
+      <div
+        class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 "
+        data-value="Option 3"
+      >
+        Option 3
+      </div>
+      <div
+        class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1  color-0-var(--selectDisabled,light-dark(#C4C5D1,#45464D))--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 "
+        data-value="Option 4"
+      >
+        Option 4
+      </div>
+      <div
+        class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+      >
+        <div
+          aria-expanded="false"
+          aria-label="Select toggle"
+          class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color .1s ease-in-out--1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-8380715471663921674-1 color-0-var(--title,light-dark(#1A1A1A,#FAFAFA))--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-6px--1 "
+        >
+          <div
+            class="display-0-flex--0 align-items-0-center--255 justify-content-0-space-between--255 width-0-100%--255"
+          >
+            Option 5
+            <svg
+              class="color-0-#8B8E9C--1"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M6.1953 12.4714C5.93495 12.211 5.93495 11.7889 6.1953 11.5286L9.7239 7.99996L6.1953 4.47136C5.93495 4.21102 5.93495 3.78891 6.1953 3.52856C6.45565 3.26821 6.87776 3.26821 7.13811 3.52856L11.1381 7.52856C11.3985 7.7889 11.3985 8.21101 11.1381 8.47136L7.13811 12.4714C6.87776 12.7317 6.45565 12.7317 6.1953 12.4714Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select > should render with x and y properties 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
   >
     <button
       aria-expanded="false"
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 3fd9c35d..0c63a450 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -94,7 +94,7 @@ describe('Select', () => {
   it('should call onValueChange function when it is provided', () => {
     const onValueChange = vi.fn()
     const { container } = render(
-      <Select onValueChange={onValueChange} type="radio">
+      <Select onChange={onValueChange} type="radio">
         {children}
       </Select>,
     )
@@ -371,4 +371,78 @@ describe('Select', () => {
     const svg = container.querySelector('svg')
     expect(svg).not.toBeInTheDocument()
   })
+
+  it('should render with options properties', () => {
+    const { container } = render(
+      <Select
+        options={[
+          { label: 'Option 1', value: 'Option 1' },
+          { value: 'Option 2' },
+        ]}
+      >
+        Select
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option1 = container.querySelector('[data-value="Option 1"]')
+    expect(option1).toBeInTheDocument()
+  })
+
+  it('should call onChange function when it is provided to SelectOption', () => {
+    const onValueChange = vi.fn()
+    const { container } = render(
+      <Select
+        onChange={onValueChange}
+        options={[
+          { label: 'Option 1', value: 'Option 1' },
+          { value: 'Option 2' },
+        ]}
+      >
+        Select
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option2 = container.querySelector('[data-value="Option 2"]')
+    expect(option2).toBeInTheDocument()
+    fireEvent.click(option2!)
+    expect(onValueChange).toHaveBeenCalledWith('Option 2')
+  })
+
+  it('should render with x and y properties', () => {
+    const { container } = render(
+      <Select>
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer x={10} y={10}>
+          <SelectOption value="Option 1">Option 1</SelectOption>
+          <SelectOption value="Option 2">Option 2</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render with overflow screen', () => {
+    const { container, rerender } = render(<Select>{children}</Select>)
+
+    // open selectContainer
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+
+    const selectContainer = container.querySelector(
+      '[aria-label="Select container"]',
+    )! as HTMLDivElement
+
+    // happy-dom defualt viewport 1024x768
+    // offsetHeight > 768px
+    vi.spyOn(selectContainer, 'offsetHeight', 'get').mockReturnValue(800)
+    // offsetWidth > 1024px
+    vi.spyOn(selectContainer, 'offsetWidth', 'get').mockReturnValue(1100)
+
+    // rerender
+    rerender(<Select>{children}</Select>)
+
+    expect(container).toMatchSnapshot()
+  })
 })
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index b2e125d1..d1391900 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -5,42 +5,23 @@ import clsx from 'clsx'
 import {
   Children,
   ComponentProps,
-  createContext,
   JSX,
   JSXElementConstructor,
   ReactElement,
-  useContext,
   useEffect,
   useRef,
   useState,
 } from 'react'
 
+import { SelectContext, useSelect } from '../../contexts/useSelect'
+import { SelectType, SelectValue } from '../../types/select'
 import { Button } from '../Button'
 import { IconCheck } from './IconCheck'
 
-type SelectType = 'default' | 'radio' | 'checkbox'
-type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
-
-const SelectContext = createContext<{
-  open: boolean
-  setOpen: (open: boolean) => void
-  value: SelectValue<SelectType>
-  setValue: (value: string) => void
-  type: SelectType
-} | null>(null)
-
-export const useSelect = () => {
-  const context = useContext(SelectContext)
-  if (!context) {
-    throw new Error('useSelect must be used within a Select')
-  }
-  return context
-}
-
-interface SelectProps extends ComponentProps<'div'> {
+interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
   defaultValue?: SelectValue<SelectType>
   value?: SelectValue<SelectType>
-  onValueChange?: (value: string) => void
+  onChange?: (value: string) => void
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -58,6 +39,16 @@ interface SelectProps extends ComponentProps<'div'> {
     primaryBg?: string
   }
   typography?: keyof DevupThemeTypography
+  options?: {
+    label?: string
+    disabled?: boolean
+    onClick?: (
+      value: string | undefined,
+      e?: React.MouseEvent<HTMLDivElement>,
+    ) => void
+    showCheck?: boolean
+    value: string
+  }[]
 }
 
 export function Select({
@@ -65,12 +56,13 @@ export function Select({
   children,
   defaultValue,
   value: valueProp,
-  onValueChange,
+  onChange,
   defaultOpen,
   open: openProp,
   onOpenChange,
   colors,
   typography,
+  options,
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
@@ -94,7 +86,7 @@ export function Select({
   }
 
   const handleValueChange = (nextValue: string) => {
-    onValueChange?.(nextValue)
+    onChange?.(nextValue)
 
     if (type === 'default') return
     if (type === 'radio') {
@@ -116,12 +108,13 @@ export function Select({
         value: valueProp ?? value,
         setValue: handleValueChange,
         type,
+        ref,
       }}
     >
       <Box
         ref={ref}
         display="inline-block"
-        pos="relative"
+        h="fit-content"
         selectors={{
           '&, & *': {
             boxSizing: 'border-box',
@@ -142,7 +135,20 @@ export function Select({
         typography={typography}
         {...props}
       >
-        {children}
+        {options ? (
+          <>
+            <SelectTrigger>{children}</SelectTrigger>
+            <SelectContainer>
+              {options?.map((option) => (
+                <SelectOption {...option} key={'option-' + option.value}>
+                  {option.label ?? option.value}
+                </SelectOption>
+              ))}
+            </SelectContainer>
+          </>
+        ) : (
+          children
+        )}
       </Box>
     </SelectContext.Provider>
   )
@@ -199,32 +205,69 @@ export function SelectTrigger({
 interface SelectContainerProps extends ComponentProps<'div'> {
   showConfirmButton?: boolean
   confirmButtonText?: string
+  x?: number
+  y?: number
 }
 export function SelectContainer({
   children,
   showConfirmButton,
   confirmButtonText = '완료',
+  x = 0,
+  y = 0,
   ...props
 }: SelectContainerProps) {
-  const { open, setOpen, type } = useSelect()
+  const { open, setOpen, type, ref } = useSelect()
 
   if (!open) return null
   return (
     <VStack
+      ref={(el) => {
+        if (!ref.current || !el) return
+        const combobox = ref.current
+
+        // 요소가 움직일 때마다(스크롤, 리사이즈 등) 위치를 갱신하도록 이벤트를 등록합니다.
+        const updatePosition = () => {
+          const {
+            height,
+            x: comboboxX,
+            y: comboboxY,
+          } = combobox.getBoundingClientRect()
+
+          if (el.offsetHeight + comboboxY + y > window.innerHeight)
+            el.style.bottom = `${window.innerHeight - comboboxY + 10}px`
+          else el.style.top = `${comboboxY + height + 10 + y}px`
+
+          if (el.offsetWidth + comboboxX + x > window.innerWidth)
+            el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px`
+          else el.style.left = `${comboboxX + x}px`
+        }
+
+        // 최초 위치 설정
+        updatePosition()
+
+        // 스크롤, 리사이즈, DOM 변경 등 요소 위치가 변할 수 있는 이벤트에 리스너 등록
+        window.addEventListener('scroll', updatePosition, true)
+        window.addEventListener('resize', updatePosition)
+
+        // 컴포넌트 언마운트 시 이벤트 해제
+        return () => {
+          window.removeEventListener('scroll', updatePosition, true)
+          window.removeEventListener('resize', updatePosition)
+        }
+      }}
       aria-label="Select container"
       bg="var(--inputBg, light-dark(#FFF,#2E2E2E))"
       border="1px solid var(--border, light-dark(#E4E4E4,#434343))"
       borderRadius="8px"
       bottom="-4px"
       boxShadow="0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))"
+      boxSize="fit-content"
       gap="6px"
-      h="fit-content"
+      minW="232px"
       p="10px"
-      pos="absolute"
+      pos="fixed"
       styleOrder={1}
-      transform="translateY(100%)"
       userSelect="none"
-      w="232px"
       zIndex={1}
       {...props}
     >
@@ -255,12 +298,12 @@ export function SelectContainer({
 }
 
 interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+  value?: string
+  disabled?: boolean
   onClick?: (
     value: string | undefined,
     e?: React.MouseEvent<HTMLDivElement>,
   ) => void
-  disabled?: boolean
-  value?: string
   showCheck?: boolean
 }
 
diff --git a/packages/components/src/contexts/useSelect.ts b/packages/components/src/contexts/useSelect.ts
new file mode 100644
index 00000000..da05b8aa
--- /dev/null
+++ b/packages/components/src/contexts/useSelect.ts
@@ -0,0 +1,22 @@
+'use client'
+import { createContext, useContext } from 'react'
+
+type SelectType = 'default' | 'radio' | 'checkbox'
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
+
+export const SelectContext = createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+  value: SelectValue<SelectType>
+  setValue: (value: string) => void
+  type: SelectType
+  ref: React.RefObject<HTMLDivElement | null>
+} | null>(null)
+
+export const useSelect = () => {
+  const context = useContext(SelectContext)
+  if (!context) {
+    throw new Error('useSelect must be used within a Select')
+  }
+  return context
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 8242c5ac..e796a670 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,7 +6,6 @@ export {
   SelectDivider,
   SelectOption,
   SelectTrigger,
-  useSelect,
 } from './components/Select'
 export {
   Stepper,
@@ -16,3 +15,5 @@ export {
   StepperInput,
   useStepper,
 } from './components/Stepper'
+export { SelectContext, useSelect } from './contexts/useSelect'
+export type { SelectType, SelectValue } from './types/select'
diff --git a/packages/components/src/types/select.ts b/packages/components/src/types/select.ts
new file mode 100644
index 00000000..e0dc6722
--- /dev/null
+++ b/packages/components/src/types/select.ts
@@ -0,0 +1,4 @@
+export type SelectType = 'default' | 'radio' | 'checkbox'
+export type SelectValue<T extends SelectType> = T extends 'radio'
+  ? string
+  : string[]