diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index 5f263da4..d2a2dd80 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -6,6 +6,7 @@ import type { Choice } from "@biseo/interface/agenda";
 import { Text } from "@biseo/web/components/atoms";
 import { SelectIcon } from "@biseo/web/assets";
 import { type Color, theme } from "@biseo/web/theme";
+import { center, h, w } from "@biseo/web/styles";
 
 const Container = styled.div<{
   color: Color;
@@ -14,9 +15,9 @@ const Container = styled.div<{
   border-radius: 5px;
   background-color: ${props => props.theme.colors[props.color]};
   border: 1px solid ${props => props.theme.colors.gray200};
-  padding: 6px 13px 6px 13px;
+  padding: 6px 12px 6px 12px;
   width: 340px;
-  height: 30px;
+  height: fit-content;
   gap: 10px;
   display: flex;
   flex-direction: row;
@@ -34,7 +35,14 @@ interface ChoiceTextProps extends PropsWithChildren {
 }
 
 const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
-  <Text variant="body" color={color}>
+  <Text
+    variant="body"
+    color={color}
+    style={{
+      wordBreak: "break-all",
+      overflowWrap: "break-word",
+    }}
+  >
     {children}
   </Text>
 );
@@ -76,7 +84,9 @@ const ChoiceBase: React.FC<ChoiceBaseProps> = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      <div css={[w(13), h(13), center]}>
+        <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      </div>
       <ChoiceText color={choiceStyle.textColor}>{text}</ChoiceText>
     </Container>
   );